【配色指南】關(guān)于UI設計中使用明亮色彩的利與弊

合理運用色彩是每個設計師都應必須具備的技能，特別是插畫師和UI設計師。隨著扁平化設計和Material Design 的日益普及，色彩理論知識的重要性也變得愈加明顯！

在許多數(shù)字化產(chǎn)品的界面中我們都能看到一些明亮的色彩和漸變色，從趣味性和娛樂性APP到商業(yè)APP和網(wǎng)站。然而，關(guān)于明亮的色彩對用戶體驗的影響仍有很多爭議。本文就UI 中使用亮色的優(yōu)缺點進行了一些分析和總結(jié)。

一、在UI中使用鮮艷顏色的優(yōu)點

1.增加可讀性和易讀性

在我們之前的一篇文章中，我們介紹了影響配色方案選擇的因素。可讀性和易讀性是設計師考慮色彩應用的基本因素。這里需要注意的是，可讀性代表了人們閱讀文本內(nèi)容的容易程度，易讀性決定了用戶區(qū)分特定字體和字母的速度。

鮮艷的色彩可以為界面提供足夠高的對比度，也有助于提高可讀性和易讀性。由于對比的存在，布局元素變得清晰可見。但是，高對比度的色彩可能并不總是能奏效。如果文本內(nèi)容和背景顏色對比太強，用戶則很難閱讀或瀏覽文本。這就是為什么建議設計師創(chuàng)造一個比較溫和的對比度，只在突出顯示某些元素使用高對比度的顏色。

2. 優(yōu)化導航并增強直觀的交互

視覺層次結(jié)構(gòu)是所有數(shù)字化產(chǎn)品建立清晰導航和直觀交互系統(tǒng)的核心要素。UI組件一般以這種結(jié)構(gòu)組織，大腦可以通過產(chǎn)品的物理差異（包括顏色）來區(qū)分對象。

如何區(qū)分顏色的層次結(jié)構(gòu)？這是受用戶的思維決定的。例如紅色和橙色被通常被認為是大膽的顏色，而白色和奶油類似的色彩則被認為是柔弱的顏色。明亮的色彩很容易引起用戶的注意，所以設計師經(jīng)常使用它們作為強調(diào)或?qū)Ρ鹊氖侄巍Ｈ绾魏侠淼貞靡曈X層次結(jié)構(gòu)？常見的使用方法有：將一種顏色應用于多個元素中，以顯示它們之間的某種聯(lián)系。在UI界面中將購買按鈕設置為紅色，以便人們可以在需要時直觀地找到它們。

3. 提高品牌的可識別性

人類大腦對大膽的色彩反應十分強烈，因此，明亮的色彩組合更容易引起用戶的注意。色彩鮮艷的UI設計，往往能在眾多產(chǎn)品中脫穎而出。但需注意，色彩的選擇在一定程度上要基于目標受眾的偏好和市場調(diào)查。

如果一家企業(yè)在其Logo、商品、網(wǎng)站中使用統(tǒng)一明亮的色彩，這在一定程度上不失為一個將品牌最大化的好辦法。通過這種方式，設計師借助高度一致的可視化提高品牌的可識別性。

4. 傳遞情緒和營造氛圍

為了傳達正確的信息和號召用戶做出預期的行動，設計師需要知道顏色是如何影響我們的情緒和行為。我們的大腦對不同的顏色有不同的反應，不過通常我們都忽略了。據(jù)“色彩心理學”這項研究表明：當我們的眼睛感知到一種顏色時，大腦會向內(nèi)分泌系統(tǒng)發(fā)出信號，釋放負責情緒變化的荷爾蒙。

正確選擇顏色有助于營造正確的氛圍向用戶傳遞正確的信息，讓用戶處于正確的情緒中，引導他們采取預期的行動。例如，如果設計師創(chuàng)建與自然或園藝相關(guān)產(chǎn)品的用戶界面，那么這個界面的主打色很有可能是綠色和藍色。這樣的色彩應用就會給用戶營造一種產(chǎn)品或服務相關(guān)聯(lián)的感覺。

5. 打造時尚的外觀和風格

明亮的色彩和漸變色在UI設計中占據(jù)著最重要的位置。現(xiàn)在，你可以在不同類型的數(shù)字化產(chǎn)品中看到更多是這些時髦的風格，而嚴肅呆板的商業(yè)風格早已不見蹤影。

