UI界面設計

輕松掌握裝飾圖標設計的技巧

2228

本章就開始進入下一個主題，關于裝飾圖標的設計。

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

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

一、扁平插畫風格

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

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

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

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

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

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

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

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

2、店鋪圖標

3、我的卡包圖標

二、漸變幾何背景

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

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

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

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

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

三、炫彩漸變風格

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

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

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

案例1：

案例2：

案例3：

四、實物貼圖風格

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

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

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

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

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

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

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

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