編輯導(dǎo)讀：圖標(biāo)一直是UI設(shè)計中很重要的部分，工作中我們經(jīng)常需要思考怎么做出好看、差異化的圖標(biāo)。圖標(biāo)為什么這么重要？圖標(biāo)怎么做的好看？怎么針對不同的產(chǎn)品做出圖標(biāo)的差異性？本文作者對總結(jié)了自己對于圖標(biāo)的理解和思考，一起來看一下。

圖標(biāo)一直是UI設(shè)計中很重要的部分，工作中我們經(jīng)常需要思考怎么做出好看、差異化的圖標(biāo)。圖標(biāo)為什么這么重要？圖標(biāo)怎么做的好看？怎么針對不同的產(chǎn)品做出圖標(biāo)的差異性？將最近自己研究的關(guān)于圖標(biāo)的理解以及工作中遇到的問題思考，梳理輸出分享給大家，希望能對大家在工作中遇到的關(guān)于圖標(biāo)的問題有所幫助。

01 什么是圖標(biāo)

圖標(biāo)作為一種視覺語言，廣義上指具有指代意義的圖形符號，具有高濃度并快捷傳達(dá)信息、便于記憶的特性。常見的如，交通標(biāo)志、男女衛(wèi)生間的標(biāo)志等等。

而UI圖標(biāo)大致可以分成兩大類：標(biāo)志性圖標(biāo)及功能性圖標(biāo)。標(biāo)志性圖標(biāo)，即手機(jī)桌面應(yīng)用圖標(biāo)的啟動入口，這里是用戶接觸到產(chǎn)品的第一印象，決定了用戶的去留，同時也是品牌傳播的重要渠道；另一個是功能圖標(biāo)，出現(xiàn)在app或網(wǎng)站中，用于功能性性引導(dǎo)用戶進(jìn)行各種操作的圖像。

02 圖標(biāo)的優(yōu)勢

1. 節(jié)省屏幕空間

相對說明的長文字來說，圖標(biāo)只需占用一個字符的位置就可以傳遞給用戶操作信息。比如在個人中心頁，我們經(jīng)?？吹降目头δ埽梦陌副硎拘枰奥?lián)系客服”四個字（當(dāng)然英文或其他語言可能更長），而用可以傳達(dá)信息的圖標(biāo)代替只需要占據(jù)一個字符的位置。

2. 不受地域語言限制

各個國家和地區(qū)都有自己的語言和文字，因此當(dāng)某一應(yīng)用在其他地區(qū)使用時需要進(jìn)行本地適配。圖標(biāo)卻不同，經(jīng)過不同平臺應(yīng)用長時間的培養(yǎng)，很多圖標(biāo)已經(jīng)能夠被大多數(shù)用戶快速識別，甚至成為國際通用的圖標(biāo)，比如放大鏡圖標(biāo)意味著搜索，齒輪圖標(biāo)意味設(shè)置。圖標(biāo)的使用打破了語言的地域限制，在完全不用懂應(yīng)用文字意思的前提下，也不妨礙圖標(biāo)意思的理解，以及應(yīng)用的相應(yīng)功能操作。

比如，instagram上tab bar及主要操作都是直接使用圖標(biāo)表示并且沒有文字備注，并不影響用戶理解及操作。

3. 減少用戶辨識時間

人類的左右腦分工是不同的，左腦主要從事邏輯思維，比如語言、數(shù)據(jù)、邏輯推理等；右腦主要從事形象思維，比如音樂、繪畫、空間幾何、想象等；而右腦處理圖形圖像的速度是左腦處理文字速度的60萬倍。

根據(jù)美國國家生物技術(shù)信息中心（National Center for Biotechnology Information）的數(shù)據(jù)顯示，人類的平均注意力跨度已經(jīng)從2000年的12秒下降到2013年的8秒。人類大腦對圖形圖像的記憶也遠(yuǎn)勝于對文字的記憶，人類會記住80%看過的東西，20%閱讀過的內(nèi)容和10%聽過的東西。文字圖像化，引導(dǎo)用戶快速接收信息進(jìn)行操作，減少用戶的思考時間。

