Ui設計小白第一課 -- 圖標設計

針對于設計學小白來說，設計圖標是我們必備的一節(jié)課程。那對于小白來說，如何設計好UI圖標呢？要知道，UI圖標不僅在整體的設計中比較重要，更要在設計規(guī)范上有所建樹。如果我們有設計小白不懂如何設計圖標的話，快來看看今天的文章吧~~


一、圖標設計原則

1. 表意準確

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

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

2. 可預見性

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

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

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

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

3. 統(tǒng)一性

大小的統(tǒng)一

圖標的主流尺寸有16×16，24×24，32×32，48×48，64×64，96×96，128×128，192×192，256×256，512×512，1024×1024…

偶數(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ù)。4、8之間的爭斗不僅體現(xiàn)在圖標尺寸的規(guī)范上也體現(xiàn)在柵格系統(tǒng)的規(guī)范制定中。那么怎么根據(jù)強有力的依據(jù)去決定到底是用4的倍數(shù)還是8的倍數(shù)呢？換言之就是到底用 iOS 的規(guī)范還是用 Material design 的規(guī)范？

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

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

為什么 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）。

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ān)系，只要他們能讓整體遵守這套規(guī)則就好。

數(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

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

斐波那契數(shù)列（FibonacciSequence）是這樣一個數(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)時，且沒有設計兩套界面，8的倍數(shù)是最好的選擇。

顏色統(tǒng)一

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

風格統(tǒng)一

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

圖標設計規(guī)范

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

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

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

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

4. 層次明確

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

5. 延展性

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


 

總結(jié)

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