交互界面設(shè)計(jì)中色彩對(duì)受眾的引導(dǎo)

李建一 / 韓瑞大學(xué)

人的感官分為五種：視覺(jué)，聽(tīng)覺(jué)，嗅覺(jué)，味覺(jué)，觸覺(jué)，視覺(jué)是人類(lèi)的第一印象感覺(jué)，而對(duì)視覺(jué)最有影響的因素是色彩。在人機(jī)交互中，圖像表現(xiàn)是一個(gè)非常重要的因素，而圖像元素又包括文字、圖形和色彩，其中色彩是人機(jī)交互的主要內(nèi)容。

1 交互界面設(shè)計(jì)概述

“交互”是人與事物、人與人、人與環(huán)境的相互作用，并由此引起一定的改變?！敖缑妗币话闶侵甘褂谜呓缑?。問(wèn)題的答案在于“設(shè)計(jì)”。

APP的界面設(shè)計(jì)是指用戶(hù)和智能移動(dòng)終端設(shè)備的交互界面，它是用戶(hù)與智能移動(dòng)終端設(shè)備之間信息輸入、輸出、溝通的載體，是人機(jī)交互的輔助層次。APP的界面設(shè)計(jì)始終以“以人為本”為目標(biāo)，優(yōu)良的APP界面不僅能帶來(lái)簡(jiǎn)潔、美觀的視覺(jué)體驗(yàn)，更能提升用戶(hù)的使用體驗(yàn)[1]。

APP界面上的色彩顯示原則，即加色混合，是通過(guò)將不同色彩的光相進(jìn)行混合而得到的新的色光。所有的色彩都是要在用戶(hù)面前用光呈現(xiàn)出來(lái)，而在加色法中，將紅綠藍(lán)3種原色光按比例混合，就可以得到完整的色層。色彩有溫度、距離、重量等多種感受，同時(shí)，人們對(duì)于色彩的感受也會(huì)受到情緒、環(huán)境等因素的影響。APP的界面依賴(lài)于由智能終端的顯示屏發(fā)出的光線(xiàn)，然后通過(guò)視網(wǎng)膜傳遞到大腦，進(jìn)行色彩識(shí)別[2]。智能移動(dòng)終端設(shè)備的顯示器均應(yīng)用RGB像素排列方式或Pentile像素排列方式，與傳統(tǒng)的印刷媒體相比，呈現(xiàn)出更加亮麗的色彩，從而使APP產(chǎn)品在市場(chǎng)上的競(jìng)爭(zhēng)更加突出。

2 交互界面設(shè)計(jì)中色彩對(duì)受眾的引導(dǎo)原則

2.1 符合主題信息原則

目前，人機(jī)交互界面的設(shè)計(jì)已成為當(dāng)今的潮流，要真正了解使用者的真正需要，使使用者獲得更好的使用感受，而視覺(jué)化的設(shè)計(jì)則是至關(guān)重要的。要確定產(chǎn)品風(fēng)格，獲得怎樣的用戶(hù)體驗(yàn)，要在第一時(shí)間吸引用戶(hù)，就必須要在形式和內(nèi)容上保持高度的一致性。

為產(chǎn)品定下主調(diào)，各行業(yè)對(duì)色彩的需求也有差異，例如機(jī)關(guān)色彩要嚴(yán)肅，以紅色為主；金融機(jī)構(gòu)的色彩應(yīng)該是穩(wěn)定的、讓人安心的色彩，以藍(lán)色為主（圖1），藍(lán)色界面代表冷靜、沉穩(wěn)，讓受眾在操作的過(guò)程中保持理性。實(shí)際上，交互界面就像是一件商品的外包裝，在特定設(shè)計(jì)中，色彩導(dǎo)向要與主題內(nèi)容相一致，讓用戶(hù)不用考慮太多就能明白這個(gè)產(chǎn)品的特性。

圖1 冷色調(diào)手機(jī)應(yīng)用界面設(shè)計(jì)示意圖

2.2 體現(xiàn)色彩統(tǒng)-原則