4. 提升整體視覺體驗(yàn)

好的一套圖標(biāo)能夠從圖標(biāo)的獨(dú)特性、象征性、記憶性、應(yīng)用性、組合性、變化性上打動人心，從而激發(fā)人們點(diǎn)擊欲望。同時，圖標(biāo)集的統(tǒng)一性，一致性也會使的整個應(yīng)用給用戶傳遞視覺感受是統(tǒng)一、愉悅的，提升整個應(yīng)用的視覺體驗(yàn)。下圖為馬蜂窩推出V9改版視覺升級中的品類圖標(biāo)優(yōu)化方案。

03 圖標(biāo)的歷史

如果要追溯圖標(biāo)的歷史，可以追溯到史前時代。在當(dāng)代由于圖標(biāo)高度濃縮信息、快速傳達(dá)信息、便于記憶等優(yōu)勢，在其他方面的應(yīng)用范圍也極為廣泛，比如國家的圖標(biāo)國徽，商品的品牌注冊商標(biāo)，app應(yīng)用的啟動圖標(biāo)等等。關(guān)于GUI的圖標(biāo)史要從80年代第一臺桌面比擬電腦施樂奧托（Xerox Alto）開始。

1. 80年代，圖標(biāo)先行者

1973年，Xerox的帕羅奧多研究中心（Xerox PARC）為了方便新用戶快速理解與掌握，首度公開了第一臺使用桌面比擬的電腦施樂奧托（Xerox Alto），它是最早使用圖形用戶界面（GUI）的電腦之一。后來安迪·貝托爾斯海姆設(shè)計出的SUN工作站；蘋果公司的麥金塔電腦，最初都是參考了Xerox Alto的設(shè)計?？梢钥吹疆?dāng)時的用戶界面只有應(yīng)用程序本身的顯示圖標(biāo)及數(shù)據(jù)程序的啟動圖標(biāo)。

直到1981年數(shù)學(xué)家戴維·史密斯（David Smith）博士和藝術(shù)家諾爾姆·考克斯（Nor Cox）結(jié)合藝術(shù)和技術(shù)，由考克斯設(shè)計、史密斯發(fā)明了一套圖標(biāo)用于Alto的繼承者Star的圖形用戶界面。此時對圖標(biāo)的定義是“計算機(jī)系統(tǒng)中數(shù)據(jù)或進(jìn)程的象形表示，用來取代命令和菜單，作為計算機(jī)支持與最終用戶對話的手段”?？梢钥吹竭@套圖標(biāo)都是方形的線性圖標(biāo)，具備簡單的外觀和一致的設(shè)計風(fēng)格。

1983年史蒂夫·喬布斯推出了一款面向廣泛商業(yè)用戶的個人計算機(jī)，并以自己的女兒“Lisa”命名。當(dāng)時的Lisa系統(tǒng)界面十分簡陋，并沒有給大眾留下太深刻的印象。次年喬布斯雇傭了Susan Kare為蘋果設(shè)計一套特有的圖標(biāo)和字體，應(yīng)用在1984年發(fā)布的麥金塔電腦中。麥金塔的圖形界面雖然不是第一個界面設(shè)計，但卻定義了之后絕大多數(shù)圖標(biāo)的外形，比如用來放置刪除文件的廢紙簍，表示保存的磁盤，以及蘋果鍵盤上的功能鍵「command」，這套圖標(biāo)不但個性而且經(jīng)典，這也Susan Kare為什么會被稱為圖標(biāo)設(shè)計之母。（沒有物理感知的同學(xué)，建議配合B站up主“老師好我叫何同學(xué)”2020年11月發(fā)布的《80年代的電腦能做什么？》一起服用）。

