1.圖標設計原則

1. 含義準確

我們都知道功能圖標的第一原則就是含義準確，讓用戶第一眼看到就能明白它的含義。另外功能圖標要具有普適性，符合所有用戶的使用習慣。不要試圖去改變用戶積累下來的記憶。比如微信底部的Tab欄，多年來都沒有改變過。由于微信的用戶群非常龐大且復雜，沒有人敢去改變用戶多年積累下來的認知記憶。從審美角度來說可能還有很大的提升空間，但用戶會認為熟悉的才是最好的。

心形圖標在用戶心中代表的更多是點贊。當好友在微信朋友圈發(fā)照片或更新狀態(tài)時，用戶點擊心形圖標來表達他們的點贊。

2.可預測性

可預見性是指人們對事物發(fā)展的預測和預見性，而人們對功能性圖標的可預見性的強弱取決于用戶對圖標的認知。當我們將繪制的圖標放入頁面時，我們要考慮用戶能否快速找到這個圖標？當用戶找到圖標時，是否會快速明白圖標代表什么意思？在點擊圖標之前，用戶能否大致預測到點擊圖標后界面的大致風格或內(nèi)容？

從上圖可以明顯看出這是一個音樂應用程序，因為它包含音樂符號和播放符號！

當然，這組圖標也很好識別，一眼望去，都是購物APP，因為都有購物車！這就是圖標的可預測性。

3. 團結(jié)

3.1 尺寸統(tǒng)一

主流的圖標尺寸有16x16、24x24、32x32、48x48、64x64、96x96、、、、、……

3.2 偶數(shù)規(guī)則

偶數(shù)原則已經(jīng)成為網(wǎng)絡設計中不成文的規(guī)定。圖標設計中主要有兩種意見，4的倍數(shù)還是8的倍數(shù)？4和8的斗爭不僅體現(xiàn)在圖標尺寸的規(guī)范上，也體現(xiàn)在桑格系統(tǒng)的規(guī)范上。那么如何根據(jù)有力的證據(jù)來決定是使用4的倍數(shù)還是8的倍數(shù)？換句話說，我們應該使用iOS的規(guī)范還是iOS的規(guī)范？

3.3 iOS 規(guī)范 4 的倍數(shù)

官方推薦的最小點擊區(qū)域是44px×44px。

為什么iOS規(guī)范是4的倍數(shù)呢？因為蘋果改變了游戲規(guī)則。以前我們一起玩的時候都是用px物理像素來定義尺寸。突然蘋果推出了屏幕，改變了普通屏幕的物理尺寸。在不同的屏幕上（普通屏幕vs屏幕），CSS像素所呈現(xiàn)的尺寸（物理尺寸）是一致的，但不同之處在于1個CSS像素對應的物理像素個數(shù)不一致。

在普通屏幕上，1個CSS像素對應1個物理像素（1：1）。

在屏幕上，1個CSS像素對應4個物理像素（1：4）。

3.4、標準8點網(wǎng)格

創(chuàng)建一個 8 點網(wǎng)格，所有元素大小均為 8 的倍數(shù)。有些屏幕很難適應此系統(tǒng)，例如一開始的 375×667 尺寸，但解決方法很簡單。保持內(nèi)邊距和間距 ( & ) 大小一致并遵循規(guī)則，剩余空間可以用塊狀元素填充。如果某些元素的大小是奇數(shù)，也沒關系，只要它們使整個元素遵循規(guī)則即可。

3.5 數(shù)字 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

3.6. 黃金螺旋/斐波那契數(shù)列

斐波那契數(shù)列是數(shù)字 1、1、2、3、5、8… 的序列。

從數(shù)學上來說，斐波那契數(shù)列是遞歸定義的：

F0=1

F1=1

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

（n>=2，n∈N*）

為什么和螞蟻都以8個點為單位網(wǎng)格呢？按照我上面說的一些數(shù)學方法的推理，1/2/3/5/8這些數(shù)字在斐波那契數(shù)列中占比很大。比如2+6=8，可以進一步分解為1+3+1+3=8，但2:6=1:3；同樣，2×4=8，但2:4=1:2。細分解中的數(shù)字都符合斐波那契數(shù)列，而符合斐波那契數(shù)列就意味著符合黃金分割。突然覺得8這個數(shù)字和娛樂圈里的影視明星很像，他們家境好，條件好，所以自帶光環(huán)。

