編輯導(dǎo)語：繪制圖標(biāo)的過程，需要我們將語義轉(zhuǎn)化為具有指代性、識別性和交互性的符號，但在繪制的過程中會(huì)遇到各種各樣的問題。本篇作者就來跟我們分享下圖標(biāo)的繪制流程、圖標(biāo)的制作方法、圖標(biāo)的原則和圖標(biāo)的輸出格式等一系列關(guān)于圖標(biāo)落地及輸出的問題，一起來看一下。

這是圖標(biāo)相關(guān)的第三篇文章，第一篇《圖標(biāo)設(shè)計(jì)詳解（一）——圖標(biāo)初識》講述了什么是圖標(biāo)、圖標(biāo)的優(yōu)勢、圖標(biāo)的發(fā)展歷史及圖標(biāo)的語義分類，第二篇《圖標(biāo)設(shè)計(jì)詳解（二）——圖標(biāo)屬性》詳細(xì)介紹了圖標(biāo)的設(shè)計(jì)屬性、圖標(biāo)的大小及keyline線的使用說明。感興趣的同學(xué)可以在個(gè)人主頁進(jìn)行查看。

繪制圖標(biāo)的過程需要我們將語義轉(zhuǎn)化為具有指代性、識別性和交互性的符號，但在繪制的過程中難免會(huì)遇到各種各樣的問題。本篇文章我們來討論下圖標(biāo)的繪制流程、圖標(biāo)的制作方法、圖標(biāo)的原則以及圖標(biāo)的輸出格式等一系列關(guān)于圖標(biāo)落地及輸出的問題。

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

圖標(biāo)是將詞意圖形化過程的結(jié)果，存在的目的在于向用戶傳達(dá)信息的隱喻，幫助用戶快速理解及操作。當(dāng)我們接到需求時(shí)，先不要著急著手繪制圖標(biāo)。先要經(jīng)過以下步驟，才能繪制出符合要求的圖標(biāo)。

1. 關(guān)鍵詞提取及發(fā)散

當(dāng)接到圖標(biāo)的需求時(shí)，需要將信息中的關(guān)鍵詞進(jìn)行提取并發(fā)散出相關(guān)的詞語，這個(gè)過程我們可以借助搜索引擎或詞集來獲取相關(guān)的同一詞、定義、臨近詞等。如下圖對關(guān)鍵詞“信息”的發(fā)散。

2. 符號及形象化

根據(jù)信息關(guān)鍵詞腦暴出符合的符號及形象，可以根據(jù)圖標(biāo)的隱喻方式分類：實(shí)物圖標(biāo)、象形圖標(biāo)、表意圖標(biāo)、文字圖標(biāo)、創(chuàng)造圖標(biāo)、組合圖標(biāo)，在第一篇《圖標(biāo)設(shè)計(jì)詳解（一）—圖標(biāo)初識》中有詳細(xì)的說明，請自行查閱。這個(gè)過程可以用紙筆進(jìn)行粗略的繪制，確定出最貼合要傳達(dá)信息的圖標(biāo)外形。

3. 場景需求梳理

不同的圖標(biāo)使用場景，決定了圖標(biāo)的不同視覺表現(xiàn)形式。比如標(biāo)簽欄、導(dǎo)航欄、品類區(qū)屬于一級使用場景，因此多使用視覺重量更大的面性圖標(biāo)；個(gè)人中心、分類、詳情頁屬于二級使用場景，相對來說以線性圖標(biāo)居多。詳細(xì)更多關(guān)于圖標(biāo)屬性的內(nèi)容，請查看《圖標(biāo)設(shè)計(jì)詳解（二）——圖標(biāo)屬性》中關(guān)于不同場景圖標(biāo)的設(shè)計(jì)表現(xiàn)形式。

4. 確認(rèn)設(shè)計(jì)風(fēng)格

在確定好圖標(biāo)傳遞的視覺陰喻后，需要確定圖標(biāo)是線性圖標(biāo)、面性圖標(biāo)、毛玻璃質(zhì)感等設(shè)計(jì)風(fēng)格，如果有相關(guān)VI系統(tǒng)，則需要盡量靠近整體的設(shè)計(jì)風(fēng)格。

第二階段圖標(biāo)的符號及形象化過程中，我們可以借助現(xiàn)在層出不窮的圖標(biāo)網(wǎng)站對第一階段提取的關(guān)鍵詞或臨近詞進(jìn)行搜索，來獲取信息圖形化的創(chuàng)作靈感。下面是一些我常用的圖標(biāo)網(wǎng)站：

1）iconfont

阿里媽媽MUX打造的矢量圖標(biāo)管理、交流平臺(tái)。設(shè)計(jì)師可以將圖標(biāo)上傳到iconfont平臺(tái)，其他用戶可以自定義下載AI、SVG、PNG多種格式的圖標(biāo)，平臺(tái)也可以將圖標(biāo)轉(zhuǎn)為字體，便于前端工程師自由調(diào)整與調(diào)用。

除800多萬矢量圖標(biāo)外，還有適應(yīng)不同場景的插畫庫，滿足不同場景的需求。我自己會(huì)比較常用的圖標(biāo)網(wǎng)站。

2）IconPark

IconPark是字節(jié)跳動(dòng)旗下的圖標(biāo)平臺(tái)，提供2000+預(yù)設(shè)圖標(biāo)及分類。提供復(fù)制SVG code、復(fù)制React 組件、復(fù)制Vue組件、下載PNG、下載SVG。個(gè)人感覺沒有iconfont的圖標(biāo)多，可以作為備用。

3）Radix Icons

由Modulz團(tuán)隊(duì)設(shè)計(jì)的一組清晰的15X15的圖標(biāo)。所有的圖標(biāo)都可以作為單獨(dú)的React組件使用。

