UI設(shè)計(jì)色彩趨勢(shì)總結(jié)

　　本文提出了四個(gè)色彩趨勢(shì)：霓虹漸變、輕量漸變、高飽和度色系、夢(mèng)幻色/幻彩色系。從現(xiàn)實(shí)圖庫(kù)入手，今天AAA教育郭老師就總結(jié)出該色彩趨勢(shì)對(duì)應(yīng)的關(guān)鍵詞以及色彩特征。對(duì)部分案例進(jìn)行了解析，更深入地了解其運(yùn)用方向以及實(shí)現(xiàn)技巧。希望這些內(nèi)容可以起到拋磚引玉的作用，歡迎大家探討。
 

　　一、霓虹漸變

 

　　現(xiàn)實(shí)生活中，炫彩奪目的霓虹燈效果常被應(yīng)用于廣告牌、燈箱的展示中，在暗夜的烘托下，霓虹燈展現(xiàn)出光影陸離的光影效果，吸引著人們的眼球，留下強(qiáng)烈的視覺(jué)沖擊。如圖所示，暗夜中的霓虹燈效果，為霓虹漸變的現(xiàn)實(shí)靈感來(lái)源。

 

　　夜色下的霓虹燈
 

　　關(guān)鍵詞

 

　　霓虹色特點(diǎn)總結(jié)
 

　　1、以紫色、藍(lán)色、洋紅為主的冷暖色搭配;2、整體顏色對(duì)比度高;3、以冷色調(diào)為主，局部暖色調(diào)，搭配霓虹光感對(duì)比色點(diǎn)綴;4、背景用暗色調(diào)更能凸顯霓虹效果;5、根據(jù)霓虹燈的靈感，采用了霓虹燈發(fā)光的效果。 近年來(lái)，強(qiáng)視覺(jué)沖擊的漸變色被廣泛應(yīng)用在各個(gè)領(lǐng)域，包括宣傳海報(bào)、綜藝節(jié)目、游戲等等，其中最為矚目的是霓虹漸變，設(shè)計(jì)師通過(guò)將這種高飽和度的漸變色與暗色調(diào)背景結(jié)合，形成強(qiáng)烈的視覺(jué)沖擊，突出主體，渲染氛圍，使整個(gè)畫(huà)面的色調(diào)更加活力化、年輕化。

 

　　01 娛樂(lè)案例
 

　　最近較火的綜藝節(jié)目“這就是街舞”，其宣傳海報(bào)通過(guò)高飽和度的霓虹色漸變，與人物及背景形成強(qiáng)明暗對(duì)比，結(jié)合對(duì)人物本身的光影細(xì)節(jié)刻畫(huà)，突出人物主體，增強(qiáng)畫(huà)面視覺(jué)沖擊力。

 

　　02 游戲案例
 

　　2020年7月任天堂發(fā)布的一款游戲的畫(huà)面以紫色、藍(lán)色、洋紅為主基調(diào)的冷暖色搭配，通過(guò)明暗色的對(duì)比，以及大面積的紫色光影渲染氛圍，營(yíng)造出極強(qiáng)的未來(lái)科技感，而霓虹光感的使用以及涂鴉風(fēng)格的融入，使得游戲更加時(shí)尚、自由。

 

　　01 專題頁(yè)
 

　　頁(yè)面整體以紫色，藍(lán)色，洋紅為主，冷暖色搭配，營(yíng)造出層次感，活潑生動(dòng)且年輕化;偏暗色調(diào)的霓虹漸變色背景烘托出專題頁(yè)的內(nèi)容主體，使得頁(yè)面運(yùn)營(yíng)氛圍更好、更強(qiáng);
 

　　同時(shí)在一些重要的、需要用戶操作點(diǎn)擊的部分使用了暖色調(diào)的霓虹色漸變，使得內(nèi)容主體在冷色調(diào)的環(huán)境下更為突出，提高了用戶體驗(yàn)。

 

　　02 App
 

　　以暗色調(diào)背景作為烘托，搭配紫色、藍(lán)色、洋紅為主的冷暖色，是霓虹色漸變經(jīng)典的應(yīng)用方式。
 

　　在暗色背景下運(yùn)用霓虹色漸變，通過(guò)明暗的強(qiáng)對(duì)比突出頁(yè)面關(guān)鍵元素，對(duì)用戶進(jìn)行視覺(jué)引導(dǎo)，同時(shí)豐富頁(yè)面層次，增強(qiáng)頁(yè)面的視覺(jué)沖擊力及藝術(shù)感染力。

 

