你當前所在位置:首頁 > IT技術探討 > 小白學UI|如何做出誘人的UI配色(進階篇)

小白學UI|如何做出誘人的UI配色(進階篇)

在UI界面設計中,配色是首先要面對的一個重要環節。顏色那么多,我該選哪些顏色?該如何做出誘人的UI配色?本章將為大家分享UI界面設計中常用的配色原則和技巧。


閱讀本文需要有一定的UI色彩基礎知識,還不是很懂的同學,建議先看看《如何做出誘人的UI配色(基礎篇)》一文。


>>>點擊IT技術探討欄目查看歷史文章


60-30-10原則


60-30-10原則最早來源于室內設計領域,室內設計師借助這一原則,創造出協調的室內設計配色。這一原則很容易理解,即60%是主色,30%是副色,10%是強調色。


UI配色 (1).jpg

▲ 墻面漆(60%),家具(30%),配飾(10%)


這一配色比例被認為是較為令人愉悅的,在視覺感知上,它提供了一個讓人舒適的色彩層次,允許眼睛從一個焦點到另一個焦點舒適地移動。



巧用前進色與后退色


在視覺效果上,顏色有前進色與后退色的區分:


● 有的顏色看起來向上凸出,并給人很近的感覺,這類顏色稱為前進色,也稱“膨脹色”。例如紅色、橙色和黃色等暖色,表現為明度較高的顏色。


● 有的顏色看起來向下凹陷,并給人很遠的感覺,這類顏色稱為后退色,也稱“收縮色”。例如藍色和藍紫色等冷色,表現為明度較低的顏色。


UI配色 (2).jpg


前進色和后退色的色彩效果在眾多領域得到了廣泛應用。


例如,廣告牌就大多使用前進色(紅色、橙色和黃色等),這是因為這些顏色不僅醒目,而且有凸出的效果,從遠處就能看到。在化妝界,可以制造立體感和縱深感的眼影則是使用后退色。


在UI界面設計中,正確使用前進色和后退色,能起到直達用戶心靈的效果。例如:


● 把優惠活動的日期和商品的優惠價格用紅色或者黃色的大字顯示,會產生一種沖擊性的效果,相信顧客都無法抵擋優惠價格的誘惑。


UI配色 (3).jpg


● 在界面中合理的利用后退色,則可以使界面顯得有層次感和空間感,給人以廣闊、大氣、自由、放松的體驗。


UI配色 (4).jpg


善用對比的效果


如果你需要讓用戶注意到特定的元素,那么,使用色彩的對比效果,能達到引人矚目的視覺體驗。


UI配色 (5).jpg


在UI設計中,常用的色彩對比方法有冷暖對比、色相對比、純度對比、明度對比、黑白對比等。也就是說,可以通過調整色相、純度(飽和度)、明度、灰度來起到視覺上的對比效果。

 

運用色彩對比時需要注意做好對比色的調和關系,使設計色彩變得和諧,以免給人產生低俗、乏味或雜亂無章的負面體驗。

 

常用的對比色彩調和方法有:


● 改變對比色相的純度或明度。


● 在對比色塊之間采用無彩色或金色、銀色做色塊或線的間隔處理。


● 改變對比色塊的面積差距,以其中一種顏色為主進行面積對比,產生“萬綠叢中一點紅”的視覺效果。



色彩節奏與韻律感的運用


色彩的表現力不僅依靠色彩的對比與調和,同時需要色彩節奏和韻律感的表現,這樣設計的色彩才能鮮活起來。


UI配色 (6).jpg


色彩的節奏與韻律感通過色彩的連續與漸變、色彩的起伏和交錯而產生:


● 色彩連續性的設計可以是鄰近色的連續,同種色的連續。


● 色彩的漸變設計可以是色相、明度和純度的推移漸變。


● 色彩的起伏和交錯可以通過色塊打散重構的原理來完成,表現為主要形象和輔助形象呼應關系。



走進大自然


最好的顏色組合來自大自然。我們在自然環境中看到的色彩組合大多都非常的協調,甚至可以說是接近完美。毫不夸張地說,大自然是世界上最好的藝術家和設計師。


例如,我們都熟悉并喜歡的日出和日落的美景,還有秋日的落葉、冬天的山野等等,這些景色的色彩組合都有著獨特的自然美感。


UI配色 (7).jpg


所以,當你盡管學會了許多配色技巧,仍然為了配色而苦惱時,不妨關掉該死的電腦,走出屋子,走進大自然,去向世界上最好的藝術家和設計師學習吧!



小結


俗話說:“師傅領進門,修行靠個人”,本文旨在拋磚引玉,具體的色彩運用技巧還需同學們在平時的實踐中多多練習和探討。所謂熟能生巧,只有經過大量的經驗積累,在需要的時候,才會靈感迸發。


小白學UI,就來寶比萬像。想跟著我們一起學習的朋友可以多多關注我們哦!

課程預約

大发快乐8-安全购彩