4）Flump

色彩繽紛的3D圖標(biāo)，讓你的macOS更酷，不是免費(fèi)的。

5）Streamline

100，000個(gè)圖標(biāo)、插畫和表情符號，適用所有項(xiàng)目。幫助在幾秒內(nèi)根據(jù)您的品牌定制他們。前5天免費(fèi)試用訪問所有媒體。

6）Iconduck

118,894個(gè)免費(fèi)的開源圖標(biāo)和插圖，可直接下載試用。

7）Ikonate

可直接調(diào)節(jié)圖標(biāo)的大小、線條粗細(xì)、節(jié)點(diǎn)、顏色等。

8）Shorticons

188單色的iOS桌面圖標(biāo)，可選擇面性圖標(biāo)或線性圖標(biāo)，可調(diào)節(jié)大小、圖標(biāo)及背景的顏色，售價(jià)9美元。附有網(wǎng)頁底部操作說明。

9）Line Awesome

點(diǎn)擊圖標(biāo)，會(huì)出現(xiàn)一行代碼，復(fù)制圖標(biāo)、代碼就可以直接使用。里面有很多特殊圖標(biāo)，比如無障礙、助聽系統(tǒng)，手語翻譯等不常見圖標(biāo)，以及各種品牌圖標(biāo)。

10）lineicons

為設(shè)計(jì)師和開發(fā)人員提供5000+個(gè)線條圖標(biāo)，并提供免費(fèi)的CDN、常規(guī)變體、圖標(biāo)編輯器和許多手工制作的免費(fèi)線條圖標(biāo)，適用于web、移動(dòng)端和桌面應(yīng)用程序設(shè)計(jì)和開發(fā)項(xiàng)目的現(xiàn)代用戶界面。

當(dāng)然還有很多有趣，高效的圖標(biāo)庫，由于篇幅原因，剩下的就不一一列舉了。

二、圖標(biāo)的繪制方式

上面說完圖標(biāo)的繪制流程，接著我們來聊下圖標(biāo)的繪制方式。圖標(biāo)的繪制方式有兩種：布爾運(yùn)算（Boolean algebra）和貝塞爾曲線(Bézier curve)。

1. 布爾運(yùn)算

布爾運(yùn)算（Boolean algebra）又稱邏輯運(yùn)算，是英國數(shù)學(xué)家布爾在1847年發(fā)明用于處理二值之間關(guān)系的邏輯數(shù)學(xué)計(jì)算法，包括聯(lián)合、相交、相減。

在三維圖形方面，布爾運(yùn)算則是通過兩個(gè)以上的物體進(jìn)行并集、差集、交集的運(yùn)算，從而得到新的物體形態(tài)。軟件系統(tǒng)提供了4種布爾運(yùn)算方式：并集、交集、差集、減去頂層。

1. 并集：將兩個(gè)形狀合并成為一個(gè)形狀，取全部形狀。
2. 減去頂層：用底層圖形減去頂層圖形，剩下的部分為最終圖形。
3. 交集：兩個(gè)圖形重疊、相交的部分。
4. 差集：相當(dāng)于「并集」減去「交集」之后剩下的部分。

需要注意的是，布爾運(yùn)算的建立需要滿足兩個(gè)條件：

1. 必須是兩個(gè)以上的圖形有相交的區(qū)域；
2. 所有圖形都是在同一個(gè)圖層中才可以進(jìn)行布爾運(yùn)算。

圖形進(jìn)行布爾運(yùn)算后，隨時(shí)可以對兩個(gè)運(yùn)算圖形進(jìn)行修改操作，包括布爾運(yùn)算的方式、效果也可以進(jìn)行編輯修改。通過布爾運(yùn)算，我們能繪制出絕大多數(shù)的圖標(biāo)，但有些結(jié)構(gòu)線條復(fù)雜的圖標(biāo)無法使用相加、相減、相切進(jìn)行完成，這個(gè)時(shí)候就需要使用貝塞爾曲線刻畫圖標(biāo)。

2. 貝塞爾曲線

貝塞爾曲線(Bézier curve)又稱貝茲曲線，是由法國數(shù)學(xué)家Pierre Bézier發(fā)明的，它的主要意義在于無論是直線或是曲線都能在數(shù)學(xué)上使用參數(shù)予以描述，因此當(dāng)我們拖拽某個(gè)控制點(diǎn)時(shí)，其實(shí)是在用鼠標(biāo)調(diào)整某個(gè)參數(shù)數(shù)據(jù)，方便計(jì)算機(jī)可以計(jì)算及錄入相關(guān)信息。一般的矢量圖形軟件都是通過貝塞爾曲線畫出曲線的，我們總說的鋼筆工具就是用來畫這種矢量曲線的。

貝塞爾曲線包括：節(jié)點(diǎn)、控制點(diǎn)、控制線、曲線四個(gè)組成部分。在繪制的過程中，節(jié)點(diǎn)作為支撐構(gòu)成可拖動(dòng)的支點(diǎn)，控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線，調(diào)節(jié)控制點(diǎn)的位置，拉扯控制線來改變曲線的形狀。

節(jié)點(diǎn)的類型包括了4種類型：直線節(jié)點(diǎn)、鏡像關(guān)聯(lián)節(jié)點(diǎn)、無關(guān)聯(lián)節(jié)點(diǎn)、不對稱關(guān)聯(lián)節(jié)點(diǎn)。

