編按：

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

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

一 、圖標是什么

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

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

二 、圖標的分類

在當前UI設計工作中，按照功能一般可將圖標分為以下三大類：

1. 解釋性圖標

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

2. 功能性圖標

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

3. 裝飾性圖標

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

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

三、 圖標的設計風格及應用場景

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

1.  線性圖標

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

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

2.  面性圖標

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

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

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

3.  線面圖標

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

4.  擬物圖標

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

目前的擬物圖標多用于個性化風格的展示，或者游戲UI中。

有關圖標的定義、分類、設計風格及應用場景就先講到這里～下篇我會著重講解圖標的標準化繪制方法以及相關的繪制技巧和注意事項。

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

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

掃下方二維碼關注公眾號，隨時隨地學習PS：

相關推薦：

AI教程，輕松繪制Yoga風日落圖標

利用AI打造鹿形針織效果圖標

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