淺談交互設(shè)計(jì)中的色彩應(yīng)用

張婷屹

摘 要：色彩是UI設(shè)計(jì)中非常重要的設(shè)計(jì)元素之一，是建立產(chǎn)品性格與氣質(zhì)的關(guān)鍵。在UI設(shè)計(jì)中，優(yōu)秀的色彩搭配將更容易吸引用戶的注意力，此外，好的色顏色搭配可以讓UI設(shè)計(jì)獲得更好的用戶體驗(yàn)。色彩所傳遞的情感一方面來(lái)源于色彩本身的屬性，例如暖色更加活潑、歡快，冷色更加理性、沉靜。另一方面來(lái)源于觀看者自身的屬性，包括觀看者的國(guó)籍、文化、年齡、性別等等。本文就UI設(shè)計(jì)中的色彩原理、應(yīng)用和設(shè)計(jì)方法，進(jìn)行分析和探究。

關(guān)鍵詞：UI設(shè)計(jì)；交互設(shè)計(jì)；色彩搭配；色彩規(guī)范

交互設(shè)計(jì)是一種功能與審美的高級(jí)結(jié)合，隨著智能手機(jī)的快速普及，它與人們的日常生活聯(lián)系愈發(fā)緊密。隨著社會(huì)經(jīng)濟(jì)的快速發(fā)展，人們的審美能力越來(lái)越高對(duì)于設(shè)計(jì)的要求也就越來(lái)越高。色彩是UI設(shè)計(jì)中非常重要的設(shè)計(jì)元素之一，同時(shí)也是建立產(chǎn)品性格與氣質(zhì)的關(guān)鍵。在UI設(shè)計(jì)中，優(yōu)秀的色彩搭配將更容易吸引用戶的注意力，此外，好的色顏色搭配可以讓UI設(shè)計(jì)獲得更好的用戶體驗(yàn)。有相關(guān)的實(shí)驗(yàn)證明，人們對(duì)于新事物的第一印象，色彩占80%。在觀看兩分鐘之后，色彩占60%，形態(tài)占40%。該試驗(yàn)表明了，色彩在很大程度上影響著我們對(duì)事物的認(rèn)知和記憶，同時(shí)不同的色彩也會(huì)讓觀者產(chǎn)生特定的情緒和心理映射，所以也誕生了研究色彩的專業(yè)學(xué)科。

總體來(lái)說(shuō)在UI設(shè)計(jì)中，對(duì)色彩的搭配可以參考三個(gè)方面，第一是色彩本身的物理屬性對(duì)用戶心里的映射，例如色彩的冷暖，冷色藍(lán)色更為理性、純凈，暖色紅色更為熱烈激情。又例如飽和度越高的顏色更為生動(dòng)活波，飽和度低的顏色更加沉穩(wěn)內(nèi)斂。第二點(diǎn)是不同用戶對(duì)色彩的主觀情感認(rèn)知，因?yàn)橛脩舻哪挲g、性別、文化等情況的不同對(duì)色彩的認(rèn)知也不經(jīng)相同，例如在我國(guó)紅色是財(cái)富的象征，我國(guó)的股票上漲是紅色，下跌是綠色，但在很多西方國(guó)家上漲是綠色，反之下跌是紅色，對(duì)于這兩種顏色在文化理解的上差別會(huì)直接影響我們?cè)O(shè)計(jì)配色。最后一點(diǎn)，是來(lái)自市場(chǎng)環(huán)境或同類競(jìng)品的配色參考，這也是UI配色中的一個(gè)客觀因素。如果我們?cè)跒橐豢罨ヂ?lián)網(wǎng)產(chǎn)品選擇配色時(shí)和同類競(jìng)品太過(guò)相似，那容易造成和其他產(chǎn)品的市場(chǎng)太過(guò)相似，通俗點(diǎn)說(shuō)可能會(huì)造成為他們做嫁衣的市場(chǎng)效果。UI設(shè)計(jì)的配色是一個(gè)復(fù)雜的過(guò)程，需要綜合考慮色彩的主、客觀因素，作為UI設(shè)計(jì)學(xué)習(xí)者，需要掌握基本的色彩理論，通過(guò)實(shí)踐不斷加深對(duì)色彩的認(rèn)識(shí)，并最終能夠熟練地運(yùn)用各種色彩，搭配出和諧、使人愉悅的交互設(shè)計(jì)。

一、色彩的基本要素

