設(shè)計(jì)師必看圖標(biāo)(icon)指南

icon 中的隱喻元素很重要，它可以讓我們一看到這個(gè) icon 就知道是什么意思。比如，一個(gè)房子代表首頁(yè)，一個(gè)叉叉代表出錯(cuò)或關(guān)閉。當(dāng)我縮小一個(gè) icon 時(shí)，我都會(huì)保留隱喻元素，來(lái)保證 icon 仍然可以準(zhǔn)確傳達(dá)信息。

（3）工具圖標(biāo)

主要以行業(yè)類別為分類，使用范圍廣泛，大眾或行內(nèi)人士識(shí)別度高，且被長(zhǎng)期使用。比如：建筑行業(yè)，醫(yī)療行業(yè)，化工行業(yè)等等。

（4）混合圖標(biāo)

也就是前三種的結(jié)合，目的在于達(dá)到不同的視覺(jué)效果和應(yīng)用結(jié)構(gòu)。前段時(shí)間追波很流行的MBE粗描邊風(fēng)格icon就是綜合圖標(biāo)的產(chǎn)物，多表達(dá)設(shè)計(jì)師個(gè)人設(shè)計(jì)風(fēng)格或適用某類設(shè)計(jì)感較強(qiáng)的軟件。

基于視覺(jué)特性的分類

（1）字符圖標(biāo)

字符圖標(biāo)“Glyph”一詞是源自于排版領(lǐng)域，現(xiàn)在已經(jīng)隨著數(shù)字設(shè)計(jì)而逐步在數(shù)字設(shè)計(jì)領(lǐng)域扎根了，它源自于希臘語(yǔ)，含義為“雕刻”。在排版領(lǐng)域當(dāng)中，符號(hào)圖標(biāo)通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統(tǒng)，它可以是字母，也可以是圖形，有的時(shí)候甚至是兩者的組合。

在這類圖標(biāo)設(shè)計(jì)中，比較典型的當(dāng)屬天氣類圖標(biāo)了。從單個(gè)圖標(biāo)到組合圖標(biāo)，都能充分體現(xiàn)出來(lái)。

（2）扁平圖標(biāo)

扁平圖標(biāo)包含線性、面型、線+面，面+面，變現(xiàn)方式多樣，拓展性強(qiáng)，更個(gè)性化，年輕化一些，相同，同樣設(shè)計(jì)風(fēng)格的icon，在更換顏色后就能體現(xiàn)和傳達(dá)不一樣的信息。

（3）擬物化圖標(biāo)

擬物化圖標(biāo)是扁平化圖標(biāo)的對(duì)立面，正如同當(dāng)初擬物化圖標(biāo)設(shè)計(jì)師常說(shuō)的，它就是“抄現(xiàn)實(shí)”，盡量將現(xiàn)實(shí)世界中的形狀、紋理、光影都融入到整個(gè)圖標(biāo)的設(shè)計(jì)，擬真是它的特點(diǎn)。擬物化圖標(biāo)這一設(shè)計(jì)趨勢(shì)幾乎是跟隨著Macintosh的誕生和進(jìn)化一步一步走過(guò)來(lái)，走到極致，然后從UI設(shè)計(jì)領(lǐng)域開始，被扁平化設(shè)計(jì)所替代。不過(guò)，擬物化圖標(biāo)現(xiàn)在依然廣泛地運(yùn)用在不同領(lǐng)域，尤其是游戲設(shè)計(jì)和游戲類產(chǎn)品的圖標(biāo)設(shè)計(jì)當(dāng)中。2.5D圖標(biāo)和桌面應(yīng)用圖標(biāo)。

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

1. 全球通用

Windows,iOS, etc., 中文版和英文版甚至各種語(yǔ)言版本，在不打開菜單之前，基本上都長(zhǎng)一樣。很多圖標(biāo)已經(jīng)能夠被大多數(shù)用戶快速識(shí)別，甚至成為國(guó)際通用的圖標(biāo)。例如Windows UI

