不知道你有沒有出現(xiàn)過這樣的問題：已經(jīng)確定好了具體用線性、面型或是線面圖標了，但具體采用什么樣的風格，還是需要查看大量的參考。其原因還是我們只籠統(tǒng)的將圖標分為了線性、面型以及線面，對具體的樣式?jīng)]有細致的歸納。

本篇文章就面型圖標的設計樣式進行了匯總與解析，希望對你更好的選擇具體的設計樣式有所幫助。

一、基本面型

基本面型圖標可分為兩大類，一種是以Material Design系統(tǒng)面型圖標為主的標準正負形面型圖標，另一種則是再次基礎上對圖標部分元素進行了透明度的改變。

1.標準正負形

標準面型圖標時通過正負形勾畫出的幾何形狀，采用單一色彩，如下圖所示：

注意在繪制圖形時以布爾運算為主（鋼筆工具繪制較容易出現(xiàn)圖標虛化），線條采用矩形工具繪制，而不是采用線條工具。

延伸

為基礎面型圖標加入同色值，低飽和度的淺色背景板，以此豐富圖標，也能更好的平衡視覺大小。

2.透明度改變

在標準面型圖標的基礎上，降低某些部位的透明度，以此形成簡易的層次感。降低透明度的部位多以圖形與圖形交匯處為主。如下圖：

二、扁平多色

扁平多色將圖標拆分為多個圖形，針對不同的圖形分別上色，簡單的是雙色、三色圖標，色彩使用更加容易上手，如下圖：

其次是扁平插畫類圖標，圖標圖形多以實物參考繪制，通過深淺純色的搭配形成圖標圖形的亮暗面。這類圖標細節(jié)更加豐富，適合用在有實物指向的圖標。

三、彩色漸變

彩色漸變圖標，作為最常見的面型圖標，設計樣式的選擇也是非常的多，本文總結(jié)了常見的四種類型。

1.簡單色彩漸變

1）單色漸變

圖標漸變色彩采用統(tǒng)一色值，通過改變明度飽和度形成柔和的單色漸變。為了使圖標看起來更加有層次感，可以為內(nèi)部圖形增加小投影，圖標整體添加彌散投影。

2）柔和多色漸變

圖標采用2~3個色彩，確定一個主色，其他色彩點綴輔助使用，形成視覺效果較柔和的漸變圖標。

2.炫彩撞色漸變

圖標色彩使用大膽，視覺效果強烈，有一種發(fā)光的感覺。色彩的搭配可以搜索“炫彩、霓虹”相關圖片提取。

搜索的色彩提取圖片：

注意：此類圖標一定在整體圖標下加上彌散投影，營造光感。彌散投影的畫法如下：

3.透明度變化

原理同基本面性的透明度改變，在簡單色彩漸變的基礎上，降低某些交匯處圖形的透明度，以此豐富層級感（或在漸變基礎上調(diào)整為低飽和度漸變到達相同的效果）。

4.YOGA漸變

YOGA圖標是最近兩三年流行起來的，風格非常鮮明。特點是在圖形中有非常多的正負形，以相近的色彩做漸變，豐富的正負形形成較為強烈的光影明暗變化。

這種圖標色彩搭配比較簡單，形狀繪制比較復雜，可以通過AI的形狀生成器繪制形成，簡易的形狀則可以通過剪切蒙版形成。

向上圖那種YOGA圖標比較適合繪制APP圖標，用在界面中的圖標，可以加少量形狀剪切形成類似的效果，如下圖：

剪切的形狀多繪制在圖標的邊緣處，形成一定的厚度。繪制過程也很簡單，在對應圖形中剪切一些形狀，以上圖愛心為例，繪制過程如下圖：

注意：剪切的圖形也盡量通過布爾運算得到

延伸

除了上圖常規(guī)的YOGA漸變圖標，還有下圖百度網(wǎng)盤這種規(guī)則幾何的圖形拼接形成了多個面，并對其進行不同色彩的搭配。這種風格圖標與YOGA圖標難點正好相反，形狀繪制較簡單，但色彩搭配較困難。

當然你也可以選擇采用相近的色彩搭配，效果依然很好。

四、疊加

疊加類面型圖標可以通過不同色彩疊加，也可以通過不同漸變疊加。特點就是圖標圖形由多個幾何圖形構(gòu)成，1~2個圖形之間進行疊加，形成層次感。

不同色彩疊加：

不同漸變疊加：

此類圖標的疊加處可以通過將上層圖形的混合模式改成正片疊底得到，如下圖：

五、微質(zhì)感

微質(zhì)感圖標顧名思義，就是圖標有一定的質(zhì)感，有一定的擬物感，比起單純的漸變，光影明暗面清晰，并且可以將高光的部分用淺色高斯模糊表現(xiàn)出來，表現(xiàn)出圖標的厚度。常見在勛章、運營活動中使用。

當然你也可以做的更極致點，有3D的效果，比如美團外賣的金剛區(qū)圖標。

這種3D效果的圖標如果采用AI繪制，也是能實現(xiàn)的，原理其實同3D建模中的切面，為圖形加入網(wǎng)格后改變色彩，直至出現(xiàn)3D的效果。

劃重點

本篇總共介紹了五大類面型圖標的設計樣式，分別是基礎面型、扁平多色、彩色漸變、疊加以及微質(zhì)感。

其中彩色漸變有許多的方式作出差異性的漸變圖標，而微質(zhì)感圖標需要許多細微的調(diào)整才能出現(xiàn)這種效果，繪制起來較為復雜。