1.圖標(biāo)設(shè)計(jì)原則

1. 含義準(zhǔn)確

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

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

2.可預(yù)測性

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

從上圖可以明顯看出這是一個音樂應(yīng)用程序，因?yàn)樗魳贩柡筒シ欧枺?/p>

當(dāng)然，這組圖標(biāo)也很好識別，一眼望去，都是購物APP，因?yàn)槎加匈徫镘?！這就是圖標(biāo)的可預(yù)測性。

3. 團(tuán)結(jié)

3.1 尺寸統(tǒng)一

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

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

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

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

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

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

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

在屏幕上，1個CSS像素對應(yīng)4個物理像素（1：4）。

3.4、標(biāo)準(zhǔn)8點(diǎn)網(wǎng)格

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

比例關(guān)系：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ù)學(xué)上來說，斐波那契數(shù)列是遞歸定義的：

F0=1

F1=1

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

（n>=2，n∈N*）

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

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

3.7. 顏色均勻性

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

3.8. 統(tǒng)一風(fēng)格

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

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

3.9 圖標(biāo)設(shè)計(jì)規(guī)范

圓角規(guī)格

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

外角半徑尺寸

圓角半徑約為整個圖標(biāo)尺寸的十分之一

3.10. 圖標(biāo)的物理和視覺平衡

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

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

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

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

打破規(guī)則

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

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

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

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

呼吸空間

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

通過字體粗細(xì)感受線性圖標(biāo)的厚度

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

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

3.11. 如何繪制 0.5px 邊緣

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

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

如何繪制 0.5px 邊緣

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

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

基本網(wǎng)格

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

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

3.12.1 首先我們對比一下正方形和圓形在實(shí)際大小下的視覺大小，發(fā)現(xiàn)當(dāng)實(shí)際大小為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導(dǎo)出svg圖標(biāo)，因此圓形和正方形在視覺上是平衡的。

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

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

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

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

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

方形圖標(biāo)：

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

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

長橫圖標(biāo)：

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

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

垂直圖標(biāo)：

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

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

特殊圖標(biāo)：

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

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

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

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

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

騰訊視頻圖標(biāo)：

知乎ICON：

花瓣圖標(biāo)：

4. 層次清晰

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

5.延展性

圖標(biāo)應(yīng)該具有較高的可擴(kuò)展性，好的圖標(biāo)可以直接作為應(yīng)用圖標(biāo)或者Logo，也可以通過點(diǎn)線面動效作為下拉加載動畫。

2.圖標(biāo)的功能分類

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

2.1 圖標(biāo)命名標(biāo)準(zhǔn)

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

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

模塊：

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

類別：

導(dǎo)航欄 (nav) 菜單欄 (tab) 按鈕 (btn) 圖標(biāo) (icon) 背景圖片 (bg) 默認(rèn)圖片 (def)

功能：

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

狀態(tài)：

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

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

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

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

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

2.3 團(tuán)隊(duì)合作

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

設(shè)計(jì)_前端開發(fā)的下游

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

相關(guān)文章

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