最終的結(jié)論是：8的倍數(shù)為主，4的倍數(shù)為輔；除非你設計的APP只需要適配iOS系統(tǒng)，否則使用4的倍數(shù)就可以了。當需要同時適配iOS系統(tǒng)和系統(tǒng)，沒必要分別設計兩套界面適配iOS和時，選擇8的倍數(shù)才是最好的選擇。

3.7. 顏色均勻性

在前期設計圖標的時候，盡量不要使用超過4種顏色，最好根據(jù)對應的行業(yè)背景來搭配每個圖標的顏色，運用色彩心理學，比如食品餐飲可以用紅色，食品用橙色來表示甜味，綠色代表食物，多指健康的綠色產(chǎn)品！

3.8. 統(tǒng)一風格

樣式的問題在之前的文章中已經(jīng)討論過了，這里就不再贅述了?！霸谥苯菆D標和圓角圖標的基礎上，添加合適的圖標樣式；最好不要兩種樣式一起添加，容易混淆，不夠簡潔，主次不分?！?/p>

在整個產(chǎn)品或系統(tǒng)中，可以適當使用2~3個不同風格的圖標來區(qū)分。

3.9 圖標設計規(guī)范

圓角規(guī)格

外圓角半徑 - 線厚 = 內(nèi)圓角半徑

外角半徑尺寸

圓角半徑約為整個圖標尺寸的十分之一

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

為什么我們在同樣大小的區(qū)域內(nèi)繪制正方形、圓形、三角形，符合統(tǒng)一的物理尺寸規(guī)范，但在視覺上卻看起來很不平衡呢？解決這個問題的一個好辦法就是用標準化的方式繪制圖標。

正方形18dp*18dp；圓形直徑20dp尺寸規(guī)格

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

按照系統(tǒng)圖標規(guī)范繪制的圖標可以達到視覺平衡

打破規(guī)則

當視覺平衡與物理平衡發(fā)生沖突時，我們應該優(yōu)先考慮視覺平衡。上圖是微信的界面圖標，仔細觀察會發(fā)現(xiàn)通訊錄圖標已經(jīng)超出了物理尺寸，但整個圖標在界面中可以達到視覺平衡。所以我們在繪制過程中可以打破常規(guī)。這也是每個優(yōu)秀設計師應該具備的素質(zhì)。

3.11 圖標網(wǎng)格系統(tǒng)

在主流的圖標繪制中，線性圖標的粗細一般為 1px、2px、3px，因此我們在建立圖標網(wǎng)格系統(tǒng)時，一般會采用 8 的倍數(shù)。而從上面對 8 的分析中我們得知，8 的倍數(shù)對于 1px、2px、3px 的粗細來說，是非常適合的。

對于雙倍尺寸圖像，圖標繪制尺寸為 48*48px；對于單倍尺寸圖像，圖標繪制尺寸為 24*24px。

呼吸空間

在繪制圖標的時候我們不僅要確定圖標的大小，還要考慮圖標的內(nèi)呼吸，也就是所謂的正負形。圖標的負空間也是有規(guī)律的，內(nèi)呼吸是以2px為基準來繪制的。

通過字體粗細感受線性圖標的厚度

字體粗細由細到粗，會給人一種由輕盈到沉穩(wěn)的感覺，無論是中文字還是西文字，文字越細，可讀性越強，文字越粗，可視性越高。

通過列出線性圖標的粗細，有1px、2px、3px、4px四種，可以看出圖標粗細變化的視覺感受也是不一樣的，具體粗細根據(jù)界面內(nèi)容而定，最好的辦法是通過對比來驗證哪種粗細更適合當前界面。關于在2x尺寸時使用3px，在3x尺寸時就會變成4.5px，而且還會有0.5px的問題，這個技術(shù)已經(jīng)實現(xiàn)了，當然最好使用svg矢量格式sketch導出svg圖標，比如上圖心形圖標的弧線肯定存在小數(shù)點問題，所以使用svg矢量格式是最好的選擇。

3.11. 如何繪制 0.5px 邊緣

我對比了幾種在高清屏上繪制0.5px的方法——直接設置寬高為0.5px、設置盒子垂直偏移為0.5px、使用線性漸變、使用方法：(0.5)、使用SVG。最后我發(fā)現(xiàn)SVG的方法兼容性和效果最好，所以如果比例為1，那么就可以使用SVG繪制0.5px，如果比例不為1，那么就直接繪制1px即可。

欲了解更多詳情，請參閱鏈接：

如何繪制 0.5px 邊緣

3.12 圖標網(wǎng)格系統(tǒng)

