如今的用戶界面中，圖標絕對是不可或缺的元素。雖然絕大多數(shù)的圖標都很小，甚至不被人注意到，但是它們幫助設(shè)計和用戶解決了許多問題拐纱。
圖標是可用性和導(dǎo)航的關(guān)鍵，用戶能夠感知到圖標的功用蚂子，但是只有設(shè)計師才會明白缆镣，想要讓圖標簡約董瞻、可用還富有表現(xiàn)力，要耗費多少時間和精力壹哺。
喬布斯曾經(jīng)說過：“細節(jié)至關(guān)重要抄伍，花費時間仔細打磨是值得的」芟”圖標是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件截珍。
所以，今天的文章箩朴，我們來仔細歸納一下常見的圖標類型和它們在UI中的使用滥壕。
圖標的定義
一般而言胡岔，圖標是具有高度概括性的孕讳、用于視覺信息傳達的小尺寸圖像荚恶。圖標常常可以傳達出豐富的信息，并且常常和詞匯爽醋、文本搭配相互搭配使用肋演，兩者互相支撐惰帽，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設(shè)計領(lǐng)域奋单，圖標作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施奖磁，也是達成人機交互這一目標的有效途徑糕档。
圖標的表意功能莉恼，使得它可以有效地替代文本來使用。有研究表明速那，使用高度可識別的俐银、清晰的圖標，對于界面導(dǎo)航的可用性有極大的提升端仰，對于人類而言捶惜，視覺信息的處理速度比起文本要快太多。不過荔烧，從另一方面來看吱七，圖標需要傳遞出相對清晰的概念才行汽久，任何輕微的誤讀都會對整體體驗造成極大的傷害，所以踊餐，圖標的選取要慎之又慎景醇，經(jīng)過仔細的測試，才能達成良好的平衡吝岭，并且為目標受眾所接受三痰。圖標使用的歷史正如同我們所知道的，圖標窜管、標識都不是界面設(shè)計師所創(chuàng)造的概念散劫，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中幕帆。早期用來傳達信息的圖標演變?yōu)橄到y(tǒng)的文字获搏，而在地圖、圖書失乾、壁畫和建筑等各種各樣的地方颜凯，還存在著用來代表和傳達特定概念的圖標和標識。
隨著技術(shù)的發(fā)展仗扬，計算機誕生了症概，而顯示器的出現(xiàn)，也為圖形化界面的誕生早芭，鋪平了道路彼城。20世紀70年代，施樂在位于帕羅奧托的研究所當中退个，誕生了最早的擁有圖形化界面的電腦募壕，著名的 Xerox Alto。這款昂貴的概念機最終并沒有走進大眾的視野语盈，但是它的后續(xù)機型施樂之星在1981年問世舱馅，并且成為了計算機史上的重要里程碑。而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)刀荒，更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟代嗤，Windows 對抗 Macintosh。當然這都是后話缠借。Xerox Alto 中引入了大量的圖標設(shè)計干毅，其中文件夾和垃圾箱的圖標設(shè)計，從當時一直延續(xù)到現(xiàn)在泼返，成為圖標設(shè)計中最廣為人知和普遍接受的設(shè)計概念硝逢。
來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh渠鸽，首次發(fā)布了彩色的圖標設(shè)計叫乌。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升徽缚。在此之后综芥，越來越多的圖標開始借由靈活而強大的數(shù)字技術(shù)而誕生，并且基于不同的需求而演化出不同的分支和風(fēng)格猎拨。許多操作系統(tǒng)和工具開始預(yù)制一些成體系的圖標膀藐，誕生基于種種需求，越來越多的自制的红省、重設(shè)計的圖標额各，逐步進入了我們的視野。圖標類型很多吧恃，我們可以用不同的方式來劃分它們虾啦。基于功能來劃分圖標類型
解釋性圖標
這些圖標是旨在闡明信息的圖標類型痕寓。它們是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標記傲醉。
在某些情況下，它們并不是直接可交互的UI元素呻率，在很多時候也會有輔助解釋其含義的文案硬毕。
同時，它們還常常會作為行為召喚的文本的視覺輔助元素而存在礼仗，以提高信息的可識別性吐咳。很多時候用戶會借助這些解釋性圖標來獲取信息，而不是相搭配的文本元践。
不過韭脊，有的時候圖標表達的含義可能還不夠完整或者清晰，最好是將圖標和文案搭配起來使用单旁，降低誤讀的可能性沪羔。
交互圖標這種圖標在UI中不止是展示的作用，它們還會參與到用戶交互當中來象浑，是導(dǎo)航系統(tǒng)不可或缺的組成部分蔫饰。它們可以被點擊，并且隨之響應(yīng)融柬，幫助用戶執(zhí)行特定的操作死嗦，觸發(fā)相應(yīng)的功能。
裝飾和娛樂用圖標這種圖標通常是用來提升整個界面的美感和視覺體驗粒氧，并不具備明顯的功能性。但是节腐，它們同樣是重要的外盯。這類圖標迎合了目標受眾的偏好與期望摘盆，具備有特定的風(fēng)格的外觀，并且提升了整個設(shè)計的可靠性和可信度饱苟。更準確地說孩擂，這些裝飾性的圖標不僅可以吸引并留住用戶，并且可以讓整個用戶體驗更加積極箱熬。裝飾性圖標通常呈現(xiàn)出季節(jié)性和周期性的特征类垦。
應(yīng)用圖標應(yīng)用圖標是不同數(shù)字產(chǎn)品在各個操作系統(tǒng)平臺上的入口和品牌展示用的標識，它是這個數(shù)字產(chǎn)品的身份象征城须。在絕大多數(shù)的情況下蚤认，它會將這個品牌的LOGO和品牌用色融入到圖標設(shè)計當中來。也有的圖標會采用吉祥物和企業(yè)視覺識別色的組合糕伐。真正優(yōu)秀的應(yīng)用圖標設(shè)計砰琢，其實是結(jié)合市場調(diào)研和品牌設(shè)計的組合，它的目標在于創(chuàng)造一個不會讓用戶能夠在屏幕上快速找到的醒目設(shè)計良瞧。
FaviconFavicon 有時候也被成為 URL 圖標陪汽，它是網(wǎng)頁在網(wǎng)頁的標簽中顯示的識別性小圖標，它同樣代表著網(wǎng)頁褥蚯，是用戶在網(wǎng)頁和瀏覽器當中快速定位的視覺識別標識挚冤。Favicon 同樣是身份識別用的圖標，并且在網(wǎng)頁的宣傳和推廣以及視覺識別上都有重要的意義赞庶∧憷保基于視覺特征來劃分的圖標類型字符圖標“Glyph”一詞是源自于排版領(lǐng)域，現(xiàn)在已經(jīng)隨著數(shù)字設(shè)計而逐步在數(shù)字設(shè)計領(lǐng)域扎根了尘执，它源自于希臘語舍哄，含義為“雕刻”。最初誊锭，它值得是讀者和作家約定俗成的符號表悬、字符合集中所包含的各種圖形。在排版領(lǐng)域當中丧靡，符號圖標通常是包含特定的含義蟆沫、特定功能、可表意也可書寫的類文字系統(tǒng)温治，它可以是字母饭庞，也可以是圖形，有的時候甚至是兩者的組合熬荆。下面是一套古老的凱爾特字符系統(tǒng)：
在現(xiàn)代的數(shù)字設(shè)計當中舟山，字符圖標在古老的字符系統(tǒng)上有了新的發(fā)展。現(xiàn)在的字符圖標同樣包含了字母、數(shù)字和圖形累盗，它們中所涵蓋的內(nèi)容更加豐富寒矿。這樣一來，現(xiàn)在提及字符圖標若债，我們通常不會將它們視為文字符相，而是圖標。下面是Material Design 的字符圖標集：
字符圖標使用簡化和通用的圖形蠢琳，當用戶在使用它們的時候啊终，它們擁有足夠的識別度和靈活的適用場景。
扁平和半扁平圖標扁平化的圖標設(shè)計比起字符圖標就要復(fù)雜得多傲须，其中增加了色彩和其他元素的填充蓝牲，比起近乎由輪廓和筆畫構(gòu)成的字符圖標，明顯要高一個維度躏碳。然而和前者一樣搞旭，扁平的圖標同樣專注于清晰而直觀的視覺信息傳達，為用戶提供一目了然的視覺內(nèi)容菇绵。扁平化的圖標設(shè)計最突出的功能也就在此肄渗，在二位的平面上，不借助復(fù)雜的紋理和陰影來明了地咬最、視覺化地傳達信息翎嫡，和擬物化圖標正好相對。
擬物化圖標就如同上文所說永乌，擬物化圖標是扁平化圖標的對立面惑申，正如同當初擬物化圖標設(shè)計師常說的，它就是“抄現(xiàn)實”翅雏，盡量將現(xiàn)實世界中的形狀圈驼、紋理、光影都融入到整個圖標的設(shè)計望几，擬真是它的特點绩脆。擬物化圖標這一設(shè)計趨勢幾乎是跟隨著Macintosh 的誕生和進化一步一步走過來，走到極致橄抹，然后從UI設(shè)計領(lǐng)域開始靴迫，被扁平化設(shè)計所替代。不過楼誓，擬物化圖標現(xiàn)在依然廣泛地運用在不同領(lǐng)域玉锌，尤其是游戲設(shè)計和游戲類產(chǎn)品的圖標設(shè)計當中。SVG 圖標SVG圖標疟羹，其中的SVG 是 Scalable Vector Graphics 的縮寫主守，它是基于 XML 的2D矢量圖標技術(shù)禀倔，它的技術(shù)標準被 W3C 所推行，并且得到所有的主流瀏覽器的支持丸逸。SVG 圖標現(xiàn)在越來越受歡迎蹋艺，它很大程度上降低了跨平臺剃袍、跨屏幕設(shè)計的時候圖標顯示上的兼容性問題黄刚。基于圖像隱喻來劃分的圖標類型著名的可用性研究專家 Jackob Nielsen 曾經(jīng)在 NNGroup 的文章中披露了這種圖標類型劃分的標準民效。圖標基于其中所反映出來的隱喻憔维，可以劃分為三個主要類型。相似圖標畏邢，它是將現(xiàn)實世界中的物理實體給符號化业扒，這種設(shè)計最典型的就是用于搜索的放大鏡圖標，購物車圖標舒萎，郵件圖標等程储。參考性圖標，它是使用類比對象的方式來設(shè)計的圖標臂寝，比如壓縮和解壓類的工具圖標章鲤，常常會使用包、拉鏈這樣的意象來傳遞出概念咆贬。隨意式圖標败徊，這類圖標的設(shè)計和其功能/含義并沒有關(guān)聯(lián)，它們本身并不傳遞出功能性的含義掏缎，依靠的是用戶長時間的查看皱蹦、使用，逐步習(xí)慣來熟悉其中的含義【祢冢現(xiàn)在許多界面當中的“保存”按鈕采用的是軟盤的圖標沪哺，但是軟盤實際上早已退出歷史舞臺，許多用戶甚至都不知道軟盤的存在酌儒，但是用戶會在長時間的使用過程中了解它的功能辜妓，并且在大腦中形成這樣的概念回路。
有效的圖標設(shè)計在之前的文章中今豆，我們總結(jié)過高效的圖標設(shè)計應(yīng)該具備的特征嫌拣，在此我們快速回顧一下：清晰：圖標的意義應(yīng)該是可理解的，可供受眾吸收的有意義：傳遞出有意義的信息可識別：圖標中所包含的視覺符號應(yīng)該能夠被正確地識別和呈現(xiàn)簡單：圖標中僅僅包含必要的元素呆躲，便于被快速的感知异逐，不會讓用戶感到費勁吸引人：圖標設(shè)計要比其他的視覺元素更突出，直覺而引人矚目靈活可拓展：圖標應(yīng)該可縮放插掂，并且不論大小都能被人所理解灰瞻，完整而易讀不冒犯人：它應(yīng)該沒有隱含意義腥例，也不會有被誤讀的可能一致：圖標應(yīng)該和應(yīng)用保持一致的風(fēng)格希望以上內(nèi)容對你學(xué)習(xí)UI設(shè)計有所幫助，覺得可以請轉(zhuǎn)發(fā)支持酝润，將一如既往的為大家分享更多UI設(shè)計干貨文章燎竖。喜歡可關(guān)注VX公眾號：UI設(shè)計小琪，私聊簡信領(lǐng)取UI學(xué)習(xí)教程~