在這之后的圖標(biāo)演化，經(jīng)歷了微軟的第一套電腦系統(tǒng)界面Windows 1.0的多色顯示；走極簡風(fēng)格的ATARI TOS折疊式圖標(biāo)，這套圖標(biāo)的等距特點(diǎn)也成為電腦系統(tǒng)的標(biāo)準(zhǔn)之一；有四種顏色的AMIGA WORKBENCH用戶定制化圖標(biāo)；GEOS的輪廓著色圖標(biāo)；APPLE GS/OS的“文件夾繪畫“圖標(biāo)。這個階段的圖標(biāo)外型沒有太大，只是由于技術(shù)的不斷更新使圖標(biāo)開始出現(xiàn)顏色。

直到1989年，當(dāng)時的史蒂夫·喬布斯已經(jīng)離開了蘋果并創(chuàng)立了NeXTSTEP，這時的NeXTSTEP圖標(biāo)開始出現(xiàn)陰影和高度，向我們展示了一種全新的圖標(biāo)設(shè)計方法。NeXTSTEP的圖標(biāo)也是第一個被認(rèn)為擬態(tài)的圖標(biāo)，圖標(biāo)開始進(jìn)入擬態(tài)時代。

80年代末，圖標(biāo)已經(jīng)由最初簡單的線性圖標(biāo)演變出顏色，以及3個基本尺寸?；镜某Ｓ脠D標(biāo)外形也被確定，比如文件、計算機(jī)、鉛筆和垃圾桶。此時圖標(biāo)也開始進(jìn)入擬物時代。

2. 90年代，圖標(biāo)現(xiàn)實(shí)主義

WINDOWS 3.0時，微軟請來了Susan Kare為他設(shè)計桌面圖標(biāo)，我們可以看到和之前的圖標(biāo)有很多相似之處。蘋果的MACINTOSH SYSTEM 7.0也開始出現(xiàn)了灰色的陰影，這個時候的圖標(biāo)基本趨向雷同。Geoworks在相同中采用靛藍(lán)色的邊緣以區(qū)分。BeOS則使用出現(xiàn)與現(xiàn)在2.5d類似的設(shè)計風(fēng)格。IRIX使用陰影將圖標(biāo)漂浮起來。

蘋果在RHAPSODY DR2的應(yīng)用界面中使用等軸測圖結(jié)合透明遮罩，以及新技術(shù)的支持，這版圖標(biāo)設(shè)計更加細(xì)膩、細(xì)節(jié)更加豐富。

AMIGA OS 3.5則還是保持粗的像素顆粒感。

90年代時期的圖標(biāo)都是現(xiàn)實(shí)主義的等軸測擬物化圖標(biāo)，但受限于技術(shù)此時的圖標(biāo)像素的質(zhì)感還很強(qiáng)，圖標(biāo)使用投影增加空間感。

3. 新千年，圖標(biāo)擬物化

到了2000年，技術(shù)的革新帶來新的圖標(biāo)設(shè)計風(fēng)格，這時的圖標(biāo)開始具有超高的拋光度、層次感、透明光澤、多陰影、模糊、柔化等等。這時候的蘋果和Windows界面出現(xiàn)了我們熟悉的樣子，圖標(biāo)類似照片的質(zhì)感，使得圖標(biāo)不再只是單純的符號。

07年Windows的Windows AERO「Authentic（真實(shí)）、Energetic（動感）、Reflective（反射）及Open（開闊）」透明玻璃質(zhì)感是這種輕快、精致、細(xì)膩“圖標(biāo)洛可可風(fēng)格”的重要代表?，F(xiàn)在依然有很多人喜歡這套閃閃發(fā)光的界面。到這時，圖標(biāo)還是指計算機(jī)數(shù)據(jù)或進(jìn)程的象形表示。

2007年，蘋果發(fā)布第一代iPhone以及iOS系統(tǒng)，在iPhone 1代前，人們與手機(jī)的交互方式主要是鍵盤和手寫筆，電容屏支持多點(diǎn)觸控技術(shù)使用iPhone用戶可以用手指直接與屏幕進(jìn)行交互。iOS的操作界空間也相對更大，因此系統(tǒng)桌面依然延續(xù)了寫實(shí)的圖標(biāo)風(fēng)格，甚至可以更精致。（2009年，從iOS 3版本開始，蘋果開始采用擬物化設(shè)計風(fēng)格）

