由于最近的工作原因?qū)D標(biāo)有了更加全方位的認(rèn)知，雖然之前寫過(guò)《如何繪制功能圖標(biāo)基礎(chǔ)篇？》《如何系統(tǒng)的學(xué)習(xí)功能圖標(biāo)？》這兩篇文章，但里面還是缺少了理論依據(jù)和系統(tǒng)做圖標(biāo)的思維。通過(guò)不斷在學(xué)習(xí)的過(guò)程中不斷有了新的認(rèn)知，希望和大家一起分享。

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

1. 表意準(zhǔn)確

功能圖標(biāo)的第一原則是表意準(zhǔn)確，要讓用戶看到圖標(biāo)第一時(shí)間就能理解它的含義。同時(shí)，功能圖標(biāo)還具有通用性，符合所有的用戶的使用習(xí)慣，不要試圖去改變用戶日積月累沉淀下來(lái)的記憶。

微信底部的Tab欄，已經(jīng)很多年沒(méi)換過(guò)了，由于微信用戶群體龐大機(jī)構(gòu)復(fù)雜，牽一發(fā)而動(dòng)全身，誰(shuí)也不敢隨便的改變用戶多年積累的認(rèn)知記憶。可能從美觀角度還有很大發(fā)揮的空間，但是用戶更多的會(huì)認(rèn)為，熟悉的就是最好的。

而愛(ài)心圖標(biāo)在用戶的認(rèn)知里更多的是喜歡，當(dāng)朋友在微信朋友圈發(fā)了照片或更新動(dòng)態(tài)，點(diǎn)擊愛(ài)心來(lái)表達(dá)自己的喜歡。

2. 可預(yù)見性

預(yù)見性是指人對(duì)事物發(fā)展的預(yù)判和前瞻，而人對(duì)功能圖標(biāo)預(yù)見性的強(qiáng)弱取決于用戶對(duì)該圖標(biāo)的認(rèn)知強(qiáng)弱，當(dāng)我們把繪制好的圖標(biāo)放入頁(yè)面時(shí)我們要考慮用戶是否可以很快的找到該圖標(biāo)？

當(dāng)用戶找到該圖標(biāo)時(shí)，用戶是否會(huì)很快的理解圖標(biāo)代表什么意思？當(dāng)用戶在點(diǎn)擊圖標(biāo)前是否已經(jīng)大約預(yù)測(cè)到點(diǎn)擊該圖標(biāo)后的界面大體樣式或內(nèi)容？

根據(jù)上圖的icon我們可以預(yù)測(cè)這是一款音樂(lè)類app的圖標(biāo)，因?yàn)閳D標(biāo)有有明顯的音符和音樂(lè)播放按鈕等。

根據(jù)上圖的icon我們可以預(yù)測(cè)這是一款購(gòu)物電商類app的圖標(biāo)，因?yàn)閳D標(biāo)中有分類查找和購(gòu)物車圖標(biāo)。

上圖中當(dāng)前顯示頁(yè)面為店鋪?lái)?yè)面，當(dāng)我們看到客服圖標(biāo)時(shí)能大體的想象得到點(diǎn)擊客服圖標(biāo)會(huì)跳轉(zhuǎn)到聊天工具的頁(yè)面，這就是圖標(biāo)的可預(yù)見性。

3. 統(tǒng)一性

（1）大小的統(tǒng)一

圖標(biāo)的主流尺寸有16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128,? 192×192, 256×256, 512×512，1024×1024……

（2）偶數(shù)規(guī)則

元素周期表中相鄰的兩元素，原子序數(shù)為偶數(shù)的，其在地殼中的平均含量常大于奇數(shù)元素的含量。對(duì)于同一元素而言，質(zhì)量數(shù)為偶數(shù)的同位素，在地殼中的平均含量大于相鄰奇數(shù)同位素的平均含量。

這是人們根據(jù)分析的實(shí)際數(shù)據(jù)，經(jīng)驗(yàn)歸納而得出的元素和同位素在地殼中的分布規(guī)則之一，稱為偶數(shù)規(guī)則。

在UI界面設(shè)計(jì)對(duì)于偶數(shù)原則基本保持一致態(tài)度。

在圖標(biāo)設(shè)計(jì)中主要就是兩種聲音，4的倍數(shù)和8的倍數(shù)？48之間的爭(zhēng)斗不僅體現(xiàn)在圖標(biāo)尺寸的規(guī)范上也體現(xiàn)在珊格系統(tǒng)的規(guī)范制定中。

那么怎么根據(jù)強(qiáng)有力的依據(jù)去決定到底是用4的倍數(shù)還是8的倍數(shù)呢？換言之就是到底用ios的規(guī)范還是用Material design的規(guī)范?