　　03 Web
 

　　暗色的背景與撞色霓虹搭配的插畫(huà)手法使得界面看起來(lái)更加的酷炫和高科技，整體頁(yè)面在霓虹色漸變的使用下更富層次性。
 

　　通過(guò)主體與環(huán)境色的呼應(yīng)、冷暖明暗的對(duì)比，展現(xiàn)出主體光源對(duì)空間層級(jí)的變化效果。此組合用來(lái)作為web頭部頁(yè)面，沖擊感十足，科技感也非常的棒。

 

　　04 Icon
 

　　通過(guò)高飽和度的霓虹漸變色彩，結(jié)合外發(fā)光、疊加、模糊等多種技法，塑造出更加豐富的光影效果，不僅增強(qiáng)圖標(biāo)視覺(jué)表現(xiàn)力及空間感，更凸顯了圖標(biāo)的風(fēng)格化與趣味性。暗色調(diào)背景的烘托，使霓虹色漸變圖標(biāo)更加有質(zhì)感，更加突顯。

 

　　05 插畫(huà)
 

　　通過(guò)大面積的霓虹色漸變結(jié)合迷彩漸變的繪制手法，構(gòu)建不同色彩鮮明的矩形圖案，暗色調(diào)的背景烘托與顏色用冷色為主暖色為輔、點(diǎn)綴，畫(huà)面感極強(qiáng)，極具視覺(jué)沖擊力。

 

　　霓虹色漸變?cè)诎瞪{(diào)的背景烘托下，撞色的沖擊感使得畫(huà)面更加具有科技感、潮流感;
 

　　對(duì)于霓虹色漸變使用比較頻繁的賽博朋克風(fēng)、故障風(fēng)，也是現(xiàn)下較為流行的風(fēng)格，通過(guò)豐富鮮明的色彩與背景作強(qiáng)對(duì)比，營(yíng)造出極具視覺(jué)沖擊力的畫(huà)面效果;
 

　　同時(shí)霓虹漸變色也被廣泛的使用于app、web、插畫(huà)等領(lǐng)域，雖然它出現(xiàn)已久，但其大膽、強(qiáng)烈的配色風(fēng)格給畫(huà)面帶來(lái)的沖擊感以及潮流、自由感，使得它仍然成為當(dāng)下一種比較流行的色彩趨勢(shì)。
 

　　二、輕量漸變
 

　　通過(guò)對(duì)2021年色彩趨勢(shì)分析發(fā)現(xiàn)，漸變色的運(yùn)用仍然非常流行。相較之前運(yùn)用較多的強(qiáng)視覺(jué)沖擊類——對(duì)比色漸變，輕量漸變?cè)谏蔬\(yùn)用上變得更加理性與克制。主要特征為輕量、柔和、層次遞進(jìn)，營(yíng)造一種舒緩、治愈的沉浸感。

 

　　色彩上的漸變是指某個(gè)物體的顏色從明到暗，或由深轉(zhuǎn)淺，或是從一個(gè)色彩緩慢過(guò)渡到另一個(gè)色彩，充滿變幻無(wú)窮的神秘浪漫氣息的顏色。
 

　　根據(jù)強(qiáng)弱程度分類，漸變主要分為強(qiáng)漸變和弱漸變，輕量漸變屬于弱漸變范疇。在過(guò)渡的過(guò)程中，輕量漸變特點(diǎn)為漸變色彩鄰近，幅度輕柔，節(jié)奏緩慢，融合感和細(xì)膩感較強(qiáng)。
 

　　關(guān)鍵詞

 

　　輕量漸變特點(diǎn)總結(jié)
 

　　輕量漸變是一種簡(jiǎn)約且高度可用的元素，它可以創(chuàng)造出一些時(shí)尚的氛圍，但是又不會(huì)有信息過(guò)載的擔(dān)憂，這使得輕量漸變成為一種富有感染力又非常實(shí)用的設(shè)計(jì)解決方案。
 

　　輕量漸變特點(diǎn)之一為明度高、飽和度低，色彩輕量而透氣。在輕量漸變的使用過(guò)程中，同色系、鄰近色系較多，其過(guò)渡自然柔和。

 

　　01 毛玻璃案例
 

