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

張穎

摘要：本文首先闡述了交互界面設(shè)計(jì)的基本概念及其色彩對受眾的引導(dǎo)意義。其次通過根據(jù)大眾視覺色彩感知的研究和交互界面設(shè)計(jì)的案例，對交互界面中色彩對受眾的引導(dǎo)意義進(jìn)行了詳細(xì)分析，歸納總結(jié)了交互界面設(shè)計(jì)中色彩對受眾的引導(dǎo)原則，從中發(fā)現(xiàn)簡潔、美觀、易用的界面設(shè)計(jì)能給人帶來良好的視覺體驗(yàn)。通過本文的研究，以期為在交互界面設(shè)計(jì)中關(guān)于色彩的運(yùn)用提供一些啟示，既有利于提升產(chǎn)品自身價值，又能滿足人們不同的需求。

關(guān)鍵詞：交互界面設(shè)計(jì);色彩;受眾;引導(dǎo)

中圖分類號：J524文獻(xiàn)標(biāo)識碼：A

文章編碼：1672-7053（2021）02-0071-02

人類的感覺被劃分成五種，即視覺、聽覺、嗅覺、味覺和觸覺，視覺往往被排在第一位，可見視覺被公認(rèn)為人的第一感覺，對視覺最具影響力的當(dāng)屬色彩。在交互界面設(shè)計(jì)中，視覺的表現(xiàn)是非常重要的因素，視覺的因素又包括文字、圖形和顏色，色彩作為交互界面的一部分，扮演著重要的角色[1]。

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

“交互”指的是互動關(guān)系，人與物、人與人和人與環(huán)境之間彼此發(fā)生作用，進(jìn)而產(chǎn)生某種變化的過程?！敖缑妗本褪侨藗兤匠Ｋf的用戶界面。解決問題的過程就是“設(shè)計(jì)”。

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

人們平時所看到的色彩總是會給人一種特定的心理感受。其實(shí)，色彩是大腦對光譜的反應(yīng)，若是沒有光的存在，世界上一切色彩都會消失不見，人們對色彩的心理反應(yīng)也是對客觀世界的主觀反映，人們產(chǎn)生色感是因?yàn)椴煌ㄩL的光作用于人們的視覺器官，此時必定會導(dǎo)致人產(chǎn)生某種帶有主觀情感的心理活動[2]，使人的意識、情感、心態(tài)等發(fā)生變化。波長的長短致使人們對于色彩的感受有一個冷暖的變化，也潛移默化地影響著受眾者。波長長的色彩往往使人感覺溫馨、暖和，相反，波長短的色彩則使人感覺寒冷。各色萬千的色彩使人們在這個世界上產(chǎn)生了豐富的審美感與想象力[3]。當(dāng)用戶打開一個產(chǎn)品的界面時，留下的第一印象往往不是里面的內(nèi)容，而是色彩。在交互界面設(shè)計(jì)中，色彩對受眾的引導(dǎo)具有現(xiàn)實(shí)意義，交互界面中色彩的明暗處理、區(qū)域的劃分能夠使用戶快速地掌握產(chǎn)品的信息并作出相應(yīng)地處理。

色彩是對客觀事物的傳達(dá)，在界面設(shè)計(jì)的過程中普遍會用不同的色彩來烘托產(chǎn)品的氛圍，使界面與人們的心理產(chǎn)生共鳴，提升受眾者的視覺體驗(yàn)。例如，以紅色作為界面背景色更容易激發(fā)人們的情感，將其作為界面設(shè)計(jì)的主體用色，可以增強(qiáng)界面的視覺沖擊力，吸引用戶最先注意到界面的主要元素，營造一個強(qiáng)烈的印象，如果作為輔助用色也可以起到警示的作用，比如“SALE”選用紅色更容易引起人們的注意。再如，橙色容易使人聯(lián)想到碩果累累的秋天，讓人感到振奮又充滿活力，多用于餐飲、娛樂行業(yè)的界面設(shè)計(jì)中，提高人們對產(chǎn)品的喜愛程度。而藍(lán)色會給人帶來大海般的穩(wěn)定與信任感，所以很多銀行、商務(wù)機(jī)構(gòu)和交通網(wǎng)站交互界面都會使用藍(lán)色。用紫色作為界面的輔助色，神秘與高貴的感覺可以多用于女性用戶偏多的產(chǎn)品中。色彩根據(jù)不同的需求進(jìn)行處理、合理搭配可以保證交互界面的連貫性，還可以很好地引導(dǎo)受眾。

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

