基于用戶(hù)體驗(yàn)交互產(chǎn)品的色彩設(shè)計(jì)研究

紀(jì)相成

（韓國(guó)南首爾大學(xué) 藝術(shù)設(shè)計(jì)信息學(xué)院，天安 330-707）

交互產(chǎn)品設(shè)計(jì)的目標(biāo)是給用戶(hù)帶來(lái)良好的使用體驗(yàn)，色彩作為交互產(chǎn)品的重要元素，對(duì)用戶(hù)體驗(yàn)程度具有決定性作用。合理的色彩設(shè)計(jì)不僅能給用戶(hù)帶來(lái)視覺(jué)上的滿(mǎn)足和引導(dǎo)用戶(hù)使用產(chǎn)品的行為，還能給用戶(hù)帶來(lái)情感體驗(yàn)反思層上的滿(mǎn)足[1]。

1 交互產(chǎn)品的用戶(hù)體驗(yàn)概述

1.1 交互產(chǎn)品的用戶(hù)體驗(yàn)

交互產(chǎn)品專(zhuān)注于設(shè)計(jì)用戶(hù)與產(chǎn)品之間的互動(dòng)及體驗(yàn)的領(lǐng)域[2]。用戶(hù)研究、信息架構(gòu)、界面設(shè)計(jì)、交互設(shè)計(jì)、可用性測(cè)試等設(shè)計(jì)環(huán)節(jié)決定了一個(gè)交互產(chǎn)品能否帶來(lái)良好的用戶(hù)體驗(yàn)。交互產(chǎn)品設(shè)計(jì)的目標(biāo)是滿(mǎn)足用戶(hù)需求，因此，需要全面考慮上述設(shè)計(jì)環(huán)節(jié)。

自1984年比爾·莫格里奇（Bill Moggridge）在一次會(huì)議中提出交互設(shè)計(jì)的概念，計(jì)算機(jī)逐漸成為人們?cè)O(shè)計(jì)的對(duì)象。人機(jī)界面設(shè)計(jì)成為當(dāng)時(shí)設(shè)計(jì)師、計(jì)算機(jī)工程師的熱門(mén)話(huà)題，這也是交互產(chǎn)品設(shè)計(jì)的起源。自1987年蘋(píng)果針對(duì)圖形用戶(hù)界面（GUI）發(fā)布了Macintosh Ⅱ型電腦后，色彩的研究與交互設(shè)計(jì)密切相關(guān)。

1.2 交互產(chǎn)品色彩在情感體驗(yàn)層次的作用

唐納德·諾曼[3]在《情感化設(shè)計(jì)》中將用戶(hù)的情感體驗(yàn)分為本能層、行為層、反思層3個(gè)不同但又相互關(guān)聯(lián)，同時(shí)以特定的方式影響著用戶(hù)對(duì)產(chǎn)品體驗(yàn)的情感層次[4]。3個(gè)層次呈現(xiàn)出遞進(jìn)的關(guān)系，本能層在表面，行為層控制用戶(hù)的使用行為，反思層觸發(fā)用戶(hù)思考。交互產(chǎn)品的色彩設(shè)計(jì)在一定程度上影響著這3個(gè)層次。

1.2.1 交互產(chǎn)品色彩在本能層對(duì)用戶(hù)的影響

交互產(chǎn)品設(shè)計(jì)也廣泛應(yīng)用冷暖色調(diào)原理，讓冷暖色調(diào)調(diào)動(dòng)用戶(hù)本能層的反應(yīng)。通常電商購(gòu)物類(lèi)App界面（如淘寶、京東、拼多多、唯品會(huì)等）的色彩搭配以暖色調(diào)為主，讓用戶(hù)感到親近、愉悅和興奮，可以增強(qiáng)用戶(hù)的積極情緒，引導(dǎo)用戶(hù)產(chǎn)生消費(fèi)的想法；而交通、銀行類(lèi)等內(nèi)容偏理性化的App通常采用冷色調(diào)搭配，如12306、將行App，給人安全、放松的感覺(jué)。

