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

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

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

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

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

替代模式

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

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

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

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

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

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

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

安迪-克拉克，我們需要一個(gè)標準顯示導航圖標的響應性的Web設計。

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

三橫

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

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

Twitter的引導
Twitter的引導框架顯示三條橫線(xiàn)的滑動(dòng)菜單中的視覺(jué)提示，揭示了主菜單鏈接，錨定到的頁(yè)面的各個(gè)部分。

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

 

dConstruct 2012
dConstruct使用三條水平線(xiàn)來(lái)表示的菜單顯示在向上滑動(dòng)過(guò)渡。請注意，盡管這里的啟示是方形的形狀，他們仍然使用的水平線(xiàn)代表的菜單

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

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

Unicode字符

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

現場(chǎng)演示

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

CSS

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

現場(chǎng)演示

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

象形Web字體

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

亞當-布拉德利，應對新的高分辨率的Web。

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

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

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

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

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

SVG方法

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

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

SVG是沒(méi)有得到廣泛的利用，但并不像它應該是?；蛟S是缺乏主流的工具來(lái)創(chuàng )建他們的工具確實(shí)存在，但，我們只需要看看有點(diǎn)難以找到他們，對他們的成長(cháng)習慣-各具特色的SVGs應該成為我們的第二天性，因為我們進(jìn)入了一個(gè)新的高定義網(wǎng)絡(luò )。

現場(chǎng)演示

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

 

重慶網(wǎng)絡(luò )公司