在交互界面設(shè)計(jì)中，對于色彩感知和色彩心理學(xué)的基本了解是極為重要的，可以讓設(shè)計(jì)更好地貼合用戶需求，讓用戶對產(chǎn)品產(chǎn)生認(rèn)同感，能夠使用戶輕松愉悅地使用產(chǎn)品。

以圖1手機(jī)APP“淘寶”為例，它的APP啟動圖標(biāo)是橙黃色，給人一種正能量、興奮的視覺感，可以激發(fā)受眾的購買欲。進(jìn)入界面后，它的主色調(diào)是飽和度較高的橘色，但是占的面積很少，例如輸入框、圖標(biāo)、按鈕等，并且融入了少部分偏黃的漸變色，降低了飽和度，在一定程度上對受眾起到了提醒的作用。頁面中主要是以白色為主，白色的背景適合展示商品內(nèi)容，突出圖片信息，能夠快速、有效地使用戶了解商品屬性。想象一下，假設(shè)淘寶的界面全都是橘色的，就會給人一種特別飽滿、透不過氣的感覺，用戶瀏覽商品的時候就會沒有聚焦點(diǎn)，眼睛會非常累，這種體驗(yàn)感很不好。因此，主色調(diào)在界面設(shè)計(jì)中并不一定要大面積使用[4]。

圖2蘋果的網(wǎng)站界面設(shè)計(jì)依舊秉承著產(chǎn)品的設(shè)計(jì)理念，簡潔精致的設(shè)計(jì)風(fēng)格，白色的背景，黑色的導(dǎo)航條，點(diǎn)擊后反相的色彩設(shè)計(jì)可以使用戶明確所處位置。界面以產(chǎn)品的圖片為主，顯而易見，蘋果的產(chǎn)品宣傳圖都是非常具有吸引力的。每一級頁面的導(dǎo)航欄都是一樣的，相同的色彩處理和相同的信息組織形式，視覺形象都非常統(tǒng)一，能使用戶輕而易舉地找到所需。

利用多種色彩的搭配方式，能夠?qū)崿F(xiàn)產(chǎn)品界面的多樣性和趣味性，呈現(xiàn)良好的視覺效果，不會讓人覺得色彩單一乏味。在使用產(chǎn)品過程中，用戶通過色彩的引導(dǎo)能夠快速地在復(fù)雜的界面中找到自己需要的信息，形成十分清晰的操作邏輯，會讓人潛意識里產(chǎn)生對產(chǎn)品的情感寄托。

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

4.1 符合主題信息原則

交互界面設(shè)計(jì)是目前的潮流趨勢，找準(zhǔn)用戶的真正需求，讓受眾獲得極佳的用戶體驗(yàn)，其中視覺的設(shè)計(jì)起到了決定性作用[5]。要對產(chǎn)品的風(fēng)格進(jìn)行定位，想達(dá)到什么樣的用戶體驗(yàn)，如何瞬間打動用戶，形式和內(nèi)容就需要保持高度地契合。

給產(chǎn)品定一個主要基調(diào)，不同的行業(yè)要求的色調(diào)也不同，比如政府類的機(jī)構(gòu)色調(diào)應(yīng)該是莊重的，大部分使用紅色作為基調(diào);銀行類的機(jī)構(gòu)色調(diào)應(yīng)是沉穩(wěn)的，使人放心的色調(diào)，多數(shù)是用藍(lán)色作為基調(diào)。其實(shí)，交互界面就好像是一個商品的外包裝一樣，在具體的設(shè)計(jì)過程中色彩引導(dǎo)必須符合主題的內(nèi)容，這樣用戶在開始使用時不用過多地思考就可以了解這是一款什么屬性的產(chǎn)品。

4.2 體現(xiàn)色彩統(tǒng)—原則