人們?cè)诒灸軐拥姆磻?yīng)有所不同，有的人受到驚嚇的反應(yīng)是大叫，有的人可能默不作聲，但是瞳孔會(huì)放大、血壓會(huì)升高。這些都是由本能層的個(gè)體差異性決定的。交互產(chǎn)品色彩引發(fā)用戶(hù)本能層的反應(yīng)也不盡相同，因此，如何將色彩設(shè)計(jì)與交互產(chǎn)品設(shè)計(jì)緊密結(jié)合，全方位滿(mǎn)足用戶(hù)的需求以及讓產(chǎn)品引發(fā)用戶(hù)本能層的情感共鳴，是設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)需要重點(diǎn)考慮的問(wèn)題。

1.2.2 交互產(chǎn)品色彩在行為層對(duì)用戶(hù)的影響

優(yōu)先級(jí)高的色彩可以用于引導(dǎo)用戶(hù)的行為和交互。在交互產(chǎn)品設(shè)計(jì)中，使用醒目的顏色突出重要的按鈕或功能，以吸引用戶(hù)的注意力并引導(dǎo)其操作。例如，站酷網(wǎng)登錄界面主題色采用白、灰兩色，而在輸入手機(jī)號(hào)完成驗(yàn)證后“發(fā)送驗(yàn)證碼”按鈕則從會(huì)從灰變黃，用明黃色刺激用戶(hù)視覺(jué)，告訴用戶(hù)接下來(lái)要點(diǎn)擊這個(gè)按鈕。同時(shí)，產(chǎn)品也可以使用不同的顏色區(qū)分不同的交互元素，例如警示色用于錯(cuò)誤提示，以幫助用戶(hù)快速理解和作出正確的反應(yīng)。

在界面運(yùn)用色彩可以在用戶(hù)心中搭建一個(gè)明確的概念模型，如哪些地方是接下來(lái)要操作的、哪些地方是必須更改的，讓用戶(hù)的行為跟隨設(shè)計(jì)師設(shè)計(jì)好的流程，既避免了文字性說(shuō)明的枯燥，帶給用戶(hù)愉悅感，又有效防止了誤觸或與產(chǎn)品使用流程相悖，提高了用戶(hù)對(duì)產(chǎn)品的使用效率。

1.2.3 交互產(chǎn)品色彩在反思層對(duì)用戶(hù)的影響

反思層是情感設(shè)計(jì)的最高層次，這里的情感體驗(yàn)更加偏向于考慮產(chǎn)品的合理化和智能化，是用戶(hù)在產(chǎn)品使用階段對(duì)產(chǎn)品的思考。不同的色彩調(diào)性與不同的情感和意義相關(guān)，合理的色彩運(yùn)用可以向用戶(hù)傳達(dá)產(chǎn)品或品牌的價(jià)值觀(guān)和情感導(dǎo)向。明亮的色彩調(diào)性通常與積極、活力相關(guān)，而柔和的色彩調(diào)性則與安靜、溫暖相關(guān)。根據(jù)交互產(chǎn)品的價(jià)值觀(guān)和情感導(dǎo)向選擇與之相匹配的色彩調(diào)性，可以直接傳達(dá)設(shè)計(jì)師所追求的情感或態(tài)度。同時(shí)，顏色是一種社會(huì)性的語(yǔ)義符號(hào)，不同的顏色在文化和社會(huì)領(lǐng)域具有不同的語(yǔ)義。在設(shè)計(jì)中有效運(yùn)用色彩的調(diào)性和語(yǔ)義可以讓用戶(hù)在反思層將交互產(chǎn)品與特定的情感或價(jià)值觀(guān)聯(lián)系起來(lái)，進(jìn)而影響用戶(hù)的情感和認(rèn)知，增強(qiáng)用戶(hù)對(duì)產(chǎn)品或品牌的情感認(rèn)同。

