遍布logo圖標(biāo)早期人類作為一個(gè)物種，我們的歷史;石頭上畫畫，描繪他們的勝利對(duì)他們的追捕獵物，埃及人有一個(gè)基于圖標(biāo)的書寫系統(tǒng)在他們的象形文字，在 早期教會(huì)的象征，一條魚為代表的基督教會(huì)議地方或墳?zāi)埂D標(biāo)一直擔(dān)任一個(gè)明確的宗旨貫穿人類在這個(gè)星球上的歷史：通知和指示。
圖標(biāo)仍然突出的今天在我們的日常生活，為他們提供相同的目的，因?yàn)樗麄兛偸怯小ｋS著互聯(lián)網(wǎng)產(chǎn)業(yè)的工匠，我們必須確保我們使用正確的行動(dòng)表示告知用戶其后果的。
隨著網(wǎng)絡(luò)經(jīng)過多年的發(fā)展，我們已經(jīng)建立了一套標(biāo)準(zhǔn)的圖標(biāo)（相當(dāng)） -一個(gè)垃圾桶或交叉刪除或移除的東西來代表，已成為一個(gè)信封郵件或郵件的指標(biāo)。這些都是小的視覺線索，以幫助人們沿著自己的方式。一些圖標(biāo)已經(jīng)建立了這樣 的強(qiáng)關(guān)聯(lián)，它們可以存在于自己的不支持文本，這意味著，他們可以消除語言障礙，形成自己的通用語言。我們需要使用正確的圖標(biāo)傳達(dá)了正確的事情。
今天的網(wǎng)絡(luò)是在一個(gè)過渡階段，可能是最具開創(chuàng)性的階段，因?yàn)閃eb標(biāo)準(zhǔn)運(yùn)動(dòng)-我會(huì)去，我們是在中間的響應(yīng)性的Web設(shè)計(jì)運(yùn)動(dòng)。當(dāng)我們建立響應(yīng)，我們的網(wǎng)站 會(huì)出現(xiàn)在不同的設(shè)備不同，往往有不同的行為太。尤其是導(dǎo)航菜單中的元素發(fā)生顯著變化的響應(yīng)網(wǎng)站。一個(gè)小范圍內(nèi)的變化從一個(gè)大的背景下，往往需要改變的導(dǎo)航 模 式，在網(wǎng)絡(luò)上很少見到的東西，直至到達(dá)響應(yīng)設(shè)計(jì)。隨著越來越多的響應(yīng)網(wǎng)站進(jìn)入公有領(lǐng)域，更多的人會(huì)看到這些新奇的導(dǎo)航解決方案，使他們不應(yīng)該要問“這是什 么”按鈕怎么辦？“。
已經(jīng)調(diào)用近日從安迪·克拉克和杰里米·基思有一個(gè)標(biāo)準(zhǔn)的小環(huán)境中暴露的導(dǎo)航圖標(biāo)，這是正確的-這是一個(gè)新的技術(shù)，我們需要設(shè)置用戶的期望，揭示行動(dòng)的后果。
替代模式
快樂齒輪的認(rèn)識(shí)
還有其他模式，在野外不作為共同的快樂齒輪的網(wǎng)格圖標(biāo)。這或許表明類似的快速撥號(hào)或主屏幕-一個(gè)跳板，到其他目的地。另一方面，它可能會(huì)誤導(dǎo)經(jīng)驗(yàn)不足的用戶認(rèn)為他們是離開的網(wǎng)站去別的地方。
索尼
索尼也偏離水平線圖標(biāo)，并選擇的加號(hào)圖標(biāo)，以顯示其菜單。雖然看上去很舒服的，加號(hào)表示添加的東西，可能發(fā)出錯(cuò)誤的信息給用戶，并沒有明確闡明由此產(chǎn)生的行動(dòng)。
，彌敦道SAWAYA
彌敦道SAWAYA的隱藏菜單中的一個(gè)齒輪，也可能會(huì)導(dǎo)致混亂表示。在數(shù)碼產(chǎn)品，齒輪圖標(biāo)已成為通用的指標(biāo)設(shè)置，選項(xiàng)或定制。這感覺就像是歪曲的行動(dòng)和后果，并可能只能作為最后的手段或出于好奇按下。
MSN奧運(yùn)報(bào)道
總督技術(shù)制作的MSN的奧運(yùn)報(bào)道的網(wǎng)站，擁有一系列的創(chuàng)新模式轉(zhuǎn)換，包括主要的導(dǎo)航-由一個(gè)向下的箭頭表示。向下的箭頭是一個(gè)安全的賭注，特別是滑動(dòng)式菜單。它暗示一個(gè)下拉菜單，以同樣的方式對(duì)結(jié)果。
微軟
微軟最近推出一個(gè)新的響應(yīng)家庭，為他們的產(chǎn)品，這是精心設(shè)計(jì)和開發(fā)的Paravel使用微軟的新設(shè)計(jì)語言。代表小上下文菜單中所使用的圖標(biāo)是一個(gè)很好的例子，“目錄”的比喻，通信，單擊該圖標(biāo)，會(huì)導(dǎo)致可用的導(dǎo)航選項(xiàng)的概述。
所有這些例子都產(chǎn)生了相同的結(jié)果 -你按下一個(gè)按鈕，出現(xiàn)一個(gè)菜單。但有一個(gè)差距的行動(dòng)的方式。如果圖標(biāo)是一種語言，然后我們發(fā)送喜憂參半的消息響應(yīng)導(dǎo) 航。我們正在處理的新模式，新技術(shù)的另一邊，我們的產(chǎn)品的人也是如此-他們比以往任何時(shí)候都更接近我們的接口。今天，我們?cè)谔幚磉@些設(shè)備以及基于觸摸的界 面和用戶之間的接口有什么。我們所提供的信息必須是一貫的，明確的，圖標(biāo)是此消息的一部分，一部分的語言。正如安迪·克拉克說：“我們需要一個(gè)標(biāo)準(zhǔn)的顯示 圖標(biāo)的響應(yīng)性的Web設(shè)計(jì)”。
“除非我們的導(dǎo)航被安排在一個(gè)網(wǎng)格（所以我們應(yīng)該使用一個(gè)網(wǎng)格圖標(biāo)），我把我的體重背后的三條線，因?yàn)槲艺J(rèn)為這是最知名的導(dǎo)航，一般人”。
安迪-克拉克，我們需要一個(gè)標(biāo)準(zhǔn)顯示導(dǎo)航圖標(biāo)的響應(yīng)性的Web設(shè)計(jì)。
我敢打賭，絕大多數(shù)的用戶面臨著一個(gè)隱藏的小上下文菜單中已經(jīng)使用了三線模式進(jìn)行導(dǎo)航，而不是替代品。隨著巨量的用戶使用的應(yīng)用程序，如Facebook 和路徑，它可以安全地說，它是一個(gè)直觀的指標(biāo)。如果我們要有效地使用這個(gè)分辨率無關(guān)的響應(yīng)設(shè)計(jì)，那么它需要一個(gè)可擴(kuò)展的方式來表示，確保無論設(shè)備被顯示在 保持清晰的。有很多的方式，我們可以做到這一點(diǎn)。
三橫
大多數(shù)網(wǎng)站使用一個(gè)圖標(biāo)來代表一個(gè)隱藏的菜單中選擇的三橫條紋的響應(yīng) - 這些包括一些高知名度的網(wǎng)站，如星巴克和流行的應(yīng)用程序，如Facebook和路徑。在它的多功能性，其功率的部分內(nèi)容在于，作為圖示的本身不能清楚地代 表一個(gè)精確的對(duì)象也不方法，這意味著不示出了優(yōu)先于一個(gè)特定的模式的情況下，它可以應(yīng)用到各種基于導(dǎo)航的設(shè)計(jì)模式。它的含糊不清的形狀并不影響它的消息的 圖標(biāo)成為一個(gè)新興的標(biāo)準(zhǔn)。就像我們的日常用語中出現(xiàn)的一個(gè)新名詞，我們知道這意味著什么。而與高知名度的網(wǎng)站在它的身后，把自己的體重平均用戶也將隨著時(shí) 間的推移。
如果被用在一些敏感網(wǎng)站的水平線，讓我們來看看一些例子。
Twitter的引導(dǎo)
Twitter的引導(dǎo)框架顯示三條橫線的滑動(dòng)菜單中的視覺提示，揭示了主菜單鏈接，錨定到的頁面的各個(gè)部分。
Webdagene
的Webdagene會(huì)議網(wǎng)站也使用相同的模式類似的流露，但不像Twitter的引導(dǎo)鏈接打開一個(gè)新的頁面，而不是錨定部分。兩種不同的方法來導(dǎo)航包含以相同的圖標(biāo)。
dConstruct 2012
dConstruct使用三條水平線來表示的菜單顯示在向上滑動(dòng)過渡。請(qǐng)注意，盡管這里的啟示是方形的形狀，他們?nèi)匀皇褂玫乃骄€代表的菜單
金網(wǎng)格系統(tǒng)
瓊妮科皮的黃金電網(wǎng)系統(tǒng)使用相同的圖標(biāo)，但出于不同的目的-按下按鈕，顯示當(dāng)前活動(dòng)的網(wǎng)格的網(wǎng)格線。
三行圖標(biāo)是不是唯一指標(biāo)的人使用的是在野外 - 類似的替代品，它也有缺點(diǎn)。在iOS系統(tǒng)中，重新安排全寬度的列表項(xiàng)的能力水平都是用線條來表示。所以，也許這部分我們的圖標(biāo)語言仍然找到了自己的腳。
Unicode字符
標(biāo)準(zhǔn)的系統(tǒng)字體為我們提供了一個(gè)虛假的一絲希望。正是我們正在尋找的，只是它不正確地呈現(xiàn)在Android設(shè)備上的字符實(shí)體“ 中國八卦為天空 （天） “（?（?2630））。杰里米·凱斯已經(jīng)做了一些研究，在他的Navicon的文章，其中的結(jié)論，向下的箭頭字符實(shí)體有更好的跨平臺(tái)和跨瀏覽器 的兼容性，表明揭示菜單的平臺(tái)和瀏覽器的兼容性。這是同樣適用的Unicode字符，如字符實(shí)體“ 相同“。這有更好的支持比天空實(shí)體的八卦（雖然幾何形 狀相當(dāng)比例的圖標(biāo)，我們已經(jīng)熟悉了）。
現(xiàn)場(chǎng)演示
你可以看到，作為一種象形的Web字體被放大，當(dāng)用戶的瀏覽器的圖標(biāo)保留其清晰度。比例是不理想的，盡管它可能提供一個(gè)較好的后退到更適合的技術(shù)。
CSS
蒂姆·卡德萊茨和斯圖羅布森已經(jīng)產(chǎn)生了navicon的圖標(biāo)，CSS，巧妙地利用了混合邊框樣式和偽選擇之前，在所有主要設(shè)備的瀏覽器。雖然這似乎是理想的，它是不準(zhǔn)確的最佳實(shí)踐，因?yàn)槲覀兪褂肅SS來繪制圖形所在的地方，模糊線是否CSS生成的“圖形”是表象，或不。
現(xiàn)場(chǎng)演示
當(dāng)瀏覽器縮放級(jí)別設(shè)置為100的倍數(shù)以外的東西，生成的線之間的比例變得不均勻，這將不會(huì)發(fā)生在這里提出的其他解決方案。我不排除這種做法完全，但是，因?yàn)樗鳛榱藞?jiān)實(shí)的解決辦法時(shí)，下面的方法失敗。
象形Web字體
“不要掛了”視網(wǎng)膜“，高分辨率的擔(dān)心。”
亞當(dāng)-布拉德利，應(yīng)對(duì)新的高分辨率的Web。
不同的像素密度種植，實(shí)現(xiàn)一致的體驗(yàn)，而不管用戶的上下文獨(dú)立的解決方案是至關(guān)重要的。這是不可能的，以設(shè)計(jì)為設(shè)備的尺寸和特定的屏幕性能，同時(shí)保持未來的友好。可擴(kuò)展的資產(chǎn)是關(guān)鍵保持領(lǐng)先的游戲和創(chuàng)建它們的方法之一是用象形的Web字體。
從理論上講，你可以創(chuàng)建一個(gè)只包含一個(gè)標(biāo)志符號(hào)表示菜單指示字體。這將是一個(gè)光資源加載，但你仍然會(huì)征收額外的HTTP請(qǐng)求的用戶，這是不理想的（它實(shí)際 上是一個(gè)黑客）。此外，如果用戶是在一個(gè)非常緩慢的連接，則圖標(biāo)可能需要一段時(shí)間來加載。在這段時(shí)間里，他們可能會(huì)錯(cuò)過的菜單選項(xiàng) - 我們正在談?wù)撝恍鑾酌腌姷暮蜐撛诘姆謹(jǐn)?shù)秒在這里 - 但這個(gè)級(jí)別的關(guān)懷和對(duì)細(xì)節(jié)的關(guān)注是您定義為一個(gè)工匠的Web。畢竟，你所做的每一個(gè)決策直接影響用戶在屏幕的另一邊。
你可以解決這個(gè)問題，通過嵌入的Web字體使用的數(shù)據(jù)：這將節(jié)省額外的HTTP請(qǐng)求的URI。這是孤立的，而是如果您正在加載多數(shù)據(jù)（在不同的地方的 URI），您遇到的問題可維護(hù)性。多種字體的變化也能產(chǎn)生一個(gè)頁面的的重量開銷，會(huì)導(dǎo)致這種做法毫無意義。因此，一切都取決于您個(gè)人使用的情況。
在一般情況下，我們應(yīng)盡量避免單獨(dú)加載Web字體用于顯示響應(yīng)的導(dǎo)航圖標(biāo)的一個(gè)字形。今天的頁面權(quán)重是一樣重要的，因?yàn)樗钱?dāng)我們?cè)谠O(shè)計(jì)和建立撥號(hào)連接， 和延遲是新的的Web性能瓶頸，所以保持網(wǎng)頁的尺寸小仍然是非常重要的。在連接能力的對(duì)比是比以往任何時(shí)候都和用戶的連接任何不必要的負(fù)擔(dān)有負(fù)面影響用戶 的體驗(yàn)。
然而，這是有可能，你可能會(huì)加載其他用途的象形圖標(biāo)在您的項(xiàng)目中。如果是這樣的話，那么我看不出有什么危害在加載組包含三個(gè)水平線圖標(biāo)在您的處置和利用字 形的范圍。約什-艾默生需要更進(jìn)了一步，并制作了一個(gè)夢(mèng)幻般的演練向您展示如何創(chuàng)建一個(gè)字體適合為目的，只包含字形，您需要為您的項(xiàng)目（資源從而保持光頁 的體重下降）。IcoMoon是一個(gè)基于瀏覽器的應(yīng)用程序，讓你做同樣的事情，通過提供一個(gè)預(yù)先選定的庫圖標(biāo)和選項(xiàng)，導(dǎo)入SVGs建立你自己的字體。
SVG方法
毫無疑問，SVG的目的各具特色的圖標(biāo)是一個(gè)不錯(cuò)的選擇。根據(jù)定義，一個(gè)圖標(biāo)是一個(gè)圖片或符號(hào)來表示這樣的行動(dòng)，因此，可伸縮矢量圖形是正確的工具的工 作。數(shù)學(xué)參數(shù)的基礎(chǔ)上，繪制SVG瀏覽器，這意味著它是獨(dú)立于分辨率。因此，它看起來清脆的像素分辨率和密度上，提出一個(gè)未來的友好的解決方案。支持 SVG的背景下，我們需要它（主要是移動(dòng)設(shè)備之間是相當(dāng)不錯(cuò)的，雖然有些版本的Android不支持的話）。
我們可以配合的瀏覽器不支持SVGs的使用功能檢測(cè)。自定義生成的Modernizr的，只檢查SVG提供了一個(gè)輕量級(jí)的方式測(cè)試對(duì)SVG的支持-如果瀏 覽器能為SVGs，那么用戶應(yīng)SVG圖像。如果瀏覽器不能，那么就應(yīng)該恢復(fù)使用位圖圖像。在加載的Modernizr，檢查SVG的支持很簡(jiǎn)單：
| 2 |
$（“＃SVG圖標(biāo)”），CSS（“背景圖像”，“URL（fallback.png）”）; |
SVG是沒有得到廣泛的利用，但并不像它應(yīng)該是。或許是缺乏主流的工具來創(chuàng)建他們的工具確實(shí)存在，但，我們只需要看看有點(diǎn)難以找到他們，對(duì)他們的成長習(xí)慣-各具特色的SVGs應(yīng)該成為我們的第二天性，因?yàn)槲覀冞M(jìn)入了一個(gè)新的高定義網(wǎng)絡(luò)。
現(xiàn)場(chǎng)演示
SVG圖標(biāo)加載時(shí)保持清晰，在任何決議，但是當(dāng)頁面被放大后的初始負(fù)載時(shí)，圖形就可以開始在某些瀏覽器中，以模糊的，不規(guī)則的縮放級(jí)別。在使用SVG視網(wǎng) 膜圖形被發(fā)現(xiàn)的缺點(diǎn)在它的局限性，在瀏覽器中進(jìn)行自定義-例如，改變圖標(biāo)的顏色。什么似乎是一個(gè)簡(jiǎn)單的屬性變更無法實(shí)現(xiàn)不支持JavaScript干預(yù) （或加載一個(gè)額外的圖像），這意味著觸發(fā)另一個(gè)HTTP請(qǐng)求。此外，如果HTTP請(qǐng)求是一個(gè)問題，你要加載的SVG內(nèi)聯(lián)，你將有有限的瀏覽器支持-只是要 確保使用功能檢測(cè)，以涵蓋所有可能發(fā)生的，所以用戶的體驗(yàn)不會(huì)受到影響。您可以下載SVG圖標(biāo)和PNG備用的。
重慶網(wǎng)絡(luò)公司
渝公網(wǎng)安備 50010302000872號(hào)