1. 直線節(jié)點(diǎn)：沒有控制點(diǎn)及控制線，只有節(jié)點(diǎn)的線段；
2. 鏡像關(guān)聯(lián)節(jié)點(diǎn)：拖拽其中一側(cè)的控制點(diǎn)，另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化，多用與繪制對稱結(jié)構(gòu)的曲線；
3. 無關(guān)聯(lián)節(jié)點(diǎn)：選中節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自控制相對應(yīng)那側(cè)的曲線而不互相影響；
4. 不對稱關(guān)聯(lián)節(jié)點(diǎn)：選中節(jié)點(diǎn)兩側(cè)的控制點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線上，但卻不會(huì)對稱的控制線的長度。

在使用貝塞爾曲線繪制圖標(biāo)的過程中，常用鋼筆工具進(jìn)行繪制，很多剛接觸貝塞爾曲線的設(shè)計(jì)師對他的使用感到很困難，大家可以通過【The Bézier Game】網(wǎng)站進(jìn)行練習(xí)，達(dá)到熟能生巧的使用貝塞爾曲線。

這兩種圖標(biāo)的繪制方法都是可行的，在考慮到圖標(biāo)的規(guī)范性及后期修改等問題，建議在繪制圖標(biāo)時(shí)盡量使用布爾運(yùn)算進(jìn)行繪制。

三、圖標(biāo)的設(shè)計(jì)原則

繪制圖標(biāo)的過程中會(huì)將注意力集中在圖標(biāo)的構(gòu)成、顏色、粗細(xì)等圖標(biāo)屬性上，但繪制完成以后，卻還不是一個(gè)合格的圖標(biāo)。特別是繪制一整套圖標(biāo)時(shí)，圖標(biāo)的視覺統(tǒng)一、傳達(dá)性以及圖標(biāo)對于品牌調(diào)性的傳達(dá)都會(huì)是圖標(biāo)繪制過程被設(shè)計(jì)師所忽視的問題。

1. 圖標(biāo)是否易于理解？

圖標(biāo)的建立最基本的原則是務(wù)必清晰準(zhǔn)確的傳達(dá)信息，即圖標(biāo)是否可讀。當(dāng)圖標(biāo)失去傳遞信息的作用時(shí)，就失去了圖標(biāo)的意義。很多初級設(shè)計(jì)師在開始設(shè)計(jì)時(shí)過于追求圖標(biāo)視覺的獨(dú)特化，卻忽視圖標(biāo)傳遞信息的意義，繁復(fù)的圖標(biāo)反而會(huì)成為頁面中的視覺噪音，影響用戶完成操作任務(wù)。

1）使用用戶熟悉的圖標(biāo)

在確定圖標(biāo)的符號、形象化過程中，有些設(shè)計(jì)師會(huì)為了突出設(shè)計(jì)感而使用特殊的圖標(biāo)表現(xiàn)形式，但實(shí)際上對于不同文化和背景的人來說，不同的圖標(biāo)代表了不同的含義，好的圖標(biāo)應(yīng)該是通用的，大家通過相同的圖形認(rèn)知語言，獲取、理解以及操作相同的信息。因此圖標(biāo)的形象最好是基于用戶經(jīng)驗(yàn)、熟悉且具有辨識度的圖標(biāo)。

首先，在設(shè)計(jì)初期考慮使用通用圖標(biāo)，比如播放、搜索圖標(biāo)等，對于這類通用的常見圖標(biāo)設(shè)計(jì)師不需要添加過多的文字解釋說明，節(jié)省空間的同時(shí)，并不會(huì)降低用戶的識別及操作速度。另一種情況例如象征保存的軟盤圖標(biāo)，雖然現(xiàn)在的大多數(shù)年輕人并沒有見過也沒有使用過軟盤，但方形的軟盤圖標(biāo)作為存儲(chǔ)已經(jīng)成為一種得到廣泛認(rèn)可的圖標(biāo)。

其次，如果實(shí)在不知道該使用何種圖標(biāo)圖形時(shí)，可以參考相關(guān)競品，使用與競品類似的圖標(biāo)，不要忽視了競品對于用戶理解的養(yǎng)成。

2）不要使用含義沖突的圖標(biāo)

避免使用可能會(huì)代表多個(gè)含義的圖標(biāo)，例如“心”型圖標(biāo)在在小紅書、抖音等應(yīng)用中則是喜歡、點(diǎn)贊，在自如、Airbnb應(yīng)用中“心”型圖標(biāo)則代表了收藏。在豆瓣中心型圖標(biāo)代表了想看，一顆星星代表了看過，多顆星星代表了評分。因此在繪制使用圖標(biāo)的過程中要注意結(jié)合圖標(biāo)的使用場景，及操作，不要使用含義沖突的圖標(biāo)，如果出現(xiàn)與用戶預(yù)測有模糊的情況，建議還是需要加上文字說明。

3）不要重新定義圖標(biāo)的含義

在繪制圖標(biāo)的過程中，不要賦予用戶已經(jīng)熟悉默認(rèn)的圖標(biāo)新的意義，當(dāng)用戶看到某個(gè)圖形時(shí)，心里會(huì)有對應(yīng)的預(yù)期隱喻，但圖標(biāo)的意義與用戶的認(rèn)知形成沖突時(shí)，用戶會(huì)對圖標(biāo)的意義產(chǎn)生懷疑，影響使用。

4）5秒原則測試圖標(biāo)含義

當(dāng)我們繪制了新的圖標(biāo)時(shí)，建議使用5秒原則測試圖標(biāo)是否可行。5秒測試是一種用戶研究的方法，用戶打開一個(gè)頁面后，在決定留下還是離開前，會(huì)花大約10秒的時(shí)間來評估一個(gè)網(wǎng)站，而會(huì)有50毫秒的時(shí)間用戶會(huì)留下對整個(gè)頁面的視覺印象。也就是說5秒測試是捕捉人機(jī)交互的最初時(shí)刻，而顏色、圖標(biāo)等設(shè)計(jì)元素會(huì)影響用戶形成的第一印象，并伴隨影響用戶與界面交互的整個(gè)過程。