（3）ios的規(guī)范4的倍數(shù)

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

為什么ios的規(guī)范4的倍數(shù)？因?yàn)樘O果改變了游戲的規(guī)則，以前大家一起玩耍的時(shí)候都用px物理像素(physical pixel)來(lái)定義大小的尺寸，突然蘋果推出retina屏幕改變了普通屏幕的物理尺寸。在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個(gè)css像素所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。

在普通屏幕下，1個(gè)css像素 對(duì)應(yīng) 1個(gè)物理像素(1:1)；在retina 屏幕下，1個(gè)css像素對(duì)應(yīng) 4個(gè)物理像素(1:4)。

（4）Material design的規(guī)范8點(diǎn)網(wǎng)格

Material design建立8點(diǎn)為一個(gè)單位的網(wǎng)格，所有的元素尺寸都是8的倍數(shù)。有些屏幕會(huì)很難調(diào)整適應(yīng)這個(gè)系統(tǒng)，比如iPhone6開始的375×667的尺寸，但是解決方法也很簡(jiǎn)單。

保持填充和空隙（padding & margin）的尺寸統(tǒng)一遵循規(guī)則，剩余的空間可以用塊狀的元素來(lái)填充。有一些元素的尺寸是奇數(shù)的也沒(méi)關(guān)系，只要他們能讓整體遵守這套規(guī)則就好。

（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

（6）黃金螺旋線/斐波那契數(shù)列

斐波那契數(shù)列（FibonacciSequence）數(shù)列是這樣一個(gè)數(shù)列1、1、2、3、5、8……

在數(shù)學(xué)上，斐波那契數(shù)列是以遞歸的方法來(lái)定義：

F0=1

F1=1

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

(n>=2，n∈N*)

為什么谷歌的Material design和Ant design都把8點(diǎn)一個(gè)單位的網(wǎng)格，根據(jù)我上面的一些數(shù)學(xué)方法的推理，斐波那契數(shù)列中數(shù)字1/2/3/5/8占了很大的比重。

舉個(gè)列子2+6=8，可以繼續(xù)拆解成1+3+1+3=8，但是2:6=1:3；同理?2×4=8，但是2:4=1:2，里面細(xì)拆數(shù)字都符合斐波那契數(shù)列，符合斐波那契數(shù)列意味著就符合了黃金分割比。

最后得出的結(jié)論就是8的倍數(shù)為主，4的倍數(shù)為輔；除非你設(shè)計(jì)的app只需要適配ios系統(tǒng)可以使用4的倍數(shù)，當(dāng)既要適配ios系統(tǒng)又要適配安卓系統(tǒng)時(shí)且沒(méi)有設(shè)計(jì)兩套界面分別適配ios跟安卓時(shí)選擇8的倍數(shù)是做好的選擇。

（7）顏色統(tǒng)一

圖標(biāo)在選取顏色的時(shí)候盡量不要超過(guò)4種顏色，且每個(gè)圖標(biāo)的配色需要根據(jù)對(duì)應(yīng)的行業(yè)背景進(jìn)行配色，利用色彩心理學(xué)比如紅色可使用在美食餐飲上，橙色用在美食上多指甜美，綠的代表食物多指健康綠色產(chǎn)品等

（8）風(fēng)格統(tǒng)一

風(fēng)格已經(jīng)在《如何系統(tǒng)的學(xué)習(xí)功能圖標(biāo)？》歸納的很全了，直角圖標(biāo)和圓角圖標(biāo)基礎(chǔ)上適當(dāng)添加一種符合的圖標(biāo)風(fēng)格；最好不要出現(xiàn)兩種風(fēng)格相加，很容易亂，也不夠簡(jiǎn)潔，主次不明。

在整個(gè)產(chǎn)品或者系統(tǒng)中，可以適當(dāng)使用2到3種風(fēng)格不同的圖標(biāo)就行差異化對(duì)待。

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

圓角規(guī)范：外圓角半徑-線的粗細(xì)=內(nèi)圓角半徑

外圓角半徑大小：圓角半徑是整個(gè)圖標(biāo)大小的十分之一左右

（10）圖標(biāo)的物理平衡和視覺(jué)平衡

為什么我們?cè)偻瑯拥拇笮^(qū)域去繪制正方形、圓形、三角形，雖然符合了統(tǒng)一的物理大小規(guī)范，但是從視覺(jué)上看上去卻很不均衡？

關(guān)于這一點(diǎn)Material design給出了很好的解決辦法規(guī)范化的去繪制圖標(biāo)。

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

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

