遍布logo圖標早期人類作為一個物種，我們的歷史;石頭上畫畫，描繪他們的勝利對他們的追捕獵物，埃及人有一個基于圖標的書寫系統(tǒng)在他們的象形文字，在早期教會的象征，一條魚為代表的基督教會議地方或墳?zāi)?。圖標一直擔任一個明確的宗旨貫穿人類在這個星球上的歷史：通知和指示。

圖標仍然突出的今天在我們的日常生活，為他們提供相同的目的，因為他們總是有。隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的工匠，我們必須確保我們使用正確的行動表示告知用戶其后果的。

隨著網(wǎng)絡(luò)經(jīng)過多年的發(fā)展，我們已經(jīng)建立了一套標準的圖標（相當） -一個垃圾桶或交叉刪除或移除的東西來代表，已成為一個信封郵件或郵件的指標。這些都是小的視覺線索，以幫助人們沿著自己的方式。一些圖標已經(jīng)建立了這樣的強關(guān)聯(lián)，它們可以存在于自己的不支持文本，這意味著，他們可以消除語言障礙，形成自己的通用語言。我們需要使用正確的圖標傳達了正確的事情。

今天的網(wǎng)絡(luò)是在一個過渡階段，可能是最具開創(chuàng)性的階段，因為Web標準運動-我會去，我們是在中間的響應(yīng)性的Web設(shè)計運動。當我們建立響應(yīng)，我們的網(wǎng)站會出現(xiàn)在不同的設(shè)備不同，往往有不同的行為太。尤其是導(dǎo)航菜單中的元素發(fā)生顯著變化的響應(yīng)網(wǎng)站。一個小范圍內(nèi)的變化從一個大的背景下，往往需要改變的導(dǎo)航模 式，在網(wǎng)絡(luò)上很少見到的東西，直至到達響應(yīng)設(shè)計。隨著越來越多的響應(yīng)網(wǎng)站進入公有領(lǐng)域，更多的人會看到這些新奇的導(dǎo)航解決方案，使他們不應(yīng)該要問“這是什么”按鈕怎么辦？“。

已經(jīng)調(diào)用近日從安迪·克拉克和杰里米·基思有一個標準的小環(huán)境中暴露的導(dǎo)航圖標，這是正確的-這是一個新的技術(shù)，我們需要設(shè)置用戶的期望，揭示行動的后果。

三橫

大多數(shù)網(wǎng)站使用一個圖標來代表一個隱藏的菜單中選擇的三橫條紋的響應(yīng) - 這些包括一些高知名度的網(wǎng)站，如星巴克和流行的應(yīng)用程序，如Facebook和路徑。在它的多功能性，其功率的部分內(nèi)容在于，作為圖示的本身不能清楚地代表一個精確的對象也不方法，這意味著不示出了優(yōu)先于一個特定的模式的情況下，它可以應(yīng)用到各種基于導(dǎo)航的設(shè)計模式。它的含糊不清的形狀并不影響它的消息的圖標成為一個新興的標準。就像我們的日常用語中出現(xiàn)的一個新名詞，我們知道這意味著什么。而與高知名度的網(wǎng)站在它的身后，把自己的體重平均用戶也將隨著時間的推移。

如果被用在一些敏感網(wǎng)站的水平線，讓我們來看看一些例子。

Twitter的引導(dǎo)
Twitter的引導(dǎo)框架顯示三條橫線的滑動菜單中的視覺提示，揭示了主菜單鏈接，錨定到的頁面的各個部分。

Webdagene
的Webdagene會議網(wǎng)站也使用相同的模式類似的流露，但不像Twitter的引導(dǎo)鏈接打開一個新的頁面，而不是錨定部分。兩種不同的方法來導(dǎo)航包含以相同的圖標。

dConstruct 2012
dConstruct使用三條水平線來表示的菜單顯示在向上滑動過渡。請注意，盡管這里的啟示是方形的形狀，他們?nèi)匀皇褂玫乃骄€代表的菜單。

金網(wǎng)格系統(tǒng)
瓊妮科皮的黃金電網(wǎng)系統(tǒng)使用相同的圖標，但出于不同的目的-按下按鈕，顯示當前活動的網(wǎng)格的網(wǎng)格線。

三行圖標是不是唯一指標的人使用的是在野外 - 類似的替代品，它也有缺點。在iOS系統(tǒng)中，重新安排全寬度的列表項的能力水平都是用線條來表示。所以，也許這部分我們的圖標語言仍然找到了自己的腳。

替代模式

快樂齒輪的認識
還有其他模式，在野外不作為共同的快樂齒輪的網(wǎng)格圖標。這或許表明類似的快速撥號或主屏幕-一個跳板，到其他目的地。另一方面，它可能會誤導(dǎo)經(jīng)驗不足的用戶認為他們是離開的網(wǎng)站去別的地方。

索尼
索尼也偏離水平線圖標，并選擇的加號圖標，以顯示其菜單。雖然看上去很舒服的，加號表示添加的東西，可能發(fā)出錯誤的信息給用戶，并沒有明確闡明由此產(chǎn)生的行動。

