由于最近的工作原因對圖標有了更加全方位的認識，雖然之前寫過《如何系統學習功能圖標？來看資深設計師的全面總結！（一）》、《如何繪制功能性圖標？來看資深設計師的全面總結?。ǘ?/a>、這兩篇文章，但里面還是缺少了理論依據和系統做圖標的思維。通過不斷再學習的過程中有了新的認識，希望和大家一起分享。

一、圖標設計原則

1. 表意準確

功能圖標的第一原則是表意準確，要讓用戶看到圖標第一時間就能理解它的含義。同時，功能圖標還具有通用性，符合所有用戶的使用習慣，不要試圖去改變用戶日積月累沉淀下來的記憶。微信底部的 Tab欄，已經很多年沒換過了，由于微信用戶群體龐大、機構復雜，牽一發而動全身，誰也不敢隨便的改變用戶多年積累的認知記憶?？赡軓拿烙^角度還有很大的發揮空間，但是用戶更多的會認為，熟悉的就是最好的。

而愛心圖標在用戶的認知里更多的是喜歡，當朋友在微信朋友圈發了照片或更新動態，點擊愛心來表達自己的喜歡。

2. 可預見性

預見性是指人對事物發展的預判和前瞻，而人對功能圖標預見性的強弱取決于用戶對該圖標的認知強弱，當我們把繪制好的圖標放入頁面時我們要考慮用戶是否可以很快的找到該圖標？當用戶找到該圖標時，用戶是否會很快的理解圖標代表什么意思？當用戶在點擊圖標前是否已經大約預測到點擊該圖標后的界面大體樣式或內容？

根據上圖的 icon 我們可以預測這是一款音樂類app 的圖標，因為圖標有明顯的音符和音樂播放按鈕等。

根據上圖的 icon 我們可以預測這是一款購物電商類app 的圖標，因為圖標中有分類查找和購物車圖標。

上圖中當前顯示頁面為店鋪頁面，當我們看到客服圖標時能大體的想象到點擊客服圖標會跳轉到聊天工具的頁面，這就是圖標的可預見性。

3. 統一性

大小的統一

圖標的主流尺寸有16x16，24x24，32x32，48x48，64x64，96x96，128x128，192x192，256x256，512x512，1024x1024…

偶數規則

元素周期表中相鄰的兩元素，原子序數為偶數的，其在地殼中的平均含量常大于奇數元素的含量。對于同一元素而言，質量數為偶數的同位素，在地殼中的平均含量大于相鄰奇數同位素的平均含量。這是人們根據實際數據的分析，經驗歸納而得出的元素和同位素在地殼中的分布規則之一，稱為偶數規則。UI界面設計對于偶數原則基本保持一致態度。

在圖標設計中主要就是兩種聲音，4的倍數和8的倍數。4、8之間的爭斗不僅體現在圖標尺寸的規范上也體現在柵格系統的規范制定中。那么怎么根據強有力的依據去決定到底是用4的倍數還是8的倍數呢？換言之就是到底用 iOS 的規范還是用 Material design 的規范？

iOS的規范4的倍數

iPhone 上最小的點擊區域，官方推薦是44px×44px。

為什么 iOS 的規范是4的倍數？因為蘋果改變了游戲的規則，以前大家一起玩耍的時候都用 px 物理像素（physical pixel）來定義尺寸大小的，突然蘋果推出 retina屏幕改變了普通屏幕的物理尺寸。在不同的屏幕上（普通屏幕 vs retina屏幕），css像素所呈現的大?。ㄎ锢沓叽纾┦且恢碌?，不同的是1個 css像素所對應的物理像素個數是不一致的。

在普通屏幕下，1個 css像素對應1個物理像素（1:1）。

在 retina屏幕下，1個 css像素對應4個物理像素（1:4）。

Material design的規范8點網格

Material design 建立8點為一個單位的網格，所有的元素尺寸都是8的倍數。有些屏幕會很難調整適應這個系統，比如 iPhone6開始的375×667尺寸。但是解決方法也很簡單，保持填充和空隙（padding & margin）的尺寸統一遵循規則，剩余的空間可以用塊狀的元素來填充。有一些元素的尺寸是奇數的也沒關系，只要他們能讓整體遵守這套規則就好。

數字8拆解分析

• 加減法：2+2+2+2=8 2+3+3=8 2+6=8 3+5=8 4+4=8
• 乘除法：2×4=8
• 次方：2的3次方等于8
• 比例關系：2/8=1/4 3/8 4/8=1/2 5/8 6/8=3/4

