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

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

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

　　一. 面形圖標(biāo)
 

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

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

　　1.正形

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

　　a. 面的面積
 

　　b.負(fù)形的面積
 

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

　　d. 形的統(tǒng)一。可以從形的形狀，圓角進(jìn)行統(tǒng)一

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

　　2.反白

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

　　注意點(diǎn)如下：
 

　　a. 面的面積
 

　　b. 負(fù)形的面積
 

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

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

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

　　.線形圖標(biāo)
 

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

　　線形圖標(biāo)的使用也有兩種：正形和反白。大海不建議線形圖標(biāo)的反白使用，因?yàn)閺脑O(shè)計(jì)邏輯上講，背板結(jié)合線形圖標(biāo)是互相矛盾的。
 

　　正形

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

　　a. 線的形狀
 

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

　　c. 線的粗細(xì)
 

　　d. 線的斷點(diǎn)

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

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

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

　　a. 線的形狀
 

　　b.線的粗細(xì)
 

　　c. 線的斷點(diǎn)
 

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

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