Google在2007年年底才與HTC、LG、摩托羅拉和三星一同推出以Android為主要操作系統(tǒng)的手持設(shè)備聯(lián)盟。為了協(xié)調(diào)不同廠商Google一開始采用開放的組件系統(tǒng)，使得各家廠商可以修改底層文件，應(yīng)用各放異彩的同時也是使得Android手機(jī)應(yīng)用界面設(shè)計也越來越碎片化，使得后期Google為了統(tǒng)一設(shè)計風(fēng)格不得不推出基于物理世界的Material Design設(shè)計風(fēng)格，當(dāng)然這是后話。這時的Android手機(jī)界面也在追求極致的擬物化。

2001年喬布斯提出電腦是數(shù)碼生活的中樞，但從2007年蘋果推出一代iPhone開始，由于手機(jī)的便攜、快速、方便，手機(jī)的使用場景不斷占據(jù)人類生活場景，從這個時候開始圖標(biāo)更多指的是移動端手機(jī)應(yīng)用的啟動圖標(biāo)和應(yīng)用內(nèi)部的功能性圖標(biāo)。

4. 扁平風(fēng)格下的又一個十年

這個時候界面都使用極致擬物化圖標(biāo)，此時的用戶經(jīng)過多年的使用，已經(jīng)不需要通過與現(xiàn)實(shí)同樣的物理視覺來解決所謂“學(xué)習(xí)成本”的問題。2010年微軟為了打通多設(shè)備的聯(lián)通，保證手機(jī)、電腦、平板多設(shè)備有一致的體驗(yàn)，發(fā)布了帶有明顯磁貼風(fēng)格（又稱Metro風(fēng)格）的windows phone 7系統(tǒng)，圖標(biāo)開始變得扁平統(tǒng)一的白色面型圖標(biāo)，也就是扁平風(fēng)格的開端。（沒錯扁平設(shè)計風(fēng)格并不是蘋果提出的）磁貼設(shè)計最適合的是觸摸的交互方式，微軟桌面系統(tǒng)也采用了移動端的設(shè)計語言，完全有悖于之前用戶的操作習(xí)慣，Win8口碑大滑坡加上微軟系統(tǒng)升級的騷操作，導(dǎo)致微軟的Metro風(fēng)格猶如曇花一現(xiàn)，并沒有成為真正的流行。

蘋果緊接著發(fā)布的iOS7，與iOS6相比一改之前的極度擬物化，也并沒有像windows phone 7絕對的白色和面型圖標(biāo)，而是在之前圖標(biāo)的基礎(chǔ)上減少了底紋與質(zhì)感，蘋果嘗試在擬物和扁平之間找到了平衡，這樣的結(jié)果少不了Jonathan Ive的設(shè)計加持以及推動。因?yàn)轱L(fēng)格的差異化太大，直到現(xiàn)在還有很多人在爭論擬物風(fēng)和扁平風(fēng)的蘋果那個更好看。

由于扁平風(fēng)格的持續(xù)流行，圖標(biāo)也延續(xù)著扁平風(fēng)格，中間也偶爾有出現(xiàn)類似錘子手機(jī)的擬物風(fēng)圖標(biāo)，引起整個設(shè)計圈一陣討論，但整體趨勢還是扁平風(fēng)大行其道。

5. 新的風(fēng)格嘗試——Big Sur圖標(biāo)