通過(guò)Google系統(tǒng)圖標(biāo)規(guī)范繪制出來(lái)的圖標(biāo)可以達(dá)到視覺(jué)平衡

打破規(guī)則：當(dāng)視覺(jué)平衡和物理平衡發(fā)生沖突時(shí)，我們應(yīng)該優(yōu)先選擇視覺(jué)平衡。上圖中是微信的界面圖標(biāo)，仔細(xì)觀察我們發(fā)現(xiàn)通訊錄的圖標(biāo)已經(jīng)超出物理規(guī)定的大小，但是整個(gè)圖標(biāo)在界面中是可以達(dá)到視覺(jué)平衡的。

所以我們?cè)诶L制的過(guò)程中可以打破規(guī)則，這也是每個(gè)優(yōu)秀的設(shè)計(jì)師應(yīng)該具備的。

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

在主流的圖標(biāo)繪制中，線性圖標(biāo)的粗細(xì)大小有1px、2px、3px。所以我們?cè)诮D標(biāo)網(wǎng)格系統(tǒng)是使用了8的倍數(shù)，上面已經(jīng)通過(guò)對(duì)數(shù)字8拆解中得知8的倍數(shù)非常適合1px、2px、3px粗細(xì)大小的。

在二倍圖下使用48*48px的尺寸大小，在一倍圖下使用了24*24px的尺寸大小來(lái)繪制圖標(biāo)。

空間的呼吸感：在繪制圖標(biāo)時(shí)，我們不但要確定圖標(biāo)的大小，還要考慮圖標(biāo)的內(nèi)呼吸感，就是所謂的正負(fù)形，圖標(biāo)的負(fù)空間也有規(guī)則，Material design內(nèi)呼吸感以2px為基準(zhǔn)進(jìn)行繪制的。

通過(guò)字體字重感受線性圖標(biāo)粗細(xì)：

字體字重從細(xì)到粗會(huì)給人輕盈到沉穩(wěn)的感覺(jué)，無(wú)論中文還是西文，文字越細(xì)其可讀性越強(qiáng)，文字越粗其視認(rèn)性越高。

通過(guò)列舉線性圖標(biāo)的粗細(xì)大小有1px、2px、3px、4px?？梢钥吹綀D標(biāo)粗細(xì)變化給人的視覺(jué)感受也是不一樣的，具體使用多大取決于界面內(nèi)容，最好的方法就是通過(guò)對(duì)比來(lái)驗(yàn)證那個(gè)粗細(xì)更適合當(dāng)前界面。

關(guān)于2倍尺寸下使用3px,在3倍尺寸下會(huì)變成4.5px,會(huì)出現(xiàn)0.5px的問(wèn)題。這方面的技術(shù)已經(jīng)可以實(shí)現(xiàn)了，當(dāng)然最好使用svg矢量格式。比如上圖的愛(ài)心圖標(biāo)，弧線肯定是存在小數(shù)點(diǎn)問(wèn)題，所以使用svg矢量格式是最好的選擇。

（12）怎么畫一條0.5px的邊

比較了在高清屏上畫0.5px的幾種方法——可以通過(guò)直接設(shè)置寬高border為0.5px、設(shè)置box-shadow的垂直方向的偏移量為0.5px、借助線性漸變linear-gradient、使用transform: scaleY(0.5)的方法，使用SVG的方法。

最后發(fā)現(xiàn)SVG的方法兼容性和效果都是最好的，所以在viewport是1的情況下，可以使用SVG畫0.5px，而如果viewport的縮放比例不是1的話，那么直接畫1px即可。

更詳細(xì)的請(qǐng)參考鏈接：怎么畫一條0.5px的邊。

4. 層次明確

圖標(biāo)具有可點(diǎn)擊性和標(biāo)識(shí)性?？牲c(diǎn)擊性就會(huì)有點(diǎn)擊前、點(diǎn)擊時(shí)、點(diǎn)擊后三種狀態(tài)，主流底部標(biāo)簽欄會(huì)在點(diǎn)擊前使用線性圖標(biāo)，點(diǎn)擊時(shí)和點(diǎn)擊后使用面性圖標(biāo)；也有使用顏色來(lái)區(qū)分。

5. 延展性

圖標(biāo)應(yīng)該具有很強(qiáng)的延展性，好的圖標(biāo)可以直接當(dāng)應(yīng)用圖標(biāo)或者logo來(lái)使用，好的圖標(biāo)還可以通過(guò)點(diǎn)線面動(dòng)效變化做下拉加載動(dòng)畫。

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

