編按：

   圖標(biāo)類型千變?nèi)f化，什么場景該用什么類型的圖標(biāo)？又該如何把控圖標(biāo)的風(fēng)格？這些你都了解嗎？本篇文章將為你詳細(xì)介紹圖標(biāo)類型及特點以及適用場景，快快收下這份圖標(biāo)入門指南。

作為設(shè)計師來說，圖標(biāo)往往是從入門開始就會接觸的基礎(chǔ)內(nèi)容，不論是產(chǎn)品的一個logo，還是產(chǎn)品內(nèi)部界面的標(biāo)簽欄，處處都能用到它們。我將以往所學(xué)有關(guān)圖標(biāo)的碎片化知識及經(jīng)驗進(jìn)行如下的復(fù)盤總結(jié)，融合為一個較為完善的知識體系，并分為上篇和下篇兩個部分進(jìn)行講解，希望對新手朋友們有所幫助。

一 、圖標(biāo)是什么

廣義上來說，圖標(biāo)指的是有指代意義的一系列圖形。人們早在遠(yuǎn)古時期，就有了用圖標(biāo)來表達(dá)信息、傳遞信息的習(xí)慣，巖畫、符號、象形文等等都屬于圖標(biāo)，并且?guī)浊旰蟮奈覀円廊豢梢灾獣运鼈兊囊恍┖x。

圖標(biāo)在我們?nèi)粘Ｉ钪幸搽S處可見，比如地鐵站中的指向箭頭、衛(wèi)生間標(biāo)識，道路上的人行橫道標(biāo)識等等，這些都屬于圖標(biāo)。由于人腦對于圖形的辨識能力和記憶能力遠(yuǎn)遠(yuǎn)高于文字，因此用圖標(biāo)代替冗長的文字信息可以快速提升信息的獲取速度，并便于記憶。

二 、圖標(biāo)的分類

在當(dāng)前UI設(shè)計工作中，按照功能一般可將圖標(biāo)分為以下三大類：

1. 解釋性圖標(biāo)

這類圖標(biāo)往往是產(chǎn)品中最普遍最常用的圖標(biāo)，主要起到解釋特定文字信息、業(yè)務(wù)和工具的作用，讓用戶直接通過圖標(biāo)快速獲取信息。比如QQ音樂中“我的音樂”菜單部分，以及支付寶“財富管理”模塊中的業(yè)務(wù)入口，都配上了有具體指代意義的圖標(biāo)，而不僅僅是單純的文字。

2. 功能性圖標(biāo)

這類圖標(biāo)一般出現(xiàn)在需要用戶進(jìn)行交互的場景，通過單擊等手勢的觸發(fā)，完成一個交互動作來達(dá)到用戶的目的和心理期望，往往出現(xiàn)在特定的產(chǎn)品功能當(dāng)中，比如QQ音樂的“播放”“音量調(diào)節(jié)”等圖標(biāo)，知乎的“贊同”“反對”“評論”等圖標(biāo)，都可以被點擊并隨之響應(yīng)，觸發(fā)一個具體的功能。

3. 裝飾性圖標(biāo)

這類圖標(biāo)往往是設(shè)計師們最容易忽略的一類圖標(biāo)，雖然從產(chǎn)品的基本功能上來說它們可有可無，但是增添這些細(xì)節(jié)可以從情感上巧妙地提升用戶體驗，而且可以打造自己獨一無二的品牌特性，吸引用戶，提升用戶的留存率。

比如淘寶的網(wǎng)絡(luò)異常界面用了漸變圖標(biāo)降低用戶的挫敗感，滴答清單打卡數(shù)據(jù)為0時會有個扁平圖標(biāo)鼓勵用戶打卡。如果僅僅用單純的文字表示這些空狀態(tài)界面，用戶只會覺得沉悶無聊，因此設(shè)計師所要做的就是用合理的裝飾性圖標(biāo)來調(diào)動用戶的情緒，提升他們執(zhí)行行為的可能性。

三、 圖標(biāo)的設(shè)計風(fēng)格及應(yīng)用場景

圖標(biāo)從表現(xiàn)手法上來說可以大致分為以下四種風(fēng)格：

1.  線性圖標(biāo)

線性圖標(biāo)具備輕量化、精致的特點，往往適用于底部標(biāo)簽欄的未選中態(tài)、導(dǎo)航欄、金剛區(qū)的功能型入口等。

如支付寶的金剛區(qū)，由于偏向工具型，為突出其安全可靠的調(diào)性使用了克制、簡潔的線性圖標(biāo)。

2.  面性圖標(biāo)

面性圖標(biāo)飽滿，更吸引用戶眼球，具備很高的辨識度，一般用于分割層次，以及區(qū)分信息的重要程度，往往適用于底部標(biāo)簽欄的選中態(tài)和未選中態(tài)、金剛區(qū)的業(yè)務(wù)導(dǎo)流入口等。

如美團(tuán)的金剛區(qū)，偏業(yè)務(wù)需求，較強的視覺沖擊力可以誘導(dǎo)用戶快速點擊，因此統(tǒng)一使用了更吸引用戶注意力的面性圖標(biāo)。

另外，面性圖標(biāo)相比線性圖標(biāo)具有更高的辨識度，因此目前更多的產(chǎn)品將標(biāo)簽欄的未選中態(tài)也改為了面性圖標(biāo)，這樣一來大大增加了未選中圖標(biāo)的存在感，提升了二級頁面的點擊率。如ios12的所有原生App底部標(biāo)簽欄未選中態(tài)都由ios11的線性更新為了面性。發(fā)生同樣變化的還有最新版的簡書App。

3.  線面圖標(biāo)

線面圖標(biāo)是在線性圖標(biāo)的基礎(chǔ)上加入顏色的填充，具備個性化、有趣的特點，往往適用于特定風(fēng)格產(chǎn)品的底部標(biāo)簽欄選中態(tài)和金剛區(qū)的業(yè)務(wù)導(dǎo)流入口等，但由于其較多的視覺層級導(dǎo)致其不適用于面積較小的圖標(biāo)。

4.  擬物圖標(biāo)

在移動智能設(shè)備剛剛進(jìn)入人們的視野時，需要用映射的方式，將人們對現(xiàn)實物體的操作和邏輯帶入屏幕當(dāng)中，因此才誕生了擬物的設(shè)計風(fēng)格，減少人們的學(xué)習(xí)成本，快速熟悉上手。但是當(dāng)人們早已熟知它們的邏輯后，擬物顯得過時低效，增加了用戶的辨識成本。因此這個階段需要更高效的使用，由擬物過渡到扁平后，大幅減少了視覺噪聲，用戶的使用效率也得以提高。

目前的擬物圖標(biāo)多用于個性化風(fēng)格的展示，或者游戲UI中。

有關(guān)圖標(biāo)的定義、分類、設(shè)計風(fēng)格及應(yīng)用場景就先講到這里～下篇我會著重講解圖標(biāo)的標(biāo)準(zhǔn)化繪制方法以及相關(guān)的繪制技巧和注意事項。

本文配套的練習(xí)素材請加QQ群：465481414下載

做PS高手，快速提升工作效率，部落窩教育《 Photoshop全面精通班》視頻和《 AI平面與電商設(shè)計從零到精通》直播課全心為你！

掃下方二維碼關(guān)注公眾號，隨時隨地學(xué)習(xí)PS：

相關(guān)推薦：

AI教程，輕松繪制Yoga風(fēng)日落圖標(biāo)

利用AI打造鹿形針織效果圖標(biāo)

小白必看！一分鐘玩轉(zhuǎn)描邊圖標(biāo)