正文

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

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

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

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

一、漸變的表現形式

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

1、線性漸變

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

2、徑向漸變

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

3、角度漸變

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

4、混合漸變

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

5、流體漸變

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

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

二、漸變小教程

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

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

方法一：

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

方法二：

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

三、分享幾個案例

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

1、鄰近色系易把控

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

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

2、強視覺感還得對比色

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

3、學會舉一反三

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

4、其他作品欣賞

為了輔助大家理解和開拓思維，為大家選擇了幾個類似的案例作品，希望可以帶給大家更多設計靈感。（以下作品版權歸屬原作者，僅作為學習交流）

四、布置一個小作業

通過對混合漸變實現技巧的學習和案例欣賞，相信大家對于混合漸變有了比較全面的認知。學以致用的目的，下面為大家準備了一個小作業，希望以此來強化大家的理解。

根據以上示意圖提供的高保真原型圖，以混合漸變的形式增強其作品的視覺感。

以下方案為黑馬哥完成的一個示意，大家可以轉換思維和調整新的配色方案，輸出不一樣的全新作品。

作者：黑馬青年

轉載請注明：學UI網》這個效果原來是這樣做出來的

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.indbiotech.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司