　　透過(guò)今年各大設(shè)計(jì)網(wǎng)站上的作品不難發(fā)現(xiàn)，較多的視覺(jué)設(shè)計(jì)師將輕量漸變的色彩趨勢(shì)與毛玻璃的質(zhì)感趨勢(shì)結(jié)合，運(yùn)用在界面中。
 

　　下圖畫(huà)面中，輕量漸變的柔和屬性搭配上毛玻璃的朦朧感，營(yíng)造一種視覺(jué)感官的舒適感與呼吸感，已成為2021年UI界面設(shè)計(jì)趨勢(shì)之一。

 

　　02 3D案例
 

　　當(dāng)輕量漸變與3D碰撞時(shí)，則會(huì)產(chǎn)生更加趣味的視覺(jué)化學(xué)反應(yīng)。畫(huà)面中使用的3D效果可以最大限度還原現(xiàn)實(shí)世界的材質(zhì)與光效，呈現(xiàn)極具腦洞的“超現(xiàn)實(shí)”效果
 

　　為用戶呈現(xiàn)不可思議的異度空間，吸引用戶眼球。畫(huà)面中的背景使用了輕量漸變來(lái)創(chuàng)建出多彩的模糊背景，為3D素材創(chuàng)造出另類維度的空間感，增加了畫(huà)面深度，使設(shè)計(jì)更具真實(shí)感。

 

　　01 首頁(yè)Icon
 

　　自如app最新的首頁(yè)風(fēng)格采用輕量漸變+毛玻璃效果，金剛區(qū)應(yīng)用最為明顯。圖標(biāo)的色彩選用低飽和鄰近色，遵循3色系原則，使得整體色彩統(tǒng)一且不失豐富。
 

　　從單個(gè)圖標(biāo)看，色塊部分采用單色漸變，通過(guò)easing gradient插件工具調(diào)整漸變值，以達(dá)到最佳效果。毛玻璃特有的通透感，會(huì)將漸變色塊透映出來(lái)，故制作毛玻璃效果時(shí)，需添加環(huán)境色使其融合。

 

　　02 啟動(dòng)頁(yè)
 

　　兩個(gè)啟動(dòng)頁(yè)中均采用高明度、低飽和度外加一些毛玻璃微透質(zhì)感的表現(xiàn)手法。第一個(gè)界面主要傳達(dá)安全、簡(jiǎn)潔、可靠的情感，第二個(gè)界面則表現(xiàn)的是活動(dòng)主題的夢(mèng)幻感。
 

　　這兩個(gè)頁(yè)面雖目的不同，但卻均體現(xiàn)了柔和、細(xì)膩、輕量感的視覺(jué)感。設(shè)計(jì)師發(fā)現(xiàn)，使用者在經(jīng)歷過(guò)傳統(tǒng)大色塊、大面積、較強(qiáng)沖擊力漸變的視覺(jué)后往往更加想追尋視覺(jué)上的寧?kù)o。
 

　　所以視覺(jué)負(fù)擔(dān)相對(duì)較小、相對(duì)輕量的微漸變色彩和可以利用微透質(zhì)感減弱色彩沖擊力的毛玻璃相結(jié)合的視覺(jué)效果越來(lái)越多地被運(yùn)用。

 

　　03 界面背景
 

　　在界面背景中，使用少量的鄰近色漸變來(lái)做通欄背景，使整體氛圍更加柔和、富于層次感，同時(shí)起到強(qiáng)調(diào)頭部的作用。
 

　　卡片處采用透明毛玻璃效果，利用毛玻璃特有的通透感，透映出底部漸變，使卡片兼具質(zhì)感與美感。

 

　　04 彩色化卡片
 

　　卡片中采用同色系的輕量漸變效果，營(yíng)造融合、舒適的視覺(jué)觀感?？ㄆ念伾鶕?jù)色彩情緒進(jìn)行選取，增加辨識(shí)度，進(jìn)而增加點(diǎn)擊率。

 

　　漸變之所以每隔幾年就會(huì)成為設(shè)計(jì)流行趨勢(shì)，很大程度上得益于它自然的特征和普遍的吸引力。
 

　　今年盛行的輕量漸變，更多從用戶的角度出發(fā)：減輕界面給用戶帶來(lái)的視覺(jué)負(fù)擔(dān)，為其提供更輕盈的視覺(jué)體驗(yàn)。
 

　　在應(yīng)用的過(guò)程中，輕量漸變與毛玻璃、3D等流行表現(xiàn)形式相結(jié)合，可創(chuàng)造出全新的、有趣的視覺(jué)體驗(yàn)，不僅在外觀上起到美化的作用，在功能上也達(dá)到了強(qiáng)調(diào)、醒目的作用。
 

