從零開始畫圖標系列：面性圖標設計方法詳解

前面用了比較長的篇幅講了線性風格的圖標要如何設計。那么面性風格圖標的設計只要熟悉了線性圖標的繪制方式，操作就沒有難點，并且面性風格的實際操作難度比線性圖標更低，所以我們用一篇文章來講面性圖標的設計。

往期回顧：

• 《從零開始畫圖標系列：超全面的基礎知識》
• 《從零開始畫圖標系列：工具類圖標設計規范》
• 《從零開始畫圖標系列：線性圖標設計實戰演示！》

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

下面就進入本篇的具體案例演示。

基本面性風格

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

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

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

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

扁平插畫風格

扁平插畫風格實際上是一個自由度非常高的圖標風格，可以設計出很多有趣又極具創意的插畫式圖標。在本案例中，我們只講解其中一種最基礎的設計方式，便于新人入門。

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

類似搜索或消息圖標這樣有鏤空區域的圖標，我們就可以為鏤空區域填充不同的色彩，使其作為獨立的面呈現，也能達到相同的風格。

最后一種，就是將圖標「擬真」化。比如眼睛圖標，我們可以用接近真實眼睛的樣式來創作，為它增加瞳孔、高光等細節，只要依舊使用純色填充，且將細節數量保持在合理的范圍內，就不會與其它圖標產生沖突。

彩色漸變風格

在面性圖標的彩色漸變中，有多種更細致的設計類型，比如整個圖標采用同一漸變，或者圖標中不同的面采取不同的漸變方式。

整個圖標使用同一漸變色的做法，和線性圖標的漸變方法幾乎一樣，只要在開始填充漸變前將所有圖層進行合并即可。我們來講解一個比較特殊的基礎漸變風格——不同透明度漸變。

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

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

透明疊加風格

最后，就是這類透明疊加的設計風格了。和線性圖標中的疊加設計方式一樣，我們需要將圖形拆分成若干面，才能創造出重疊的區域。

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

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

結語

面性風格的設計到這里就講解完畢了，相對于線性圖標的設計而言，面性工具圖標的設計就簡單很多，雖然設計風格有非常多的延展性和可能性，但大家始終要記得它們依舊是「工具圖標」，識別性是優先于視覺風格的，所以切勿過度強調視覺性而將它們做成了裝飾性圖標。

歡迎關注作者的微信公眾號：「超人的電話亭」