明亮色彩在UI設計中的利與弊

09-15

前言

對平面設計師、UI設計師等從事視覺設計類工作的人來說，合理應用色彩是個不可或缺的關鍵技能。特別是隨著扁平化設計和Material Design設計規範的日益普及，色彩理論知識也扮演著越來越重要的角色。

從娛樂設施到商務App和網站，明亮的色彩和漸變被運用在各種電子產品的界面上。然而對於明亮顏色對用戶體驗的影響依然存在一些爭議。這篇文章就從優勢和劣勢兩個方向出發，論述了明亮色彩在UI設計中的利與弊。

一、明亮色彩的優勢

增強可讀性和易讀性

在進行配色時，提升內容的可讀性和易讀性是設計的核心出發點。可讀性是指用戶獲取內容的難易程度，易讀性指用戶識別特定字體的速度。

明亮色彩形成的鮮明對比，可以讓其中的元素變得更突出，增強了可讀性與易讀性。然而，高強度的色彩對比也不總是好的，如果內容與背景的顏色對別過於強烈，會增強視覺壓力,讓文字變得難以閱讀和瀏覽。這就是為什麼我們建議設計師把內容和背景的對比設計在一個適中的位置，只有在需要強調的內容處使用高強度的對比。

Big City Guide

明確導航和增強直覺交互

對任何一個數字產品來說，視覺層級是構建清晰導航和直覺交互系統的關鍵要素。多種UI元素被有機結合在一起，通過顏色等物理屬性，構建出讓大腦可以清晰辨識的內容。

色彩通過在用戶心目中留下的不同印象，構建出了自己獨特的色彩層級。紅色和橘色屬於濃重的顏色，而白色和乳白色則顯得輕薄。明亮的色彩更容易被人感知，因此設計師通常把它們用於強調或形成對比。此外，把相同的顏色運用在不同的元素上，你會發現這些元素之間彷彿有了某種聯繫。例如你可以把購買按鈕設計成紅色，這樣用戶在需要下單的時候會更下意識的找到它（因為紅色總是跟支出聯繫在一起）。

增強辨識度

明亮的色彩能引起人類大腦強烈的反應，這也是為什麼明亮的色彩組合會更容易被識別和記憶。相比於清淡的色彩搭配，顏色豐富的UI設計更容易被凸顯出來。當然，這種設計方式要綜合考慮到目標用戶的喜好和市場調研的結果。

如果一個公司的logo或者品牌形象中有運用到鮮明的色彩搭配，那麼把這個色彩搭配運用到公司的App或者網站設計上是個不錯的方法。既可以為公司所有的展示渠道提供統一的視覺解決方案，又能提升品牌辨識度。

Book Swap App

營造情緒和氛圍

顏色可以影響人們的心情和行為，營造特定的氣氛，傳遞特定的信息並促使用戶做出期望的行動。人們會不知不覺對顏色做出反應。

一項名為色彩心理學的研究指出一旦我們的眼睛接收到一種顏色信號，大腦就會發出指令，讓內分泌系統釋放出一種可以調節情緒的荷爾蒙。精心配製的顏色可以營造出向用戶傳遞特定信息的特定氛圍，讓用戶不由自主地產生行為。例如，如果一個UI設計師需要設計一款與自然和園藝相關的產品，那麼他很有可能會選擇綠色或藍色作為主色。這樣用戶一眼看過去，就能立即聯想到這個產品是屬於特定類別的。

Booking Service

打造時尚的外觀和風格

明亮的色彩和漸變引領著UI設計的主流趨勢。現在你可以在各種各樣的數字產品中發現它們的蹤跡，即便是嚴格的商務風格也無法拒絕它們的魅力。

用戶界面上明亮的漸變色可以體現出先進的科技感和新奇的創造力。根據潮流趨勢而設計的移動App或網站通常看上去非常亮眼醒目，即使是在眾多產品的激烈競爭中也可以輕鬆吸引用戶的注意力。