iOS 界面底部導航欄的系統(tǒng)圖標標準尺寸為 44*44px，所以我們以 44*44px 作為標準尺寸自定義系統(tǒng)圖標網(wǎng)格。我們將應用圖標內(nèi)圓提取出來并按比例縮小為 44px，并添加 44px 的方形邊框，這樣就得到了系統(tǒng)圖標的基本網(wǎng)格。

基本網(wǎng)格

制定系統(tǒng)圖標網(wǎng)格的理論基礎：

系統(tǒng)圖標的形狀有很多種，但在它們看似復雜的形狀背后，我們可以將系統(tǒng)圖標歸納為四種基本類型：圓形圖標、方形圖標、橫長圖標和豎長圖標。我們都知道，如果按照圖標的實際尺寸來設計，就會存在圖標視覺尺寸不一致的問題，那么我們應該如何解決這個問題呢？這個問題就是我們需要開發(fā)系統(tǒng)圖標網(wǎng)格系統(tǒng)的原因。

3.12.1 首先我們對比一下正方形和圓形在實際大小下的視覺大小，發(fā)現(xiàn)當實際大小為140*140px時，正方形看上去比圓形要大一些。

3.12.2 為了證明尺寸的正確性，下圖給出了輔助線和數(shù)值。

3.12.3 為了讓它們看起來大小一致，我們將正方形縮小50px，可以看到縮小之后正方形與圓形的視覺大小基本一致。

3.12.4 然后我們將上面的兩個圖重疊起來

左圖（140px 正方形與 140px 圓形）中，圓形完全包含在正方形內(nèi)，并且正方形超出圓形 4a 個面積，這就是造成視覺誤差的原因。

右圖（140px 正方形+140px 圓形），正方形超出圓形 4 個 a 面積，圓形超出正方形 4 個 b 面積，兩者面積相互抵消，雖然大小不同，但面積相近sketch導出svg圖標，因此圓形和正方形在視覺上是平衡的。

由此我們得出一個結(jié)論：

兩個圖形的視覺大小是否一致，是由兩個圖形的面積是否相同決定的，也就是說，只要兩個圖形的面積基本相同，就能保證兩張圖片的視覺大小基本一致。

接下來我們先自定義圓形圖標的網(wǎng)格，由于系統(tǒng)圖標最大尺寸為 44*44px，而圓形有天然的收縮，所以我們會讓圓形充滿整個網(wǎng)格，當充滿整個網(wǎng)格時，就是圓形在固定尺寸范圍內(nèi)的最大視覺尺寸。這樣，其他三個圖形（正方形、橫長條、豎長條）只需要適當縮小尺寸，就能和圓形圖標保持視覺上的一致。

圓形圖標網(wǎng)格：

圓形圖標在系統(tǒng)圖標中出現(xiàn)的頻率非常高，比如微信中的發(fā)現(xiàn)圖標，視頻應用中的視頻播放圖標等。圓形本身就具有很強的視覺收縮性，所以我們在自定義圓形圖標的網(wǎng)格時，為了保持與其他圖形圖標的視覺一致性，我們在基礎網(wǎng)格中填滿整個44*44px的網(wǎng)格，以保證圓形圖標的視覺張力。如下圖

方形圖標：

方形圖標在各類應用中經(jīng)常見到，比如知識分享應用知乎的首頁圖標就是典型的方形圖標。方形圖標在實際尺寸上比圓形圖標多了四個尖角，所以為了和原型統(tǒng)一，我們將方形縮小了 3px?？s小之后，方形的面積和拱門的面積基本一致，如下圖

左邊是方形網(wǎng)格，右邊是與圓形網(wǎng)格重疊對比

長橫圖標：

長橫圖標也是我們經(jīng)常遇到的典型圖標造型，比如天貓APP首頁菜單里的會員圖標就是一個非常典型的長橫圖標。山歌的制作原理和正方形是一樣的，我們將圓形和長橫重疊在一起，然后適當降低高度，直到圓形和長橫的面積基本一致。如下圖

左側(cè)為橫向長格，右側(cè)為與圓形格重疊對比

垂直圖標：

豎長圖標其實和橫長圖標是一樣的，只是將角度旋轉(zhuǎn)了90度而已。舒服圖標出現(xiàn)的概率也很高，比如餓了么App里的訂單圖標。

左側(cè)是垂直網(wǎng)格，右側(cè)是與圓形網(wǎng)格重疊對比

特殊圖標：

所謂異形圖標，就是不能簡單概括為幾何圖形的圖標。比如我的圖標是一個上小下大的人形，我們可以將這樣的圖形作為我們的基礎網(wǎng)格。然后我們再根據(jù)圖標的實際情況，適當調(diào)整圖標大小。