5秒測試可以幫助衡量用戶在查看圖標(biāo)的前5秒內(nèi)獲取了哪些信息以及他們獲得的印象。當(dāng)一個(gè)圖標(biāo)需要用戶花費(fèi)5秒以上的時(shí)間思考其含義的時(shí)候，則表示這個(gè)圖標(biāo)在傳達(dá)信息速度方面存在問題。要避免在繪制圖標(biāo)過程中出現(xiàn)“用戶每天使用我的應(yīng)用，一定能夠明白圖標(biāo)的含義”這類的想法。大家可以通過Five Second Test網(wǎng)站可以幫助大家自行建立5秒測試。

5）圖標(biāo)的可擴(kuò)展性

圖標(biāo)在不同的使用場景中，大小需求也會(huì)不一樣，當(dāng)在最小尺寸15X15像素的條件下，如果圖標(biāo)的內(nèi)容細(xì)節(jié)過多，反而會(huì)影響圖標(biāo)的識別度。因此當(dāng)繪制圖標(biāo)時(shí)，一定要注意圖標(biāo)在不同場場景中的尺寸大小。

6) 是否需要文字標(biāo)簽

圖標(biāo)的目的是為了使用戶快速識別信息并引導(dǎo)用戶進(jìn)行操作，當(dāng)單獨(dú)出現(xiàn)的圖標(biāo)不能讓用戶快速的明白背后的隱喻時(shí)，或者在用戶理解時(shí)存在爭議時(shí)，就需要考慮是否需要使用圖標(biāo)+文字的形式。

比如小黑盒的底部圖標(biāo)沒有辦法使用圖標(biāo)傳達(dá)信息，這個(gè)時(shí)候就需要文字說明，來傳遞信息?；蛘呔〇|金融中的「分期」以及「花生社區(qū)」中的圖標(biāo)容易混淆傳達(dá)意義時(shí)，也需要添加相關(guān)的文案說明。

而小黑盒以及京東金融兩個(gè)應(yīng)用頭部的信息、搜索、擴(kuò)展應(yīng)用的圖標(biāo)已經(jīng)是大眾熟悉的通用圖標(biāo)，并不會(huì)造成干擾，特別是不同圖形的信息圖標(biāo)。而MOO音樂的整個(gè)底部導(dǎo)航都沒有使用文字說明的情況下由于使用的都是通用圖標(biāo)，因此并不會(huì)影響用戶的使用。

2. 是否與其他圖標(biāo)統(tǒng)一？

繪制完成一個(gè)完美的圖標(biāo)很容易，但如果要繪制一組圖標(biāo)時(shí)，困難程度卻會(huì)幾何遞增。只有圖標(biāo)是統(tǒng)一且美觀的，一套圖標(biāo)才能成為一種語言，傳達(dá)設(shè)計(jì)的內(nèi)核。

1）視覺大小統(tǒng)一

我們在繪制一套圖標(biāo)的時(shí)候經(jīng)常會(huì)被說大小不統(tǒng)一，但實(shí)際度量的時(shí)候，我們會(huì)發(fā)現(xiàn)所有的度量數(shù)據(jù)都是一樣的。這是因?yàn)殡m然圖標(biāo)的物理大小是相同的，但由于人眼感知物體的大小和比例，并不一定等于其像素大小或面積。一般來說相同大小的正方形從視覺上來看要大于圓形，菱形、三角形與相同大小的方形對比，從視覺上也明顯小于同樣大小的方形。因此為了保證視覺上的重量相同，菱形、三角形、圓形應(yīng)該更寬、更高。

面對這種情況，我們需要借助圖標(biāo)網(wǎng)格（keyline線）來幫助我們統(tǒng)一圖標(biāo)的視覺大小。關(guān)于視覺大小與物理大小的區(qū)別以及圖標(biāo)網(wǎng)格（keyline線）的繪制方法在關(guān)于圖標(biāo)的第二篇《圖標(biāo)設(shè)計(jì)詳解（二）——圖標(biāo)屬性》中有詳細(xì)的說明，有興趣的同學(xué)請點(diǎn)擊個(gè)人主頁進(jìn)行查看，本文中就不重復(fù)說明了。

案例說明：

下圖中Before的首頁圖標(biāo)視覺大小小于其他幾個(gè)圖標(biāo)，但物理大小確實(shí)是一樣的，修改后的首頁圖標(biāo)視覺大小方面更加統(tǒng)一。

2）視覺語言統(tǒng)一

一致的設(shè)計(jì)語言可以使用戶明白這些圖標(biāo)具有同樣的重要性及狀態(tài)。設(shè)計(jì)語言包括了線面類型、描邊粗細(xì)、圓角大小、角度、負(fù)空間比例。關(guān)于圖標(biāo)視覺語言設(shè)計(jì)屬性在圖標(biāo)的第二篇《圖標(biāo)設(shè)計(jì)詳解（二）——圖標(biāo)屬性》中有詳細(xì)的概念說明，本篇文章以案例為主進(jìn)行主題講解。

① 線面風(fēng)格統(tǒng)一

在繪制圖標(biāo)過程中會(huì)出現(xiàn)如下圖中一組線性圖標(biāo)中突然出現(xiàn)某個(gè)面性圖標(biāo)的情況，這種除了視覺語言不一樣以外，從視覺重量來說也是不統(tǒng)一的。在繪制的過程中一定要注意線面屬性的統(tǒng)一，如果出現(xiàn)線面結(jié)合的設(shè)計(jì)，也需要所有圖標(biāo)統(tǒng)一為線面結(jié)合的設(shè)計(jì)風(fēng)格。