黃金螺旋線/斐波那契數列

斐波那契數列（FibonacciSequence）是這樣一個數列1、1、2、3、5、8…

在數學上，斐波那契數列是以遞歸的方法來定義：

F0=1

F1=1

Fn=F(n-1)+F(n-2)

(n>=2，n∈N*)

為什么谷歌的 Material design 和 Ant design 都是8點一個單位的網格，根據我上面的一些數學方法的推理，斐波那契數列中數字1/2/3/5/8占了很大的比重。舉個例子2+6=8，可以繼續拆解成1+3+1+3=8，但是2:6=1:3；同理2×4=8，但是2:4=1:2，里面細拆數字都符合斐波那契數列，符合斐波那契數列意味著就符合了黃金分割比。突然感覺數字8很像娛樂圈的影視明星，本來家境好自身條件也好就自帶光環。

最后得出的結論就是8的倍數為主，4的倍數為輔；除非你設計的 app 只需要適配 iOS系統可以使用4的倍數，當既要適配 iOS系統又要適配安卓系統時，且沒有設計兩套界面，8的倍數是最好的選擇。

顏色統一

圖標在選取顏色的時候盡量不要超過4種顏色，且每個圖標的配色需要根據對應的行業背景進行選擇，利用色彩心理學，比如紅色可使用在美食餐飲上，橙色用在美食上多指甜美，綠色的食物多指健康綠色產品等。

風格統一

風格已經在《如何系統學習功能圖標？來看資深設計師的全面總結！》中歸納的很全了，直角圖標和圓角圖標基礎上適當添加一種符合的圖標風格；最好不要出現兩種風格相加，很容易亂，也不夠簡潔，主次不明。

在整個產品或者系統中，可以適當使用2到3種風格，不同的圖標進行差異化對待。

圖標設計規范

圓角規范：外圓角半徑-線的粗細=內圓角半徑

外圓角半徑大小，圓角半徑是整個圖標大小的十分之一左右。

圖標的物理平衡和視覺平衡

為什么我們在同樣大小的區域中繪制正方形、圓形、三角形，雖然符合了統一的物理大小規范，但是從視覺上看卻很不均衡？關于這一點 Material design 給出了很好的解決辦法，規范化的去繪制圖標。

正方形18dp*18dp ; 圓形直徑20dp大小的規范

垂直矩形20dp*16dp ; 水平矩形16dp*20dp

通過 Google系統圖標規范，繪制出來的圖標可以達到視覺平衡。

打破規則

當視覺平衡和物理平衡發生沖突時，我們應該優先選擇視覺平衡。上圖中是微信的界面圖標，仔細觀察我們發現通訊錄的圖標已經超出物理規定的大小，但是整個圖標在界面中是可以達到視覺平衡的。所以我們在繪制的過程中可以打破規則。這也是每個優秀的設計師應該具備的。

圖標網格系統

在主流的圖標繪制中，線性圖標的粗細大小有1px、2px、3px。所以我們在建立圖標網格系統是使用了8的倍數，上面已經通過對數字8拆解中得知8的倍數非常適合1px、2px、3px粗細大小的。

在二倍圖下使用48*48px的尺寸大小，在一倍圖下使用24*24px的尺寸大小來繪制圖標。

空間的呼吸感

在繪制圖標時，我們不但要確定圖標的大小，還要考慮圖標的內呼吸感，就是所謂的正負形，圖標的負空間也有規則，Material design內呼吸感以2px為基準進行繪制的。

通過字體字重感受線性圖標粗細

字體字重從細到粗會給人輕盈到沉穩的感覺，無論中文還是西文，文字越細其可讀性越強，文字越粗其視認性越高。

通過列舉線性圖標的粗細大小有1px、2px、3px、4px?？梢钥吹綀D標粗細變化給人的視覺感受也是不一樣的，具體使用多大取決于界面內容，最好的方法就是通過對比來驗證哪個粗細更適合當前界面。關于2倍尺寸下使用3px，在3倍尺寸下會變成4.5px，會出現0.5px的問題。這方面的技術已經可以實現了，當然最好使用 svg矢量格式。比如上圖的愛心圖標，弧線肯定是存在小數點問題的，所以使用 svg矢量格式是最好的選擇。

怎么畫一條0.5px的邊