　　三、高飽和度色系

 

　　在過(guò)去的兩年中，高飽和度色系的應(yīng)用已經(jīng)是重要的趨勢(shì)之一。
 

　　年輕人作為移動(dòng)互聯(lián)網(wǎng)的主力軍，他們青春，活力，有朝氣，因此，代表年輕活力群體的鮮艷，高飽和度色彩成為視覺(jué)主流趨勢(shì)之一。
 

　　偏高飽和度色彩更易吸引注意力，烘托主體，影響用戶情緒，提高品牌的識(shí)別性，增強(qiáng)品牌影響力。
 

　　關(guān)鍵詞

 

　　高飽和度色系特點(diǎn)總結(jié)
 

　　1、顏色飽和度高，艷麗;2、色彩豐富多樣;3、視覺(jué)沖擊力強(qiáng);
 

　　雖然高飽和色彩視覺(jué)沖擊力強(qiáng)、更容易傳遞情緒，但在使用時(shí)仍需克制使用。原因在于：1.過(guò)高的飽和度，容易產(chǎn)生視覺(jué)疲勞;2.高飽和度的顏色并不適合所有的用戶群體。

 

　　這里說(shuō)的高飽和度的顏色，并不是一味追求高飽和刺激性顏色，我們?cè)谑褂脮r(shí)候，仍需對(duì)顏色的明度，飽和度進(jìn)行合理設(shè)置，這樣才能保證我們視覺(jué)上的舒適性。

 

　　綜藝海報(bào)案例
 

　　在綜藝海報(bào)中，高飽和度的半插畫(huà)+實(shí)物的表現(xiàn)形式，讓畫(huà)面極具趣味性和視覺(jué)吸引力，獲取了大批流量。

 

　　01 產(chǎn)品品牌色
 

　　偏高飽和度的色彩，在UI設(shè)計(jì)應(yīng)用中，往往更容易脫穎而出。而一些品牌的品牌色往往就是偏高飽和度的顏色，比如UI設(shè)計(jì)中品牌色的運(yùn)用，在一定程度上可以將品牌影響力擴(kuò)大化，品牌影響力，也會(huì)讓用戶增加信任感。
 

　　例如，微信的綠色，餓了么的藍(lán)色，美團(tuán)的黃色，淘寶的橙色......等等這些品牌色，都深入人心。

 

　　高飽和度品牌色
 

　　02 運(yùn)營(yíng)色
 

　　活動(dòng)營(yíng)銷類彈窗，以及運(yùn)營(yíng)類的H5，運(yùn)營(yíng)專題，促銷類的BANNER中經(jīng)常運(yùn)用高飽和色的視覺(jué)刺激以達(dá)到強(qiáng)調(diào)、引流的作用。

 

　　高飽和度色系以其絢麗、強(qiáng)視覺(jué)沖擊力等特點(diǎn)，在UI設(shè)計(jì)中一直被廣泛的應(yīng)用。
 

　　它可以更好的營(yíng)造氛圍、傳遞情緒、增強(qiáng)視覺(jué)層次結(jié)構(gòu)、提高品牌的可識(shí)別性。撞色、插畫(huà)+半實(shí)物、手繪等各種新式流行的表現(xiàn)手法使得高飽和色的運(yùn)用上更加豐富多樣。
 

　　四、夢(mèng)幻色/幻彩色

 

　　廣義上，我們將富于想象力的色彩，或者說(shuō)體現(xiàn)人生豐富多姿的色彩稱之為“夢(mèng)幻色彩”，像泡沫、像天使、 像夢(mèng)境、像糖果...
 

　　關(guān)鍵詞

 

　　夢(mèng)幻色/幻彩色特點(diǎn)總結(jié)

 

　　夢(mèng)幻色在顏色面板中處于中間偏上部分，即特點(diǎn)為中純度、高明度。配色方面和諧，視覺(jué)效果相對(duì)溫暖柔和。
 

　　常以簡(jiǎn)單、干凈的背景為襯托，烘托主體物以及主色調(diào)。色彩場(chǎng)景偏向幻想、天馬行空的自由世界，給人以浪漫的色彩感受，容易令人沉浸在畫(huà)面的溫暖氛圍中。
 

