正文
經(jīng)常使用愛奇藝刷劇的同學(xué)，有沒有發(fā)現(xiàn)愛奇藝的應(yīng)用圖標(biāo)又變了。前段時(shí)間愛奇藝針對(duì)品牌設(shè)計(jì)進(jìn)行了較大的調(diào)整，最近又悄悄地將應(yīng)用圖標(biāo)的背景色換成了這種多彩色混合漸變的形式。
針對(duì)這個(gè)視覺效果估計(jì)大家各有看法，我們就不討論這個(gè)話題了，今天黑馬哥是來出教程的~O(∩_∩)O~。
這個(gè)類似于極光/彌散漸變的風(fēng)格最近也比較流行，在 UI 場(chǎng)景中的運(yùn)用也是比較普及的，被運(yùn)用到應(yīng)用圖標(biāo)的案例中相對(duì)較少。大概的回憶了一下，也有一些產(chǎn)品會(huì)使用，特別是比較知名的 Instagram 很早之前就使用了，也成為了流行趨勢(shì)中的優(yōu)秀案例之一。
通過極光/彌散漸變（混合漸變）的形式強(qiáng)化應(yīng)用圖標(biāo)外輪廓背景，不僅可以提高視覺感，也是體現(xiàn)年輕化趨勢(shì)的一種色彩表現(xiàn)形式。不過漸變中的色彩本身也是關(guān)鍵性的因素，如果色彩不夠年輕活潑，帶來的效果也是千差萬別的。
一、漸變的表現(xiàn)形式
漸變色在我們的設(shè)計(jì)中是非常普及的，漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營(yíng)造不一樣的視覺體驗(yàn)，可以豐富色彩環(huán)境、強(qiáng)化光影質(zhì)感、增強(qiáng)層次感和空間感等。
1、線性漸變
這是最常見的一種漸變方式，具備明確的方向性，由兩種或者多種顏色組合形成。相較于單色來說，線性漸變可以使得畫面更加豐富，色彩營(yíng)造出的層次感更強(qiáng)。
2、徑向漸變
徑向漸變是以中心向外擴(kuò)散而形成的圓形漸變，可以作為立體感的表現(xiàn)，也可以營(yíng)造向中心聚攏的光影效果。
3、角度漸變
角度漸變形成類似于雷達(dá)掃描的效果，屬于運(yùn)用相對(duì)較少的漸變形式。在一些應(yīng)用圖標(biāo)的外輪廓背景中會(huì)被使用，也可以作為營(yíng)造產(chǎn)品的光影變化。
4、混合漸變
混合漸變就是多種顏色隨機(jī)混合，色彩形成不均勻的自然彌散開，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風(fēng)格，可以呈現(xiàn)出豐富的色彩變化和隨性自然的年輕化趨勢(shì)，被廣泛應(yīng)用到平面設(shè)計(jì)、UI 設(shè)計(jì)、電商設(shè)計(jì)等眾多視覺設(shè)計(jì)領(lǐng)域。
5、流體漸變
流體漸變就是多種顏色漸變組合，形成帶有流動(dòng)感的視覺效果，通常作為背景來豐富設(shè)計(jì)的視覺感。也有動(dòng)態(tài)形式的流體漸變，在 APP 和一些屏幕壁紙中出現(xiàn)，帶來的感官體驗(yàn)也是非常不錯(cuò)的。
隨著視覺感官體驗(yàn)的不斷追求，設(shè)計(jì)師已經(jīng)不滿足于趨于平面化的漸變形式，探索出造型多變、色彩豐富、刺激感官的視覺體驗(yàn)，以更加豐富的表現(xiàn)形式來探索漸變方式。
二、漸變小教程
線性漸變、徑向漸變和角度漸變實(shí)現(xiàn)起來比較簡(jiǎn)單，軟件自帶的漸變屬性即可滿足。下面重點(diǎn)給大家分享如何實(shí)現(xiàn)混合漸變的效果，以后再單獨(dú)給大家分享關(guān)于流體漸變的技巧。
混合漸變顧名思義就是將多種顏色進(jìn)行混合，形成色彩豐富的過度效果，需要把控的是顏色之間的自然過渡。
方法一：
通過繪制幾個(gè)不同顏色的形狀圖形，然后執(zhí)行高斯模糊形成混合漸變，模糊的參數(shù)值要適當(dāng)大一些，一直到顏色自然過渡為止。
方法二：
如果想要隨機(jī)性大一些，可以通過畫筆工具隨意涂抹顏色，這樣形成的效果更加隨機(jī)性。然后再執(zhí)行高斯模糊將顏色融合，帶來自然隨性的視覺體驗(yàn)。
三、分享幾個(gè)案例
不能只是紙上談兵，只有反復(fù)磨練和嘗試才會(huì)熟能生巧。根據(jù)以上的方式黑馬哥完成了以下的作品案例，大家也一起來動(dòng)動(dòng)手吧！
1、鄰近色系易把控
混合漸變技法層面來說并不難，配色是相對(duì)具備難度的，很多同學(xué)都會(huì)因?yàn)榕渖坏轿欢霾怀鰞?yōu)秀的作品。針對(duì)應(yīng)用圖標(biāo)設(shè)計(jì)中的配色來說，鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內(nèi)的色值，混合出來的色彩排斥感都是比較低的，融合度比較高，能夠呈現(xiàn)出比較舒適自然的視覺感官體驗(yàn)。
如果選擇了色相角度大于 60° 的色值，只要數(shù)值的增減關(guān)系控制在 30° 以內(nèi)都屬于可控范圍，這時(shí)候如果出現(xiàn)較大的色彩排斥感，可以通過降低不透明度來進(jìn)行視覺平衡。
2、強(qiáng)視覺感還得對(duì)比色
雖然鄰近色的處理比較容易把控，但是帶來的視覺感也是與顏色對(duì)比關(guān)系成正比的，想要達(dá)到強(qiáng)視覺感還得選對(duì)比色。色相選擇范圍在 120°~180° 之間的色值，容易形成較強(qiáng)的視覺張力，通過增加高斯模糊的值才能稍微過度相互之間的色彩排斥感。
3、學(xué)會(huì)舉一反三
今天分享的經(jīng)驗(yàn)不局限于應(yīng)用圖標(biāo)的設(shè)計(jì)范疇，我們要學(xué)會(huì)將這個(gè)技法舉一反三，運(yùn)用到更多的設(shè)計(jì)場(chǎng)景中。比如在下面作品中的一組信息卡片的設(shè)計(jì)中，通過混合漸變形成的卡片背景提高了局部的視覺感，配合磨砂玻璃質(zhì)感的運(yùn)用，提高了該部分的視覺感官體驗(yàn)。
4、其他作品欣賞
為了輔助大家理解和開拓思維，為大家選擇了幾個(gè)類似的案例作品，希望可以帶給大家更多設(shè)計(jì)靈感。（以下作品版權(quán)歸屬原作者，僅作為學(xué)習(xí)交流）
四、布置一個(gè)小作業(yè)
通過對(duì)混合漸變實(shí)現(xiàn)技巧的學(xué)習(xí)和案例欣賞，相信大家對(duì)于混合漸變有了比較全面的認(rèn)知。學(xué)以致用的目的，下面為大家準(zhǔn)備了一個(gè)小作業(yè)，希望以此來強(qiáng)化大家的理解。
根據(jù)以上示意圖提供的高保真原型圖，以混合漸變的形式增強(qiáng)其作品的視覺感。
以下方案為黑馬哥完成的一個(gè)示意，大家可以轉(zhuǎn)換思維和調(diào)整新的配色方案，輸出不一樣的全新作品。
作者：黑馬青年
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這個(gè)效果原來是這樣做出來的
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司