色彩在界面設(shè)計(jì)中的應(yīng)用研究

王亮

延安大學(xué)西安創(chuàng)新學(xué)院藝術(shù)與傳媒學(xué)院 陜西 西安 710100

前言：界面是人與產(chǎn)品間傳遞和交換信息的媒介[1]。交互界面設(shè)計(jì)要素為結(jié)構(gòu)框架層、交互層和表現(xiàn)層三個(gè)方面[2]。而變現(xiàn)層主要的呈現(xiàn)方式為界面的視覺(jué)設(shè)計(jì)。作為視覺(jué)設(shè)計(jì)中的重要組成部分，色彩對(duì)于人們感知，情緒等感受都會(huì)產(chǎn)生直接的影響。色彩作為傳遞產(chǎn)品情緒的媒介幫助傳遞以及獲取信息，成為幫助建立用戶第一印象的重要工具，色彩作為文化的載體往往代表某種象征，承擔(dān)特定的含義，代替語(yǔ)言文字的功能[3]，在整個(gè)界面設(shè)計(jì)的過(guò)程中需要用大量的時(shí)間進(jìn)行對(duì)比，考慮得到適合產(chǎn)品的界面色彩。

一、色彩應(yīng)用到UI設(shè)計(jì)中展現(xiàn)出的基本內(nèi)涵及遵循的原則

1.色彩應(yīng)用到UI設(shè)計(jì)中展現(xiàn)出的基本內(nèi)涵

UI 設(shè)計(jì)指的就是用戶的界面，主要體現(xiàn)在人與機(jī)器的互動(dòng)上，在界面上展現(xiàn)出眾多的功能，給予用戶良好的使用體驗(yàn)。在界面設(shè)計(jì)中合理的應(yīng)用色彩可以提供給用戶更豐富，更深層次的視覺(jué)效果和感受，多樣化的色彩對(duì)比應(yīng)用在界面的設(shè)計(jì)中可以幫助用戶快速的區(qū)分各個(gè)功能從而做到快速定位，比如綠色代表通過(guò)，正確；紅色代表禁止，關(guān)閉，用戶可以通過(guò)這樣的顏色提示進(jìn)行快速操作，形成愉悅的體驗(yàn)。色彩逐漸被應(yīng)用到UI設(shè)計(jì)領(lǐng)域中，大大降低了用戶獲取信息的難度，凸顯出界面內(nèi)的各個(gè)區(qū)域，使用戶快速獲得相關(guān)的信息，通過(guò)色彩的對(duì)比加深對(duì)信息的印象[4]。

2.色彩應(yīng)用到UI設(shè)計(jì)中需要遵循的使用原則

色彩的使用呈現(xiàn)出的效果會(huì)直接影響整個(gè)界面的呈現(xiàn)效果，為了提高界面的設(shè)計(jì)品質(zhì)需要考慮的首要條件就是色彩的使用，而色彩在界面上的使用也需要遵循多項(xiàng)原則：第一，色彩在界面設(shè)計(jì)中需要不斷地考慮色彩關(guān)系，在確定界面的主體配色之后，就需要尋找與主色調(diào)相對(duì)應(yīng)的顏色，保證界面的配色更加和諧。第二，界面的顏色設(shè)計(jì)中需要遵循色彩心理學(xué)的相關(guān)規(guī)律，色彩心理學(xué)是一門(mén)通過(guò)研究人類(lèi)感受顏色的影響后，而產(chǎn)生的系列行為或心理活動(dòng)的學(xué)科[5]。這種影響是用戶通過(guò)視覺(jué)觀察顏色之后所產(chǎn)生的心理特征，例如：看到紅色會(huì)有熱，焦躁，熱烈的感覺(jué)，看到藍(lán)色會(huì)有冷靜，平和等的心理感受。這是色彩在色相層面上對(duì)于人們心理的影響但是這種影響不止停留在色相層面，不同明度的顏色也會(huì)對(duì)用戶的心理影響，例如，明度高的顏色會(huì)給人透亮的感覺(jué)而明度低的顏色會(huì)給人們厚重，穩(wěn)重的心理感受。

二、色彩在界面設(shè)計(jì)中的作用

1.區(qū)分界面的功能區(qū)域

色彩在界面設(shè)計(jì)中有著不可替代的作用，在界面設(shè)計(jì)中合理地運(yùn)用顏色可以幫助用戶更加清晰地區(qū)分各個(gè)功能模塊，快速定位到自己想要尋找的功能。顏色可以區(qū)分界面的背景，圖標(biāo)的顏色，圖標(biāo)的狀態(tài)（選中狀態(tài)，不可點(diǎn)擊狀態(tài)等），狀態(tài)欄，導(dǎo)航欄等區(qū)域。

