在裝飾圖標(biāo)中，就沒有工具圖標(biāo)那么嚴(yán)謹(jǐn)?shù)囊?guī)范需要遵循，也就意味著自由度更高，可以任意發(fā)揮。顯然，想要通過一篇文章掌握所有的裝飾圖標(biāo)視覺設(shè)計(jì)方法，并不現(xiàn)實(shí)，新手只要將精力聚焦在最常用的幾種圖標(biāo)風(fēng)格的設(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)設(shè)計(jì)方法詳解》

裝飾圖標(biāo)最主要的應(yīng)用區(qū)域，集中在首頁(yè)的快速入口上，也是今天多數(shù)應(yīng)用中會(huì)使用的組件。下面，我們會(huì)講解國(guó)內(nèi)主流應(yīng)用中的幾種裝飾圖標(biāo)的設(shè)計(jì)。

扁平插畫風(fēng)格

裝飾圖標(biāo)的主要作用是豐富視覺體驗(yàn)，對(duì)于識(shí)別性的要求較低，所以我們可以在這里應(yīng)用更復(fù)雜的圖形和添加更多的細(xì)節(jié)。在這里的扁平插畫風(fēng)格設(shè)計(jì)更具象，而不是像工具圖標(biāo)一樣的抽象化，所以完整的采用扁平插畫的設(shè)計(jì)是沒問題的。

例如在肯德基客戶端首頁(yè)的服務(wù)分類中，使用的圖標(biāo)就是依據(jù)扁平插畫的形式設(shè)計(jì)的，有較多的色彩和完整的細(xì)節(jié)。

這類圖標(biāo)的設(shè)計(jì)并不困難，只要具備了工具圖標(biāo)的設(shè)計(jì)基礎(chǔ)，就可以很快學(xué)會(huì)并運(yùn)用。它的設(shè)計(jì)特征是這樣的，先通過繪制具體的圖形輪廓，然后為這個(gè)輪廓內(nèi)添加細(xì)節(jié)，并對(duì)不同的面填充不同的色彩進(jìn)行區(qū)分。

下面，我們通過講解幾個(gè)圖標(biāo)的設(shè)計(jì)過程，幫助大家學(xué)習(xí)這種設(shè)計(jì)風(fēng)格。

1. 優(yōu)惠券圖標(biāo)

先通過模擬現(xiàn)實(shí)世界的優(yōu)惠券樣式，確定出基本的線性輪廓。

但作為裝飾圖標(biāo)來說，這樣的設(shè)計(jì)目前有些簡(jiǎn)陋，左側(cè)空出了大量的留白，所以我們要考慮如何增加細(xì)節(jié)來豐富這個(gè)區(qū)域。于是，使用 % 號(hào)就可以比較好的標(biāo)示折扣。

最后，開始為圖標(biāo)填色。因?yàn)樵谶@套圖標(biāo)中，紅色是主要基調(diào)，所以我們不能大面積的使用其它顏色，于是就將其中一側(cè)進(jìn)行留白處理，只修改了它描邊的色彩。并且還在票據(jù)兩側(cè)的連接處添加了一個(gè)用來標(biāo)示陰影的豎線。

2. 店鋪圖標(biāo)

3. 我的卡包圖標(biāo)

漸變幾何背景

和其它風(fēng)格比較，在快速入口中，線上案例應(yīng)用得最多的風(fēng)格其實(shí)是漸變幾何背景的設(shè)計(jì)方案，即在一個(gè)應(yīng)用漸變色的背景上貼了一個(gè)線性或面性的圖標(biāo)。

這種風(fēng)格的設(shè)計(jì)，主要在于背景漸變色的應(yīng)用，通常，在一組彩色快速入口的圖標(biāo)中，要讓它們的漸變色看起來自然和諧，是需要技巧的。

例如有四個(gè)圖標(biāo)，首先要定義出不同的色相，然后再對(duì)它們應(yīng)用相同的漸變模式。例如，使用相同的漸變角度，然后在漸變的起始色使用該色相，在結(jié)尾使用不同明度、飽和度的色彩。

之后，再在上方置入圖標(biāo)的圖形，并為它們添加適當(dāng)?shù)年幱凹纯伞?/p>

如果在這個(gè)基礎(chǔ)上，還想再添加細(xì)節(jié)，那么就可以在上方的圖形中添加一些折疊的陰影效果，強(qiáng)化立體感。

炫彩漸變風(fēng)格

