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

本篇文章就面型圖標(biāo)的設(shè)計(jì)樣式進(jìn)行了匯總與解析，希望對(duì)你更好的選擇具體的設(shè)計(jì)樣式有所幫助。

一、基本面型

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

1.標(biāo)準(zhǔn)正負(fù)形

標(biāo)準(zhǔn)面型圖標(biāo)時(shí)通過正負(fù)形勾畫出的幾何形狀，采用單一色彩，如下圖所示：

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

延伸

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

2.透明度改變

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

二、扁平多色

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

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

三、彩色漸變

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

1.簡單色彩漸變

1）單色漸變

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

2）柔和多色漸變

圖標(biāo)采用2~3個(gè)色彩，確定一個(gè)主色，其他色彩點(diǎn)綴輔助使用，形成視覺效果較柔和的漸變圖標(biāo)。

2.炫彩撞色漸變

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

搜索的色彩提取圖片：

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

3.透明度變化

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

4.YOGA漸變

YOGA圖標(biāo)是最近兩三年流行起來的，風(fēng)格非常鮮明。特點(diǎn)是在圖形中有非常多的正負(fù)形，以相近的色彩做漸變，豐富的正負(fù)形形成較為強(qiáng)烈的光影明暗變化。

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

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

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

注意：剪切的圖形也盡量通過布爾運(yùn)算得到

延伸

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

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

四、疊加

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

不同色彩疊加：

不同漸變疊加：

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

五、微質(zhì)感

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

當(dāng)然你也可以做的更極致點(diǎn)，有3D的效果，比如美團(tuán)外賣的金剛區(qū)圖標(biāo)。

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

劃重點(diǎn)

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

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