按圖標(biāo)功能還可以細(xì)分為動(dòng)作圖標(biāo)、警示圖標(biāo)、內(nèi)容圖標(biāo)、設(shè)備圖標(biāo)、文件圖標(biāo)、編輯圖標(biāo)、導(dǎo)航圖標(biāo)、通知圖標(biāo)、社交圖標(biāo)、切換圖標(biāo)等……

為什么我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候很少去系統(tǒng)的這樣去區(qū)分，更多的原因可能我們做的C端產(chǎn)品，圖標(biāo)種類和數(shù)量相對(duì)較少，當(dāng)我們接觸到B端產(chǎn)品，由于B端產(chǎn)品的業(yè)務(wù)復(fù)雜程度對(duì)應(yīng)的圖標(biāo)數(shù)量也隨之增加，為了更好的管理圖標(biāo)需要更加詳細(xì)的設(shè)置分類。

圖標(biāo)的命名規(guī)范

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

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

• 模塊：登陸頁(yè)面（login）? 公共（common）? 需求a（need） 需求b(demand)? 發(fā)現(xiàn)（discover）? 消息（message）? 我（me）
• 類別：導(dǎo)航欄（nav）? 菜單欄（tab）? 按鈕（btn）? 圖標(biāo)（icon）? 背景圖片（bg）? 默認(rèn)圖片(def)
• 功能：菜單（menu） 返回（back） 關(guān)閉（close）? 編輯（eidt）? 消息（message）? 刪除（delete）
• 狀態(tài)：選中（selected)? 不可點(diǎn)（disabled)? 按下（pressed)? 正常（normal）

圖標(biāo)的制作上線

在app產(chǎn)品中，以美團(tuán)app為例整個(gè)產(chǎn)品中圖標(biāo)使用了多種風(fēng)格，首頁(yè)金剛區(qū)圖標(biāo)作為首頁(yè)流量分發(fā)的重要分支，在視覺(jué)設(shè)計(jì)要吸引用戶的眼球做的更艷麗一點(diǎn)，而在標(biāo)簽欄導(dǎo)航圖標(biāo)和內(nèi)頁(yè)的功能圖標(biāo)需要設(shè)計(jì)的更加簡(jiǎn)潔。

我們?cè)诶L制圖標(biāo)的時(shí)候首頁(yè)金剛區(qū)復(fù)雜的圖標(biāo)單獨(dú)繪制一套，其他系統(tǒng)需要繪制線面兩種風(fēng)格，為了更好的適配頁(yè)面，方面以后更好的使用我們?cè)赟ketch中使用Symbol系統(tǒng)的制作圖標(biāo)。

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

建立圖標(biāo)庫(kù)和顏色庫(kù)，每次有新增的圖標(biāo)和新增的顏色，只需再新增一個(gè)Symbol就可以很好的管理自己產(chǎn)品中的圖標(biāo)庫(kù)了。

團(tuán)隊(duì)協(xié)作：

目前團(tuán)隊(duì)協(xié)作按照?qǐng)D標(biāo)功能分類上傳到sketch的插件craft,方便團(tuán)隊(duì)其他成員一起使用。

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

為了很好的方便前端開發(fā)工作，我們需要根據(jù)上面的規(guī)范進(jìn)行命名自己的圖標(biāo)。

前端開發(fā)主流做法就是把圖標(biāo)變成一個(gè)字體，上傳到團(tuán)隊(duì)共享的icon網(wǎng)站，通過(guò)輸出svg矢量格式的圖標(biāo)，讓前端開發(fā)工程師直接調(diào)用。

國(guó)內(nèi)主流的平臺(tái)是iconfont，如果sketch制作的圖標(biāo)，導(dǎo)出svg格式在illustrator軟件里面重新安裝1024的尺寸進(jìn)行繪制，上傳到項(xiàng)目中。

所有的路徑都需要擴(kuò)展成面性圖標(biāo)，多色圖標(biāo)不支持后期代碼修改顏色，單色圖標(biāo)后期可支持自定義圖標(biāo)顏色。

總結(jié)

我們?cè)谠O(shè)計(jì)的過(guò)程中，隨之對(duì)設(shè)計(jì)的認(rèn)知水平提高，我們的知識(shí)體系也在不斷的完善，這時(shí)候就需要我們對(duì)了解的知識(shí)進(jìn)行深挖，多問(wèn)自己為什么？了解背后的邏輯。這樣才會(huì)更加深刻。

#參考文獻(xiàn)#

• Material Design規(guī)范：https://material.io
• 怎么畫一條0.5px的邊：https://segmentfault.com/a/1190000013998884

#相關(guān)文章#

如何系統(tǒng)學(xué)習(xí)功能圖標(biāo)

作者：水手哥，公眾號(hào)：水手哥學(xué)設(shè)計(jì)

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

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