這是一個(gè)比較奇特的設(shè)計(jì)風(fēng)格，在過去只存在于飛機(jī)稿中，是一種單純?yōu)榱俗非笠曈X表現(xiàn)力的設(shè)計(jì)形式，通過高飽和的漸變、撞色，抓取瀏覽者的眼球。

這類風(fēng)格的設(shè)計(jì)，在確定了圖形以后，就是為它們填充高飽和度的漸變色。和扁平插畫比較不同的是，色彩的填充不是用來描繪物體的顏色，而僅僅是視覺表現(xiàn)的一種方法，所以顏色的添加追求的不是「合理」，而是純粹的「好看」。

并且，通常這類圖標(biāo)還會(huì)使用前兩年開始流行的彩色投影，增加界面本身的層次感。下面，我們也通過 3 個(gè)案例，為大家演示一下這類圖標(biāo)設(shè)計(jì)的過程。

案例1：

案例2：

案例3：

實(shí)物貼圖風(fēng)格

最后，講講實(shí)物貼圖的圖標(biāo)風(fēng)格。這種圖標(biāo)出現(xiàn)在涉及到實(shí)物產(chǎn)品的應(yīng)用中，例如電商應(yīng)用，智能硬件控制應(yīng)用等等。

這類設(shè)計(jì)看起來很簡(jiǎn)單，只要畫出一個(gè)幾何的背景，并建立蒙版將實(shí)物圖置入進(jìn)去即可，但還是有不少新手會(huì)犯錯(cuò)誤，下面我們主要說說常見的問題有哪些。

1. 物體的透視

和工具圖標(biāo)一樣，我們要盡可能的保證整組圖標(biāo)中圖形的形狀和透視可以統(tǒng)一，如果實(shí)物圖采用的透視不一致，那么空間的對(duì)立感就更強(qiáng)，也容易被用戶覺察到違和感。

2. 形體和比例

當(dāng)我們采用實(shí)物照片時(shí)，我們往往不能控制該物體完整的形狀，但需要切記的是，不是物體本身是什么形狀我們都要完整的置入進(jìn)去。

比如入口中有口紅和香水兩種，口紅是細(xì)長(zhǎng)的而香水是圓形，那么我們可以做的就是放大口紅，最終只展示它的局部，否則它們的對(duì)比會(huì)完全失衡。

3. 圖形的質(zhì)感

實(shí)物的圖形，還有一個(gè)非常重要的細(xì)節(jié)，就是它們的質(zhì)感。這種質(zhì)感指的不是物體本身的材質(zhì)，而是攝影、后期產(chǎn)生的質(zhì)感。如下圖的對(duì)比，同一件商品，手機(jī)直出的圖，和經(jīng)過商品精修的圖，展現(xiàn)出來的質(zhì)感是完全不一樣的。

如果強(qiáng)行將有精修痕跡和普通照片摳出來的商品放到一起，也只能給用戶產(chǎn)生巨大的違和感。所以，如果提供給我們的素材本身質(zhì)感不同，那么我們就要在 PS 中對(duì)它們進(jìn)行調(diào)試，盡可能保證它們的一致。

4. 前后對(duì)比

因?yàn)槭菙z影圖，所以圖形本身包含的細(xì)節(jié)會(huì)非常豐富，而且色彩也可能比較多。在采用了幾何背景時(shí)，就要保證它能更好地襯托主體物。如果使用較強(qiáng)的顏色，或是太多細(xì)節(jié)，就會(huì)導(dǎo)致前后元素的分離度不足，無法凸顯物體本身。所以，多數(shù)采用這種風(fēng)格的設(shè)計(jì)案例中，背景用色都使用飽和度偏低的配色。

只要不犯上面 4 種錯(cuò)誤，那么設(shè)計(jì)這類圖標(biāo)時(shí)，就能保證最終的效果不會(huì)太差。

總結(jié)

掌握以上這種風(fēng)格的畫法，已經(jīng)可以應(yīng)對(duì)絕大多數(shù)的需求和場(chǎng)景了。

但這并不是終點(diǎn)，應(yīng)用對(duì)于視覺風(fēng)格的追求愈發(fā)的重要，想要嘗試更多的設(shè)計(jì)風(fēng)格，那么就需要掌握更多種裝飾類圖標(biāo)的設(shè)計(jì)方法。需要設(shè)計(jì)師朋友們?cè)谥蟮臅r(shí)間里努力積累相關(guān)的技巧和思路。

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