如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)

　　如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)。圖標(biāo)是決定一個APP風(fēng)格的重要構(gòu)成元素，要設(shè)計一款講究的APP，成為一個講究的設(shè)計師。掌握如何設(shè)計一套統(tǒng)一風(fēng)格的icon是對UI設(shè)計師的基本要求。今天AAA教育胡老師和大家探討如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)。
 

　　APP中的圖標(biāo)的類型多種多樣，最常出現(xiàn)的有：面形圖標(biāo)，線形圖標(biāo)，扁平描線圖標(biāo)。文章主要講這3種圖標(biāo)。圖標(biāo)的形式?jīng)]有絕對的對錯，只要在當(dāng)下是合適就是最好的。設(shè)計圈有點像時尚界，有些反復(fù)，時不時會流行復(fù)古，時不時又流行現(xiàn)代……
 

　　一. 面形圖標(biāo)
 

　　面形圖標(biāo)的視覺占比大，有比較強的視覺表達力，通常用在應(yīng)用中的主要入口。最新的蘋果iOS 11底部標(biāo)簽欄就使用了面形圖標(biāo)。那么面型圖標(biāo)的風(fēng)格要如何統(tǒng)一呢?
 

　　在APP界面中，面型圖標(biāo)通常有兩種使用方法：正形和反白。我將分別講下這兩種使用情況下，如何進行統(tǒng)一。
 

　　1.正形

　　上圖是面形圖標(biāo)的正形使用，要統(tǒng)一風(fēng)格，要注意的是:
 

　　a. 面的面積
 

　　b.負(fù)形的面積
 

　　c. 線條的統(tǒng)一
 

　　d. 形的統(tǒng)一?？梢詮男蔚男螤睿瑘A角進行統(tǒng)一

　　示例中的icon，在面的形上也進行了統(tǒng)一，全部用了圓形進行布爾運算，這種統(tǒng)一在需要畫大量功能性icon時，并不是必要條件。滿足以上3個條件，基本就可以做一套風(fēng)格統(tǒng)一的面形icon了。
 

　　2.反白

　　上圖是面形圖標(biāo)的反白使用，反白使用時，除了正形圖標(biāo)的3個注意點，還需注意圖標(biāo)和背板的尺寸比例，比例并沒有嚴(yán)格的規(guī)定，但是建議用0.618黃金比例。
 

　　注意點如下：
 

　　a. 面的面積
 

　　b. 負(fù)形的面積
 

　　c. 線條的統(tǒng)一
 

　　d. 形的構(gòu)成統(tǒng)一。比如：圓角統(tǒng)一
 

　　e. 背板和圖標(biāo)的比例
 

　　.線形圖標(biāo)
 

　　線形圖標(biāo)比較輕量化，減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上。在iOS11以前，iOS原生應(yīng)用的導(dǎo)航欄，標(biāo)簽欄，工具欄全部采用了2px線框的圖標(biāo)設(shè)計。
 

　　線形圖標(biāo)的使用也有兩種：正形和反白。大海不建議線形圖標(biāo)的反白使用，因為從設(shè)計邏輯上講，背板結(jié)合線形圖標(biāo)是互相矛盾的。
 

　　正形

　　上圖中線形圖標(biāo)，要統(tǒng)一風(fēng)格，有以下幾點：
 

　　a. 線的形狀
 

　　b. 閉合區(qū)域的大小
 

　　c. 線的粗細
 

　　d. 線的斷點

　　三.扁平描線圖標(biāo)
 

　　扁平描線圖標(biāo)其實是面形和線形的結(jié)合，一開始這種設(shè)計形式，主要用來做復(fù)雜度比較高的插畫，后來逐漸在標(biāo)簽欄，首頁功能入口這些位置開始應(yīng)用。這類圖標(biāo)相對于純面形，純線形來說，風(fēng)格明顯，個性化程度更強。
 

　　扁平描線圖標(biāo)，統(tǒng)一風(fēng)格，除了要注意線形圖標(biāo)設(shè)計以外，要注意填色區(qū)域的大小。

　　a. 線的形狀
 

　　b.線的粗細
 

　　c. 線的斷點
 

　　d. 填色區(qū)域的大小，顏色
 

　　圖標(biāo)設(shè)計有專業(yè)的參考網(wǎng)格，按照參考網(wǎng)格設(shè)計可以很大程度的使圖標(biāo)大小更為統(tǒng)一，但是胡老師建議大家千萬不要太拘泥于網(wǎng)格，視覺統(tǒng)一最重要，參考網(wǎng)格是幫助設(shè)計的工具，不要被它所限制。理論結(jié)合實踐，實踐的過程中不斷的自我總結(jié)，才能不斷的成長。