對(duì)平面設(shè)計(jì)師、UI設(shè)計(jì)師等從事視覺設(shè)計(jì)類工作的人來說，合理應(yīng)用色彩是個(gè)不可或缺的關(guān)鍵技能。特別是隨著扁平化設(shè)計(jì)和Material Design設(shè)計(jì)規(guī)范的日益普及，色彩理論知識(shí)也扮演著越來越重要的角色。

從娛樂設(shè)施到商務(wù)App和網(wǎng)站，明亮的色彩和漸變被運(yùn)用在各種電子產(chǎn)品的界面上。然而對(duì)于明亮顏色對(duì)用戶體驗(yàn)的影響依然存在一些爭(zhēng)議。這篇文章就從優(yōu)勢(shì)和劣勢(shì)兩個(gè)方向出發(fā)，論述了明亮色彩在UI設(shè)計(jì)中的利與弊。

一、明亮色彩的優(yōu)勢(shì)

01.增強(qiáng)可讀性和易讀性

在進(jìn)行配色時(shí)，提升內(nèi)容的可讀性和易讀性是設(shè)計(jì)的核心出發(fā)點(diǎn)?？勺x性是指用戶獲取內(nèi)容的難易程度，易讀性指用戶識(shí)別特定字體的速度。

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

Big City Guide

02.明確導(dǎo)航和增強(qiáng)直覺交互

對(duì)任何一個(gè)數(shù)字產(chǎn)品來說，視覺層級(jí)是構(gòu)建清晰導(dǎo)航和直覺交互系統(tǒng)的關(guān)鍵要素。多種UI元素被有機(jī)結(jié)合在一起，通過顏色等物理屬性，構(gòu)建出讓大腦可以清晰辨識(shí)的內(nèi)容。

色彩通過在用戶心目中留下的不同印象，構(gòu)建出了自己獨(dú)特的色彩層級(jí)。紅色和橘色屬于濃重的顏色，而白色和乳白色則顯得輕薄。明亮的色彩更容易被人感知，因此設(shè)計(jì)師通常把它們用于強(qiáng)調(diào)或形成對(duì)比。此外，把相同的顏色運(yùn)用在不同的元素上，你會(huì)發(fā)現(xiàn)這些元素之間仿佛有了某種聯(lián)系。例如你可以把購(gòu)買按鈕設(shè)計(jì)成紅色，這樣用戶在需要下單的時(shí)候會(huì)更下意識(shí)的找到它（因?yàn)榧t色總是跟支出聯(lián)系在一起）。

03.增強(qiáng)辨識(shí)度

明亮的色彩能引起人類大腦強(qiáng)烈的反應(yīng)，這也是為什么明亮的色彩組合會(huì)更容易被識(shí)別和記憶。相比于清淡的色彩搭配，顏色豐富的UI設(shè)計(jì)更容易被凸顯出來。當(dāng)然，這種設(shè)計(jì)方式要綜合考慮到目標(biāo)用戶的喜好和市場(chǎng)調(diào)研的結(jié)果。

如果一個(gè)公司的logo或者品牌形象中有運(yùn)用到鮮明的色彩搭配，那么把這個(gè)色彩搭配運(yùn)用到公司的App或者網(wǎng)站設(shè)計(jì)上是個(gè)不錯(cuò)的方法。既可以為公司所有的展示渠道提供統(tǒng)一的視覺解決方案，又能提升品牌辨識(shí)度。

Book Swap App

04.營(yíng)造情緒和氛圍

顏色可以影響人們的心情和行為，營(yíng)造特定的氣氛，傳遞特定的信息并促使用戶做出期望的行動(dòng)。人們會(huì)不知不覺對(duì)顏色做出反應(yīng)。

一項(xiàng)名為色彩心理學(xué)的研究指出一旦我們的眼睛接收到一種顏色信號(hào)，大腦就會(huì)發(fā)出指令，讓內(nèi)分泌系統(tǒng)釋放出一種可以調(diào)節(jié)情緒的荷爾蒙。精心配制的顏色可以營(yíng)造出向用戶傳遞特定信息的特定氛圍，讓用戶不由自主地產(chǎn)生行為。例如，如果一個(gè)UI設(shè)計(jì)師需要設(shè)計(jì)一款與自然和園藝相關(guān)的產(chǎn)品，那么他很有可能會(huì)選擇綠色或藍(lán)色作為主色。這樣用戶一眼看過去，就能立即聯(lián)想到這個(gè)產(chǎn)品是屬于特定類別的。

Booking Service

05.打造時(shí)尚的外觀和風(fēng)格