左邊是不規(guī)則網(wǎng)格，右邊是與圓形網(wǎng)格重疊對比

通過上面的分析，我們得出了最終的iOS系統(tǒng)圖標網(wǎng)格體系。下圖是尺寸規(guī)范分析。

由此產(chǎn)生的iOS網(wǎng)格系統(tǒng)摘要：

最后我們來看看iOS系統(tǒng)圖標網(wǎng)格系統(tǒng)的實際案例效果。

騰訊視頻圖標：

知乎ICON：

花瓣圖標：

4. 層次清晰

Icon具有可點擊性，可識別性?？牲c擊性有三種狀態(tài)：點擊前、點擊中、點擊后。主流的底部標簽欄在點擊前會使用線性圖標，點擊中和點擊后會使用扁平化圖標。也會使用顏色進行區(qū)分。

5.延展性

圖標應該具有較高的可擴展性，好的圖標可以直接作為應用圖標或者Logo，也可以通過點線面動效作為下拉加載動畫。

2.圖標的功能分類

圖標按照功能還可以細分為操作圖標、警告圖標、內(nèi)容圖標、設備圖標、文件圖標、編輯圖標、導航圖標、通知圖標、社交圖標、開關圖標等等。為什么我們在設計圖標的時候很少做這樣系統(tǒng)的區(qū)分呢？主要原因可能是我們做的C端產(chǎn)品中圖標的種類和數(shù)量都比較少，而當我們接觸到B端產(chǎn)品的時候，與B端產(chǎn)品業(yè)務復雜度對應的圖標數(shù)量也相應增多，為了更好地管理圖標，需要進行更加細致的設置和分類。

2.1 圖標命名標準

為什么要用英文來規(guī)范圖標的命名？因為我們使用的整個系統(tǒng)都是基于英文開發(fā)的，設計師業(yè)務的下游主要是前端工程師。如果不能規(guī)范每個圖標的命名，肯定會增加前端的工作量。如何提高協(xié)作效率也應該是設計師用戶體驗的范疇。英文不好的人打開谷歌翻譯也沒問題。

圖片名稱以模塊為前綴，如：.png

模塊：

登錄頁面 (login) () need a (need) need b () () () me (me)

類別：

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

功能：

菜單 (menu) 返回 (back) 關閉 (close) 編輯 (eidt) 消息 () 刪除 ()

狀態(tài)：

已選擇 () 不可點擊 () 已按下 () 正常 ()

2.2. 圖標制作與發(fā)布

在app產(chǎn)品中，以美團app為例，整個產(chǎn)品中的圖標使用了多種風格。首頁金剛區(qū)域的圖標是首頁流量分發(fā)的重要分支，視覺設計應該更加豐富多彩，吸引用戶的注意力，而標簽欄中的導航圖標和內(nèi)頁的功能圖標則需要設計得更加簡潔。我們在繪制圖標的時候，首頁金剛區(qū)域我們單獨繪制了一套復雜的圖標，其他系統(tǒng)需要繪制線面兩種風格才能更好的適配頁面。為了以后系統(tǒng)更好的使用，我們根據(jù)系統(tǒng)需求來制作圖標。

以心形圖標為例，我們采用了線面兩套圖標，關于圖標的配色，可以添加黑、白、灰+原色，可以有橙色代表警告/綠色代表成功/紅色代表刪除等，后期復制添加也非常方便。

創(chuàng)建圖標庫和顏色庫，每次有新圖標和新顏色，只需要添加一個就可以管理產(chǎn)品中的圖標庫。

2.3 團隊合作

目前團隊協(xié)作按照圖標功能進行分類，并上傳至插件工藝，方便其他團隊成員共同使用。

設計_前端開發(fā)的下游

為了方便前端開發(fā)工作，我們需要按照上述規(guī)范命名自己的圖標。前端開發(fā)主流做法是將圖標轉(zhuǎn)成字體，上傳到團隊共享的圖標網(wǎng)站，將圖標輸出為svg矢量格式，以便前端開發(fā)工程師直接調(diào)用。國內(nèi)主流平臺是如果制作圖標，導出svg格式，在軟件中重新安裝1024大小進行繪制，上傳到項目中。所有路徑都需要擴展成面圖標。多色圖標不支持后期修改顏色，單色圖標后期可以支持自定義圖標顏色。

相關文章

如有侵權(quán)請聯(lián)系刪除！