2 基于用戶(hù)體驗(yàn)交互產(chǎn)品色彩設(shè)計(jì)的應(yīng)用策略

2.1 色彩搭配醒目且和諧

2.1.1 相同色與相似色的運(yùn)用

格式塔心理學(xué)中的相似性原則認(rèn)為，人類(lèi)本能傾向于將顏色、形狀或其他屬性相同的元素相聯(lián)結(jié)，形成一個(gè)整體[4]。當(dāng)用戶(hù)看到交互產(chǎn)品中相同顏色的元素時(shí)，可能認(rèn)為這些元素具有關(guān)聯(lián)性，也具有相似的功能或意義。這種顏色聯(lián)結(jié)可能會(huì)導(dǎo)致用戶(hù)在界面迅速識(shí)別出相關(guān)信息或功能，提高界面的可辨識(shí)度和用戶(hù)理解的效率。

相似的顏色在視覺(jué)上有一定的層級(jí)關(guān)系，同一個(gè)色相的飽和度或者明度的變化給用戶(hù)造成的視覺(jué)上的分層不同。在交互產(chǎn)品設(shè)計(jì)中，運(yùn)用相似色可以幫助用戶(hù)在界面快速建立視覺(jué)關(guān)聯(lián)和流程。通過(guò)在不同步驟或相關(guān)內(nèi)容之間使用相似色，可以展現(xiàn)內(nèi)容的關(guān)聯(lián)性和順序，使用戶(hù)更容易理解。這有助于簡(jiǎn)化用戶(hù)的認(rèn)知過(guò)程，提高用戶(hù)的任務(wù)完成效率。

將產(chǎn)品功能結(jié)構(gòu)結(jié)合用戶(hù)的需求進(jìn)行色彩排序，當(dāng)用戶(hù)看到此類(lèi)色彩排序時(shí)，會(huì)立即根據(jù)排序信息建立概念模型，了解界面中信息的順序關(guān)系，提升產(chǎn)品使用效率。然而，當(dāng)用戶(hù)看到雜亂無(wú)章的顏色時(shí)，無(wú)法迅速理解設(shè)計(jì)師想要表達(dá)的內(nèi)容，進(jìn)而影響用戶(hù)體驗(yàn)。

2.1.2 互補(bǔ)色與對(duì)比色的運(yùn)用

人們?cè)谛睦砩蠒?huì)將顏色相同或相似的元素看成一個(gè)整體，反之亦然。人們會(huì)在視覺(jué)上對(duì)不同的顏色進(jìn)行區(qū)分，將其歸為兩類(lèi)。選擇互補(bǔ)色或?qū)Ρ壬岣呱实膶?duì)比效果，在提高用戶(hù)使用效率的同時(shí)，也要確保色彩之間的協(xié)調(diào)性，避免產(chǎn)生不和諧的視覺(jué)沖突和破壞色彩運(yùn)用給用戶(hù)帶來(lái)的愉悅感。要注意使用高對(duì)比顏色是否會(huì)給用戶(hù)造成視覺(jué)疲勞和不適，如果用戶(hù)使用產(chǎn)品的愉悅感蕩然無(wú)存，在產(chǎn)品表現(xiàn)層的設(shè)計(jì)無(wú)疑是失敗的。

2.2 色彩設(shè)計(jì)要針對(duì)目標(biāo)用戶(hù)群體

