色彩趨勢(shì)淺顯總結(jié)

2022-6-26    純純

四個(gè)色彩趨勢(shì):霓虹漸變、輕量漸變、高飽和度色系、夢(mèng)幻色/幻彩色系。從現(xiàn)實(shí)圖庫(kù)入手,總結(jié)出該色彩趨勢(shì)對(duì)應(yīng)的關(guān)鍵詞以及色彩特征。對(duì)部分案例進(jìn)行了解析,更深入地了解其運(yùn)用方向以及實(shí)現(xiàn)技巧。希望這些內(nèi)容可以起到拋磚引玉的作用,歡迎大家探討。(圖片來(lái)源于網(wǎng)絡(luò),原作者可提供原圖鏈接進(jìn)行標(biāo)注)



一、霓虹漸變


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

夜色下的霓虹燈


關(guān)鍵詞

undefined


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



01 專(zhuān)題頁(yè)

頁(yè)面整體以紫色,藍(lán)色,洋紅為主,冷暖色搭配,營(yíng)造出層次感,活潑生動(dòng)且年輕化;偏暗色調(diào)的霓虹漸變色背景烘托出專(zhuān)題頁(yè)的內(nèi)容主體,使得頁(yè)面運(yùn)營(yíng)氛圍更好、更強(qiáng);同時(shí)在一些重要的、需要用戶(hù)操作點(diǎn)擊的部分使用了暖色調(diào)的霓虹色漸變,使得內(nèi)容主體在冷色調(diào)的環(huán)境下更為突出,提高了用戶(hù)體驗(yàn)。


02 App

以暗色調(diào)背景作為烘托,搭配紫色、藍(lán)色、洋紅為主的冷暖色,是霓虹色漸變經(jīng)典的應(yīng)用方式。在暗色背景下運(yùn)用霓虹色漸變,通過(guò)明暗的強(qiáng)對(duì)比突出頁(yè)面關(guān)鍵元素,對(duì)用戶(hù)進(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é)沖擊類(lèi)——對(duì)比色漸變,輕量漸變?cè)谏蔬\(yùn)用上變得更加理性與克制。主要特征為輕量、柔和、層次遞進(jìn),營(yíng)造一種舒緩、治愈的沉浸感。



色彩上的漸變是指某個(gè)物體的顏色從明到暗,或由深轉(zhuǎn)淺,或是從一個(gè)色彩緩慢過(guò)渡到另一個(gè)色彩,充滿(mǎn)變幻無(wú)窮的神秘浪漫氣息的顏色。根據(jù)強(qiáng)弱程度分類(lèi),漸變主要分為強(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í)”效果,為用戶(hù)呈現(xiàn)不可思議的異度空間,吸引用戶(hù)眼球。畫(huà)面中的背景使用了輕量漸變來(lái)創(chuàng)建出多彩的模糊背景,為3D素材創(chuàng)造出另類(lèi)維度的空間感,增加了畫(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)頭部的作用??ㄆ幉捎猛该髅AЧ?,利用毛玻璃特有的通透感,透映出底部漸變,使卡片兼具質(zhì)感與美感。


04 彩色化卡片

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



漸變之所以每隔幾年就會(huì)成為設(shè)計(jì)流行趨勢(shì),很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的輕量漸變,更多從用戶(hù)的角度出發(fā):減輕界面給用戶(hù)帶來(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ì)之一。偏高飽和度色彩更易吸引注意力,烘托主體,影響用戶(hù)情緒,提高品牌的識(shí)別性,增強(qiáng)品牌影響力。


關(guān)鍵詞


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

1、顏色飽和度高,艷麗;

2、色彩豐富多樣;

3、視覺(jué)沖擊力強(qiáng);

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

這里說(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ì)讓用戶(hù)增加信任感。

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

高飽和度品牌色


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

活動(dòng)營(yíng)銷(xiāo)類(lèi)彈窗,以及運(yùn)營(yíng)類(lèi)的H5,運(yùn)營(yíng)專(zhuān)題,促銷(xiāo)類(lèi)的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)人生豐富多姿的色彩稱(chēng)之為“夢(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)品理念傳遞給用戶(hù)的媒介?色??梢?jiàn),完整的設(shè)計(jì)作品是離不開(kāi)色彩的表現(xiàn)的,那么了解色彩趨勢(shì)就會(huì)顯得尤為重要。而在眾多顏色中的夢(mèng)幻色,更是極具前沿性和突出感的色彩。


糖果色插畫(huà)案例

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


絢麗配色案例

在下圖插畫(huà)案例2-絢麗配色中,能發(fā)現(xiàn)絢麗配色類(lèi)插畫(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)更加突出。吸引用戶(hù)的點(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),也更加滿(mǎn)足了用戶(hù)的情感需求。色彩趨勢(shì)必然與時(shí)代潮流以及用戶(hù)喜好緊密結(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ě)這篇文章的初衷,最后也歡迎大家積極探討。


作者:貳元   來(lái)源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