基于情感化的界面設(shè)計(jì)研究

[摘要] 文章基于情感化設(shè)計(jì)理論的三個(gè)層次，即本能層、行為層、反思層，對(duì)界面設(shè)計(jì)現(xiàn)狀進(jìn)行分析，指出界面設(shè)計(jì)作為承擔(dān)用戶交互行為的產(chǎn)品媒介，不應(yīng)當(dāng)將設(shè)計(jì)僅僅局限于界面本身，而應(yīng)當(dāng)在本能層次的文字、顏色、圖標(biāo)等視覺設(shè)計(jì)元素基礎(chǔ)之上，更多思考行為層面對(duì)界面設(shè)計(jì)的影響，從而建立用戶與界面的良性交互。

[關(guān)鍵詞] 情感化 界面設(shè)計(jì) 感官 行為 反思

一、情感化與界面設(shè)計(jì)

隨著科技水平的不斷提升和人們生活方式的轉(zhuǎn)變，產(chǎn)品設(shè)計(jì)愈發(fā)呈現(xiàn)出多元化態(tài)勢(shì)，僅僅停留在功能和外形層面的設(shè)計(jì)已經(jīng)不能夠滿足人們的使用需求。如何掌握新型消費(fèi)需求、提升用戶心理滿足感成為當(dāng)前設(shè)計(jì)的主要關(guān)注點(diǎn)。

情感化設(shè)計(jì)由唐納德·諾曼在《情感化設(shè)計(jì)》一書中提出。他將情感的認(rèn)知由淺入深分為三個(gè)層次，即本能層、行為層和反思層，并對(duì)其在產(chǎn)品設(shè)計(jì)領(lǐng)域的體現(xiàn)進(jìn)行剖析。本能層次的設(shè)計(jì)是情感化設(shè)計(jì)的基礎(chǔ)，其機(jī)制是通過外觀對(duì)用戶的五感進(jìn)行刺激。例如，代表警告含義的圖標(biāo)通常使用紅色，因?yàn)榧t色會(huì)給人帶來(lái)危險(xiǎn)與緊張的感受。行為層次的設(shè)計(jì)基于用戶的記憶和習(xí)慣，其機(jī)制是通過提取用戶行為和習(xí)慣元素并將之運(yùn)用于設(shè)計(jì)之中，以此提升體驗(yàn)感，如界面中的按鈕樣式是基于物理世界中實(shí)體按鈕的樣式進(jìn)行的扁平化設(shè)計(jì)，在用戶進(jìn)行界面交互時(shí)，能夠快速感知需要，進(jìn)行點(diǎn)擊操作。反思層次的設(shè)計(jì)處于三個(gè)層次當(dāng)中的最高層級(jí)，能夠引起用戶的反思與回顧，并產(chǎn)生持久的情緒影響。產(chǎn)品的品牌營(yíng)銷是反思層次設(shè)計(jì)的重要體現(xiàn)，如IP形象設(shè)計(jì)、產(chǎn)品組建庫(kù)的搭建等。其能夠提升產(chǎn)品的獨(dú)特性并建立起與用戶的情感紐帶，構(gòu)建并豐富產(chǎn)品的內(nèi)在價(jià)值。

二、外觀刺激情緒感受

鮮明的產(chǎn)品形態(tài)與細(xì)節(jié)可以刺激用戶的感官系統(tǒng)，進(jìn)而激發(fā)用戶的無(wú)意識(shí)行為，增強(qiáng)產(chǎn)品的易用性。[1]在界面設(shè)計(jì)中，用戶的感官體驗(yàn)從視覺、聽覺逐漸延伸至觸覺。愛因斯坦曾經(jīng)表示，人類所獲得的百分之九十的信息皆來(lái)自視覺感官。人們可以通過視覺感知到界面中的色彩、形狀等元素。

（一）色彩、材質(zhì)帶來(lái)的情緒感受

不同的色彩可以給用戶帶來(lái)不同的情緒感受：紅色代表熱烈、吉祥，紫色代表神秘、高貴。除了色相外，不同的明度、純度、飽和度給用戶帶來(lái)的感受也有所不同。使用恰當(dāng)?shù)纳誓軌驙I(yíng)造不同的氛圍，讓用戶更加快速地感知設(shè)計(jì)意圖。

