從零開始畫圖標系列：裝飾圖標設計指南

在裝飾圖標中，就沒有工具圖標那么嚴謹的規范需要遵循，也就意味著自由度更高，可以任意發揮。顯然，想要通過一篇文章掌握所有的裝飾圖標視覺設計方法，并不現實，新手只要將精力聚焦在最常用的幾種圖標風格的設計上即可。

往期回顧：

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

裝飾圖標最主要的應用區域，集中在首頁的快速入口上，也是今天多數應用中會使用的組件。下面，我們會講解國內主流應用中的幾種裝飾圖標的設計。

扁平插畫風格

裝飾圖標的主要作用是豐富視覺體驗，對于識別性的要求較低，所以我們可以在這里應用更復雜的圖形和添加更多的細節。在這里的扁平插畫風格設計更具象，而不是像工具圖標一樣的抽象化，所以完整的采用扁平插畫的設計是沒問題的。

例如在肯德基客戶端首頁的服務分類中，使用的圖標就是依據扁平插畫的形式設計的，有較多的色彩和完整的細節。

這類圖標的設計并不困難，只要具備了工具圖標的設計基礎，就可以很快學會并運用。它的設計特征是這樣的，先通過繪制具體的圖形輪廓，然后為這個輪廓內添加細節，并對不同的面填充不同的色彩進行區分。

下面，我們通過講解幾個圖標的設計過程，幫助大家學習這種設計風格。

1. 優惠券圖標

先通過模擬現實世界的優惠券樣式，確定出基本的線性輪廓。

但作為裝飾圖標來說，這樣的設計目前有些簡陋，左側空出了大量的留白，所以我們要考慮如何增加細節來豐富這個區域。于是，使用 % 號就可以比較好的標示折扣。

最后，開始為圖標填色。因為在這套圖標中，紅色是主要基調，所以我們不能大面積的使用其它顏色，于是就將其中一側進行留白處理，只修改了它描邊的色彩。并且還在票據兩側的連接處添加了一個用來標示陰影的豎線。

2. 店鋪圖標

3. 我的卡包圖標

漸變幾何背景

和其它風格比較，在快速入口中，線上案例應用得最多的風格其實是漸變幾何背景的設計方案，即在一個應用漸變色的背景上貼了一個線性或面性的圖標。

這種風格的設計，主要在于背景漸變色的應用，通常，在一組彩色快速入口的圖標中，要讓它們的漸變色看起來自然和諧，是需要技巧的。

例如有四個圖標，首先要定義出不同的色相，然后再對它們應用相同的漸變模式。例如，使用相同的漸變角度，然后在漸變的起始色使用該色相，在結尾使用不同明度、飽和度的色彩。

之后，再在上方置入圖標的圖形，并為它們添加適當的陰影即可。

如果在這個基礎上，還想再添加細節，那么就可以在上方的圖形中添加一些折疊的陰影效果，強化立體感。

炫彩漸變風格

這是一個比較奇特的設計風格，在過去只存在于飛機稿中，是一種單純為了追求視覺表現力的設計形式，通過高飽和的漸變、撞色，抓取瀏覽者的眼球。

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

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

案例1：

案例2：

案例3：

實物貼圖風格

最后，講講實物貼圖的圖標風格。這種圖標出現在涉及到實物產品的應用中，例如電商應用，智能硬件控制應用等等。

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

1. 物體的透視

和工具圖標一樣，我們要盡可能的保證整組圖標中圖形的形狀和透視可以統一，如果實物圖采用的透視不一致，那么空間的對立感就更強，也容易被用戶覺察到違和感。

2. 形體和比例

當我們采用實物照片時，我們往往不能控制該物體完整的形狀，但需要切記的是，不是物體本身是什么形狀我們都要完整的置入進去。

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

3. 圖形的質感

實物的圖形，還有一個非常重要的細節，就是它們的質感。這種質感指的不是物體本身的材質，而是攝影、后期產生的質感。如下圖的對比，同一件商品，手機直出的圖，和經過商品精修的圖，展現出來的質感是完全不一樣的。

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

4. 前后對比

因為是攝影圖，所以圖形本身包含的細節會非常豐富，而且色彩也可能比較多。在采用了幾何背景時，就要保證它能更好地襯托主體物。如果使用較強的顏色，或是太多細節，就會導致前后元素的分離度不足，無法凸顯物體本身。所以，多數采用這種風格的設計案例中，背景用色都使用飽和度偏低的配色。

只要不犯上面 4 種錯誤，那么設計這類圖標時，就能保證最終的效果不會太差。

總結

掌握以上這種風格的畫法，已經可以應對絕大多數的需求和場景了。

但這并不是終點，應用對于視覺風格的追求愈發的重要，想要嘗試更多的設計風格，那么就需要掌握更多種裝飾類圖標的設計方法。需要設計師朋友們在之后的時間里努力積累相關的技巧和思路。

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