正文

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

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

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

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

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

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

1、線性漸變

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

2、徑向漸變

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

3、角度漸變

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

4、混合漸變

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

5、流體漸變

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

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

二、漸變小教程

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

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

方法一：

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

方法二：

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

三、分享幾個案例

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

1、鄰近色系易把控

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

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

2、強視覺感還得對比色

雖然鄰近色的處理比較容易把控，但是帶來的視覺感也是與顏色對比關(guān)系成正比的，想要達到強視覺感還得選對比色。色相選擇范圍在 120°~180° 之間的色值，容易形成較強的視覺張力，通過增加高斯模糊的值才能稍微過度相互之間的色彩排斥感。

3、學(xué)會舉一反三

今天分享的經(jīng)驗不局限于應(yīng)用圖標的設(shè)計范疇，我們要學(xué)會將這個技法舉一反三，運用到更多的設(shè)計場景中。比如在下面作品中的一組信息卡片的設(shè)計中，通過混合漸變形成的卡片背景提高了局部的視覺感，配合磨砂玻璃質(zhì)感的運用，提高了該部分的視覺感官體驗。