隨著手機(jī)中承載的信息日益復(fù)雜，明確的信息層級(jí)在界面設(shè)計(jì)中顯得日益重要起來(lái)，而顏色對(duì)比更是其中的重中之重。一般情況下，淺色背景上的信息顏色越深則層級(jí)越高，越能吸引用戶視線。色彩工效學(xué)作為工效學(xué)分支，關(guān)注色覺疲勞度和持續(xù)性。人機(jī)界面色彩設(shè)計(jì)即與能見度和注目性有關(guān)。[2]明確的圖底對(duì)比搭配能夠增加界面的能見度，提高用戶的信息讀取效率。恰當(dāng)?shù)纳式M合能夠提升界面的視覺趣味性和注目性，為單一的界面讀取增加情感溫度。此外在界面設(shè)計(jì)中，材質(zhì)質(zhì)感的引入能夠讓用戶感到親切。對(duì)現(xiàn)實(shí)世界質(zhì)感的復(fù)刻或提取能夠拉近用戶與產(chǎn)品的距離，例如電子書的界面設(shè)計(jì)即會(huì)考慮到紙張的質(zhì)感。

（二）圖形帶來(lái)的情緒感受

圖形作為界面的重要組成部分，起到了豐富界面的作用，其中圖標(biāo)是最為常用的元素。不同于藝術(shù)創(chuàng)作，圖標(biāo)設(shè)計(jì)往往遵循一定的設(shè)計(jì)規(guī)律。不同風(fēng)格的圖標(biāo)設(shè)計(jì)會(huì)給用戶帶來(lái)不同的情緒感受，如線性圖標(biāo)中的粗線條會(huì)帶來(lái)厚重感，細(xì)線條則帶來(lái)精致感。面形圖標(biāo)占用面積越多，厚重感越強(qiáng)，因而較大的面形圖標(biāo)通常只會(huì)在界面首頁(yè)中少量使用。

三、喚起用戶行為的符號(hào)及品牌化構(gòu)建

在UI界面中，界面符號(hào)是信息編碼的成果，能夠幫助用戶輕松解碼并獲得信息。符號(hào)的意義是將主觀與客觀聯(lián)系起來(lái)，這與認(rèn)知理論“把意義看作人類主體和世界之間真正聯(lián)系的基礎(chǔ)”[3]是一致的。界面符號(hào)不僅包含客觀的文字、圖形等元素，也包含實(shí)現(xiàn)人機(jī)交互的界面元素組織關(guān)系。界面作為支持用戶進(jìn)行交互行為的產(chǎn)品媒介，不應(yīng)當(dāng)僅僅局限于設(shè)計(jì)外觀，更應(yīng)該從用戶行為出發(fā)，掌握用戶需求，然后再進(jìn)行界面設(shè)計(jì)。《交互設(shè)計(jì)：從物理邏輯到行為邏輯》中指出：“行為邏輯的提出并非期待尋找行為流程自身的某種科學(xué)的甚至機(jī)械式的邏輯聯(lián)系，而是強(qiáng)調(diào)以行為作為界面設(shè)計(jì)的本體，對(duì)界面設(shè)計(jì)的考量依照具體任務(wù)的流程合理性和用戶體驗(yàn)展開?！盵4]

（一）引發(fā)用戶行為的符號(hào)

1.色彩符號(hào)

界面設(shè)計(jì)中，色彩不僅作為外觀符號(hào)，為用戶帶來(lái)感官層面的情緒感受，還可以在行為層面起到引導(dǎo)用戶行為的作用。不同于平面設(shè)計(jì)對(duì)色彩的自由使用，界面設(shè)計(jì)對(duì)色彩的運(yùn)用相對(duì)克制與穩(wěn)定。界面中，色彩的主要功能是幫助用戶提升信息獲取的效率。這里提到的色彩主要包括主題色、功能色、中性色。

主題色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一，一般明度、飽和度較高，且在界面中具有較高的信息層級(jí)，通常被應(yīng)用于關(guān)鍵行動(dòng)點(diǎn)、操作狀態(tài)等場(chǎng)景，在界面交互中起到“意符”作用。主題色的使用場(chǎng)景包含按鈕、鏈接等操作行動(dòng)點(diǎn)。當(dāng)操作行為較為特殊或重要時(shí)，會(huì)運(yùn)用功能色來(lái)突出操作控件。色彩“意符”的運(yùn)用能夠幫助用戶快速獲得行為動(dòng)線?？酥频纳适褂媚軌蚪档徒缑娼换ミ^程中的“視覺噪音”，幫助用戶專注于主要的交互任務(wù)。

2.圖形符號(hào)