，彌敦道SAWAYA
彌敦道SAWAYA的隱藏菜單中的一個齒輪，也可能會導(dǎo)致混亂表示。在數(shù)碼產(chǎn)品，齒輪圖標已成為通用的指標設(shè)置，選項或定制。這感覺就像是歪曲的行動和后果，并可能只能作為最后的手段或出于好奇按下。

MSN奧運報道
總督技術(shù)制作的MSN的奧運報道的網(wǎng)站，擁有一系列的創(chuàng)新模式轉(zhuǎn)換，包括主要的導(dǎo)航-由一個向下的箭頭表示。向下的箭頭是一個安全的賭注，特別是滑動式菜單。它暗示一個下拉菜單，以同樣的方式對結(jié)果。

微軟
微軟最近推出一個新的響應(yīng)家庭，為他們的產(chǎn)品，這是精心設(shè)計和開發(fā)的Paravel使用微軟的新設(shè)計語言。代表小上下文菜單中所使用的圖標是一個很好的例子，“目錄”的比喻，通信，單擊該圖標，會導(dǎo)致可用的導(dǎo)航選項的概述。

所有這些例子都產(chǎn)生了相同的結(jié)果?-你按下一個按鈕，出現(xiàn)一個菜單。但有一個差距的行動的方式。如果圖標是一種語言，然后我們發(fā)送喜憂參半的消息響應(yīng)導(dǎo)航。我們正在處理的新模式，新技術(shù)的另一邊，我們的產(chǎn)品的人也是如此-他們比以往任何時候都更接近我們的接口。今天，我們在處理這些設(shè)備以及基于觸摸的界面和用戶之間的接口有什么。我們所提供的信息必須是一貫的，明確的，圖標是此消息的一部分，一部分的語言。正如安迪·克拉克說：“我們需要一個標準的顯示圖標的響應(yīng)性的Web設(shè)計”。

“除非我們的導(dǎo)航被安排在一個網(wǎng)格（所以我們應(yīng)該使用一個網(wǎng)格圖標），我把我的體重背后的三條線，因為我認為這是最知名的導(dǎo)航，一般人”。

安迪-克拉克，我們需要一個標準顯示導(dǎo)航圖標的響應(yīng)性的Web設(shè)計。

我敢打賭，絕大多數(shù)的用戶面臨著一個隱藏的小上下文菜單中已經(jīng)使用了三線模式進行導(dǎo)航，而不是替代品。隨著巨量的用戶使用的應(yīng)用程序，如Facebook和路徑，它可以安全地說，它是一個直觀的指標。如果我們要有效地使用這個分辨率無關(guān)的響應(yīng)設(shè)計，那么它需要一個可擴展的方式來表示，確保無論設(shè)備被顯示在保持清晰的。有很多的方式，我們可以做到這一點。

象形Web字體

“不要掛了”視網(wǎng)膜“，高分辨率的擔心?！?

亞當-布拉德利，應(yīng)對新的高分辨率的Web。

不同的像素密度種植，實現(xiàn)一致的體驗，而不管用戶的上下文獨立的解決方案是至關(guān)重要的。這是不可能的，以設(shè)計為設(shè)備的尺寸和特定的屏幕性能，同時保持未來的友好。可擴展的資產(chǎn)是關(guān)鍵保持領(lǐng)先的游戲和創(chuàng)建它們的方法之一是用象形的Web字體。

從理論上講，你可以創(chuàng)建一個只包含一個標志符號表示菜單指示字體。這將是一個光資源加載，但你仍然會征收額外的HTTP請求的用戶，這是不理想的（它實際上是一個黑客）。此外，如果用戶是在一個非常緩慢的連接，則圖標可能需要一段時間來加載。在這段時間里，他們可能會錯過的菜單選項 - 我們正在談?wù)撝恍鑾酌腌姷暮蜐撛诘姆謹?shù)秒在這里 - 但這個級別的關(guān)懷和對細節(jié)的關(guān)注是您定義為一個工匠的Web。畢竟，你所做的每一個決策直接影響用戶在屏幕的另一邊。

你可以解決這個問題，通過嵌入的Web字體使用的數(shù)據(jù)：這將節(jié)省額外的HTTP請求的URI。這是孤立的，而是如果您正在加載多數(shù)據(jù)（在不同的地方的URI），您遇到的問題可維護性。多種字體的變化也能產(chǎn)生一個頁面的的重量開銷，會導(dǎo)致這種做法毫無意義。因此，一切都取決于您個人使用的情況。

在一般情況下，我們應(yīng)盡量避免單獨加載Web字體用于顯示響應(yīng)的導(dǎo)航圖標的一個字形。今天的頁面權(quán)重是一樣重要的，因為它是當我們在設(shè)計和建立撥號連接，和延遲是新的的Web性能瓶頸，所以保持網(wǎng)頁的尺寸小仍然是非常重要的。在連接能力的對比是比以往任何時候都和用戶的連接任何不必要的負擔有負面影響用戶的體驗。