不同的用戶(hù)群體對(duì)色彩的偏好和心理反應(yīng)較為多樣，針對(duì)目標(biāo)用戶(hù)群體的個(gè)性化色彩設(shè)計(jì)，產(chǎn)品能與競(jìng)爭(zhēng)對(duì)手產(chǎn)生差異化，增強(qiáng)自身的市場(chǎng)競(jìng)爭(zhēng)力。例如小紅書(shū)是一個(gè)以分享購(gòu)物心得和生活方式為主題的社交平臺(tái)，其用戶(hù)群體以年輕女性居多，以HEX編碼#3a3a3a的洋紅色作為其品牌的主要色調(diào)，傳遞出熱情、活力和引人注目的產(chǎn)品形象。這樣的色彩調(diào)性符合當(dāng)今大多數(shù)青年女性的自我定位，進(jìn)而提升了其主體用戶(hù)—青年女性對(duì)產(chǎn)品的忠誠(chéng)度。

因此，色彩設(shè)計(jì)需要根據(jù)目標(biāo)用戶(hù)的特點(diǎn)和文化背景選擇合適的色彩調(diào)性、亮度、飽和度和配色方案。通過(guò)用戶(hù)調(diào)研、市場(chǎng)分析等方法獲取目標(biāo)用戶(hù)的特點(diǎn)、喜好和需求以及其他不涉及個(gè)人隱私的用戶(hù)信息，以便更好地理解目標(biāo)用戶(hù)的喜好和習(xí)慣，同時(shí)考慮用戶(hù)心理需求，某些色彩可能激起用戶(hù)的情緒或情感共鳴。另外，由于色彩設(shè)計(jì)在不同文化和地域的差異性，在跨文化設(shè)計(jì)中，需要了解目標(biāo)用戶(hù)所處地域的色彩象征意義和文化傳統(tǒng)，避免使用可能引起誤解或沖突的色彩。如此一來(lái)，色彩設(shè)計(jì)能更好地在交互產(chǎn)品設(shè)計(jì)的戰(zhàn)略層面引起用戶(hù)的情感共鳴并激發(fā)其興趣，幫助用戶(hù)更輕松地理解和操作產(chǎn)品。

2.3 色彩設(shè)計(jì)要關(guān)乎產(chǎn)品功能范圍

一個(gè)交互產(chǎn)品由多個(gè)不同的功能范圍組成，功能范圍的劃分影響用戶(hù)對(duì)產(chǎn)品概念模型的建立和對(duì)產(chǎn)品體驗(yàn)感的評(píng)判。這個(gè)產(chǎn)品是否易于理解、功能區(qū)劃分是否符合邏輯、使用起來(lái)是否輕松流暢，是用戶(hù)在使用產(chǎn)品時(shí)在思考層對(duì)產(chǎn)品的考量。通過(guò)色彩設(shè)計(jì)，區(qū)分不同的功能模塊、視覺(jué)層次和交互元素，給用戶(hù)直觀(guān)的視覺(jué)體驗(yàn)，讓用戶(hù)本能地在顏色范圍內(nèi)尋找想要使用的功能。

在設(shè)計(jì)交互產(chǎn)品界面時(shí)，可以利用不同的主色調(diào)按照產(chǎn)品功能層級(jí)進(jìn)行區(qū)分，也可以采用明暗對(duì)比，突出不同功能范圍的重要性和層次關(guān)系。在深色背景上使用明亮的色彩標(biāo)識(shí)主要功能，在淺色背景上使用柔和的色彩標(biāo)識(shí)次要功能，或者使用冷色調(diào)標(biāo)識(shí)某個(gè)功能范圍，使用暖色調(diào)標(biāo)識(shí)另一個(gè)功能范圍，這樣用戶(hù)可以通過(guò)不同的主色調(diào)或色彩的明暗和冷暖快速識(shí)別和區(qū)分不同的功能范圍。

需要注意的是，在利用色彩劃分產(chǎn)品的功能范圍時(shí)，應(yīng)確保色彩的使用符合用戶(hù)的習(xí)慣和期望。定期進(jìn)行用戶(hù)測(cè)試和獲取反饋可以幫助驗(yàn)證色彩劃分的有效性和用戶(hù)的理解程度。

2.4 確保色彩能傳達(dá)正確的信息