作為界面?zhèn)鬟_(dá)信息的主要媒介之一，圖形不僅能起到增加界面美觀程度的作用，還能提升用戶識(shí)別信息的效率。圖形符號(hào)作為文化符號(hào)的一種，與認(rèn)知科學(xué)緊密相關(guān)。在《產(chǎn)品設(shè)計(jì)符號(hào)學(xué)系統(tǒng)化構(gòu)建中的思考（2）》[5]中，張劍提出了三種認(rèn)知方式所形成的符號(hào)設(shè)計(jì)類型：一是直接知覺的符號(hào)化，二是集體無(wú)意識(shí)的符號(hào)化，三是尋找關(guān)聯(lián)（按：文化符號(hào)對(duì)產(chǎn)品的修辭）。由于三種符號(hào)設(shè)計(jì)類型與大腦認(rèn)知層次具有關(guān)聯(lián)性，設(shè)計(jì)者會(huì)將界面中的圖形符號(hào)分為擬物、抽象、隱喻三個(gè)層次。這三個(gè)層次以用戶認(rèn)知為中心，直觀程度逐漸降低，卻皆能在多種層面上幫助用戶達(dá)成界面任務(wù)目標(biāo)，構(gòu)建統(tǒng)一而不單一的用戶體驗(yàn)。下面將分別介紹這三種圖形符號(hào)。擬物符號(hào)指將現(xiàn)實(shí)生活中已存在的物體運(yùn)用寫實(shí)手法在手機(jī)界面中圖像化地再現(xiàn)，從而喚醒用戶的記憶，引起用戶的共鳴，讓用戶直接感知符號(hào)的使用意圖。這種圖形符號(hào)在增加趣味性的同時(shí)可以有效降低用戶的操作成本和學(xué)習(xí)負(fù)擔(dān)，使產(chǎn)品更加易于被用戶接受和認(rèn)可。

經(jīng)驗(yàn)符號(hào)是依據(jù)社會(huì)習(xí)俗和用戶的長(zhǎng)期認(rèn)知經(jīng)驗(yàn)而形成的符號(hào)。隨著互聯(lián)網(wǎng)逐漸融入日常生活當(dāng)中，界面所承載的信息日益復(fù)雜起來(lái)，抽象化的圖形符號(hào)開始被用戶所接受。圖形符號(hào)的平面化、簡(jiǎn)潔化在追求效率的當(dāng)下是十分必要的。當(dāng)然，這里的抽象化并不是簡(jiǎn)單地減少元素。圖形符號(hào)的設(shè)計(jì)不是設(shè)計(jì)師信手拈來(lái)的，其設(shè)計(jì)基礎(chǔ)是對(duì)社會(huì)習(xí)俗和用戶認(rèn)知經(jīng)驗(yàn)的尊重。[6]例如，快進(jìn)、暫停、快退等按鍵與多年前流行的錄音機(jī)、音樂播放器的操控按鍵樣式及語(yǔ)義一致。對(duì)未曾使用過前類產(chǎn)品的年輕用戶而言，這類圖像符號(hào)則是集體無(wú)意識(shí)式的經(jīng)驗(yàn)認(rèn)知。此類符號(hào)能夠減少用戶識(shí)別過程中的“視覺噪音”，同時(shí)也能獲得用戶對(duì)符號(hào)語(yǔ)義的精確解讀，在用戶識(shí)別復(fù)雜界面時(shí)帶來(lái)良好體驗(yàn)。

此外還有隱喻符號(hào)。隱喻是以一種事物暗喻另一種事物，是在彼類事物的暗示下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨?、語(yǔ)言行為和文化行為。[7]界面作為新興科技的產(chǎn)物，其中包含了大量不存在于現(xiàn)實(shí)生活中的抽象符號(hào)。通過隱喻設(shè)計(jì)，可以將抽象的事物變具體，從而幫助用戶快速融入新環(huán)境、理解新事物。隱喻符號(hào)在新、舊事物之間搭起了體驗(yàn)的橋梁，能夠使用戶產(chǎn)生心理與認(rèn)知上的共鳴。“關(guān)聯(lián)性”是隱喻符號(hào)設(shè)計(jì)過程中的要素。比如，人們通常將不需要的物品扔到垃圾桶中，故某系統(tǒng)中的“刪除”圖標(biāo)便以垃圾桶為示意符號(hào)?，F(xiàn)實(shí)中扔垃圾的行為是界面中刪除操作的隱喻，兩者在虛實(shí)之間有了理性的關(guān)聯(lián)。

3.組織符號(hào)

