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

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

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

一、圖標的繪制流程

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

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

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

2. 符號及形象化

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

3. 場景需求梳理

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

4. 確認設(shè)計風(fēng)格

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

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

1）iconfont

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

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

2）IconPark

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

3）Radix Icons

由Modulz團隊設(shè)計的一組清晰的15X15的圖標。所有的圖標都可以作為單獨的React組件使用。

4）Flump

色彩繽紛的3D圖標，讓你的macOS更酷，不是免費的。

5）Streamline

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

6）Iconduck

118,894個免費的開源圖標和插圖，可直接下載試用。

7）Ikonate

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

8）Shorticons

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

9）Line Awesome

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

10）lineicons

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

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

二、圖標的繪制方式

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

1. 布爾運算

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

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

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

需要注意的是，布爾運算的建立需要滿足兩個條件：

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

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

2. 貝塞爾曲線

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

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

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

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

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

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

三、圖標的設(shè)計原則

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

1. 圖標是否易于理解？

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

1）使用用戶熟悉的圖標

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

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

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

2）不要使用含義沖突的圖標

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

3）不要重新定義圖標的含義

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

4）5秒原則測試圖標含義

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

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

5）圖標的可擴展性

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

6) 是否需要文字標簽

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

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

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

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

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

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

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

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

案例說明：

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

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

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

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

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

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

② 描邊粗細

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

③ 圓角的統(tǒng)一

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

④ 角度的統(tǒng)一

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

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

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

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

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

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

5）顏色統(tǒng)一

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

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

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

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

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

1）提取品牌顏色

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

2）提取品牌圖形

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

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

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

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

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

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

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

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

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

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

5）拆分品牌名稱

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

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

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

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

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

4. 圖標是否簡潔、美觀？

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

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

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

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

2）圖標的細節(jié)數(shù)量

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

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

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

最后一定要確認所有的圖標都是簡潔、美觀的，才是完成了對圖標的繪制。

四、圖標的可用性測試

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

1. 圖標可用性測試的標準

參考圖標的設(shè)計原則我們得到圖標可用性測試的原則標準：

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

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

2. 圖標可用性測試的方法

圖標可用性測試的主要有兩種：獨立于頁面之外進行測試以及放置頁面中進行整體頁面的測試。

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

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

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

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

五、圖標的交付

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

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

在沒有SVG前因為要考慮到適配高清設(shè)備，需要切各種倍數(shù)的圖標進行適配。不過現(xiàn)在的開發(fā)軟件及插件都自帶切多倍圖的功能，比如藍湖。

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

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

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

而iconfont對于圖標制作要求更加嚴格，如下圖所示，上傳時需要注意查看自己的圖標是否符合要求。

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

很多人也許會問為什么不寫啟動圖標，我個人感覺啟動圖標還是更偏品牌一些，之后有機會可能會在其他文章中去聊下。

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

資料來源：

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

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

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

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