色彩是光從物體反射到人的眼睛所引起的的一種視覺(jué)心理感受。從物理上講，不同波長(zhǎng)的可見(jiàn)光對(duì)應(yīng)著不同的色彩，也就是說(shuō)有光的地方就會(huì)有色彩。豐富的色彩基本可以分成兩個(gè)大類，即有彩色和無(wú)彩色。有彩色具有三個(gè)基本的特征即色相、純度和明度。無(wú)彩色，是指白色、黑色，和由黑白調(diào)和成的不同程度的灰色。色彩中不能再分解的三種基本顏色，也就是我們通常說(shuō)的三原色，即紅、黃、藍(lán)，通過(guò)三原色可以混合出所有的顏色。

二、色彩在UI設(shè)計(jì)中的應(yīng)用

色彩是交互設(shè)計(jì)中最具表現(xiàn)力和影響力的組成部分，他通過(guò)人們的視覺(jué)感受產(chǎn)生一系列心理映射，從而喚起用戶對(duì)于產(chǎn)品不同的情緒和感受。UI設(shè)計(jì)師要充分了解色彩的不同心理學(xué)知識(shí)，理解色彩給觀者帶來(lái)的不同心理感受，才能讓色彩對(duì)產(chǎn)品的營(yíng)造起到積極的烘托作用。這節(jié)當(dāng)中，我們把色彩的學(xué)習(xí)分成兩個(gè)部分，一是基于對(duì)于色彩性格的理解，合理運(yùn)用色彩表現(xiàn)產(chǎn)品性質(zhì)；二是通過(guò)不同的配色方案，提升產(chǎn)品的視覺(jué)體驗(yàn)。

交互設(shè)計(jì)師在配色時(shí)，除了要考慮色彩的內(nèi)在映射，還要根據(jù)產(chǎn)品功能，搭配出符合用戶預(yù)期的配色方案。好的配色方案可以有效的幫助用戶理解應(yīng)用的功能，正確的完成操作，或是與界面當(dāng)中的其他元素積極互動(dòng)。每個(gè)APP都會(huì)有屬于自己的配色方案，

一個(gè)完整的UI配色應(yīng)包含主色、輔助色、和點(diǎn)綴色。主色調(diào)通常和品牌標(biāo)準(zhǔn)色一致，一般來(lái)說(shuō)在品牌設(shè)計(jì)中，品牌標(biāo)準(zhǔn)色指的是其品牌logo的顏色。主色決定了整個(gè)產(chǎn)品風(fēng)格和定位。其次，為了更好的豐富視覺(jué)效果，一般來(lái)說(shuō)，一個(gè)應(yīng)用都會(huì)搭配2-3種配色。輔助色的使用可以使畫面的層次更加豐富，有效的引導(dǎo)操作。簡(jiǎn)潔的配色可以有效的提升用戶的體驗(yàn)，相反，如果配色太多讓人眼花繚亂，會(huì)一定程度上分散用戶的關(guān)注度，使操作變的低效，甚至是誤導(dǎo)用戶。

三、色彩在產(chǎn)品推廣中的作用

之前已經(jīng)討論過(guò)人們?cè)诮邮芤曈X(jué)形象時(shí)，對(duì)于色彩的敏感度是要高于形狀的明感度。在用戶體驗(yàn)一個(gè)產(chǎn)品時(shí)，色彩會(huì)首先在用戶的思維上產(chǎn)生作用，這就是色彩的心理映射。色彩可以體現(xiàn)商品的性能、用途和屬性。簡(jiǎn)單來(lái)說(shuō)，色彩為該商品奠定了一個(gè)大體的基調(diào)。用戶在打開(kāi)這個(gè)界面的時(shí)候就大概知道這是一個(gè)怎樣的商品，例如一款嬰幼產(chǎn)品，主色調(diào)首選的顏色一般是粉紅色、粉黃色、桃紅色，這些明度較高且溫暖的顏色，而不會(huì)選擇綠色、藍(lán)色、黑色，這些明度較低且冷靜的顏色。再例如，從用戶的角度來(lái)說(shuō)，在看到一款主色調(diào)是藍(lán)色的產(chǎn)品時(shí)，一般反應(yīng)不會(huì)是女性產(chǎn)品、不會(huì)是美食產(chǎn)品、不會(huì)是兒童產(chǎn)品。如果是生硬的標(biāo)新立異，可能會(huì)在用戶初體驗(yàn)時(shí)產(chǎn)生不必要的誤解。這種基礎(chǔ)的認(rèn)知就是色彩的形象影響了用戶對(duì)于商品基本內(nèi)容的判定。所以說(shuō)選擇恰當(dāng)?shù)纳誓艽龠M(jìn)用戶對(duì)于商品的好感與認(rèn)知。

