本章就開(kāi)始進(jìn)入下一個(gè)主題，關(guān)于裝飾圖標(biāo)的設(shè)計(jì)。

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

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

一、扁平插畫(huà)風(fēng)格

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

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

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

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

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

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

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

最后，開(kāi)始為圖標(biāo)填色。因?yàn)樵谶@套圖標(biāo)中，紅色是主要基調(diào)，所以我們不能大面積的使用其它顏色，于是就將其中一側(cè)進(jìn)行留白處理，只修改了它描邊的色彩。并且還在票據(jù)兩側(cè)的連接處添加了一個(gè)用來(lái)標(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)中，要讓它們的漸變色看起來(lái)自然和諧，是需要技巧的。

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

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

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

三、炫彩漸變風(fēng)格

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

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

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

案例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ì)看起來(lái)很簡(jiǎn)單，只要畫(huà)出一個(gè)幾何的背景，并建立蒙版將實(shí)物圖置入進(jìn)去即可，但還是有不少新手會(huì)犯的錯(cuò)誤，下面我們主要說(shuō)說(shuō)常見(jiàn)的問(wèn)題有哪些。

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

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

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

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

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

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

結(jié)尾

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

對(duì)于裝飾圖標(biāo)的設(shè)計(jì)占時(shí)解釋到這里，掌握以上這種風(fēng)格的畫(huà)法，已經(jīng)可以應(yīng)對(duì)絕大多數(shù)的需求和場(chǎng)景了。

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

原創(chuàng)：?酸梅干超人

微信公眾號(hào)：超人的電話亭