界面組織形式具有多樣性。在界面設(shè)計(jì)過程中，組織符號(hào)通常表現(xiàn)為一些視覺設(shè)計(jì)原則，用以引導(dǎo)用戶進(jìn)行操作。在進(jìn)行界面交互的過程中，用戶的操作行為基于大腦認(rèn)知進(jìn)行工作。比如，格式塔心理學(xué)也被稱為“完形心理學(xué)”。其強(qiáng)調(diào)知覺的整體性，基礎(chǔ)理論是人的視覺系統(tǒng)能自動(dòng)輸入并構(gòu)建結(jié)構(gòu)，對(duì)形狀、圖形和物體等視覺元素進(jìn)行整體組織，而不是對(duì)單個(gè)元素進(jìn)行分析。[8]在關(guān)注色彩、圖形等界面元素之外，從視覺規(guī)律的角度關(guān)注界面整體能夠有效改進(jìn)設(shè)計(jì)。其具體包含以下三個(gè)原則。

第一，同構(gòu)原則。圖形的同構(gòu)就是利用事物之間某種屬性關(guān)系的相似性來(lái)傳遞信息。[9]用戶傾向于將具有相似屬性的元素（顏色、形狀、結(jié)構(gòu)特征）看作一個(gè)整體，并將不同顏色、形狀的圖形自動(dòng)分組。界面設(shè)計(jì)中眾多元素的羅列會(huì)讓界面煩瑣而雜亂。通過共性元素的設(shè)計(jì)，能夠讓用戶發(fā)現(xiàn)模塊間的關(guān)聯(lián)，感知界面的設(shè)計(jì)意圖。

第二，親密原則。格式塔心理學(xué)指出，當(dāng)對(duì)象距離太近的時(shí)候，意識(shí)會(huì)認(rèn)為他們是相關(guān)的。在界面設(shè)計(jì)中，以接近而進(jìn)行視覺歸類的各種方法都是直截了當(dāng)并且易于實(shí)施的。[10]接近性原則有利于實(shí)現(xiàn)信息層級(jí)的組織，提升界面的易讀性。

第三，延續(xù)性原則。格式塔延續(xù)律指出，人們?cè)谥X過程中往往傾向于使知覺對(duì)象的直線意識(shí)繼續(xù)成為直線意識(shí)，使曲線意識(shí)繼續(xù)成為曲線意識(shí)。在界面設(shè)計(jì)中，將同層級(jí)信息進(jìn)行對(duì)齊處理，可以在引導(dǎo)用戶視覺流線的同時(shí)提升信息的識(shí)別效率。

（二）反饋用戶行為的符號(hào)

界面中的反饋是指系統(tǒng)對(duì)當(dāng)前用戶進(jìn)行任務(wù)操作時(shí)的響應(yīng)。反饋符號(hào)的設(shè)計(jì)需要考慮到系統(tǒng)的響應(yīng)方式、響應(yīng)程度、響應(yīng)信息等因素。當(dāng)用戶進(jìn)行操作后，缺少或者過度的行為反饋會(huì)給用戶帶來(lái)疑惑。想要以合理的反饋提升用戶的體驗(yàn)度，需要堅(jiān)持以下幾個(gè)原則。

1.自然性

反饋符號(hào)的自然性可以使用戶產(chǎn)生一種熟悉感，從而減輕使用負(fù)擔(dān)。在智能手機(jī)出現(xiàn)之前，按鍵式手機(jī)由于功能較為單一，反饋機(jī)制通常簡(jiǎn)單而明確。功能多樣化的智能手機(jī)則需要提供更多交互場(chǎng)景下的反饋機(jī)制。因此，加強(qiáng)反饋符號(hào)的自然性是十分必要的。自然性的反饋設(shè)計(jì)需要遵循用戶的日常使用習(xí)慣，即要從感官、記憶、習(xí)慣、文化背景等層面來(lái)提取要素，并將之運(yùn)用于界面設(shè)計(jì)當(dāng)中。

2.即時(shí)性

反饋設(shè)計(jì)不僅要考慮自然性，還要注意反饋的時(shí)長(zhǎng)。在界面設(shè)計(jì)中，如果在超過了0.1秒而少于1秒內(nèi)沒有得到信息反饋時(shí)，用戶是會(huì)產(chǎn)生疑惑的。[11]在進(jìn)行交互行為后，用戶獲得的反饋分為結(jié)果性反饋與過程性反饋：結(jié)果是交互行為的目標(biāo)，過程是交互行為中不可避免的環(huán)節(jié)。當(dāng)過程超過0.1秒后，便需要給予用戶相應(yīng)的過程反饋，避免用戶陷入迷茫。在等待結(jié)果時(shí)，不同形式的進(jìn)度符號(hào)會(huì)給予用戶不同的反饋信息。