另一種情況是面對畫面中有「…」元素時(shí)，在變成面性與線性設(shè)計(jì)時(shí)會(huì)出現(xiàn)下圖中的情況，但實(shí)際面對這樣的情況，不需要將「…」變?yōu)槊柽叺那闆r。

② 描邊粗細(xì)

在繪制描邊圖標(biāo)時(shí)，要時(shí)刻注意圖標(biāo)的描邊粗細(xì)是否統(tǒng)一。如下圖中的左邊圖標(biāo)，當(dāng)描邊粗細(xì)不一致時(shí)，會(huì)很明顯感覺圖標(biāo)視覺重量的不統(tǒng)一以及視覺風(fēng)格的差異化。

③ 圓角的統(tǒng)一

繪制圖標(biāo)過程中除了沒有注意到圖標(biāo)外部的圓角，也會(huì)忽略圖標(biāo)拐角處的圓角大小，以及圖標(biāo)內(nèi)容拐角的直角。如下圖中的第二個(gè)圖標(biāo)中代表山的折角，以及第四個(gè)圖標(biāo)。在繪制過程中圓角大小的統(tǒng)一不僅指物理上的數(shù)據(jù)統(tǒng)一，更多的是指視覺上的統(tǒng)一。圖形較小時(shí)，需要考慮圓角角度也要相應(yīng)變小，比如after中的第四個(gè)圖標(biāo)，左右兩邊的矩形小于中間的矩形，但為了視覺上圓角的統(tǒng)一，需要適當(dāng)調(diào)小兩邊矩形圓角的度數(shù)。

④ 角度的統(tǒng)一

我們在說角度統(tǒng)一時(shí)，除了傾斜角度的統(tǒng)一外，還有另一個(gè)容易被忽視的角度問題，即視覺角度。常見的角度問題一種是二維與三維角度圖標(biāo)混用如下圖的第四個(gè)圖標(biāo)；以及正視圖標(biāo)與側(cè)視圖標(biāo)混用如下圖的第一個(gè)圖標(biāo)（關(guān)于傾斜角度的說明及示例請查看圖標(biāo)的第二篇《圖標(biāo)設(shè)計(jì)詳解（二）——圖標(biāo)屬性》）。

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

圖標(biāo)的繪制過程中，往往會(huì)忽略圖標(biāo)內(nèi)部空間的統(tǒng)一，繪制完成的圖標(biāo)會(huì)因?yàn)閮?nèi)部結(jié)構(gòu)的大小不同，導(dǎo)致視覺重量以及圖標(biāo)的內(nèi)部結(jié)構(gòu)不統(tǒng)一。

3）復(fù)雜程度統(tǒng)一
設(shè)計(jì)過程中確定圖標(biāo)風(fēng)格一致的基礎(chǔ)上，注意保證圖標(biāo)內(nèi)部細(xì)節(jié)的一致性，從視覺復(fù)雜程度保證視覺重量以及設(shè)計(jì)細(xì)節(jié)的統(tǒng)一。

4）設(shè)計(jì)風(fēng)格統(tǒng)一

確保圖標(biāo)使用的圖標(biāo)樣式統(tǒng)一或至少相似。常用的設(shè)計(jì)手法有透明度、投影、漸變樣式等等，設(shè)計(jì)的過程中設(shè)計(jì)師需要一直謹(jǐn)記這些規(guī)則保證一套圖標(biāo)的統(tǒng)一性。比如斷點(diǎn)樣式圖標(biāo)是我們常見的圖標(biāo)風(fēng)格樣式，在設(shè)計(jì)時(shí)如果確定要使用斷點(diǎn)樣式，則要保證所有圖標(biāo)的某一處都是要有斷點(diǎn)。

5）顏色統(tǒng)一

在繪制圖標(biāo)時(shí)需要注意所有圖標(biāo)的色調(diào)保持統(tǒng)一，包括色相、明度、飽和度等，如果使用純色漸變或撞色漸變則應(yīng)該都使用同樣的色調(diào)形式。如果你沒有辦法控制很好的對多種顏色進(jìn)行搭配則建議使用兩到五種顏色。

同時(shí)也要注意用戶對某一含義的圖標(biāo)預(yù)設(shè)的顏色預(yù)期，比如藍(lán)色象征了安靜，另一方面也代表了安全、專業(yè)、穩(wěn)定；紅色代表了斗志，也象征了激情、熱鬧、喜愛；黃色代表向上的精神，溫暖的感覺。當(dāng)然如果有品牌vi，盡量使用品牌色進(jìn)行整個(gè)圖標(biāo)顏色的延展。

使用正確的顏色會(huì)使圖標(biāo)看起來更有凝聚力和時(shí)尚感，并且能使用戶在圖標(biāo)的顏色方面讀取圖標(biāo)要傳遞的信息。

3. 圖標(biāo)是風(fēng)具有品牌辨識度？

在滿足了圖標(biāo)的識別性與統(tǒng)一性后，為了能與其他圖標(biāo)區(qū)分開，我們需要從視覺上增加圖標(biāo)的獨(dú)特性以及表現(xiàn)力。但圖標(biāo)的獨(dú)特并不意味著要犧牲圖標(biāo)的表現(xiàn)隱喻，使得圖標(biāo)難易理解。品牌元素的使用，會(huì)使圖標(biāo)具備視覺獨(dú)特性的同時(shí)增加整個(gè)界面的品牌辨識度。另一方面品牌傳播需要不斷對品牌特點(diǎn)進(jìn)行重復(fù)使用才能讓用戶熟悉品牌調(diào)性，UI界面的tabber作為主要來區(qū)分不同產(chǎn)品層級及框架的存在，很多應(yīng)用都選擇在tabber的圖標(biāo)中著重品牌元素的使用。