2. 節(jié)約空間

一個(gè)圖標(biāo)能夠表述清楚含義的時(shí)候，只需占用一個(gè)字符的位置就可以傳遞給用戶操作信息。例如掃一掃、郵件發(fā)送成功，用文案表示需要3-4個(gè)字，英文或其它語(yǔ)言可能更長(zhǎng)，而用圖標(biāo)代替只需要一個(gè)字符位置

支付寶右上角 + 表示更多功能，此時(shí)一個(gè)字符位置解釋清楚其含義；微信下一個(gè)類似聲波圖標(biāo)表示語(yǔ)音，直觀易理解

3. 快速定位

進(jìn)入碎片化時(shí)代和進(jìn)入讀圖時(shí)代，幾乎是相同的節(jié)奏。圖片內(nèi)容能在短時(shí)間內(nèi)產(chǎn)生更大的影響力，研究表明，大腦處理圖片內(nèi)容的速度比文字內(nèi)容快60000倍，人類大腦對(duì)圖形圖像的記憶也遠(yuǎn)勝于對(duì)文字的記憶。所以，在推廣品牌時(shí)，圖片內(nèi)容可以說(shuō)是一圖勝千言。使用圖標(biāo)通過(guò)視覺(jué)引導(dǎo)幫助用戶快速識(shí)別信息。

Tik Tok和ins沒(méi)有任何文字說(shuō)明情況下，我們就知道第5個(gè)標(biāo)簽就是個(gè)人中心

4. 可識(shí)別，易記憶

科學(xué)證明，在大腦中相對(duì)于其他感覺(jué)來(lái)說(shuō)與視覺(jué)信息處理相關(guān)的腦區(qū)占統(tǒng)治地位，人腦對(duì)于圖像的記憶遠(yuǎn)遠(yuǎn)高于文字。圖標(biāo)多采用幾何圖形，并以對(duì)稱、一致的設(shè)計(jì)目標(biāo)來(lái)進(jìn)行設(shè)計(jì)，由于其高度濃縮的特性，圖標(biāo)具有更加簡(jiǎn)潔的特性，更加便于記憶。

圖標(biāo)的繪制流程

圖標(biāo)最底層邏輯：線性圖標(biāo)、面型圖標(biāo)、線+面型圖標(biāo)、面+面型圖標(biāo)、2.5D圖標(biāo)、擬物圖標(biāo)。網(wǎng)上五花八門的圖標(biāo)是在這些基礎(chǔ)上進(jìn)行視覺(jué)區(qū)分，而當(dāng)我們?cè)O(shè)計(jì)圖標(biāo)時(shí)候需要思考：

• 產(chǎn)品視覺(jué)風(fēng)格定位（行業(yè)領(lǐng)域）
• 圖標(biāo)具體應(yīng)用的界面
• 產(chǎn)品面相的用戶人群是怎樣的？

先看一組不用風(fēng)格的圖標(biāo)，由上面不同APP圖標(biāo)可以看出不同行業(yè)、不同場(chǎng)景、不同用戶，圖標(biāo)的設(shè)計(jì)和表達(dá)方式是不一樣的，所以設(shè)計(jì)前需要思考，你需要表達(dá)的設(shè)計(jì)思路和產(chǎn)品的定位。

1. 設(shè)計(jì)執(zhí)行

（1）拆解關(guān)鍵詞及關(guān)鍵詞聯(lián)想

將需求信息中的關(guān)鍵詞進(jìn)行拆解及發(fā)散，轉(zhuǎn)化為生活中常見(jiàn)的事物，釋放它所代表的內(nèi)在含義。關(guān)鍵詞的同義詞、近義詞、形狀相關(guān)或相關(guān)聯(lián)想的物體