事實(shí)證明，一個產(chǎn)品的可發(fā)現(xiàn)性是很重要的，如果沒有使用用戶，這個產(chǎn)品就是毫無意義的。所以要使色彩統(tǒng)一、保持界面的整體性，吸引用戶眼球才能提高用戶的忠誠度。但屏幕的空間是有限的，要區(qū)分界面的主次關(guān)系，比如改變顏色、字體大小、圖片方向等。最常用的還是使用顏色來區(qū)分區(qū)域和功能。確定了產(chǎn)品的主要色調(diào)，就得有輔助色調(diào)，這個色彩可以是主要色彩的同類色系，也可以是主要色彩的互補(bǔ)色。如交互界面設(shè)計(jì)中的功能指示就可以使用輔助色。功能指示主要包括界面跳轉(zhuǎn)指示、獲取焦點(diǎn)、可操作和不可操作。界面跳轉(zhuǎn)指示，在交互設(shè)計(jì)中是一個很重要的標(biāo)示，讓用戶使用產(chǎn)品的時候不會感到不知所措。除了箭頭、文字提示、按鈕等指示外，還可以用色彩來引導(dǎo)用戶。一般按鈕的顏色不會超過三種，而表示指向“動作”的按鈕則應(yīng)該統(tǒng)一設(shè)計(jì)成一種顏色。獲取焦點(diǎn)，往往出現(xiàn)在將要輸入文字的時候，鼠標(biāo)點(diǎn)在輸入框內(nèi)開始出現(xiàn)閃動光標(biāo)，也可以通過改變輸入框內(nèi)的顏色作為引導(dǎo)?？刹僮鞯闹甘就ǔ＞陀幂o助色來表達(dá)，起到引導(dǎo)的作用。不可操作指示通常用灰色，代表此操作不可行[6]。注意主色調(diào)和輔助色的色彩搭配，使用2～3種顏色即可，要保證整個界面的統(tǒng)一性。

4.3 增強(qiáng)情感互動原則

運(yùn)用合理的色彩搭配對用戶進(jìn)行視覺引導(dǎo)，使交互界面色彩與用戶的心理效應(yīng)相結(jié)合，才能夠提升用戶對產(chǎn)品的好感度，從而增加用戶對產(chǎn)品的使用頻率。

比如，明度和純度比較高的色彩，給人帶來光明、開朗、欣喜的感覺，這是低齡兒童都喜歡的顏色，這種顏色多用于嬰幼兒的產(chǎn)品界面中。又如，冷色系往往會使人感到寒冷、鎮(zhèn)靜，越接近綠色，越能凈化人的心靈，相反如果越接近波長最短的紫色，就會另人感到神秘與高貴。同一種色彩，在不同環(huán)境中的搭配，帶給人們的感覺也是不同的，因此，可以結(jié)合多角度設(shè)計(jì)增強(qiáng)與人之間的情感互動。

5 結(jié)語

在信息化時代背景下，交互界面呈現(xiàn)出多樣化的特點(diǎn)，同時也在展現(xiàn)著設(shè)計(jì)者的社會文化意識形態(tài)、情感、主觀感受等。其實(shí)設(shè)計(jì)本身就是一個主觀思想和客觀世界相互作用的結(jié)果，色彩的感覺和運(yùn)用是很難準(zhǔn)確描述的，它沒有一個固定的標(biāo)準(zhǔn)，因?yàn)槊總€人的視覺心理是不同的，只有反復(fù)嘗試，才能從中找出規(guī)律，很好地利用色彩引導(dǎo)用戶、吸引用戶。

參考文獻(xiàn)

[1]李曼.插畫在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用價值研究[D].浙江理工大學(xué)，2016

[2]色彩心理學(xué)在廣告作品中的應(yīng)用[EB/OL].淘豆網(wǎng)，https：//www.taodocs.conVp-37021 4753.html.

[3]金東，交互動畫設(shè)計(jì)中的色彩設(shè)計(jì)研究[D].南京師范大學(xué)，2014.

[4]角馬APP的主色調(diào)分析[EB/OL]海鹽社，https：//m.sohu.com/a/231 1 03670_470009

[5]王境垚，移動端界面微交互設(shè)計(jì)研究[D].北京印刷學(xué)院，2017.

[6]楊晗.UI設(shè)計(jì)顏色的運(yùn)用[EB/OL].知乎，https：//zhuanlan .zhihu.com/p/42037668.