結(jié)果表明，一個(gè)產(chǎn)品的可被發(fā)掘性非常關(guān)鍵，沒(méi)有用戶(hù)，這個(gè)產(chǎn)品就沒(méi)有任何意義。因此，要做到顏色一致、界面完整、吸引用戶(hù)注意、提高用戶(hù)忠誠(chéng)度。不過(guò)，屏幕的尺寸有限，要區(qū)分界面主要次要關(guān)系。在互動(dòng)設(shè)計(jì)中，界面的跳躍性展示是用戶(hù)使用時(shí)不會(huì)感到緊張的一個(gè)重要標(biāo)識(shí)。除了箭頭、文字、按鈕等提示，還有顏色的提示。一般來(lái)說(shuō)，按鍵的顏色不會(huì)超過(guò)三個(gè)，而表示“動(dòng)作”的按鍵應(yīng)該是統(tǒng)一的顏色。

2.3 增強(qiáng)情感互動(dòng)原則

通過(guò)合理的顏色組合，達(dá)到了對(duì)使用者的視覺(jué)引導(dǎo)，將互動(dòng)的顏色與使用者的精神形象相融合，從而增加使用者對(duì)產(chǎn)品的認(rèn)識(shí)，增加使用者的使用頻率。

比如，顏色的明亮和純凈程度會(huì)帶來(lái)光明、明快、愉悅的感覺(jué)，是孩子最喜歡的顏色。比如，冷色會(huì)給人一種冷靜、寒冷的感覺(jué)，越是靠近綠色，就越是能洗滌靈魂，反之，越是靠近紫色，給人一種神秘而又尊貴的感覺(jué)[4]。同樣的色彩，在不同的場(chǎng)合搭配，會(huì)帶來(lái)不同的感受，所以，可以通過(guò)多種角度設(shè)計(jì)來(lái)加強(qiáng)與人的感情交流。

3 色彩在APP界面設(shè)計(jì)中的應(yīng)用意義

在APP的界面設(shè)計(jì)中，色彩常常起著先聲奪人的作用，是APP界面設(shè)計(jì)的關(guān)鍵因素。

3.1 塑造界面與品牌風(fēng)格

色彩在APP的界面設(shè)計(jì)中起到了很大的塑造和影響交互界面的功能，在色彩、明度、純度等方面，通過(guò)色彩的對(duì)比和協(xié)調(diào)，可以產(chǎn)生多種界面的風(fēng)格。比如淘寶APP，以紅、橙兩種色調(diào)為主，營(yíng)造出生動(dòng)的界面，激發(fā)消費(fèi)者的購(gòu)買(mǎi)欲；而支付寶APP則以藍(lán)色為主色調(diào)，營(yíng)造出穩(wěn)定的界面樣式，給用戶(hù)帶來(lái)安全、專(zhuān)業(yè)和可信賴(lài)的視覺(jué)效果。另外，每個(gè)色彩都有自己獨(dú)特的符號(hào)含義，通過(guò)對(duì)交互界面色彩的選取，可以傳遞出企業(yè)文化和品牌觀念，從而形成良好的品牌形象；比如網(wǎng)易云樂(lè)APP以紅色為主色調(diào)，公司以紅色調(diào)為主，代表積極樂(lè)觀、熱情、充滿(mǎn)希望；網(wǎng)易的標(biāo)志是“音樂(lè)的力量”，紅色與網(wǎng)易公司的新興勢(shì)力的興起形成了鮮明的對(duì)比，增強(qiáng)了人們分享和團(tuán)結(jié)意識(shí)，網(wǎng)易把“紅色”融入自身，樹(shù)立深入人心的理念和印象。

3.2 引導(dǎo)用戶(hù)視覺(jué)與功能劃分

在APP的界面設(shè)計(jì)中，色彩有區(qū)分區(qū)域、指導(dǎo)用戶(hù)視覺(jué)和功能劃分的功能，人們的視覺(jué)往往對(duì)色彩有著很好的辨別能力，就像《視覺(jué)可用性》中提到的那樣：當(dāng)色彩成為戰(zhàn)略的焦點(diǎn)時(shí)，色彩就會(huì)指示用戶(hù)應(yīng)該去哪里，從而指引用戶(hù)的視線(xiàn)，這是最好的方法。在界面設(shè)計(jì)中，利用主色調(diào)、同色系輔助色彩以及多種色彩進(jìn)行交互，可以有效地指導(dǎo)用戶(hù)操作[5]。比如，淘寶APP以聚劃算、百億補(bǔ)貼推廣為主要模塊，文字和圖像信息均以紅色或橘色為主，在網(wǎng)頁(yè)中呈現(xiàn)出鮮明效果，能瞬間抓住用戶(hù)的眼球，引導(dǎo)用戶(hù)點(diǎn)擊或應(yīng)用不同色彩的反差來(lái)突出界面的主要內(nèi)容和版面，以吸引、引導(dǎo)用戶(hù)。同時(shí)，還可以根據(jù)色彩差異，從色彩的色相、明度、純度等方面進(jìn)行直觀劃分，指導(dǎo)用戶(hù)按照順序有序地進(jìn)行界面操作，大大提高了界面的可視化和實(shí)用性。

