icon 中的隱喻元素很重要，它可以讓我們一看到這個 icon 就知道是什么意思。比如，一個房子代表首頁，一個叉叉代表出錯或關閉。當我縮小一個 icon 時，我都會保留隱喻元素，來保證 icon 仍然可以準確傳達信息。

（3）工具圖標

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

（4）混合圖標

也就是前三種的結合，目的在于達到不同的視覺效果和應用結構。前段時間追波很流行的MBE粗描邊風格icon就是綜合圖標的產(chǎn)物，多表達設計師個人設計風格或適用某類設計感較強的軟件。

3. 基于視覺特性的分類

（1）字符圖標

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

在這類圖標設計中，比較典型的當屬天氣類圖標了。從單個圖標到組合圖標，都能充分體現(xiàn)出來。

（2）扁平圖標

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

（3）擬物化圖標

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

四、圖標的優(yōu)勢

1. 全球通用

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

2. 節(jié)約空間

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

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

3. 快速定位

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

Tik Tok和ins沒有任何文字說明情況下，我們就知道第5個標簽就是個人中心

4. 可識別，易記憶

科學證明，在大腦中相對于其他感覺來說與視覺信息處理相關的腦區(qū)占統(tǒng)治地位，人腦對于圖像的記憶遠遠高于文字。圖標多采用幾何圖形，并以對稱、一致的設計目標來進行設計，由于其高度濃縮的特性，圖標具有更加簡潔的特性，更加便于記憶。

五、圖標的繪制流程

圖標最底層邏輯：線性圖標、面型圖標、線+面型圖標、面+面型圖標、2.5D圖標、擬物圖標。網(wǎng)上五花八門的圖標是在這些基礎上進行視覺區(qū)分，而當我們設計圖標時候需要思考：

• 產(chǎn)品視覺風格定位（行業(yè)領域）
• 圖標具體應用的界面
• 產(chǎn)品面相的用戶人群是怎樣的？

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

1. 設計執(zhí)行

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

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

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

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

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

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

這里的場景可能是實際應用的場景，比如大眾點評tab標簽欄、功能區(qū)（品類區(qū)）、運營類圖標等這些圖標需要引導用戶去點擊，所以在視覺上更加豐富一些；而個人中心、分類區(qū)、詳情頁更多側重功能上的引導，相對來說較簡潔，屬于二級使用場景，線型圖標居多。

六、繪制中需要注意的點

我們常見各個圖標文章分析應該注意十幾點，而這些沒有規(guī)律和邏輯難以記憶，一時記住了也容易忘記。這些總結其實是從Material Design或者iOS規(guī)范中得來的。認真研究這些細節(jié)，圖標制作就不難了

1. 端點統(tǒng)一

圖標端點分為直角和圓角，我們在設計過程中要統(tǒng)一圖標端點，保持一致的設計語言

2. 角度統(tǒng)一

（1）拐角