2020年WWDC20蘋果發(fā)布macOS Big Sur，這次蘋果對設(shè)計進(jìn)行了大幅度的修改，相較于之前的扁平風(fēng)格以及不規(guī)則的外形，這次更新所有圖標(biāo)外形統(tǒng)一為圓角方形，靠近iOS系統(tǒng)。而整體質(zhì)感則是在扁平的基礎(chǔ)上增加些許質(zhì)感。macOS Big Sur不止圖標(biāo)更新外形與iOS相似，很多交互方式也與iPad端靠近，比如三端都有的組件化系統(tǒng)。前面我們說到windows phone 7系統(tǒng)的目標(biāo)是打通多設(shè)備的聯(lián)通，保證手機(jī)端、電腦端、平板多設(shè)備的一致體驗(yàn)，而當(dāng)時面對剛遷移手機(jī)端的用戶來說，有點(diǎn)過于操之過急，但這一想法并不是天方夜譚。這次macOS Big Sur的視覺更新更像是為打通iPhone、ipad與MAC的整個蘋果內(nèi)部系統(tǒng)的基礎(chǔ)設(shè)施建設(shè)。

當(dāng)時很多設(shè)計師覺得有點(diǎn)不倫不類，外形雖然統(tǒng)一，但很多圖標(biāo)卻也丑的很別致，比如被吐槽最多的QuickTime Player。并紛紛曬出自己對蘋果的Big Sur圖標(biāo)的Redesign。

成立體圖標(biāo)增加紋理、描邊、模糊、層次越來越寫實(shí)，但遠(yuǎn)遠(yuǎn)沒有達(dá)到擬物的狀態(tài)。2000年后，屏幕技術(shù)的發(fā)展，同時隨著photoshop修圖軟件的出現(xiàn)，圖標(biāo)設(shè)計可以添加越來越多質(zhì)感的，Windows、蘋果圖標(biāo)擬物化出現(xiàn)，這時圖標(biāo)還是指的計算機(jī)數(shù)據(jù)或進(jìn)程的象形。07年電容屏支持多點(diǎn)觸控技術(shù)被喬布斯使用在iPhone一代，移動端開始越來越多占據(jù)我們的生活，iOS 3開始圖標(biāo)越來越擬物化。2010年人們身邊充斥著各種電子設(shè)備，不再需要通過與物理感知一樣的圖標(biāo)來理解背后的意義及交互方式，微軟為了實(shí)現(xiàn)多設(shè)備一致的體驗(yàn)，推出Metro風(fēng)格。iOS 7蘋果設(shè)計師Jonathan Ive極力推動扁平圖標(biāo)的應(yīng)用，當(dāng)時充滿爭議。但之后極簡、扁平、去除視覺噪音成為主流，扁平風(fēng)格火了十年。而當(dāng)時提出扁平風(fēng)格的微軟Windows 10 mobile 因?yàn)槎喽诉m配、7.5無法升級等問題，被用戶詬病，2019年已經(jīng)停止更新。2020年蘋果Big Sur圖標(biāo)之前，扁平的圖標(biāo)減少視覺噪音方便用戶快速識別等優(yōu)點(diǎn)外，也限制著設(shè)計師的發(fā)揮，可以看到Dribbble上眾多設(shè)計對于圖標(biāo)設(shè)計都有自己的嘗試。圖標(biāo)的發(fā)展一直是技術(shù)、承載設(shè)備、設(shè)計師共同推動的結(jié)果，圖標(biāo)的發(fā)明是為了降低電子設(shè)備用戶的理解成本，快速的傳遞信息，到現(xiàn)在無論如何發(fā)展信息傳遞依然是圖標(biāo)的核心。

歷史終于寫完了，找資料找的頭禿，盡～力～了～。如有出入，歡迎指正，peace&love。

04 圖標(biāo)的語義分類

圖標(biāo)繪制是將語義元素轉(zhuǎn)變?yōu)橐曈X元素的過程，以達(dá)到傳遞信息的目的。所以圖標(biāo)的建立，首先應(yīng)該確定圖標(biāo)的隱喻，也就是型的確定。（因?yàn)樗袌D標(biāo)都是在功能型圖標(biāo)基礎(chǔ)上進(jìn)行的設(shè)計變形或設(shè)計細(xì)節(jié)添加，因此之后文章除非特別說明，舉例都會以功能型圖標(biāo)為主）

圖標(biāo)按圖像隱喻分類可分為實(shí)物圖標(biāo)、象形圖標(biāo)、表意圖標(biāo)、文字圖標(biāo)、創(chuàng)造圖標(biāo)、組合圖標(biāo)。