1）提取品牌顏色

顏色感受是用戶在使用過程中對應(yīng)用最直觀的感受，甚至在沒有看清文字或者內(nèi)容時(shí)，品牌色已經(jīng)在用戶心中留下對產(chǎn)品的第一影響。圖標(biāo)品牌化時(shí)，可以直接使用品牌色使圖標(biāo)選中狀態(tài)突出，比如Reads中的選中狀態(tài)；也可以類似叮咚買菜中的使用方式，加入品牌漸變色的背景來突出圖標(biāo)的選中狀態(tài)；也可以使用類似京東的方式，將選中狀態(tài)下的圖標(biāo)改為面性圖標(biāo)，并使用品牌色進(jìn)行填充。

2）提取品牌圖形

品牌logo作為品牌最初的基本形象，是最被用戶熟悉及記憶點(diǎn)的圖形，在繪制一整套的圖標(biāo)時(shí)可以在圖標(biāo)中加入logo的元素增加圖標(biāo)的特殊性及品牌識別度。首頁作為整個(gè)應(yīng)用的功能集合展示頁同時(shí)也是用戶進(jìn)入應(yīng)用后看到的第一個(gè)頁面，面對很多應(yīng)用同質(zhì)化嚴(yán)重的小房子圖標(biāo)設(shè)計(jì)，可以采用提取logo形狀，放置于小房子的組合方式，比如多點(diǎn)app；另一方面也可以將logo直接作為首頁圖標(biāo)使用，比如淘寶、nice等應(yīng)用的設(shè)計(jì)方式。

個(gè)人中心作為應(yīng)用中的常見功能，圖標(biāo)表現(xiàn)也面臨同質(zhì)化嚴(yán)重的問題，常見的比如淘寶或nice的設(shè)計(jì)表現(xiàn)形式。多點(diǎn)app的個(gè)人中心則使用與自己logo類似的水滴形的表現(xiàn)形式與其他圖標(biāo)區(qū)分；盒馬與易車因?yàn)閘ogo中使用了自己的IP形象，則使用IP形象作為首頁及個(gè)人中心的圖標(biāo)形式。

首頁、個(gè)人中心圖標(biāo)在設(shè)計(jì)過程中可以考慮直接使用logo作為圖標(biāo)表現(xiàn)，如果產(chǎn)品有IP形象的話也可以考慮IP形象作為圖標(biāo)的使用，不僅增加的圖標(biāo)的特殊性與品牌感，同時(shí)也增加了品牌的親和力。

3）提取設(shè)計(jì)語言

除了對logo的使用外，需要對logo的設(shè)計(jì)細(xì)節(jié)進(jìn)行觀察及整理，提取可以使用的設(shè)計(jì)語言復(fù)用在圖標(biāo)的設(shè)計(jì)中，比如logo相對圓潤的粗線條，圖標(biāo)的角度傾斜、多色的使用等等。

貝殼找房應(yīng)用的logo中象征屋頂及屋身的半圓形并沒有形成閉合，因此在貝殼找房的圖標(biāo)中全部采用斷點(diǎn)的設(shè)計(jì)方式，而線條方面也采用較粗的線條；盯潮的tabber圖標(biāo)在選中狀態(tài)沿用了logo的機(jī)械故障風(fēng)格，與logo呼應(yīng)；陌陌應(yīng)用的tabber圖標(biāo)在使用圓形時(shí)，都采用了與logo的圓形相同的傾斜角度；馬蜂窩除了使用logo作為首頁圖標(biāo)，同時(shí)logo的圓弧組成部分一直貫穿所有圖標(biāo)的設(shè)計(jì)細(xì)節(jié)中。

4）提取產(chǎn)品氣質(zhì)

在進(jìn)行設(shè)計(jì)前，我們可以對整個(gè)品牌進(jìn)行風(fēng)格特征及氣質(zhì)形象的提煉，轉(zhuǎn)化為某種視覺語言，吸引產(chǎn)品的目標(biāo)用戶。

比如騰訊動(dòng)漫的內(nèi)容及用戶人群都是可愛、時(shí)尚的動(dòng)漫愛好者，他的啟動(dòng)圖標(biāo)也是可愛的蘿莉形象，因此在圖標(biāo)的整個(gè)設(shè)計(jì)屬性使用了圓潤的拐角、線條也是使用比較鈍感的粗線條，另一方面所有圖標(biāo)都增加了可愛的表情元素，使圖標(biāo)整體都非?？蓯邸⒂H人，符合產(chǎn)品整體俏皮的氣質(zhì)。

東家作為一款文玩、家具等國風(fēng)類商品的銷售平臺(tái)，為了符合自己售賣商品的風(fēng)格，圖標(biāo)是用拆解后的宋體漢字的筆畫構(gòu)成，極具東方古風(fēng)氣質(zhì)；看理想作為一款藝術(shù)、文學(xué)類博客，不同于小宇宙更娛樂化的內(nèi)容，在定位上更偏藝術(shù)性，因此在圖標(biāo)的形式及配色上也更藝術(shù)性，比如首頁使用類似穹頂?shù)耐庑?，所有圖標(biāo)使用盡量貼近方形、圓形組合的形式。

5）拆分品牌名稱

有些應(yīng)用直接拆解自己的品牌名作為tabber的圖標(biāo)使用，比如MONO就是將他的產(chǎn)品名字作為對應(yīng)產(chǎn)品模塊的圖標(biāo)使用，可能你會(huì)疑惑這樣的圖標(biāo)其實(shí)并沒有起到圖標(biāo)傳達(dá)信息的作用，是的因?yàn)樵贛ONO的tabber圖標(biāo)采用的圖文結(jié)合的形式。