3.3 提升用戶(hù)體驗(yàn)與審美愉悅

在APP的界面設(shè)計(jì)中，色彩的正確運(yùn)用能提高用戶(hù)的體驗(yàn)度，而界面色彩的搭配則會(huì)對(duì)用戶(hù)的應(yīng)用和美學(xué)產(chǎn)生直接影響。比如，界面的背景色彩，一般都是以亮或淡的色彩為主，根據(jù)調(diào)查，在APP界面的限制下，在淺色背景下閱讀較深的文字信息，要比在深色背景下閱讀較淺的文字要舒服得多，也更容易閱讀，能讓用戶(hù)感到清爽愉快。不同色彩之間的協(xié)調(diào)配合，形成中度的對(duì)比，使界面色彩整體均衡，減輕用戶(hù)的眼睛疲勞，給用戶(hù)帶來(lái)視覺(jué)上的快感。

4 交互界面設(shè)計(jì)中色彩對(duì)受眾引導(dǎo)案例

為了更好地滿(mǎn)足使用者的需要，讓使用者對(duì)其產(chǎn)生認(rèn)同，因此，在人機(jī)交互界面的設(shè)計(jì)中，應(yīng)具備對(duì)顏色的知覺(jué)與心理的基礎(chǔ)知識(shí)；可以讓使用者輕松愉快地使用該產(chǎn)品。

例如，“淘寶”APP的啟動(dòng)圖標(biāo)是橘黃色的，充滿(mǎn)了積極、正能量的視覺(jué)效果，能夠刺激消費(fèi)者的購(gòu)買(mǎi)欲望。進(jìn)入界面后，主色為橙色，飽和度比較高，但占據(jù)的區(qū)域不多，比如輸入框、圖標(biāo)、按鈕等，還加入了少量的黃色漸變，減少了飽和度，給受眾帶來(lái)了某種警示。在網(wǎng)頁(yè)中，以白色為主體，以白色作為底板，可以方便地展示產(chǎn)品的內(nèi)容，并能凸顯圖片的信息，使使用者迅速高效地了解產(chǎn)品的特性[6]。

在頁(yè)面的設(shè)計(jì)上，蘋(píng)果的界面依舊保持著一貫的風(fēng)格，簡(jiǎn)潔而又優(yōu)雅，白色的背景和黑色的導(dǎo)航條。按下后倒置的色彩可以讓用戶(hù)清楚地知道自己在哪里。界面上主要是產(chǎn)品的圖片，很顯然，這些產(chǎn)品的廣告都很吸引人。每個(gè)網(wǎng)頁(yè)的導(dǎo)航條都是相同的，同樣的色彩處理、信息組織、視覺(jué)效果，可以讓用戶(hù)輕松地找到自己想要的東西。

通過(guò)應(yīng)用多種色彩的組合，可以使產(chǎn)品的界面變得豐富多彩、有趣，從而達(dá)到很好的視覺(jué)效果，而不會(huì)使人感到單調(diào)、乏味。當(dāng)用戶(hù)在使用產(chǎn)品時(shí)，能夠快速地在復(fù)雜的界面中尋找到所需的信息，并構(gòu)建出一系列清晰的邏輯。讓用戶(hù)對(duì)自己的產(chǎn)品有一種莫名的好感。

5 色彩在手機(jī)購(gòu)物應(yīng)用界面中的作用

5.1 營(yíng)造氛圍，塑造風(fēng)格

色彩是影響手機(jī)應(yīng)用程序界面的首要因素，它在創(chuàng)造整體氛圍中起著關(guān)鍵作用，從色調(diào)、色相上來(lái)說(shuō)，色調(diào)是影響整個(gè)手機(jī)應(yīng)用程序界面的整體形象，如純色調(diào)、強(qiáng)色調(diào)，絢麗、濃烈；淺色調(diào)，柔軟；音樂(lè)色調(diào)，舒服；深色調(diào)、灰色調(diào)嚴(yán)肅、厚重。在手機(jī)應(yīng)用程序中，色相決定了聯(lián)想空間和界面氛圍。不同的色彩會(huì)給用戶(hù)帶來(lái)不同的情感體驗(yàn)，還能給人以冷暖，輕重，軟硬，動(dòng)靜等不同的感受。設(shè)計(jì)師還可以根據(jù)宣傳產(chǎn)品的特性、受眾的喜好以及想要表達(dá)的情緒等因素，充分運(yùn)用色彩效果這一法則。