2.加強(qiáng)界面層級(jí)關(guān)系，做到強(qiáng)弱對(duì)比明顯

界面中會(huì)有不同重要程度關(guān)系的呈現(xiàn)，不同的內(nèi)容之間會(huì)有一定的從屬關(guān)系和不同的重要程度，界面中用顏色進(jìn)行信息重要程度的區(qū)分可以更好地區(qū)分界面的層級(jí)，能夠快速傳遞給用戶重要的信息，例如微信界面中用戶，群組的名稱用到了顏色比較深的黑色而用戶信息則用到了灰色來(lái)進(jìn)行設(shè)計(jì)，這樣就可以快速定位到用戶想要尋找的某個(gè)人然后再看到所發(fā)的信息，并且未讀信息則用到了紅色這樣強(qiáng)烈，吸引眼球的顏色凸顯未讀信息的重要性。

3.體現(xiàn)界面設(shè)計(jì)風(fēng)格，增強(qiáng)用戶沉浸感

不同的顏色對(duì)于人們所產(chǎn)生的心理影響是不一樣的，那么我們?cè)诮缑娴脑O(shè)計(jì)中可以利用好這一點(diǎn)，幫助產(chǎn)品更好地實(shí)現(xiàn)定位，明確產(chǎn)品風(fēng)格。例如，微信最初設(shè)計(jì)時(shí)所對(duì)標(biāo)的產(chǎn)品是手機(jī)中的短信功能，而手機(jī)中的短信的圖標(biāo)設(shè)計(jì)為綠色+白色氣泡的模式，用戶看到綠色+白色的氣泡就會(huì)想到信息這一含義微信的設(shè)計(jì)團(tuán)隊(duì)就利用了這一點(diǎn)對(duì)微信圖標(biāo)進(jìn)行設(shè)計(jì)，使得產(chǎn)品的整體風(fēng)格和定位都符合最初時(shí)的設(shè)定。

4.滿足不同用戶群體的需求，幫助更多人正常使用

對(duì)于重視殘疾人，老年人，視覺(jué)障礙等特殊人群，在界面設(shè)計(jì)中，需要將這類(lèi)用戶考慮進(jìn)去，顏色作為最重要的視覺(jué)因素在設(shè)計(jì)的過(guò)程中也需要將“無(wú)障礙設(shè)計(jì)”考慮進(jìn)去，無(wú)障礙設(shè)計(jì)（barrierfreedesign），這個(gè)概念名稱始見(jiàn)于1974年，是聯(lián)合國(guó)組織提出的設(shè)計(jì)新主張。其理想目標(biāo)是“無(wú)障礙”。關(guān)注、重視殘疾人、老年人的特殊需求。人類(lèi)是擁有視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)等諸多感知“通道”的整合體，其中，無(wú)障礙色彩設(shè)計(jì)是一個(gè)面向所有公眾的視覺(jué)設(shè)計(jì)系統(tǒng)，該系統(tǒng)的最終目標(biāo)為創(chuàng)建無(wú)障礙可視環(huán)境，使信息盡可能準(zhǔn)確地傳達(dá)給更多的公眾。在使用操作界面上清除那些讓使用者感到困惑、困難的“障礙”（barrier），為使用者提供最大可能的方便，這就是無(wú)障礙設(shè)計(jì)的基本思想[6]。