然而，這是有可能，你可能會加載其他用途的象形圖標在您的項目中。如果是這樣的話，那么我看不出有什么危害在加載組包含三個水平線圖標在您的處置和利用字形的范圍。約什-艾默生需要更進了一步，并制作了一個夢幻般的演練向您展示如何創(chuàng)建一個字體適合為目的，只包含字形，您需要為您的項目（資源從而保持光頁的體重下降）。IcoMoon是一個基于瀏覽器的應(yīng)用程序，讓你做同樣的事情，通過提供一個預(yù)先選定的庫圖標和選項，導(dǎo)入SVGs建立你自己的字體。

Unicode字符

標準的系統(tǒng)字體為我們提供了一個虛假的一絲希望。正是我們正在尋找的，只是它不正確地呈現(xiàn)在Android設(shè)備上的字符實體“?中國八卦為天空（天）?“（?（?2630））。杰里米·凱斯已經(jīng)做了一些研究，在他的Navicon的文章，其中的結(jié)論，向下的箭頭字符實體有更好的跨平臺和跨瀏覽器的兼容性，表明揭示菜單的平臺和瀏覽器的兼容性。這是同樣適用的Unicode字符，如字符實體“?相同“。這有更好的支持比天空實體的八卦（雖然幾何形狀相當比例的圖標，我們已經(jīng)熟悉了）。

現(xiàn)場演示

你可以看到，作為一種象形的Web字體被放大，當用戶的瀏覽器的圖標保留其清晰度。比例是不理想的，盡管它可能提供一個較好的后退到更適合的技術(shù)。

CSS

蒂姆·卡德萊茨和斯圖羅布森已經(jīng)產(chǎn)生了navicon的圖標，CSS，巧妙地利用了混合邊框樣式和偽選擇之前，在所有主要設(shè)備的瀏覽器。雖然這似乎是理想的，它是不準確的最佳實踐，因為我們使用CSS來繪制圖形所在的地方，模糊線是否CSS生成的“圖形”是表象，或不。

現(xiàn)場演示

當瀏覽器縮放級別設(shè)置為100的倍數(shù)以外的東西，生成的線之間的比例變得不均勻，這將不會發(fā)生在這里提出的其他解決方案。我不排除這種做法完全，但是，因為它作為了堅實的解決辦法時，下面的方法失敗。

SVG方法

毫無疑問，SVG的目的各具特色的圖標是一個不錯的選擇。根據(jù)定義，一個圖標是一個圖片或符號來表示這樣的行動，因此，可伸縮矢量圖形是正確的工具的工作。數(shù)學參數(shù)的基礎(chǔ)上，繪制SVG瀏覽器，這意味著它是獨立于分辨率。因此，它看起來清脆的像素分辨率和密度上，提出一個未來的友好的解決方案。支持SVG的背景下，我們需要它（主要是移動設(shè)備之間是相當不錯的，雖然有些版本的Android不支持的話）。

我們可以配合的瀏覽器不支持SVGs的使用功能檢測。自定義生成的Modernizr的，只檢查SVG提供了一個輕量級的方式測試對SVG的支持-如果瀏覽器能為SVGs，那么用戶應(yīng)SVG圖像。如果瀏覽器不能，那么就應(yīng)該恢復(fù)使用位圖圖像。在加載的Modernizr，檢查SVG的支持很簡單：

SVG是沒有得到廣泛的利用，但并不像它應(yīng)該是。或許是缺乏主流的工具來創(chuàng)建他們的工具確實存在，但，我們只需要看看有點難以找到他們，對他們的成長習慣-各具特色的SVGs應(yīng)該成為我們的第二天性，因為我們進入了一個新的高定義網(wǎng)絡(luò)。

現(xiàn)場演示

SVG圖標加載時保持清晰，在任何決議，但是當頁面被放大后的初始負載時，圖形就可以開始在某些瀏覽器中，以模糊的，不規(guī)則的縮放級別。在使用SVG視網(wǎng)膜圖形被發(fā)現(xiàn)的缺點在它的局限性，在瀏覽器中進行自定義-例如，改變圖標的顏色。什么似乎是一個簡單的屬性變更無法實現(xiàn)不支持JavaScript干預(yù)（或加載一個額外的圖像），這意味著觸發(fā)另一個HTTP請求。此外，如果HTTP請求是一個問題，你要加載的SVG內(nèi)聯(lián)，你將有有限的瀏覽器支持-只是要確保使用功能檢測，以涵蓋所有可能發(fā)生的，所以用戶的體驗不會受到影響。您可以下載SVG圖標和PNG備用的。

得出結(jié)論

看完這個，你會覺得我分析這么小的東西，表面上它可能看起來微不足道，但實際上卻是完全相反的。大廈響應(yīng)，需要更多的關(guān)心和照顧，我們都給予我們的工藝。移動第一種方法邀請蝴蝶效應(yīng)的機會，在我們的工作中，在一個糟糕的決定，可能會影響頁面權(quán)重（或加載多余的資源）的小環(huán)境中可能是有害的在小環(huán)境中的用戶體驗和超越。工匠的Web，我們有責任，理智的通知，指導(dǎo)和行使負責任的網(wǎng)站建設(shè)。