正文

經常使用愛奇藝刷劇的同學，有沒有發(fā)現(xiàn)愛奇藝的應用圖標又變了。前段時間愛奇藝針對品牌設計進行了較大的調整，最近又悄悄地將應用圖標的背景色換成了這種多彩色混合漸變的形式。

針對這個視覺效果估計大家各有看法，我們就不討論這個話題了，今天黑馬哥是來出教程的~O(∩_∩)O~。

這個類似于極光/彌散漸變的風格最近也比較流行，在 UI 場景中的運用也是比較普及的，被運用到應用圖標的案例中相對較少。大概的回憶了一下，也有一些產品會使用，特別是比較知名的 Instagram 很早之前就使用了，也成為了流行趨勢中的優(yōu)秀案例之一。

通過極光/彌散漸變（混合漸變）的形式強化應用圖標外輪廓背景，不僅可以提高視覺感，也是體現(xiàn)年輕化趨勢的一種色彩表現(xiàn)形式。不過漸變中的色彩本身也是關鍵性的因素，如果色彩不夠年輕活潑，帶來的效果也是千差萬別的。

一、漸變的表現(xiàn)形式

漸變色在我們的設計中是非常普及的，漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營造不一樣的視覺體驗，可以豐富色彩環(huán)境、強化光影質感、增強層次感和空間感等。

1、線性漸變

這是最常見的一種漸變方式，具備明確的方向性，由兩種或者多種顏色組合形成。相較于單色來說，線性漸變可以使得畫面更加豐富，色彩營造出的層次感更強。

2、徑向漸變

徑向漸變是以中心向外擴散而形成的圓形漸變，可以作為立體感的表現(xiàn)，也可以營造向中心聚攏的光影效果。

3、角度漸變

角度漸變形成類似于雷達掃描的效果，屬于運用相對較少的漸變形式。在一些應用圖標的外輪廓背景中會被使用，也可以作為營造產品的光影變化。

4、混合漸變

混合漸變就是多種顏色隨機混合，色彩形成不均勻的自然彌散開，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風格，可以呈現(xiàn)出豐富的色彩變化和隨性自然的年輕化趨勢，被廣泛應用到平面設計、UI 設計、電商設計等眾多視覺設計領域。

5、流體漸變

流體漸變就是多種顏色漸變組合，形成帶有流動感的視覺效果，通常作為背景來豐富設計的視覺感。也有動態(tài)形式的流體漸變，在 APP 和一些屏幕壁紙中出現(xiàn)，帶來的感官體驗也是非常不錯的。

隨著視覺感官體驗的不斷追求，設計師已經不滿足于趨于平面化的漸變形式，探索出造型多變、色彩豐富、刺激感官的視覺體驗，以更加豐富的表現(xiàn)形式來探索漸變方式。

二、漸變小教程

線性漸變、徑向漸變和角度漸變實現(xiàn)起來比較簡單，軟件自帶的漸變屬性即可滿足。下面重點給大家分享如何實現(xiàn)混合漸變的效果，以后再單獨給大家分享關于流體漸變的技巧。

混合漸變顧名思義就是將多種顏色進行混合，形成色彩豐富的過度效果，需要把控的是顏色之間的自然過渡。

方法一：

通過繪制幾個不同顏色的形狀圖形，然后執(zhí)行高斯模糊形成混合漸變，模糊的參數(shù)值要適當大一些，一直到顏色自然過渡為止。

方法二：

如果想要隨機性大一些，可以通過畫筆工具隨意涂抹顏色，這樣形成的效果更加隨機性。然后再執(zhí)行高斯模糊將顏色融合，帶來自然隨性的視覺體驗。

三、分享幾個案例

不能只是紙上談兵，只有反復磨練和嘗試才會熟能生巧。根據(jù)以上的方式黑馬哥完成了以下的作品案例，大家也一起來動動手吧！

1、鄰近色系易把控

混合漸變技法層面來說并不難，配色是相對具備難度的，很多同學都會因為配色不到位而做不出優(yōu)秀的作品。針對應用圖標設計中的配色來說，鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內的色值，混合出來的色彩排斥感都是比較低的，融合度比較高，能夠呈現(xiàn)出比較舒適自然的視覺感官體驗。

如果選擇了色相角度大于 60° 的色值，只要數(shù)值的增減關系控制在 30° 以內都屬于可控范圍，這時候如果出現(xiàn)較大的色彩排斥感，可以通過降低不透明度來進行視覺平衡。