例如說(shuō)到榮譽(yù)，馬上就能想到獎(jiǎng)杯、獎(jiǎng)狀、金牌、皇冠等。然后通過(guò)這些詞聯(lián)想，去找一些氣質(zhì)相符的圖片制作情緒版，通過(guò)情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩做為產(chǎn)品圖標(biāo)的主要造型

（2）根據(jù)關(guān)鍵詞聯(lián)想輸出圖形

根據(jù)上一步拆解的詞語(yǔ)或物體，通過(guò)簡(jiǎn)單基本形狀轉(zhuǎn)為生活中常見(jiàn)圖形。常用的2中方法是用AI鋼筆工具（sketch貝塞爾工具）或者布爾運(yùn)算進(jìn)行繪制

（3）根據(jù)場(chǎng)景輸出

這里的場(chǎng)景可能是實(shí)際應(yīng)用的場(chǎng)景，比如大眾點(diǎn)評(píng)tab標(biāo)簽欄、功能區(qū)（品類區(qū)）、運(yùn)營(yíng)類圖標(biāo)等這些圖標(biāo)需要引導(dǎo)用戶去點(diǎn)擊，所以在視覺(jué)上更加豐富一些；而個(gè)人中心、分類區(qū)、詳情頁(yè)更多側(cè)重功能上的引導(dǎo)，相對(duì)來(lái)說(shuō)較簡(jiǎn)潔，屬于二級(jí)使用場(chǎng)景，線型圖標(biāo)居多。

圖標(biāo)的設(shè)計(jì)注意事項(xiàng)

我們常見(jiàn)各個(gè)圖標(biāo)文章分析應(yīng)該注意十幾點(diǎn)，而這些沒(méi)有規(guī)律和邏輯難以記憶，一時(shí)記住了也容易忘記。這些總結(jié)其實(shí)是從Material Design或者iOS規(guī)范中得來(lái)的。認(rèn)真研究這些細(xì)節(jié)，圖標(biāo)制作就不難了

1. 端點(diǎn)統(tǒng)一

圖標(biāo)端點(diǎn)分為直角和圓角，我們?cè)谠O(shè)計(jì)過(guò)程中要統(tǒng)一圖標(biāo)端點(diǎn)，保持一致的設(shè)計(jì)語(yǔ)言

2. 角度統(tǒng)一

（1）拐角

相對(duì)于其他圖形，人類的眼睛更容易識(shí)別圓角矩形而不是直角矩形，因?yàn)槿嗽谘劬Φ纳順?gòu)造上中央凹(fovea centralis），是視網(wǎng)膜中視覺(jué)最敏銳的區(qū)域)在處理圓形時(shí)最快，而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”。所以，人眼處理圓角更容易，因?yàn)樗鼈兛雌饋?lái)比普通矩形更接近于圓。

圓角自身的圓形屬性會(huì)給人圓潤(rùn)、可愛(ài)，更加安全、親密的感覺(jué)。因此社交、娛樂(lè)、直播、美食等圖標(biāo)多會(huì)使用圓角圖標(biāo)。

直角則會(huì)給人一種尖銳、具有攻擊性的感覺(jué)，圖標(biāo)整體細(xì)節(jié)更多，通常出現(xiàn)在金融等商務(wù)屬性比較強(qiáng)的產(chǎn)品。比如：36氪、金融類產(chǎn)品等。

（2）傾斜角度統(tǒng)一

3. 內(nèi)部空間比例統(tǒng)一

內(nèi)部空間比例的不一致易導(dǎo)致圖標(biāo)視覺(jué)重點(diǎn)不統(tǒng)一。如下圖左第二個(gè)圖標(biāo)重偏下，第四個(gè)圖標(biāo)重心偏上，右邊是早期PP助手的標(biāo)簽欄圖標(biāo)，圖標(biāo)內(nèi)部挖空面積占比率相同，整體視覺(jué)和諧統(tǒng)一。