一個(gè)產(chǎn)品選擇一種主色調(diào)，這個(gè)顏色也就成了這個(gè)產(chǎn)品的專屬色，在長(zhǎng)期的使用過(guò)程中需要嚴(yán)格遵守其一致性，如此一來(lái)，產(chǎn)品就可以在用戶的心中樹(shù)立深刻的品牌印象。就好像我們看到紅色就能想到可口可樂(lè)，看到藍(lán)色就能想到百事可樂(lè)。這種反復(fù)的記憶刺激可以強(qiáng)化產(chǎn)品的影響力，是品牌的保證，便于用戶的搜索捆綁用戶，更有利于產(chǎn)品的推廣，最終讓產(chǎn)品更具競(jìng)爭(zhēng)優(yōu)勢(shì)。

其次，除了要考慮產(chǎn)品色彩與產(chǎn)品內(nèi)容的一致性，從營(yíng)銷層面來(lái)說(shuō)，在匹配產(chǎn)品的主色調(diào)時(shí)還要考慮同類產(chǎn)品的用色。色彩的差異性也是有助于產(chǎn)品競(jìng)爭(zhēng)的重要手段。結(jié)合色彩屬性和產(chǎn)品內(nèi)容的專屬色最可能出現(xiàn)的問(wèn)題就是無(wú)法在眾多產(chǎn)品競(jìng)爭(zhēng)中顯示其獨(dú)特性。產(chǎn)品的形象和定位太過(guò)相似不利于產(chǎn)品的營(yíng)銷和推廣，沒(méi)辦法在用戶心中和其他競(jìng)品。例如在路旅游類產(chǎn)品中，大部分的App都會(huì)使用藍(lán)綠作為主色調(diào)，因?yàn)樗{(lán)綠色更能傳達(dá)自由、自然、放松的色彩情感。而驢媽媽旅游偏偏使用紅色主色調(diào)可以使產(chǎn)品在競(jìng)品中更加突出，更利于用戶識(shí)別。餓了嗎是外賣產(chǎn)品中唯一使用冷色調(diào)的。選擇非常規(guī)的色彩搭配無(wú)疑即是挑戰(zhàn)也是機(jī)遇。挑戰(zhàn)是指不同的對(duì)比可能會(huì)使選擇的顏色和用戶心理預(yù)期發(fā)生背離，而難以認(rèn)同。這就對(duì)UI設(shè)計(jì)師提出了更高的要求，通過(guò)對(duì)比所贏得的關(guān)注可以幫助產(chǎn)品更努力的挖掘自身的產(chǎn)品特點(diǎn)，并規(guī)劃之后營(yíng)銷方式，從而走出一條專屬的產(chǎn)品發(fā)展方向。

所以，作為交互設(shè)計(jì)師，在設(shè)計(jì)時(shí)，不能單純的憑借個(gè)人的喜好去搭配顏色，而是需要充分考慮用戶在使用時(shí)的體驗(yàn)。在產(chǎn)品設(shè)計(jì)色彩之初，首先應(yīng)該明確產(chǎn)品的內(nèi)容、性質(zhì)、特性，結(jié)合產(chǎn)品的目標(biāo)客戶群，匹配合適的色彩。另外UI設(shè)計(jì)師要結(jié)合市場(chǎng)要素，了解產(chǎn)品是市場(chǎng)中的定位，利用視覺(jué)手段為產(chǎn)品開(kāi)辟一條專屬的視覺(jué)營(yíng)銷路線。

參考文獻(xiàn)

[1]李南南，淺析色彩心理在UI設(shè)計(jì)中的應(yīng)用，《大眾文藝》，2018（10）

[2]李時(shí)穎，UI設(shè)計(jì)中的色彩運(yùn)用研究，《電腦知識(shí)與技術(shù)》，2016，12（31）：193-194

[3]曾俊蓉，UI界面設(shè)計(jì)中的色彩規(guī)劃，《藝術(shù)品鑒》，2016（3）

[4]趙偲，基于感性工學(xué)與色彩心理學(xué)的2.5維UI界面設(shè)計(jì)研究，南京航空航天大學(xué)，2009

（作者單位：安徽財(cái)貿(mào)職業(yè)學(xué)院）