用戶界面中明亮的色彩和漸變色彩可帶給用戶強烈的現(xiàn)代科技感和新鮮感。而且，通常根據(jù)最新趨勢設計的移動應用程序或網(wǎng)站往往看起來很吸引人，盡管競爭激烈，它們?nèi)阅芨鼊僖换I。

二、在UI中使用鮮艷顏色的缺點

1. 明亮的顏色很難搭配

對于那些只依靠直覺和美感來搭配色彩的設計師來說，他們往往會犯很多低級錯誤。如果想要創(chuàng)作出令人滿意的視覺作品，那么關(guān)于如何應用和搭配顏色的基本知識是必不可少的。

在UI中應用的色彩越鮮艷，就越難搭配。為了讓用戶感到滿意和舒適，設計師試圖在UI設計中實現(xiàn)一些平衡。色彩的和諧是關(guān)于設計中顏色的排列對用戶的感知最有吸引力和有效的。和諧的色彩組合有助于網(wǎng)站或應用程序獲得良好的第一印象。顏色理論定義了幾種基本的配色方案，以供大家參考！

·單色，單色配色是基于一種顏色，選擇其不同的色調(diào)進行色彩組合。

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

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

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

·三元色，它基于色輪上等距的三種不同的顏色。專業(yè)人士建議使用一種顏色作為主色調(diào)，其他兩種色彩用來提亮。

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

2. 失去產(chǎn)品的特色

大膽的色彩是在UI中創(chuàng)造個性與風格的工具，但它們也可能是特色消失的原因。在單一視覺構(gòu)圖中使用許多鮮艷的色彩會有失去界面特色的風險，因為它們會導致整個界面色彩過于混亂。

這就是為什么建議設計師應用色彩時使用6：3：1的比例。最大的部分應該是設計中主導色調(diào)，占據(jù)三分之一的部分是次要顏色，最小的占比部分用于幫助打造特色的顏色。這樣的比例可以讓用戶逐漸感知所有的視覺元素，因此這樣的比例被認為是最合適的。

3. 明亮的色彩并不適合所有用戶群體

用戶研究是數(shù)字化產(chǎn)品創(chuàng)建的核心階段之一。首先，設計師需要定義和分析目標受眾，以了解他們對網(wǎng)站或應用程序的期望。其次，年齡，性別和文化等因素都可能影響潛在用戶的偏好。例如，孩子們一般都很喜歡黃色；但是當他們變成大人時，黃色看起來便不再那么有吸引力了。另外，男人和女人通常都喜歡冷色調(diào)，如藍色，綠色和其他色調(diào)。但與女性不同，男性通常更喜歡無色的顏色，包括白色，黑色和灰色。

應用明亮的色彩也是一樣的，需要定義和分析目標受眾。即使你為娛樂應用創(chuàng)建UI設計，你也需要考慮目標受眾的具體情況。中年人通常更喜歡輕量級的用戶界面，他們可能不喜歡屏幕上的大膽色彩，因為那會使他們分心。

4. 明亮的色彩在手機屏幕上可能顯得過于突兀

正如上文所說，明亮的色彩可以產(chǎn)生強烈的對比，有助于突出重要的用戶界面元素，并提供理想的易讀性和可讀性。然而，使用過多的色彩對比可能會造成一些低級錯誤，尤其是在移動界面這樣有限的空間上。

在像這樣較小的屏幕上，環(huán)境光線和明亮的字體會讓用戶感覺眼睛不舒服。這就是為什么UI設計師在移動設備界面中應用明亮的色彩需要注意謹慎的原因。只有合理設置色彩之間的對比度，才能讓用戶在手機上閱讀文字時感覺舒適。

色彩無疑是設計師手中的一把雙刃劍，它有自己的優(yōu)點和缺點。如果你能趨利避害有效地利用它，你就能夠找到適合于產(chǎn)品設計的色彩應用方案。

原文作者：Alina Arhipova

原文地址：https://tubikstudio.com/bright-colors-in-ui-design-strong-weak-sides/

為了反饋大家對韓曉燕《即學即用的用研基礎課》的關(guān)注，推出了兩彈優(yōu)惠福利，優(yōu)惠券大派送，參與就有獎！趕緊點擊文章詳情進行參與吧→《即學即用的用研基礎課 課程優(yōu)惠活動！》