相對于其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上中央凹(fovea centralis），是視網(wǎng)膜中視覺最敏銳的區(qū)域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近于圓。

圓角自身的圓形屬性會給人圓潤、可愛，更加安全、親密的感覺。因此社交、娛樂、直播、美食等圖標多會使用圓角圖標。

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

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

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

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

4. 描邊風格統(tǒng)一

在繪制描邊圖標時，要時刻注意圖標的描邊粗細是否統(tǒng)一。在 @1x 一倍圖設計模式下，以 24px 為網(wǎng)格基準的話，常使用的圖標粗細有：1px、1.5px、2px、3px，1.5的粗細對顯示屏要求比較高（半個單位的路徑會導致圖標在最終顯示時邊緣模糊，不清晰）

細描邊給人視覺感更加精致，粗描邊相對更加粗獷，由于目前流行趨勢的發(fā)展，常常也有粗描邊和細描邊結合的設計風格

5. 內(nèi)邊距

除了保持相同的視覺權重，圖標的描線寬度也應該保持一致，達到像素級統(tǒng)一。元素之間的最小間距，應該大于或等于描邊的寬度。

6. 安全邊距

蘋果、谷歌、IBM，國內(nèi)的阿里Ant Design都出過相關的圖標網(wǎng)格規(guī)范，這里以谷歌的Material System 圖標網(wǎng)格來進行說明。在24*24px圖標尺寸，上下左右安全邊距是2px，關鍵形狀的四個基本形狀為圓形20*20px、正方形18*18px、縱向矩形和橫向矩形20*16px。通過關鍵形狀的規(guī)則統(tǒng)一圖標大小及位置，達到視覺的平衡

（1）對齊像素點

清晰度（像素完美對齊）為了避免使圖標失真，可以通過將X軸和Y軸坐標設置為整數(shù)來將圖標定位在像素上。在使用軟件AI或者sketch的時候繪制基礎圖形不要出現(xiàn)小數(shù)點和奇數(shù)，多用偶數(shù)

七、圖標驗證

我們了解了 icon 的基本知識，怎樣評判我們的 icon 是否合適，是否貼合整個產(chǎn)品呢？我們需要了解什么才是一個好的 icon 。檢驗標準也是基于我們繪制的標準，分別是：識別性，規(guī)范性、整體風格與品牌感。

1. 識別性（表意準確）

判斷事物的價值在于它的用途是什么，圖標的用途是幫助用戶理解信息，所以表意準確（清晰準確的傳達信息）就是圖標最重要、最底層的價值，如果你設計的圖標用戶看不懂，即使視覺再美觀也沒有任何價值可言。

含義識別：是視覺語言是否替換文字語言，簡言之就是讓你的圖標可以被用戶理解，不會讓用戶產(chǎn)生歧義。常見的就標簽欄指南針表示發(fā)現(xiàn)，房子表示首頁等

視覺識別：是圖標的大小，顏色，線條的粗細，這些影響影響視覺識別的因素，在具體樣式中提高視覺識別性。

花瓣和 V LIVE 標簽欄沒有文字說明，這時候其含義識別非常重要

2. 規(guī)范性

我們要保證圖標在視覺大小的一致性，圖標飽滿度（正負形）、遵循同一種規(guī)律，細節(jié)統(tǒng)一性。這里的4點在前面繪制過程中已經(jīng)寫的非常詳細了。

3. 整體風格

整體風格是要注意圖標傳達的性格與 app 的基調(diào)是否一致，每個產(chǎn)品因為定位，針對人群不同，整個 app 的基調(diào)也不一樣，例如騰訊動漫，它的性格就是偏卡通可愛的類型，那么的圖標設計上也要體現(xiàn)這個性格特點，盡量使用卡通圓潤的方法去設計。一個廣告語：復雜世界里，一個就夠了，整個APP從啟動圖標到整體調(diào)性都是簡潔干凈，克制的色彩運用傳達產(chǎn)品調(diào)性。

4. 品牌感

品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產(chǎn)品獨特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。下面幾款產(chǎn)品從產(chǎn)品名到啟動圖標設計高度融合。

八、圖標可用性測試

圖標可用性測試是基本規(guī)則是根據(jù)圖標驗證推導的

1. 識別度

• 用戶是否能夠理解圖標的含義？
• 是否是用戶熟悉的圖標？
• 是否與其他圖標含義沖突？
• 是否能通過5秒原則？
• 圖標的可擴展性怎么樣？
• 是否需要增加文字標簽？

2. 設計是否統(tǒng)一

• 視覺語言是否統(tǒng)一？
• 圖標的設計復雜程度是否統(tǒng)一？
• 整體設計是否協(xié)調(diào)、統(tǒng)一、視覺體系高度集中？
• 圖標整體配色是否統(tǒng)一？

3. 品牌信息

• 圖標是否獨特性、能否傳遞品牌信息？

九、圖標的交付

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

在沒有SVG前因為要考慮到適配高清設備，需要切各種倍數(shù)的圖標進行適配。不過現(xiàn)在的開發(fā)軟件及插件都自帶切多倍圖的功能，比如藍湖。另外交付方式是將SVG格式時，圖標上傳至類似iconfont的網(wǎng)站后，完成圖標的交付。需要注意的是：

• SVG不支持漸變顏色填充
• SVG不支持描邊，需要將描邊轉化為閉合圖像
• 圖標的大小相同時，需要在圖標下方增加一個相同尺寸的透明方形，同圖標一起導出上傳

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

資料來源：

• 圖像學的簡要歷史
• 主流界面設計語言的變革
• 《Icon Design Guide》
• 《Icon Utopia》
• 《the Ultimate Guide to an Interface Icon Set》
• 《svg圖標庫以及與icon font對比》
• Icon Grids Keylines Demystified

本文由 @見賢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

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