由于最近的工作原因?qū)D標有了更加全方位的認知，雖然之前寫過《如何繪制功能圖標基礎篇？》，《如何系統(tǒng)的學習功能圖標？》這兩篇文章，但里面還是缺少了理論依據(jù)和系統(tǒng)做圖標的思維。通過不斷再學習的過程中不斷有了新的認知，希望和大家一起分享。
一、圖標設計原則
01、表意準確
功能圖標的第一原則是表意準確，要讓用戶看到圖標第一時間就能理解它的含義。同時，功能圖標還具有通用性，符合所有的用戶的使用習慣，不要試圖去改變用戶日積月累沉淀下來的記憶。微信底部的Tab欄，已經(jīng)很多年沒換過了，由于微信用戶群體龐大機構(gòu)復雜，牽一發(fā)而動全身，誰也不敢隨便的改變用戶多年積累的認知記憶?？赡軓拿烙^角度還有很大發(fā)揮的空間，但是用戶更多的會認為，熟悉的就是最好的。
而愛心圖標在用戶的認知里更多的是喜歡，當朋友在微信朋友圈發(fā)了照片或更新動態(tài)，點擊愛心來表達自己的喜歡。
02、可預見性
預見性是指人對事物發(fā)展的預判和前瞻，而人對功能圖標預見性的強弱取決于用戶對該圖標的認知強弱，當我們把繪制好的圖標放入頁面時我們要考慮用戶是否可以很快的找到該圖標？當用戶找到該圖標時，用戶是否會很快的理解圖標代表什么意思？當用戶在點擊圖標前是否已經(jīng)大約預測到點擊該圖標后的界面大體樣式或內(nèi)容？
根據(jù)上圖的icon我們可以預測這是一款音樂類app的圖標，因為圖標有有明顯的音符和音樂播放按鈕等
根據(jù)上圖的icon我們可以預測這是一款購物電商類app的圖標，因為圖標中有分類查找和購物車圖標
上圖中當前顯示頁面為店鋪頁面，當我們看到客服圖標時能大體的想象得到點擊客服圖標會跳轉(zhuǎn)到聊天工具的頁面，這就是圖標的可預見性。
03、統(tǒng)一性
03_01、大小的統(tǒng)一
圖標的主流尺寸有16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 192x192, 256x256, 512x512，1024x1024…
03_02、偶數(shù)規(guī)則
元素周期表中相鄰的兩元素，原子序數(shù)為偶數(shù)的，其在地殼中的平均含量常大于奇數(shù)元素的含量。對于同一元素而言，質(zhì)量數(shù)為偶數(shù)的同位素，在地殼中的平均含量大于相鄰奇數(shù)同位素的平均含量。這是人們根據(jù)分析的實際數(shù)據(jù)，經(jīng)驗歸納而得出的元素和同位素在地殼中的分布規(guī)則之一，稱為偶數(shù)規(guī)則。在UI界面設計對于偶數(shù)原則基本保持一致態(tài)度。
在圖標設計中主要就是兩種聲音，4的倍數(shù)和8的倍數(shù)？48之間的爭斗不僅體現(xiàn)在圖標尺寸的規(guī)范上也體現(xiàn)在珊格系統(tǒng)的規(guī)范制定中。那么怎么根據(jù)強有力的依據(jù)去決定到底是用4的倍數(shù)還是8的倍數(shù)呢？換言之就是到底用ios的規(guī)范還是用Material design的規(guī)范?
03_03、ios的規(guī)范4的倍數(shù)
iPhone上最小的點擊區(qū)域,官方推薦是44pt×44pt。
為什么ios的規(guī)范4的倍數(shù)？因為蘋果改變了游戲的規(guī)則，以前大家一起玩耍的時候都用px物理像素(physical pixel)來定義大小的尺寸，突然蘋果推出retina屏幕改變了普通屏幕的物理尺寸。在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數(shù)是不一致的。
在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。
在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。
03_04、Material design的規(guī)范8點網(wǎng)格
Material design建立8點為一個單位的網(wǎng)格，所有的元素尺寸都是8的倍數(shù)。有些屏幕會很難調(diào)整適應這個系統(tǒng)，比如iPhone6開始的375×667的尺寸，但是解決方法也很簡單。保持填充和空隙（padding & margin）的尺寸統(tǒng)一遵循規(guī)則，剩余的空間可以用塊狀的元素來填充。有一些元素的尺寸是奇數(shù)的也沒關系，只要他們能讓整體遵守這套規(guī)則就好。
03_05、數(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
03_06、黃金螺旋線/斐波那契數(shù)列
斐波那契數(shù)列（FibonacciSequence）數(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*)
為什么谷歌的Material design和Ant design都把8點一個單位的網(wǎng)格，根據(jù)我上面的一些數(shù)學方法的推理，斐波那契數(shù)列中數(shù)字1/2/3/5/8占了很大的比重。舉個列子2+6=8，可以繼續(xù)拆解成1+3+1+3=8，但是2:6=1:3 ；同理 2×4=8，但是2:4=1:2，里面細拆數(shù)字都符合斐波那契數(shù)列，符合斐波那契數(shù)列意味著就符合了黃金分割比。突然感覺數(shù)字8很像娛樂圈的影視明星，本來家境好自身條件也好就自帶光環(huán)。
最后得出的結(jié)論就是8的倍數(shù)為主，4的倍數(shù)為輔；除非你設計的app只需要適配ios系統(tǒng)可以使用4的倍數(shù)，當既要適配ios系統(tǒng)又要適配安卓系統(tǒng)時且沒有設計兩套界面分別適配ios跟安卓時選擇8的倍數(shù)是做好的選擇。
03_07、顏色統(tǒng)一
圖標在選取顏色的時候盡量不要超過4種顏色，且每個圖標的配色需要根據(jù)對應的行業(yè)背景進行配色，利用色彩心理學比如紅色可使用在美食餐飲上，橙色用在美食上多指甜美，綠的代表食物多指健康綠色產(chǎn)品等
03_08、風格統(tǒng)一
風格已經(jīng)《如何系統(tǒng)的學習功能圖標？》在歸納的很全了，直角圖標和圓角圖標基礎上適當添加一種符合的圖標風格；最好不要出現(xiàn)兩種風格相加，很容易亂，也不夠簡潔，主次不明。
在整個產(chǎn)品或者系統(tǒng)中，可以適當使用2到3種風格不同的圖標就行差異化對待。
03_09、圖標設計規(guī)范
圓角規(guī)范
外圓角半徑-線的粗細=內(nèi)圓角半徑
外圓角半徑大小
圓角半徑是整個圖標大小的十分之一左右
03_10、圖標的物理平衡和視覺平衡
為什么我們再同樣的大小區(qū)域去繪制正方形、圓形、三角形，雖然符合了統(tǒng)一的物理大小規(guī)范，但是從視覺上看上去卻很不均衡？關于這一點Material design給出了很好的解決辦法規(guī)范化的去繪制圖標。
正方形18dp*18dp ; 圓形直徑20dp大小的規(guī)范
垂直矩形20dp*16dp ; 水平矩形16dp*20dp
通過Google系統(tǒng)圖標規(guī)范繪制出來的圖標可以達到視覺平衡
打破規(guī)則
當視覺平衡和物理平衡發(fā)生沖突時，我們應該優(yōu)先選擇視覺平衡。上圖中是微信的界面圖標，仔細觀察我們發(fā)現(xiàn)通訊錄的圖標已經(jīng)超出物理規(guī)定的大小，但是整個圖標在界面中是可以達到視覺平衡的。所以我們在繪制的過程中可以打破規(guī)則。這也是每個優(yōu)秀的設計師應該具備的。
03_11、圖標網(wǎng)格系統(tǒng)
在主流的圖標繪制中，線性圖標的粗細大小有1px、2px、3px。所以我們在建立圖標網(wǎng)格系統(tǒng)是使用了8的倍數(shù)，上面已經(jīng)通過對數(shù)字8拆解中得知8的倍數(shù)非常適合1px、2px、3px粗細大小的。
在二倍圖下使用48*48px的尺寸大小，在一倍圖下使用了24*24px的尺寸大小來繪制圖標。
空間的呼吸感
在繪制圖標時，我們不但要確定圖標的大小，還要考慮圖標的內(nèi)呼吸感，就是所謂的正負形，圖標的負空間也有規(guī)則，Material design內(nèi)呼吸感以2px為基準進行繪制的。
通過字體字重感受線性圖標粗細
字體字重從細到粗會給人輕盈到沉穩(wěn)的感覺，無論中文還是西文，文字越細其可讀性越強，文字越粗其視認性越高。
通過列舉線性圖標的粗細大小有1px、2px、3px、4px?？梢钥吹綀D標粗細變化給人的視覺感受也是不一樣的，具體使用多大取決于界面內(nèi)容，最好的方法就是通過對比來驗證那個粗細更適合當前界面。關于2倍尺寸下使用3px,在3倍尺寸下會變成4.5px,會出現(xiàn)0.5px的問題。這方面的技術(shù)已經(jīng)可以實現(xiàn)了，當然最好使用svg矢量格式。比如上圖的愛心圖標，弧線肯定是存在小數(shù)點問題，所以使用svg矢量格式是最好的選擇。
03_11、怎么畫一條0.5px的邊
比較了在高清屏上畫0.5px的幾種方法——可以通過直接設置寬高border為0.5px、設置box-shadow的垂直方向的偏移量為0.5px、借助線性漸變linear-gradient、使用transform: scaleY(0.5)的方法，使用SVG的方法。最后發(fā)現(xiàn)SVG的方法兼容性和效果都是最好的，所以在viewport是1的情況下，可以使用SVG畫0.5px，而如果viewport的縮放比例不是1的話，那么直接畫1px即可。
更詳細的請參考鏈接：
怎么畫一條0.5px的邊
04、層次明確
圖標具有可點擊性和標識性?？牲c擊性就會有點擊前、點擊時、點擊后三種狀態(tài)，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區(qū)分。
05、延展性
圖標應該具有很強的延展性，好的圖標可以直接當應用圖標或者logo來使用。好的圖標還可以通過點線面動效變化做下拉加載動畫。
二、圖標的功能分類
按圖標功能還可以細分為動作圖標、警示圖標、內(nèi)容圖標、設備圖標、文件圖標、編輯圖標、導航圖標、通知圖標、社交圖標、切換圖標等，為什么我們在設計圖標的時候很少去系統(tǒng)的這樣去區(qū)分，更多的原因可能我們做的C端產(chǎn)品，圖標種類和數(shù)量相對較少，當我們接觸到B端產(chǎn)品，由于B端產(chǎn)品的業(yè)務復雜程度對應的圖標數(shù)量也隨之增加，為了更好的管理圖標需要更加詳細的設置分類。
三、圖標的命名規(guī)范
關于圖標的命名為什么要用英語正規(guī)化？因為我們用的整個系統(tǒng)都是基于英語開發(fā)的，設計師的業(yè)務下游主要是前端工程師，如果我們不能規(guī)范的命名每個圖標肯定會增加前端的工作量，如何提高合作效率應該也是設計師用戶體驗的范疇。英語差的打開谷歌翻譯基本沒任何問題的。
切圖命名以模塊為前綴，如：模塊_類別_功能_狀態(tài).png
模塊：
登陸頁面（login） 公共（common） 需求a（need） 需求b(demand) 發(fā)現(xiàn)（discover） 消息（message） 我（me）
類別：
導航欄（nav） 菜單欄（tab） 按鈕（btn） 圖標（icon） 背景圖片（bg） 默認圖片(def)
功能：
菜單（menu） 返回（back） 關閉（close） 編輯（eidt） 消息（message） 刪除（delete）
狀態(tài)：
選中（selected) 不可點（disabled) 按下（pressed) 正常（normal）
四、圖標的制作上線
在app產(chǎn)品中，以美團app為例整個產(chǎn)品中圖標使用了多種風格，首頁金剛區(qū)圖標作為首頁流量分發(fā)的重要分支，在視覺設計要吸引用戶的眼球做的更艷麗一點，而在標簽欄導航圖標和內(nèi)頁的功能圖標需要設計的更加簡潔。我們在繪制圖標的時候首頁金剛區(qū)復雜的圖標單獨繪制一套，其他系統(tǒng)需要繪制線面兩種風格，為了更好的適配頁面。方面以后更好的使用我們在Sketch中使用Symbol系統(tǒng)的制作圖標。
以愛心圖標為例，我們使用Symbol繪制線面兩套圖標，關于圖標的配色可以添加黑白灰+主色，可以有警示的橙色/成功的綠色/刪除的紅色等，后續(xù)復制添加也很方便。
建立圖標庫和顏色庫，每次有新增的圖標和新增的顏色，只需再新增一個Symbol就可以很好的管理自己產(chǎn)品中的圖標庫了。
團隊協(xié)作
目前團隊協(xié)作按照圖標功能分類上傳到sketch的插件craft,方便團隊其他成員一起使用。
設計的下游_前端開發(fā)
為了很好的方便前端開發(fā)工作，我們需要根據(jù)上面的規(guī)范進行命名自己的圖標。前端開發(fā)主流做法就是把圖標變成一個字體，上傳到團隊共享的icon網(wǎng)站，通過輸出svg矢量格式的圖標，讓前端開發(fā)工程師直接調(diào)用。國內(nèi)主流的平臺是iconfont，如果sketch制作的圖標，導出svg格式在illustrator軟件里面重新安裝1024的尺寸進行繪制，上傳到項目中。所以的路徑都需要擴展成面性圖標，多色圖標不支持后期代碼修改顏色，單色圖標后期可支持自定義圖標顏色。
總結(jié)：
我們在設計的過程中，隨之對設計的認知水平提高，我們的知識體系也在不斷的完善，這時候就需要我們對了解的知識進行深挖，多問自己為什么？了解背后的邏輯。這樣才會更加深刻。
