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

往期回顧:

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

扁平插畫風格

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

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

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

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

1. 優惠券圖標

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

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

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

2. 店鋪圖標

3. 我的卡包圖標

漸變幾何背景

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

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

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

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

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

炫彩漸變風格

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

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

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

案例1:

案例2:

案例3:

實物貼圖風格

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

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

1. 物體的透視

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

2. 形體和比例

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

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

3. 圖形的質感

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

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

4. 前后對比

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

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

總結

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

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

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

點贊
收藏 152

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
相關推薦
2 收藏