比較了在高清屏上畫0.5px的幾種方法，可以通過直接設置寬高border 為0.5px、設置 box-shadow 的垂直方向的偏移量為0.5px、借助線性漸變linear-gradient、使用 transform: scaleY(0.5)的方法，使用 SVG 的方法。最后發現 SVG 的方法兼容性和效果都是最好的，所以在 viewport 是1的情況下，可以使用 SVG 畫0.5px，而如果 viewport 的縮放比例不是1的話，那么直接畫1px即可。

更詳細的請參考鏈接：《怎么畫一條0.5px的邊》

4. 層次明確

圖標具有可點擊性和標識性?？牲c擊性就會有點擊前、點擊時、點擊后三種狀態，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區分。

5. 延展性

圖標應該具有很強的延展性，好的圖標可以直接當應用圖標或者 logo 來使用。好的圖標還可以通過點線面動效變化做下拉加載動畫。

二、圖標的功能分類

按圖標功能還可以細分為動作圖標、警示圖標、內容圖標、設備圖標、文件圖標、編輯圖標、導航圖標、通知圖標、社交圖標、切換圖標等，為什么我們在設計圖標的時候很少去系統的區分，更多的原因可能是我們做的 C端產品，圖標種類和數量相對較少；當我們接觸到 B端產品，由于 B端產品的業務復雜對應的圖標數量也隨之增加。為了更好的管理圖標，需要更加詳細的設置分類。

三、圖標的命名規范

關于圖標的命名為什么要用英語正規化？因為我們用的整個系統都是基于英語開發的，設計師的業務下游主要是前端工程師，如果我們不能規范的命名每個圖標肯定會增加前端的工作量，如何提高合作效率應該也是設計師用戶體驗的范疇。英語差的打開谷歌翻譯基本沒任何的問題。

切圖命名以模塊為前綴，如：模塊_類別_功能_狀態.png

模塊：

登錄頁面（login）、公共（common）、需求a（need）、需求b（demand）、發現（discover）、消息（message）、我（me）

類別：

導航欄（nav）、菜單欄（tab）、按鈕（btn）、圖標（icon）、背景圖片（bg）、默認圖片（def）

功能：

菜單（menu）、返回（back）、關閉（close）、編輯（eidt）、消息（message）、刪除（delete）

狀態：

選中（selected）、不可點（disabled）、按下（pressed）、正常（normal）

四、圖標的制作上線

在 app產品中，以美團app 為例整個產品中圖標使用了多種風格，首頁金剛區圖標作為首頁流量分發的重要分支，在視覺上要吸引用戶的眼球做得更艷麗一點，而在標簽欄導航圖標和內頁的功能圖標需要設計得更加簡潔。我們在繪制圖標的時候，首頁金剛區復雜的圖標單獨繪制一套，其他系統需要繪制線面兩種風格。為了更好的適配頁面，方便以后更好的使用，我們在 Sketch 中使用 Symbol 系統的制作圖標。

以愛心圖標為例，我們使用 Symbol 繪制線面兩套圖標，關于圖標的配色可以添加黑白灰+主色，可以有警示的橙色/成功的綠色/刪除的紅色等，后續復制添加也很方便。

建立圖標庫和顏色庫，每次有新增的圖標和新增的顏色，只需再新增一個 Symbol 就可以很好的管理自己產品中的圖標庫了。

團隊協作

目前團隊協作按照圖標功能分類上傳到 sketch 的插件 craft，方便團隊其他成員一起使用。

設計的下游——前端開發

為了方便前端開發工作，我們需要根據上面的規范對自己的圖標進行命名。前端開發主流做法就是把圖標變成一個字體，上傳到團隊共享的 icon網站，通過輸出 svg矢量格式的圖標，讓前端開發工程師直接調用。國內主流的平臺是 iconfont，如果 sketch 制作的圖標，導出 svg格式在 illustrator 軟件里面重新安裝1024的尺寸進行繪制，上傳到項目中。所有的路徑都需要擴展成面性圖標，多色圖標不支持后期代碼修改顏色，單色圖標后期可支持自定義圖標顏色。

總結

我們在設計的過程中，隨著對設計的認知水平提高，我們的知識體系也在不斷的完善，這時候就需要我們對了解的知識進行深挖，多問自己為什么。了解背后的邏輯，這樣才會更加深刻。

歡迎關注作者的微信公眾號：「水手哥學設計」

「圖標設計學習指南」

• 《萬字干貨！設計師必須學會的圖標技巧》
• 《用四個步驟，幫你學會金剛區圖標的設計方法》
• 《騰訊設計師總結的圖標設計五維自檢法》