前面用了比較長(zhǎng)的篇幅講了線性風(fēng)格的圖標(biāo)要如何設(shè)計(jì)。那么面性風(fēng)格圖標(biāo)的設(shè)計(jì)只要熟悉了線性圖標(biāo)的繪制方式，操作就沒有難點(diǎn)，并且面性風(fēng)格的實(shí)際操作難度比線性圖標(biāo)更低，所以我們用一篇文章來講面性圖標(biāo)的設(shè)計(jì)。

往期回顧：

• 《從零開始畫圖標(biāo)系列：超全面的基礎(chǔ)知識(shí)》
• 《從零開始畫圖標(biāo)系列：工具類圖標(biāo)設(shè)計(jì)規(guī)范》
• 《從零開始畫圖標(biāo)系列：線性圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)演示！》

面性圖標(biāo)在操作中和線性圖標(biāo)的最大差別就在于描邊和填充模式，我們知道為了滿足像素對(duì)齊的要求，線性描邊會(huì)在操作中產(chǎn)生很多不可控的因素，要用很多額外的操作步驟去彌補(bǔ)。在面性圖標(biāo)中，就不需要使用描邊，并且使用相同的圖標(biāo)模板即可。

下面就進(jìn)入本篇的具體案例演示。

基本面性風(fēng)格

如圖所示，我們使用線性圖標(biāo)中的樣式，設(shè)計(jì)成面性效果。具體的操作步驟就不需要再完整演示了，只需要將所有線性風(fēng)格演示中的描邊替換成填充，再使用對(duì)應(yīng)的路徑查找器功能即可。

需要注意的是，可能我們會(huì)習(xí)慣于使用線條工具繪制很多 1pt 寬的直線，這是錯(cuò)誤的做法。我們需要使用矩形工具畫出一個(gè)完整的閉合圖形，再使用路徑查找器工具或者對(duì)圖形進(jìn)行批量操作，這樣才能保證統(tǒng)一。

還有，面性圖標(biāo)不代表完全不能出現(xiàn)「線性」元素，在一些特定的情況下，我們依舊要通過線條的形式展現(xiàn)圖形輪廓，比如搜索圖標(biāo)的鏡片，使用全填充的樣式顯然效果不理想，所以鏤空鏡片區(qū)域是不可避免的。

雖然我們不可避免要使用「線性」的元素，但在面性風(fēng)格中，這些圖形的描邊元素不能太細(xì)，應(yīng)該使用不小于 2pt 的寬度。并且，為了保證圖標(biāo)的一致性，整套圖標(biāo)的線條都要盡可能使用相同的粗細(xì)，而不是這里使用了 2pt，在別的圖標(biāo)中就是 4pt。

扁平插畫風(fēng)格

扁平插畫風(fēng)格實(shí)際上是一個(gè)自由度非常高的圖標(biāo)風(fēng)格，可以設(shè)計(jì)出很多有趣又極具創(chuàng)意的插畫式圖標(biāo)。在本案例中，我們只講解其中一種最基礎(chǔ)的設(shè)計(jì)方式，便于新人入門。

最基礎(chǔ)的扁平插畫，就是在面性圖標(biāo)的基礎(chǔ)上，將圖形拆分成不同面的組合，然后分別為這些面填充純色即可。比如心型圖標(biāo)，看起來像是只有一個(gè)面的圖形，但我們可以人為居中將它分割成兩個(gè)面，然后填充同色系的不同明度，就可以得到一個(gè)扁平插畫風(fēng)格的圖標(biāo)。

類似搜索或消息圖標(biāo)這樣有鏤空區(qū)域的圖標(biāo)，我們就可以為鏤空區(qū)域填充不同的色彩，使其作為獨(dú)立的面呈現(xiàn)，也能達(dá)到相同的風(fēng)格。

最后一種，就是將圖標(biāo)「擬真」化。比如眼睛圖標(biāo)，我們可以用接近真實(shí)眼睛的樣式來創(chuàng)作，為它增加瞳孔、高光等細(xì)節(jié)，只要依舊使用純色填充，且將細(xì)節(jié)數(shù)量保持在合理的范圍內(nèi)，就不會(huì)與其它圖標(biāo)產(chǎn)生沖突。

彩色漸變風(fēng)格

在面性圖標(biāo)的彩色漸變中，有多種更細(xì)致的設(shè)計(jì)類型，比如整個(gè)圖標(biāo)采用同一漸變，或者圖標(biāo)中不同的面采取不同的漸變方式。

整個(gè)圖標(biāo)使用同一漸變色的做法，和線性圖標(biāo)的漸變方法幾乎一樣，只要在開始填充漸變前將所有圖層進(jìn)行合并即可。我們來講解一個(gè)比較特殊的基礎(chǔ)漸變風(fēng)格——不同透明度漸變。

比如心形圖標(biāo)，我們把它劃分成了兩個(gè)不同的面的組合，然后都使用了紅色的漸變色，一強(qiáng)一弱。通常，我們只要先設(shè)定出較強(qiáng)的漸變，然后再復(fù)制這個(gè)漸變色到另一個(gè)面中，降低它的透明度即可。

在使用了透明度的圖形中，要注意的是為了保證在實(shí)際使用中不讓圖形背面的元素影響到圖標(biāo)色彩本身，我們要將這些圖形復(fù)制一層填充成白色并置于底部。

透明疊加風(fēng)格

最后，就是這類透明疊加的設(shè)計(jì)風(fēng)格了。和線性圖標(biāo)中的疊加設(shè)計(jì)方式一樣，我們需要將圖形拆分成若干面，才能創(chuàng)造出重疊的區(qū)域。

在這個(gè)方案中，圖標(biāo)盡可能使用純色，會(huì)比使用漸變的效果更好，原因在于我們對(duì)重疊區(qū)域色彩的控制上。可能很多同學(xué)看到這個(gè)風(fēng)格，會(huì)以為疊加的區(qū)域只要控制透明度就可以了，但這種效果通常很不理想，尤其在配色為撞色上，相交部分的色彩就會(huì)有「朦朧」感，缺少通透的舒適性，并且圖形本身的飽和度也會(huì)受到影響，比如下面的演示：

通常，相交區(qū)域的色彩要另外配置。也就是在繪制好圖形的所有輪廓以后，將它們一起選中，然后使用「圖像生成工具」，再為相交的區(qū)域單獨(dú)選擇配色。下圖就是單獨(dú)挑選的兩個(gè)配色和透明度的方式對(duì)比。

結(jié)語

面性風(fēng)格的設(shè)計(jì)到這里就講解完畢了，相對(duì)于線性圖標(biāo)的設(shè)計(jì)而言，面性工具圖標(biāo)的設(shè)計(jì)就簡(jiǎn)單很多，雖然設(shè)計(jì)風(fēng)格有非常多的延展性和可能性，但大家始終要記得它們依舊是「工具圖標(biāo)」，識(shí)別性是優(yōu)先于視覺風(fēng)格的，所以切勿過度強(qiáng)調(diào)視覺性而將它們做成了裝飾性圖標(biāo)。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」