1. 實(shí)物圖標(biāo)

實(shí)物性圖標(biāo)就是將真實(shí)的物品作為符號引導(dǎo)用戶點(diǎn)擊，一般用在表示新鮮的生鮮類應(yīng)用，比如：如盒馬生鮮，叮咚買菜?；蚓哂衅放菩?yīng)的電商類應(yīng)用，比如：得物、識貨。還有些沒有辦法符號化的物品，比如美團(tuán)買藥、聚美。

2. 象形圖標(biāo)

象形圖標(biāo)是最常見的圖標(biāo)繪制方式，即通過對一個物理物體的再現(xiàn)或參照來表達(dá)意義，表示單詞或短語的圖像符號。GUI剛出現(xiàn)時，用戶并不知道怎么進(jìn)行操作，因此對絕大需要傳遞的信息，都盡量模范現(xiàn)實(shí)生活中的實(shí)際物體，比如：代表刪除的垃圾桶，以及當(dāng)時電子軟盤表示保存。

這類圖標(biāo)由于長時間的使用，如果改變外形可能誤導(dǎo)用戶，外形無法做過多的變化。

3. 表意圖標(biāo)

表意圖標(biāo)是將沒有具象物體、比較抽象的概念，在發(fā)展的過程中創(chuàng)作并成為一種約定俗成的圖標(biāo)用來表達(dá)某些含義或操作，比如點(diǎn)贊圖標(biāo)，設(shè)置圖標(biāo)，音符圖標(biāo)代表音樂，+號代表增加。

4. 文字圖標(biāo)

有些詞或操作沒辦法用任何圖形進(jìn)行表現(xiàn)，這時會使用相關(guān)的文字進(jìn)行表現(xiàn)。文字本身就是一種演化而來的符號，比如返利。返利是最近才出現(xiàn)的名詞，沒有更好的圖形可以進(jìn)行表現(xiàn)，一般會使用“返”字作為視覺表現(xiàn)。另一種情況是在某些特定節(jié)日會使用文字宣傳作為圖標(biāo)，比如雙十一、618各大電商運(yùn)營活動。

5. 創(chuàng)造圖標(biāo)

創(chuàng)造類圖標(biāo)的設(shè)計和功能并沒有直接關(guān)聯(lián)，本身是不具備傳遞功能的含義，一般是伴隨著業(yè)務(wù)的出現(xiàn)，用戶在長時間使用過程中習(xí)慣熟悉圖標(biāo)傳遞的含義，有時會伴隨文字一起出現(xiàn)，經(jīng)典的比如蘋果的command鍵、藍(lán)牙圖標(biāo)，最近的小程序圖標(biāo)。

6. 組合圖標(biāo)

組合圖標(biāo)指將前面幾類任意組合后產(chǎn)出的新圖標(biāo)，用來表達(dá)更為復(fù)雜的意思或操作行為，比如添加新用戶、微博的找人等等。

以上是圖標(biāo)設(shè)計詳解的第一篇——圖標(biāo)初始的內(nèi)容。當(dāng)然圖標(biāo)還有很多課題可以研究，比如圖標(biāo)的大小、圖標(biāo)的設(shè)計屬性、圖標(biāo)的原則、圖標(biāo)的設(shè)計流程以及關(guān)于圖標(biāo)可用測試等等。這些內(nèi)容會盡快更新，敬請期待。

資料來源：

• 圖像學(xué)的簡要?dú)v史
• UI設(shè)計師想做好圖標(biāo)設(shè)計？請問圖標(biāo)歷史了解過嗎？
• 微軟設(shè)計語言-磁鐵設(shè)計風(fēng)格（Fluent Design）
• 主流界面設(shè)計語言的變革
• 谷歌 vs 蘋果，到底哪家的設(shè)計更好？
• 學(xué)圖標(biāo)設(shè)計？這篇就夠了

作者：9號自習(xí)室； 公眾號：9號自習(xí)室；知乎專欄：9號自習(xí)室。

本文由 @9號自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議