正文
經(jīng)常使用愛奇藝刷劇的同學，有沒有發(fā)現(xiàn)愛奇藝的應(yīng)用圖標又變了。前段時間愛奇藝針對品牌設(shè)計進行了較大的調(diào)整，最近又悄悄地將應(yīng)用圖標的背景色換成了這種多彩色混合漸變的形式。
針對這個視覺效果估計大家各有看法，我們就不討論這個話題了，今天黑馬哥是來出教程的~O(∩_∩)O~。
這個類似于極光/彌散漸變的風格最近也比較流行，在 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、混合漸變
混合漸變就是多種顏色隨機混合，色彩形成不均勻的自然彌散開，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風格，可以呈現(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ù)值要適當大一些，一直到顏色自然過渡為止。
方法二：
如果想要隨機性大一些，可以通過畫筆工具隨意涂抹顏色，這樣形成的效果更加隨機性。然后再執(zhí)行高斯模糊將顏色融合，帶來自然隨性的視覺體驗。
三、分享幾個案例
不能只是紙上談兵，只有反復磨練和嘗試才會熟能生巧。根據(jù)以上的方式黑馬哥完成了以下的作品案例，大家也一起來動動手吧！
1、鄰近色系易把控
混合漸變技法層面來說并不難，配色是相對具備難度的，很多同學都會因為配色不到位而做不出優(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、學會舉一反三
今天分享的經(jīng)驗不局限于應(yīng)用圖標的設(shè)計范疇，我們要學會將這個技法舉一反三，運用到更多的設(shè)計場景中。比如在下面作品中的一組信息卡片的設(shè)計中，通過混合漸變形成的卡片背景提高了局部的視覺感，配合磨砂玻璃質(zhì)感的運用，提高了該部分的視覺感官體驗。
4、其他作品欣賞
為了輔助大家理解和開拓思維，為大家選擇了幾個類似的案例作品，希望可以帶給大家更多設(shè)計靈感。（以下作品版權(quán)歸屬原作者，僅作為學習交流）
四、布置一個小作業(yè)
通過對混合漸變實現(xiàn)技巧的學習和案例欣賞，相信大家對于混合漸變有了比較全面的認知。學以致用的目的，下面為大家準備了一個小作業(yè)，希望以此來強化大家的理解。
根據(jù)以上示意圖提供的高保真原型圖，以混合漸變的形式增強其作品的視覺感。
以下方案為黑馬哥完成的一個示意，大家可以轉(zhuǎn)換思維和調(diào)整新的配色方案，輸出不一樣的全新作品。
作者：黑馬青年
轉(zhuǎn)載請注明：學UI網(wǎng)》這個效果原來是這樣做出來的
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司