5.2 強(qiáng)化視覺(jué)區(qū)域、引導(dǎo)視覺(jué)流程

顏色在移動(dòng)應(yīng)用軟件中的另一個(gè)重要功能是增強(qiáng)了屏幕的可視度，這取決于移動(dòng)電話(huà)的應(yīng)用界面。比如將手機(jī)應(yīng)用界面分成不同的版塊。此外，色彩還能指導(dǎo)人們的視線(xiàn)，運(yùn)用色彩的主次聯(lián)系，為不同層面的信息傳遞提供支持，比如通過(guò)強(qiáng)調(diào)色彩來(lái)突出主體互動(dòng)，應(yīng)用色彩的改變來(lái)提示用戶(hù)在界面內(nèi)容中的不同和跳躍。

6 手機(jī)購(gòu)物應(yīng)用界面的色彩搭配分析

6.1 色彩搭配準(zhǔn)確

6.1.1 與網(wǎng)站色彩搭配相符，與輔助色搭配相融

大部分移動(dòng)電話(huà)軟件都有公司網(wǎng)站，以增強(qiáng)公司的品牌影響力。用戶(hù)在選擇手機(jī)界面的色彩時(shí)，通常會(huì)優(yōu)先使用網(wǎng)站中的標(biāo)準(zhǔn)色彩。比如京東商城，是中國(guó)最大的自營(yíng)電商平臺(tái)，京東APP的屏幕，是以大紅色為主，亮度和純度都比較高，而淡灰色和深灰色則是輔助色。雖然界面中有大量的信息，但是在應(yīng)用輔助色的情況下，可以很好地指導(dǎo)用戶(hù)的互動(dòng)，幫助用戶(hù)快速地完成交易。還有亞馬遜中國(guó)，是一家集千萬(wàn)商品于一體的電商平臺(tái)。其移動(dòng)應(yīng)用程序界面也采用了與站點(diǎn)相同的色彩[7]。白色、橘色、黑色的交互，讓整個(gè)畫(huà)面呈現(xiàn)出都市、現(xiàn)代、簡(jiǎn)潔的感覺(jué)。旨在營(yíng)造和諧、寧?kù)o、溫馨的購(gòu)物環(huán)境，提升顧客的使用感受，增加顧客的回頭率，并推動(dòng)長(zhǎng)期獲利。

6.1.2 了解色彩心理形成的社會(huì)文化環(huán)境，充分考慮用戶(hù)感受

手機(jī)的應(yīng)用程序應(yīng)結(jié)合當(dāng)前經(jīng)濟(jì)社會(huì)文化，理解用戶(hù)的色彩感受。在不同的時(shí)空，不同的國(guó)家，不同的民族，不同的環(huán)境下，顏色在不同的人群中所代表的意義。

中西兩種不同的文化與美學(xué)，可以從國(guó)內(nèi)外手機(jī)購(gòu)物應(yīng)用中看出不同效果。國(guó)內(nèi)手機(jī)應(yīng)用多以熱烈、溫馨的顏色為主，具有強(qiáng)烈的視覺(jué)沖擊力和強(qiáng)烈的情緒，容易引起消費(fèi)者的購(gòu)買(mǎi)欲望。比如，淘寶的顏色是橙色的，天貓的顏色是紅色的；而在國(guó)外，則是以冷色或淺色為主，例如 Lyst的黑色，NET-A-PORTER的淺灰色，提倡成熟、時(shí)尚、現(xiàn)代。在理解使用者心理的過(guò)程中，應(yīng)注意到使用者的情感，并注意其心理狀態(tài)。

6.2 色彩整體搭配

6.2.1 根據(jù)手機(jī)購(gòu)物應(yīng)用需求，考慮主輔頁(yè)的色彩搭配

