如何快速掌握正確的UI配色方案?6種技巧不容錯過!

Mockplus發表於2018-04-09

以下內容由Mockplus團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具

檢視原文

如何快速掌握正確的UI配色方案?6種技巧不容錯過!


使用者體驗設計涉及很多流程,需要足夠的深思熟慮才能設計出符合使用者需求的UI介面。雖然聽起來不太複雜,但每個細節都需要設計師反覆推敲。

使用者介面建立過程中耗時最長的階段便是顏色選擇,設計師往往可能要花上幾個小時才能挑選到合適的顏色。在本文中,我們將介紹六個實用的配色技巧,幫助設計師為介面選擇最適合的顏色,並使選擇過程更加輕鬆,更高效!

技巧1:掌握60-30-10原則

這一原則或者說技巧源於室內設計,因此經常被用於裝飾房屋。這個技巧很簡單:為了達到平衡的配色效果,所使用的顏色應以6:3:1的比例進行配色。佔據最大比例的為主色,30%為輔助色,10%為裝飾色,幫助提高整體亮度。

這樣的配色比例被認為是令人愉悅的,從視覺感知上來講,它帶給使用者一個舒適的色彩層次。掌握恰當的配色比例可以幫助設計師成功地組合顏色,避免了將使用者介面變得光怪陸離。

如何快速掌握正確的UI配色方案?6種技巧不容錯過!


技巧2:巧用色彩對比

色彩對比幾乎是所有視覺構圖中的關鍵部分。它賦予了每個UI元素獨特性,並使其引人注目。需要注意的是:使用者介面中來自相同色系的色彩對比度較低,無法達到吸引使用者注意力的效果。此外,在這種使用者介面上覆制的文字內容辨認度較低,這使得設定產品互動也十分困難。

設計師硬根據所要實現的目標來控制色彩對比度的高低。例如,如果你需要使用者注意到某個特定的介面元素,則最好使用像藍色和紅色這樣高度對比的顏色。CTA按鈕設計就常常使用高對比度的顏色。

但是,將UI作為一個整體來說,高對比度的顏色可能並不總是奏效。如果文字內容和背景顏色之間的差異太大,則很難讀取或掃描文字。這就是為什麼建議設計師採用溫和的色彩對比,並只在某些特定元素上應用高對比度的顏色。通過在不同的裝置上進行使用者測試,可以幫助設計人員確保其配色方案的有效性。


如何快速掌握正確的UI配色方案?6種技巧不容錯過!


提示3:考慮顏色的心理學

正如我們在前幾篇文章中提到的,心理學是一種為設計工作流程的提供助力的研究之一。其中,色彩心理學就屬於這種心理學的一個分支,它主要研究色彩對人類情緒和行為的影響。研究表明,我們的大腦會對不同的顏色做出多種反應,但我們通常都忽略了這些感知。當人的眼睛感知到一種顏色時,我們的大腦會向內分泌系統發出訊號,釋放出對應情緒的荷爾蒙,從而讓我們產生不同的情緒和感受。

每種顏色對我們的感知都有其獨特的影響力,瞭解使用者對於顏色可能產生的反應可以幫助設計師傳遞正確的資訊,並引導使用者做出預期的行為。以下是一個顏色含義的列表可供參考。


紅色,它既象徵著愛情,自信,激情,也象徵著憤怒。

橙色,這是一種充滿活力和溫暖的色彩,能帶給人興奮的感覺。

黃色,這是一種象徵幸福,陽光,歡樂和溫暖的顏色。

綠色,一種最接近大自然的色彩,給人平靜和清新的感覺。

藍色,它通常用於代表一些企業形象,給人沉靜,可靠的感覺。

紫色,這是一種神祕又高貴的顏色,一直與貴族和財富有著密切聯絡。

黑色,它通常與悲劇和死亡聯絡在一起,象徵著神祕。它同時符合傳統的和現代的審美。

白色,這種顏色象徵著純潔和天真,也帶給人純粹和清晰的感覺。

另外,設計師需要記住,每個人的視覺感知都是獨特的。除了年齡和性別等因素對色彩偏好有很大的影響,文化差異也是其中一個重要因素,因此瞭解受眾的特徵至關重要。


如何快速掌握正確的UI配色方案?6種技巧不容錯過!


提示4:重視色彩的文化差異

總所周知,每種文化都有自己的傳統和信仰,文化差異對於色彩的選擇也有很大的影響。在不同國家對於同一種顏色可能有完全相反的含義。例如,在歐洲國家,白色象徵純潔,常用於婚禮。而在許多亞洲國家,這種顏色意味著死亡和悲傷。因此,不正確的色彩選擇可能會導致使用者對產品產生致命的誤解。通過了解色彩不同的文化特點,設計師們能夠大大降低產品被誤解的風險。

提示5:促使色彩協調

色彩協調是UI設計師努力的重要目標。為了讓使用者感到舒適和滿意,設計師試圖將平衡引入使用者介面設計。色彩的協調是指設計中色彩的排列,以最吸引人的、最有效的方式來吸引使用者的感覺。協調的顏色有助於網站或應用程式的良好的第一印象。

經過多年的探索,設計師們區分了一些基本的配色方案,使其色彩運用更加有效。以下是一些基礎的配色方案:

單色,單色配色是基於一種顏色,選擇其不同的色調進行色彩組合。

類似色,該配色方案應用於色輪上彼此相鄰的顏色。

互補色,它是在色輪上彼此相對放置的顏色組合方案,旨在產生色彩的高對比度。

拆分互補色, 這個配色方案的工作原理類似於互補色,但是不同的是採用了更多的顏色。例如,如果你選擇了藍色,配色則需要組合兩個與其相反顏色(橙色)相鄰的其他顏色(黃色和紅色)。

三元色,它基於色輪上等距的三種不同的顏色。專業人士建議使用一種顏色作為主色調,其他兩種色彩用來提亮。

雙色互補,這種配色方案採用了兩對互補色組合。如果連線這四種顏色在色輪上的位置,就會形成一個矩形。


如何快速掌握正確的UI配色方案?6種技巧不容錯過!

提示6:從大自然中獲取靈感

大自然是世界上最好的藝術家和設計師。我們在自然環境中看到的顏色組合總是接近完美的。人們喜歡看的日落和黎明,秋天的森林和冬天的山脈,因為他們充滿了自然的色彩組合。

那麼,你為什麼不試圖從中獲取一些想法呢?去美麗的大自然裡散散步,你一定會找到靈感!

如何快速掌握正確的UI配色方案?6種技巧不容錯過!

數碼產品的成功在很大程度上取決於設計師為其使用者介面所選擇的顏色,正確的顏色給使用者帶來極大的舒適感。設計師通過運用合適的配色方案,就能使使用者迅速明白產品的設計思想,引導他們執行適當的操作。


作者:Tubik Studio

地址:uxplanet.org/color-matte…


學習工具,但不受限於某種工具。Mockplus做原型,更快更簡單,現在下載Mockplus,免費體驗暢快的原型設計之旅。



相關文章