明亮的色彩和漸變引領(lǐng)著UI設(shè)計(jì)的主流趨勢(shì)。現(xiàn)在你可以在各種各樣的數(shù)字產(chǎn)品中發(fā)現(xiàn)它們的蹤跡，即便是嚴(yán)格的商務(wù)風(fēng)格也無(wú)法拒絕它們的魅力。

用戶界面上明亮的漸變色可以體現(xiàn)出先進(jìn)的科技感和新奇的創(chuàng)造力。根據(jù)潮流趨勢(shì)而設(shè)計(jì)的移動(dòng)App或網(wǎng)站通?？瓷先シ浅Ａ裂坌涯?，即使是在眾多產(chǎn)品的激烈競(jìng)爭(zhēng)中也可以輕松吸引用戶的注意力。

Business Card App

二、明亮色彩的劣勢(shì)

01.難以進(jìn)行搭配

如果你以為色彩的搭配主要取決于直覺和審美，那么你就大錯(cuò)特錯(cuò)了。如果你想設(shè)計(jì)出和諧的視覺體驗(yàn)，對(duì)于色彩本身以及色彩協(xié)同原理的基礎(chǔ)知識(shí)是必不可少的。

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

1. 單色：在單一色值基礎(chǔ)上調(diào)整明度和飽和度

2. 臨近色：使用在色相環(huán)上位置相鄰的兩種顏色進(jìn)行搭配

3. 互補(bǔ)色：使用在色相環(huán)上位置相反的兩種顏色進(jìn)行搭配，營(yíng)造強(qiáng)烈的對(duì)比

4. 分離互補(bǔ)色：為主色選擇2種互補(bǔ)色，互補(bǔ)色為相鄰色；例如藍(lán)色為主色，互補(bǔ)色是黃色，同時(shí)使用紅色作為第2種互補(bǔ)色

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

6. 四色互補(bǔ)：選擇色相環(huán)上的四種顏色，其中兩兩互補(bǔ)。四種顏色所處的位置連接起來可以構(gòu)成一個(gè)矩形。

基礎(chǔ)色相環(huán)

02.難以把控風(fēng)格

在UI設(shè)計(jì)中，濃重的色彩既能快速塑造出特定的產(chǎn)品色彩風(fēng)格，也能輕易破壞之。一個(gè)作品里如果出現(xiàn)太多艷麗的顏色，主要的元素可能會(huì)被淹沒在紛繁的色彩海洋中，無(wú)法凸顯。這也是為什么我們都建議設(shè)計(jì)師在進(jìn)行色彩搭配時(shí)選擇6-3-1這樣的比例。

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

03.不一定適合所有用戶群體

用戶研究是產(chǎn)品設(shè)計(jì)的關(guān)鍵步驟之一。通過對(duì)目標(biāo)用戶的研究和分析，設(shè)計(jì)師可以了解到用戶對(duì)產(chǎn)品的期望。不同的年齡、性別和文化背景可能形成不同的用戶偏好。例如：在兒童時(shí)期，人們可能尤為喜歡黃色，而當(dāng)長(zhǎng)大成人后，對(duì)黃色的偏好就逐漸降低了。成年男性和女性普遍喜歡藍(lán)色、綠色等冷色系，而與女性不同的是，男性通常更為偏好黑、白、灰這類無(wú)色相的顏色。

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

04.在移動(dòng)端屏幕上反差過于強(qiáng)烈

就像我們前面提到的，明亮的顏色可以制造鮮明的對(duì)比，并以此來提升頁(yè)面的可讀性和易讀性，同時(shí)還可以突出特定的界面元素。然而在移動(dòng)端，頁(yè)面空間有限，并且使用場(chǎng)景多種多樣，過于強(qiáng)烈的對(duì)比可能會(huì)產(chǎn)生反作用。

當(dāng)一個(gè)擁有強(qiáng)烈色彩對(duì)比的頁(yè)面，搭配以狹小的屏幕，復(fù)雜的環(huán)境光和明亮的字體闖入用戶的視覺時(shí)，會(huì)引起用戶的不適。因此當(dāng)設(shè)計(jì)師在頁(yè)面中使用明亮色彩時(shí)，需要注意控制顏色之間的對(duì)比強(qiáng)度，讓用戶擁有一個(gè)良好的閱讀體驗(yàn)。

Night in Berlin App

總結(jié)

顏色是設(shè)計(jì)師最有力的武器之一，同時(shí)，和其他設(shè)計(jì)元素一樣，它有它自身的優(yōu)勢(shì)和局限。在使用顏色進(jìn)行設(shè)計(jì)時(shí)，你需要進(jìn)行綜合和全面的考量，才能設(shè)計(jì)出實(shí)現(xiàn)設(shè)計(jì)目標(biāo)的最佳方案。