例如高德地圖V7.7.8正式版中新增了色覺(jué)障礙模式，用戶開(kāi)啟該功能后路況便會(huì)采用色覺(jué)無(wú)障礙配色顯示，如圖1所示，開(kāi)啟該功能之后使用者的界面會(huì)從以前的綠色-（通暢）黃色-(緩行)紅色（擁堵）深紅色（重度擁堵）改變?yōu)樗{(lán)色-（通暢）淺黃色-(緩行)土色（擁堵）深灰色（重度擁堵）來(lái)進(jìn)行替代，將原來(lái)界面中的綠色，紅色，深紅色這些難以辨別的顏色進(jìn)行替代，這樣做的目的就是幫助色覺(jué)障礙人群能夠更好的在使用導(dǎo)航過(guò)程中辨別實(shí)時(shí)路況選擇最優(yōu)的線路進(jìn)行通行。

圖1 高德地圖的視覺(jué)障礙模式

高德的這種思考方式是讓任何人在任何情況下都能平等地、方便地、無(wú)障礙地使用地圖導(dǎo)航。

由于手機(jī)在我們的生活場(chǎng)景中占有越來(lái)越重要的地位，越來(lái)越多的人習(xí)慣于只攜帶一部手機(jī)出門(mén)，所以不同的APP在我們的生活中占有越來(lái)越重要的地位，在眾多的使用者中，有視覺(jué)障礙的用戶也占到了一定的比例，所以我們?cè)谠O(shè)計(jì)APP時(shí)需要考慮到這部分用戶的使用體驗(yàn)，保證他們的日常體驗(yàn)。目前市面上針對(duì)色覺(jué)障礙的用戶的設(shè)計(jì)主要分為兩個(gè)方向：第一種方向：會(huì)推出針對(duì)色覺(jué)障礙用戶的色覺(jué)障礙模式，這樣做的好處是會(huì)保證色覺(jué)障礙以及普通用戶的體驗(yàn)，但是作為設(shè)計(jì)者來(lái)說(shuō)一般需要做出兩套設(shè)計(jì)方案，那么如果產(chǎn)品的界面總數(shù)較少的話對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)工作量并沒(méi)有增加很多，但是這種方法并不適用于所有的界面設(shè)計(jì)，于是就有了第二種設(shè)計(jì)方向：針對(duì)界面量比較大的界面，我們往往只會(huì)設(shè)計(jì)出一套界面來(lái)適應(yīng)更多的用戶，那么在設(shè)計(jì)的過(guò)程中我們就要考慮到不同用戶的不同需求，其中就包含了色覺(jué)障礙的用戶，那么針對(duì)色覺(jué)障礙的用戶我們通常的做法是：減少界面中色相出現(xiàn)的頻率。如微信中關(guān)注公眾號(hào)的界面升級(jí)：由于微信的主色調(diào)為綠色，在微信未進(jìn)行升級(jí)之前，關(guān)注公眾號(hào)的按鈕為綠色+白色這樣的顏色模式，由于這兩種顏色的明度相近，會(huì)導(dǎo)致在色覺(jué)障礙用戶眼中識(shí)別度不高的情況，針對(duì)這種情況，微信的團(tuán)隊(duì)對(duì)此按鈕進(jìn)行了調(diào)整，從原來(lái)色塊+文字的模式調(diào)整成為圖標(biāo)顯示的模式，如圖2，這樣做會(huì)從根本上避免辨識(shí)度不高這種情況，使界面更具有普適性。

圖2 微信關(guān)注公眾號(hào)改版設(shè)計(jì)

三、色彩在界面設(shè)計(jì)中的應(yīng)用原則

1.利用色彩三要素進(jìn)行設(shè)計(jì)

色彩的三要素分別為：色相，明度和飽和度。設(shè)計(jì)師通過(guò)使用不同的顏色明亮程度來(lái)增加顏色的層次感，雖然上文提到不同的區(qū)域需要用不同的顏色進(jìn)行區(qū)分處理，這里指的顏色具體指的是色彩的色相，但是在界面的整體設(shè)計(jì)過(guò)程中我們用到的色相種類(lèi)一般來(lái)說(shuō)不會(huì)超過(guò)三種，所以在色相區(qū)分大功能區(qū)的前提下，設(shè)計(jì)師需要利用色彩的明度對(duì)其他部分的信息做出信息層級(jí)上的區(qū)分。

2.做好色彩搭配

在界面設(shè)計(jì)中如何合理使用色彩從而達(dá)到更好的界面效果，我們?cè)诮缑嬖O(shè)計(jì)中應(yīng)該遵循以下三種原則：

（1）統(tǒng)一性

如上文所說(shuō)，界面中各個(gè)區(qū)域都有它的作用，我們?cè)诮缑嬖O(shè)計(jì)的過(guò)程中，在保證界面中各區(qū)域合理性的基礎(chǔ)上，需要保證整體界面的整體性，幫助用戶從視覺(jué)等各個(gè)層面做到統(tǒng)一。界面設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師們會(huì)將版式設(shè)計(jì)應(yīng)用到界面的設(shè)計(jì)中用來(lái)區(qū)分界面的各個(gè)功能區(qū)域，但從宏觀來(lái)看，版式設(shè)計(jì)在功能區(qū)域的劃分中所用到的方法大多是為版式設(shè)計(jì)中的格式塔原則，但是為了更加加強(qiáng)格式塔的視覺(jué)效果，界面設(shè)計(jì)的時(shí)候應(yīng)該更多地利用色彩進(jìn)行區(qū)域的劃分，例如在蘋(píng)果官網(wǎng)的首頁(yè)設(shè)計(jì)中，使用大面積，不同顏色的色塊讓各個(gè)部分產(chǎn)生聯(lián)系與區(qū)分，相似的色彩區(qū)間以及板式的劃分讓整體界面達(dá)到高度的統(tǒng)一。