在宏觀(guān)上，交互產(chǎn)品中的色彩設(shè)計(jì)能向用戶(hù)傳達(dá)產(chǎn)品的理念與定位。社交媒體平臺(tái)Facebook在色彩設(shè)計(jì)上選擇藍(lán)色作為其主要品牌色彩，不僅符合創(chuàng)始人的需求，也傳遞了一個(gè)重要的產(chǎn)品理念—Facebook是一個(gè)注重包容和無(wú)障礙的平臺(tái)。這種色彩設(shè)計(jì)向用戶(hù)傳達(dá)了正確的信息，即Facebook致力于為所有用戶(hù)提供良好的體驗(yàn)，無(wú)論他們的視覺(jué)能力如何。

在微觀(guān)上，交互產(chǎn)品中的色彩設(shè)計(jì)能突出重要的交互元素或提示，提示用戶(hù)正確的操作方法，為用戶(hù)提供正確的信息，讓用戶(hù)在心中快速建立產(chǎn)品的概念模型。例如電商平臺(tái)淘寶的色彩設(shè)計(jì)，淘寶采用了橙色作為主要的品牌色彩。在產(chǎn)品界面，紅色通常用于標(biāo)識(shí)導(dǎo)航欄已經(jīng)選中的選項(xiàng)卡和界面元素，突出重要的交互元素或提示。這種色彩設(shè)計(jì)能告知用戶(hù)正確的操作方式。同時(shí)，將色彩運(yùn)用于交互產(chǎn)品按鈕設(shè)計(jì)中，可以引導(dǎo)用戶(hù)進(jìn)行相應(yīng)的操作，也可以在本能層提示用戶(hù)已經(jīng)對(duì)哪些功能進(jìn)行了操作。例如抖音的點(diǎn)贊和收藏按鈕，未選中狀態(tài)下的按鈕是灰白色的，當(dāng)選中后，按鈕就會(huì)變成紅色和黃色，由此用戶(hù)可以本能地分辨出自己想要的信息。

色彩設(shè)計(jì)在用戶(hù)體驗(yàn)中起到建立用戶(hù)對(duì)品牌的情感認(rèn)同和連接從而向用戶(hù)傳達(dá)產(chǎn)品價(jià)值與定位以及提升用戶(hù)對(duì)產(chǎn)品的信息獲取效率和認(rèn)知體驗(yàn)的作用。完成交互產(chǎn)品的色彩設(shè)計(jì)后，應(yīng)進(jìn)行用戶(hù)測(cè)試和獲取用戶(hù)反饋，以評(píng)估色彩設(shè)計(jì)的效果和用戶(hù)的理解程度。用戶(hù)反饋有助于發(fā)現(xiàn)潛在的問(wèn)題或改進(jìn)的空間，并進(jìn)一步優(yōu)化色彩設(shè)計(jì)，確保能準(zhǔn)確傳達(dá)產(chǎn)品的理念與定位，并提示用戶(hù)正確的操作方法。

3 結(jié)語(yǔ)

用戶(hù)體驗(yàn)在交互產(chǎn)品設(shè)計(jì)中發(fā)揮了指導(dǎo)作用，是評(píng)判一個(gè)交互產(chǎn)品是否成功的重要標(biāo)準(zhǔn)之一。色彩作為交互產(chǎn)品與用戶(hù)建立聯(lián)系、完善產(chǎn)品功能的介質(zhì)，在一定程度上影響用戶(hù)對(duì)交互產(chǎn)品的選擇。因此，從用戶(hù)體驗(yàn)視角出發(fā)考慮交互產(chǎn)品色彩設(shè)計(jì)，不僅要根據(jù)交互產(chǎn)品自身的定位和品牌形象，還要考慮用戶(hù)對(duì)產(chǎn)品色彩的視覺(jué)感受、操作的可行性和易用性以及對(duì)產(chǎn)品價(jià)值觀(guān)和理念的認(rèn)同感。