Business Card App

二、明亮色彩的劣勢

難以進行搭配

如果你以為色彩的搭配主要取決於直覺和審美，那麼你就大錯特錯了。如果你想設計出和諧的視覺體驗，對於色彩本身以及色彩協同原理的基礎知識是必不可少的。

在UI設計中，越是明亮明亮的顏色就越是難以搭配。為了給用戶提供愉悅和舒適的使用體驗，設計師需要儘可能讓界面保持和諧。色彩調和是指設計中的色彩搭配可以最有力、最高效地迎合人們的感知。和諧的色彩搭配組合有助於用戶對產品形成良好的第一印象。色彩理論中定義了幾種基礎的色彩搭配方案，這些方案被證明可以有效提升設計師的工作效率，包括：

1. 單色：在單一色值基礎上調整明度和飽和度

2. 臨近色：使用在色相環上位置相鄰的兩種顏色進行搭配

3. 互補色：使用在色相環上位置相反的兩種顏色進行搭配，營造強烈的對比

4. 分離互補色：為主色選擇2種互補色，互補色為相鄰色；例如藍色為主色，互補色是黃色，同時使用紅色作為第2種互補色

5. 三色互補：三種顏色在色相環上間距相等，專家建議只選其中1種顏色作為主色，其他顏色作為輔助色。

6. 四色互補：選擇色相環上的四種顏色，其中兩兩互補。四種顏色所處的位置連接起來可以構成一個矩形。

基礎色相環

難以把控風格

在UI設計中，濃重的色彩既能快速塑造出特定的產品色彩風格，也能輕易破壞之。一個作品裡如果出現太多艷麗的顏色，主要的元素可能會被淹沒在紛繁的色彩海洋中，無法凸顯。這也是為什麼我們都建議設計師在進行色彩搭配時選擇6-3-1這樣的比例。

畫面主要部分的顏色至少要佔到整體的60%，輔助色佔30%，而最終奠定色彩風格的顏色不要超過10%。這樣的比例可以讓所有的視覺元素都得到合適的展示，為用戶提供最預約的視覺體驗。

不一定適合所有用戶群體

用戶研究是產品設計的關鍵步驟之一。通過對目標用戶的研究和分析，設計師可以了解到用戶對產品的期望。不同的年齡、性別和文化背景可能形成不同的用戶偏好。例如：在兒童時期，人們可能尤為喜歡黃色，而當長大成人後，對黃色的偏好就逐漸降低了。成年男性和女性普遍喜歡藍色、綠色等冷色系，而與女性不同的是，男性通常更為偏好黑、白、灰這類無色相的顏色。

明亮的色彩也是如此。即使你在為一個娛樂型App做設計，你也要考慮到某些特定的目標用戶。例如中年人通常喜歡清亮的用戶界面，他們不太能接受屏幕上出現太明亮的顏色，這些顏色會分散他們的注意力。

在移動端屏幕上反差過於強烈

就像我們前面提到的，明亮的顏色可以製造鮮明的對比，並以此來提升頁面的可讀性和易讀性，同時還可以突出特定的界面元素。然而在移動端，頁面空間有限，並且使用場景多種多樣，過於強烈的對比可能會產生反作用。

當一個擁有強烈色彩對比的頁面，搭配以狹小的屏幕，複雜的環境光和明亮的字體闖入用戶的視覺時，會引起用戶的不適。因此當設計師在頁面中使用明亮色彩時，需要注意控制顏色之間的對比強度，讓用戶擁有一個良好的閱讀體驗。

Night in Berlin App

總結

顏色是設計師最有力的武器之一，同時，和其他設計元素一樣，它有它自身的優勢和局限。在使用顏色進行設計時，你需要進行綜合和全面的考量，才能設計出實現設計目標的最佳方案。

原文鏈接：https://uxplanet.org/bright-colors-in-ui-design-benefits-and-drawbacks-433680f0a1c7

作者：Tubik Studio

? end ?