（2）合理性

以用戶為中心作為出發(fā)點(diǎn)，用戶在使用界面的過(guò)程中，界面的色彩搭配會(huì)給用戶帶來(lái)第一印象，用戶在慢慢使用產(chǎn)品的過(guò)程中能夠逐漸適應(yīng)和習(xí)慣界面所用到的色彩，讓用戶對(duì)界面的色彩與行為操作建立起聯(lián)系，讓整個(gè)產(chǎn)品的后續(xù)延續(xù)更加規(guī)范，合理。

我們?cè)诮缑嬖O(shè)計(jì)中考慮到色彩的話一定要考慮到使用顏色的性格，不同色相的顏色會(huì)給人不同的心理感受，但是在界面設(shè)計(jì)中我們也要注意調(diào)研在市場(chǎng)上的同類(lèi)產(chǎn)品，同類(lèi)型產(chǎn)品比我們的產(chǎn)品早一步投入市場(chǎng)，用戶對(duì)于這些產(chǎn)品的主題色已經(jīng)形成習(xí)慣，例如，ios系統(tǒng)中電話，信息的圖標(biāo)都是綠色+白色，作為同類(lèi)型但是上線時(shí)間比較晚的微信來(lái)說(shuō)，微信的色彩設(shè)計(jì)就遵循了這樣的規(guī)律采用了綠+白的色彩模式進(jìn)行設(shè)計(jì)，這樣在產(chǎn)品上線之后用戶只需要通過(guò)色彩就可以辨認(rèn)別出產(chǎn)品的性質(zhì)，如圖3。

圖3 ios電話 信息 微信圖標(biāo)對(duì)比

我們?cè)谏试O(shè)計(jì)的時(shí)候也需要將這部分因素考慮進(jìn)去，這樣在產(chǎn)品上線的時(shí)候可以降低用戶的學(xué)習(xí)成本。

（3）簡(jiǎn)易性

色彩的合理應(yīng)用會(huì)給界面更多的層次感和空間感，而不同色彩的搭配也會(huì)塑造出不同的界面風(fēng)格。但是界面設(shè)計(jì)中最重要的原則就是不適合太復(fù)雜，我們?cè)谠O(shè)計(jì)中應(yīng)該以簡(jiǎn)潔性為主，從用戶體驗(yàn)的角度來(lái)說(shuō)，簡(jiǎn)潔的界面和操作能夠減少用戶的學(xué)習(xí)成本，簡(jiǎn)單明確的界面也能夠給用戶更明確的指向性，幫助用戶更加快速上手產(chǎn)品，如最初的微信只有用簡(jiǎn)單的界面將所有的功能串聯(lián)起來(lái)，讓用戶在使用時(shí)候能夠一目了然。

結(jié)語(yǔ)

作為界面的重要組成部分，色彩的應(yīng)用對(duì)于整個(gè)產(chǎn)品來(lái)說(shuō)都是至關(guān)重要的，只有在界面設(shè)計(jì)的過(guò)程中用好了顏色才會(huì)更加體現(xiàn)出產(chǎn)品的整體設(shè)定并且會(huì)帶給用戶更好的體驗(yàn)以及沉浸感，在界面設(shè)計(jì)中不僅要考慮到顏色的屬性也需要考慮到界面的適用性，在界面設(shè)計(jì)的時(shí)候需要將不同類(lèi)型的用戶考慮進(jìn)去，我們的用戶中會(huì)包含很多有視覺(jué)障礙的用戶，在界面設(shè)計(jì)中需要將這些用戶考慮進(jìn)去，這樣做出來(lái)的產(chǎn)品才會(huì)更加地具有普適性。設(shè)計(jì)界面時(shí)使用顏色的過(guò)程中也需要考慮到色彩的三要素以及色彩的性格以及7:3:1的色彩搭配原理，只有做好了色彩搭配的環(huán)節(jié)，我們界面的設(shè)計(jì)才會(huì)更加出彩更加貼近產(chǎn)品的設(shè)定，從而達(dá)到提升用戶體驗(yàn)的目的。