3.趣味性

趣味性的反饋設(shè)計(jì)在過程性反饋中是十分必要的。雖然當(dāng)前的界面設(shè)計(jì)風(fēng)格體現(xiàn)為平面化、簡(jiǎn)潔化，能夠提升信息識(shí)別效率，但簡(jiǎn)單、循環(huán)的反饋符號(hào)在長(zhǎng)時(shí)間等待過程中會(huì)讓用戶感到枯燥、焦慮。在這樣的時(shí)刻，添加趣味性的反饋符號(hào)能緩解用戶的負(fù)面情緒，提升體驗(yàn)的流暢感。比如，某App的加載狀態(tài)被設(shè)計(jì)為一條小魚在泡澡的GIF圖像，這便營(yíng)造出了一種輕松、舒緩的氛圍。

（三）以品牌化構(gòu)建情感紐帶

品牌化是產(chǎn)品喚起用戶長(zhǎng)期記憶、構(gòu)建情感關(guān)聯(lián)的重要環(huán)節(jié)。界面設(shè)計(jì)中的品牌化通常是基于目標(biāo)用戶的喜好進(jìn)行界面整體風(fēng)格的設(shè)計(jì)，包含色彩、圖形、IP形象等。將品牌設(shè)計(jì)理念貫穿在整體的界面設(shè)計(jì)當(dāng)中，可以提升產(chǎn)品的獨(dú)特價(jià)值。

四、結(jié)語(yǔ)

文章以唐納德·諾曼提出的情感化設(shè)計(jì)理論為基礎(chǔ)，分析了界面設(shè)計(jì)符號(hào)在感官、行為、反思三個(gè)層面中的體現(xiàn)。界面設(shè)計(jì)不僅是感官層面的設(shè)計(jì)，還是感官層面的符號(hào)在用戶行為過程中的體現(xiàn)，如前文提到的色彩符號(hào)在感官層面和行為層面中便具有不同的設(shè)計(jì)含義。

實(shí)際上，在大腦認(rèn)知中，感知、行為、反思是密不可分的。只有深刻理解界面設(shè)計(jì)符號(hào)在這三個(gè)層次中的內(nèi)涵，才能實(shí)現(xiàn)良好的情感化界面設(shè)計(jì)。在界面設(shè)計(jì)過程中，情感化設(shè)計(jì)日益受到重視。重視情感的融入才能提升產(chǎn)品的綜合競(jìng)爭(zhēng)力，推動(dòng)數(shù)字媒體更好、更快發(fā)展。

注釋

[1]曹心蕊，李明珠.無(wú)意識(shí)設(shè)計(jì)中的行為激發(fā)在家用烘焙器具設(shè)計(jì)的應(yīng)用[J].包裝工程，2022，43（4）：104.

[2]李亮之.色彩工效學(xué)與人機(jī)界面色彩設(shè)計(jì)[J].人類工效學(xué)，2004（3）：54.

[3]趙毅衡.文學(xué)符號(hào)學(xué)[M].北京：中國(guó)文聯(lián)出版公司，1990：89.

[4]辛向陽(yáng).交互設(shè)計(jì)：從物理邏輯到行為邏輯[J].裝飾，2015（1）：58-62.

[5]張劍.產(chǎn)品設(shè)計(jì)符號(hào)學(xué)系統(tǒng)化構(gòu)建中的思考（2）——兩種符號(hào)學(xué)模式的選擇[J].美術(shù)大觀，2022（1）：142-148.

[6]何麗萍.圖形符號(hào)在數(shù)字圖形界面中的應(yīng)用和設(shè)計(jì)分析[J].包裝工程，2011，32（2）：22-25.

[7]姚江，封冰.對(duì)用戶界面設(shè)計(jì)中隱喻的研究[J].包裝工程，2012，33（20）：83-85.

[8]董慶波.視覺格式塔理論的設(shè)計(jì)思考[J].包裝工程，2011，32（6）：25-26.

[9]王紹強(qiáng).創(chuàng)意空間[M].廣州：嶺南美術(shù)出版社，2002：51-75.

[10]何燦群，葛列眾.格式塔原理在圖形創(chuàng)意設(shè)計(jì)中的應(yīng)用[J].包裝工程，2006（1）：148-150+161.

[11]李炳琰.用戶體驗(yàn)中界面設(shè)計(jì)的反饋[J].設(shè)計(jì)，2016（24）：118-119.