因此這里的品牌名形式的圖標(biāo)更多的是作為一種品牌傳播去使用，而真正作為tabber分類說明的則是底部的文字，沒有任何圖標(biāo)說明的準(zhǔn)確性能高于文字。MONO是一款針對年輕人的內(nèi)容類產(chǎn)品，這款應(yīng)用的這一設(shè)計(jì)方式對于追求特色的年輕人，不但不會(huì)覺得奇怪，反而會(huì)對這樣的設(shè)計(jì)津津樂道。

6）對品牌展開聯(lián)想

由于各大產(chǎn)品同類產(chǎn)品功能同質(zhì)化，圖標(biāo)的隱喻表現(xiàn)也同質(zhì)化嚴(yán)重，但還是不乏設(shè)計(jì)師新奇的思維設(shè)計(jì)出有趣且具有品牌性的圖標(biāo)，比如多抓魚的賣東西圖標(biāo)，多抓魚的IP形象是條魚，而賣東西則使用貓抓遞錢的形象，與其他商城等圖標(biāo)不同的同時(shí)也與多抓魚的IP產(chǎn)生聯(lián)想，增加了趣味；之前的馬蜂窩的首頁雖然也是房子的概念，但基于馬蜂窩的品牌名，使用的是代表蜜蜂蜂巢的六邊形，準(zhǔn)確傳遞信息的同時(shí)，與品牌產(chǎn)生間接聯(lián)想，別具設(shè)計(jì)感。

在設(shè)計(jì)圖標(biāo)的過程中想要與其他產(chǎn)品的同樣功能圖標(biāo)拉開差距，需要我們不斷深入研究品牌的視覺規(guī)范，賦予圖標(biāo)品牌基因，才能做到圖標(biāo)的獨(dú)特性與設(shè)計(jì)感。

4. 圖標(biāo)是否簡潔、美觀？

當(dāng)所有的圖標(biāo)完成設(shè)計(jì)后，需要最后放在一起進(jìn)行整體的調(diào)整及優(yōu)化，這時(shí)候我們需要觀察是否所有的圖標(biāo)都足夠的清晰、簡潔與美觀。如果其中的某一個(gè)圖標(biāo)不符合時(shí)，需要根據(jù)實(shí)際情況進(jìn)行調(diào)整或重新設(shè)計(jì)。

1960年美國海軍提出“大多數(shù)系統(tǒng)如果保持簡單而不是復(fù)雜，則效果最佳”，這就是傳說中的kiss原則。設(shè)計(jì)的簡潔應(yīng)該是設(shè)計(jì)的主要目標(biāo)，并且應(yīng)該避免不必要的復(fù)雜性。同樣的極簡主義中也一直強(qiáng)調(diào)的“達(dá)到完美的目標(biāo)不是沒有剩余可添加的東西，而是沒有剩余可去的東西”。在圖標(biāo)完成最終前，需要對照以下兩個(gè)原則，確保當(dāng)前圖標(biāo)已經(jīng)沒有可以刪減的部分。

1）圖標(biāo)的顏色數(shù)量

圖標(biāo)使用的顏色不超過3-5種，保證圖標(biāo)顏色的干凈簡潔。

2）圖標(biāo)的細(xì)節(jié)數(shù)量

圖標(biāo)設(shè)計(jì)細(xì)節(jié)只需要保留關(guān)鍵的設(shè)計(jì)特征，其他裝飾性的細(xì)節(jié)則應(yīng)盡可能的去除。

3）避免細(xì)節(jié)重復(fù)

如下圖中當(dāng)某個(gè)元素出現(xiàn)在一個(gè)圖標(biāo)上似乎沒有什么問題，但當(dāng)這個(gè)元素出現(xiàn)在一套圖標(biāo)的絕大部分圖標(biāo)上時(shí)，這一元素就會(huì)成為重復(fù)細(xì)節(jié)，對用戶的注意力造成干擾，刪掉他們，減少對用戶視覺的干擾。

最后一定要確認(rèn)所有的圖標(biāo)都是簡潔、美觀的，才是完成了對圖標(biāo)的繪制。

四、圖標(biāo)的可用性測試

圖標(biāo)繪制完成后為了確認(rèn)用戶在使用過程中能夠快速的理解圖標(biāo)的含義及目的，我們需要在產(chǎn)品開發(fā)期間的各個(gè)階段對圖標(biāo)進(jìn)行多種類型的測試。

1. 圖標(biāo)可用性測試的標(biāo)準(zhǔn)

參考圖標(biāo)的設(shè)計(jì)原則我們得到圖標(biāo)可用性測試的原則標(biāo)準(zhǔn)：

1. 識別度：用戶是否能夠理解圖標(biāo)的含義？是否是用戶熟悉的圖標(biāo)？是否與其他圖標(biāo)含義沖突？是否能通過5秒原則？圖標(biāo)的可擴(kuò)展性怎么樣？是否需要增加文字標(biāo)簽？
2. 設(shè)計(jì)是否統(tǒng)一：視覺大小是否統(tǒng)一？視覺語言是否統(tǒng)一？圖標(biāo)的設(shè)計(jì)復(fù)雜程度是否統(tǒng)一？整體設(shè)計(jì)是否協(xié)調(diào)、統(tǒng)一、視覺體系高度集中？圖標(biāo)整體配色是否統(tǒng)一？
3. 品牌信息：圖標(biāo)是否獨(dú)特性、能否傳遞品牌信息？
4. 簡潔：圖標(biāo)是否簡潔、美觀，沒有多余的細(xì)節(jié)？