　　現(xiàn)今，色彩作為重要的視覺(jué)語(yǔ)言而被越來(lái)越多的設(shè)計(jì)師所關(guān)注，而在實(shí)際設(shè)計(jì)作品輸出當(dāng)中，顏色也扮演著將產(chǎn)品理念傳遞給用戶的媒介?色。
 

　　可見(jiàn)，完整的設(shè)計(jì)作品是離不開(kāi)色彩的表現(xiàn)的，那么了解色彩趨勢(shì)就會(huì)顯得尤為重要。而在眾多顏色中的夢(mèng)幻色，更是極具前沿性和突出感的色彩。
 

　　糖果色插畫(huà)案例
 

　　色彩傾向明快輕量，采用顏色烘托主題的表達(dá)方式，較能抓住用戶眼球。塑造了色彩多變的視覺(jué)風(fēng)格，適用于多種品牌調(diào)性，給用戶溫暖、輕松且煥然一新的感覺(jué)。

 

　　絢麗配色案例
 

　　在下圖插畫(huà)案例2-絢麗配色中，能發(fā)現(xiàn)絢麗配色類插畫(huà)通過(guò)光的運(yùn)用，讓畫(huà)面呈現(xiàn)出細(xì)節(jié)更豐富的視覺(jué)效果。一些光暈的重疊使用，使得畫(huà)面變得朦朧，更顯夢(mèng)幻特點(diǎn)。
 

　　另外，夢(mèng)幻色還可以營(yíng)造神秘的氛圍，在網(wǎng)站首頁(yè)使用的夢(mèng)幻色彩，搭配引人入勝的畫(huà)面，神秘感的體現(xiàn)更加突出。吸引用戶的點(diǎn)擊，從?提升?站的瀏覽量，實(shí)現(xiàn)流量變現(xiàn)。

 

　　材質(zhì)案例
 

　　在材質(zhì)-塑料質(zhì)感中，大面積的夢(mèng)幻色彩漸變，形成很強(qiáng)的視覺(jué)沖擊。塑料的質(zhì)感配合燈光與彩色漸變，顯得非常夢(mèng)幻;
 

　　透明的氣泡材質(zhì)，整體質(zhì)感給?輕盈、透亮。這種流動(dòng)的色彩呈現(xiàn)出了源源不斷、生命不息的美好愿景，帶給觀者美好的想象。
 

　　01 3D物體
 

　　夢(mèng)幻色應(yīng)用于3D物體中，整個(gè)畫(huà)面更加豐富多彩，溫暖、輕松氛圍下的物體仿佛將從屏幕的束縛中掙脫出來(lái)，拉近了畫(huà)面與觀者之間的距離。

 

　　02 手繪插畫(huà)
 

　　這是一組描繪田野間的手繪插畫(huà)，為觀者提供感觀上的愉悅。一切事物在自然中的蓬勃生長(zhǎng)以及夢(mèng)幻色下烘托出的神秘感，使得整體畫(huà)面有種超脫現(xiàn)實(shí)、游離人生的美感。形成了以自然景觀為主導(dǎo)的唯美風(fēng)格。

 

　　03 App

 

　　雖然夢(mèng)幻色沒(méi)有特別靚麗奪目的色彩特點(diǎn)，但在夢(mèng)幻色的使用中所烘托出的特定氛圍，不但突出了不同產(chǎn)品的特點(diǎn)，也更加滿足了用戶的情感需求。
 

　　色彩趨勢(shì)必然與時(shí)代潮流以及用戶喜好緊密結(jié)合，作為設(shè)計(jì)師的我們需要了解，并能與我們的設(shè)計(jì)產(chǎn)出進(jìn)行結(jié)合。
 

　　結(jié)語(yǔ)
 

　　日新月異的生活是色彩趨勢(shì)的靈感來(lái)源，這使得色彩的流行趨勢(shì)不斷更新變化著。
 

　　作為設(shè)計(jì)師的我們，要保持一顆敏銳的心，不斷從現(xiàn)實(shí)生活中捕捉靈感，將自然賦予我們的寶貴靈感運(yùn)用于作品中，從而增強(qiáng)設(shè)計(jì)的原創(chuàng)性，給設(shè)計(jì)行業(yè)注入新鮮血液。
 

　　其次，趨勢(shì)是方向，不能盲目追隨，需要不斷思考總結(jié)沉淀升華，并將其合理運(yùn)用至自己的作品或項(xiàng)目中。
 

　　設(shè)計(jì)就是在實(shí)踐中不斷探索與總結(jié)! 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。