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

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

查看原文

用戶體驗設計涉及不少流程，須要足夠的深思熟慮才能設計出符合用戶需求的UI界面。雖然聽起來不太複雜，但每一個細節都須要設計師反覆推敲。

用戶界面建立過程當中耗時最長的階段即是顏色選擇，設計師每每可能要花上幾個小時才能挑選到合適的顏色。在本文中，咱們將介紹六個實用的配色技巧，幫助設計師爲界面選擇最適合的顏色，並使選擇過程更加輕鬆，更高效！

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

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

這樣的配色比例被認爲是使人愉悅的，從視覺感知上來說，它帶給用戶一個溫馨的色彩層次。掌握恰當的配色比例能夠幫助設計師成功地組合顏色，避免了將用戶界面變得光怪陸離。

技巧2：巧用色彩對比

色彩對比幾乎是全部視覺構圖中的關鍵部分。它賦予了每一個UI元素獨特性，並使其引人注目。須要注意的是：用戶界面中來自相同色系的色彩對比度較低，沒法達到吸引用戶注意力的效果。此外，在這種用戶界面上覆制的文本內容辨認度較低，這使得設置產品交互也十分困難。

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

可是，將UI做爲一個總體來講，高對比度的顏色可能並不老是奏效。若是文本內容和背景顏色之間的差別太大，則很難讀取或掃描文本。這就是爲何建議設計師採用溫和的色彩對比，並只在某些特定元素上應用高對比度的顏色。經過在不一樣的設備上進行用戶測試，能夠幫助設計人員確保其配色方案的有效性。

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

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

每種顏色對咱們的感知都有其獨特的影響力，瞭解用戶對於顏色可能產生的反應能夠幫助設計師傳遞正確的信息，並引導用戶作出預期的行爲。如下是一個顏色含義的列表可供參考。

紅色，它既象徵着愛情，自信，激情，也象徵着憤怒。

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

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

綠色，一種最接近大天然的色彩，給人平靜和清新的感受。

藍色，它一般用於表明一些企業形象，給人沉靜，可靠的感受。

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

黑色，它一般與悲劇和死亡聯繫在一塊兒，象徵着神祕。它同時符合傳統的和現代的審美。

白色，這種顏色象徵着純潔和天真，也帶給人純粹和清晰的感受。

另外，設計師須要記住，每一個人的視覺感知都是獨特的。除了年齡和性別等因素對色彩偏好有很大的影響，文化差別也是其中一個重要因素，所以瞭解受衆的特徵相當重要。

提示4：重視色彩的文化差別

總所周知，每種文化都有本身的傳統和信仰，文化差別對於色彩的選擇也有很大的影響。在不一樣國家對於同一種顏色可能有徹底相反的含義。例如，在歐洲國家，白色象徵純潔，經常使用於婚禮。而在許多亞洲國家，這種顏色意味着死亡和悲傷。所以，不正確的色彩選擇可能會致使用戶對產品產生致命的誤解。經過了解色彩不一樣的文化特色，設計師們可以大大下降產品被誤解的風險。

提示5：促使色彩協調

色彩協調是UI設計師努力的重要目標。爲了讓用戶感到溫馨和滿意，設計師試圖將平衡引入用戶界面設計。色彩的協調是指設計中色彩的排列，以最吸引人的、最有效的方式來吸引用戶的感受。協調的顏色有助於網站或應用程序的良好的第一印象。

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

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

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

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

拆分互補色， 這個配色方案的工做原理相似於互補色，可是不一樣的是採用了更多的顏色。例如，若是你選擇了藍色，配色則須要組合兩個與其相反顏色（橙色）相鄰的其餘顏色（黃色和紅色）。

三元色，它基於色輪上等距的三種不一樣的顏色。專業人士建議使用一種顏色做爲主色調，其餘兩種色彩用來提亮。

雙色互補，這種配色方案採用了兩對互補色組合。若是鏈接這四種顏色在色輪上的位置，就會造成一個矩形。

提示6：從大天然中獲取靈感

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

那麼，你爲何不試圖從中獲取一些想法呢？去美麗的大天然裏散散步，你必定會找到靈感！

數碼產品的成功在很大程度上取決於設計師爲其用戶界面所選擇的顏色，正確的顏色給用戶帶來極大的溫馨感。設計師經過運用合適的配色方案，就能使用戶迅速明白產品的設計思想，引導他們執行適當的操做。

做者：Tubik Studio

地址：uxplanet.org/color-matte…

學習工具，但不受限於某種工具。Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。