當(dāng)手機(jī)的主副頁(yè)使用同樣顏色時(shí)，第二次跳躍的網(wǎng)頁(yè)應(yīng)用將會(huì)以同樣顏色為基礎(chǔ)，再應(yīng)用不同的版式布局、圖標(biāo)樣式、應(yīng)用多樣圖標(biāo)來(lái)調(diào)和單一色彩。比如“有范APP”，APP分成三個(gè)部分，分別是男生、女生、生活三大板塊，主頁(yè)和其他次要頁(yè)面都是黑色的，走的是時(shí)尚、追求個(gè)性的風(fēng)格，但每個(gè)展館的圖標(biāo)色彩、圖標(biāo)風(fēng)格和不同色彩的圖畫(huà)都有細(xì)微的差別，色彩一致而不單調(diào)。

如果在手機(jī)應(yīng)用中使用不同顏色的主副頁(yè)，色彩差異較大，容易造成雜亂無(wú)章的不統(tǒng)一感，則可采用不同色調(diào)、相近色調(diào)，增強(qiáng)整體感[8]。通常，在手機(jī)購(gòu)物應(yīng)用中，設(shè)計(jì)師會(huì)在歡迎網(wǎng)頁(yè)上制作四張色彩鮮明的網(wǎng)頁(yè)，以吸引用戶(hù)的注意力。但是它們的色彩相似，都是明快的色彩，用相似的格式來(lái)保持網(wǎng)頁(yè)的一致性，從而確保用戶(hù)的接納程度。

6.2.2 考慮圖片與手機(jī)應(yīng)用界面色彩搭配的關(guān)系。

在這個(gè)閱讀圖片的年代里，隨著網(wǎng)絡(luò)速度的提高和通信網(wǎng)絡(luò)的約束逐漸消失，移動(dòng)端軟件的用戶(hù)端逐漸成為用戶(hù)端的重要部分；不但 PC用戶(hù)，手機(jī)用戶(hù)也開(kāi)始采用漂亮、清晰的照片；一些謹(jǐn)慎的設(shè)計(jì)師，在設(shè)計(jì)手機(jī)應(yīng)用的時(shí)候，會(huì)根據(jù)客戶(hù)的實(shí)際使用習(xí)慣，會(huì)有兩個(gè)接口，一是有無(wú)線(xiàn)連接的高清圖片；一種是不帶 WiFi的正常圖片 一般情況下，為了讓消費(fèi)者的視覺(jué)體驗(yàn)更加流暢、舒適，都會(huì)對(duì)產(chǎn)品進(jìn)行一些修改，讓產(chǎn)品的照片能夠與手機(jī)的色彩融合在一起。

6.3 色彩搭配個(gè)性

在移動(dòng)手機(jī)的應(yīng)用程序中，基礎(chǔ)色彩的數(shù)目很少，但是色彩搭配和色彩的感覺(jué)是非常豐富的。比如，顧客們需要的是“粉色”，而“粉色”卻是包羅萬(wàn)象，有鮮艷的粉紅，有優(yōu)雅的粉紅，由不同的色彩所形成的情感差異很大，所以給人的自然印象也是不一樣的。我們?cè)陂_(kāi)發(fā)移動(dòng)應(yīng)用程序時(shí)，首先要查找顏色的關(guān)鍵字，而要生產(chǎn)嬰兒用品，首先要考慮的是溫和、舒適、淡雅，所想的顏色是淺粉色、淺藍(lán)色和淺黃色。例如，蜜芽寶寶會(huì)選擇最普通的粉紅色為主，不過(guò)在每個(gè)類(lèi)型中，都會(huì)按照?qǐng)D案的要求，與柔軟的藍(lán)、紫、綠、橘相配合，避免過(guò)于粉嫩的感覺(jué)，為消費(fèi)者創(chuàng)造簡(jiǎn)單、放心、有趣的母嬰產(chǎn)品購(gòu)買(mǎi)體驗(yàn)。

7 結(jié)語(yǔ)

在信息社會(huì)中，用戶(hù)的交互界面表現(xiàn)出多樣化特征，同時(shí)也體現(xiàn)了設(shè)計(jì)者的思想觀念、情感、主觀感受等社會(huì)性文化特征。實(shí)際上，設(shè)計(jì)是人的主體性思考和現(xiàn)實(shí)生活相互影響的結(jié)果。而色彩的感受與應(yīng)用難以精確地描繪，由于人們的視覺(jué)心理具有差異性，并無(wú)統(tǒng)一的規(guī)范，要想找到其中的規(guī)律，就必須要不斷地去摸索、開(kāi)發(fā)色彩，去引導(dǎo)、吸引用戶(hù)。