對照圖標(biāo)設(shè)計(jì)原則進(jìn)行測試，當(dāng)符合這些標(biāo)準(zhǔn)時(shí)，才能成為一個(gè)合格的圖標(biāo)。如果出現(xiàn)不符合要求的圖標(biāo)，需要考慮怎樣進(jìn)行設(shè)計(jì)完善及修改。

2. 圖標(biāo)可用性測試的方法

圖標(biāo)可用性測試的主要有兩種：獨(dú)立于頁面之外進(jìn)行測試以及放置頁面中進(jìn)行整體頁面的測試。

當(dāng)需要測試圖標(biāo)的識別性時(shí)，需要將圖標(biāo)放置在頁面之外，看在沒有頁面信息及文本標(biāo)簽時(shí)，用戶能否理解圖標(biāo)的意思及背后代表的交互意義。如果用戶猜測與圖標(biāo)要表達(dá)的內(nèi)容無關(guān)，則需要考慮重新進(jìn)行設(shè)計(jì)。

你可能認(rèn)為有文本標(biāo)簽的圖標(biāo)，文本標(biāo)簽可以引導(dǎo)用戶圖標(biāo)的操作，雖然會(huì)有類似MONO應(yīng)用標(biāo)簽的情況，但這種情況并不提倡，因?yàn)橛脩粼趯?shí)際使用時(shí)會(huì)忽略文本標(biāo)簽而只看到圖標(biāo)。因此還是建議，在圖標(biāo)的識別性測試方面使用不帶文本標(biāo)簽的測試環(huán)境。

設(shè)計(jì)統(tǒng)一性則建議放置在頁面中進(jìn)行測試，圖標(biāo)顯示在他的使用環(huán)境——完整界面。可以確定整個(gè)圖標(biāo)的設(shè)計(jì)是否與整個(gè)頁面的設(shè)計(jì)和諧、統(tǒng)一。另一方面放置完整頁面也可以觀察圖標(biāo)在整個(gè)頁面中時(shí)能否容易被用戶找到的，或某個(gè)特定功能對應(yīng)的圖標(biāo)能否被用戶找到。

A/B測試也是不錯(cuò)的測試圖標(biāo)可用性的方式。通過圖標(biāo)的A/B測試，一定比例的用戶可以看到頁面上的一個(gè)版本的圖標(biāo)，而另外一定比例的用戶可以看到另一個(gè)版本。可以通過衡量兩個(gè)圖標(biāo)版本之間的交互率差異性，或者用戶是否由于點(diǎn)擊圖標(biāo)后失望、困惑點(diǎn)擊返回原始頁面來測試圖標(biāo)傳遞的信息是否精確、符合用戶的心里預(yù)期。A/B測試時(shí)，請確保兩版圖標(biāo)的位置、大小及標(biāo)簽相同，保證沒有其他的變量影響用戶發(fā)生行為變化。

五、圖標(biāo)的交付

圖標(biāo)繪制完成測試過程中或完成測試后，需要交付給前端或其他同事。

一般情況下有JPG、PNG、GIF、SVG四種交付格式。其中JPG、PNG、GIF為位圖，受圖片本身的分辨率大小限制，無法靈活的修改尺寸。而SVG為矢量格式，支撐無損縮放。

在沒有SVG前因?yàn)橐紤]到適配高清設(shè)備，需要切各種倍數(shù)的圖標(biāo)進(jìn)行適配。不過現(xiàn)在的開發(fā)軟件及插件都自帶切多倍圖的功能，比如藍(lán)湖。

• JPG：兼容性強(qiáng)，自帶背景，不支持縮放。
• PNG：支撐透明格式，不支持縮放，需要注意圖標(biāo)四周透明區(qū)域大小。
• GIF：簡單的動(dòng)態(tài)圖標(biāo)使用，透明背景時(shí)邊緣會(huì)有鋸齒，沒有辦法支持豐富的顏色。
• SVG：無損縮放矢量圖形、體積小，單色模式下支持開發(fā)自行修改顏色，可修改樣式參數(shù)。

另外一種交付方式是將SVG格式的圖標(biāo)上傳至類似iconfont的網(wǎng)站后，完成圖標(biāo)的交付。需要注意的是：

• SVG不支持漸變顏色填充。
• SVG不支持描邊，需要將描邊轉(zhuǎn)化為閉合圖像。
• 希望圖標(biāo)的大小相同時(shí)，需要在圖標(biāo)下方增加一個(gè)相同尺寸的透明方形，同圖標(biāo)一起導(dǎo)出。

而iconfont對于圖標(biāo)制作要求更加嚴(yán)格，如下圖所示，上傳時(shí)需要注意查看自己的圖標(biāo)是否符合要求。

以上就是圖標(biāo)設(shè)計(jì)詳解的第三篇——圖標(biāo)落地的所有內(nèi)容，關(guān)于圖標(biāo)的課題一共寫了三篇內(nèi)容，查看了絕大多數(shù)市面上的應(yīng)用，在編寫的過程中也理清了很多之前在繪制圖標(biāo)的過程中糾結(jié)不太明白的地方。

很多人也許會(huì)問為什么不寫啟動(dòng)圖標(biāo)，我個(gè)人感覺啟動(dòng)圖標(biāo)還是更偏品牌一些，之后有機(jī)會(huì)可能會(huì)在其他文章中去聊下。

希望看文章的小伙伴能夠解決關(guān)于圖標(biāo)的一點(diǎn)困惑，大家下篇文章再見。

資料來源：

• 《Icon Design Guide》
• 《Icon Utopia》
• 《the Ultimate Guide to an Interface Icon Set》
• 《7 Principles of Icon Design》
• 《svg圖標(biāo)庫以及與icon font對比》

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

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

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