劉 洋 （江南大學(xué) 214122）

交互界面動(dòng)效的情感化設(shè)計(jì)研究

劉 洋 （江南大學(xué) 214122）

基于情感化設(shè)計(jì)理論，研究交互界面中動(dòng)效的運(yùn)用，優(yōu)化用戶(hù)體驗(yàn)。以唐納德?A?諾曼情感化理論的三個(gè)水平層次：本能層、行為層和反思層為指導(dǎo)，提出動(dòng)效在相應(yīng)情感層次中的設(shè)計(jì)方法。以情感化設(shè)計(jì)理論指導(dǎo)的動(dòng)效設(shè)計(jì)可以增強(qiáng)用戶(hù)與界面的情感互動(dòng)，提升用戶(hù)體驗(yàn)。

動(dòng)效；情感化；交互界面；用戶(hù)體驗(yàn)

交互界面動(dòng)效指的是用戶(hù)與終端顯示界面交互過(guò)程中，界面呈現(xiàn)出的動(dòng)態(tài)效果，包含以交互邏輯為基礎(chǔ)的動(dòng)效和從圖形動(dòng)畫(huà)衍生到界面中的細(xì)節(jié)動(dòng)效?！扒楦谢O(shè)計(jì)”一詞由認(rèn)知心理學(xué)家唐納德?A?諾曼提出，是具有哲學(xué)意味的廣義研究理論，以情感化設(shè)計(jì)三層次理論為指導(dǎo)，分析動(dòng)效的設(shè)計(jì)方法，把情感融入到動(dòng)效設(shè)計(jì)中，使用戶(hù)在與界面的互動(dòng)過(guò)程中產(chǎn)生正面的情感，提升用戶(hù)體驗(yàn)。

一、情感化設(shè)計(jì)的概念與內(nèi)涵

《情感化設(shè)計(jì)》中，作者唐納德?A?諾曼表述人們對(duì)產(chǎn)品的情感加工是通過(guò)大腦的活動(dòng)水平由低到高分為本能、行為和反思三個(gè)層次。本能水平是大腦的自動(dòng)預(yù)先設(shè)置層，產(chǎn)生的情感是無(wú)意識(shí)的，此時(shí)物理特征（視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)）是主要的，本能水平的設(shè)計(jì)對(duì)應(yīng)產(chǎn)品的外形；行為水平對(duì)應(yīng)支配日常行為的腦活動(dòng)，核心在于使用物品時(shí)的情感體驗(yàn)，行為水平的設(shè)計(jì)指的是產(chǎn)品的使用樂(lè)趣和效率；反思水平的情感是認(rèn)知的最高水平，是有意識(shí)的腦的思考，通過(guò)對(duì)產(chǎn)品的思考和理解獲得個(gè)人情感體驗(yàn)。優(yōu)秀的反思水平設(shè)計(jì)，用戶(hù)往往能從擁有、展示和使用產(chǎn)品的體驗(yàn)中建立自我形象、引起個(gè)人滿(mǎn)足感和勾起回憶。

二、本能水平層動(dòng)效的情感化設(shè)計(jì)方法

在交互界面動(dòng)效傳達(dá)給用戶(hù)的過(guò)程中，本能水平中能產(chǎn)生即刻情感效果的視覺(jué)因素處在支配地位。設(shè)計(jì)原則是通過(guò)UI元素的形態(tài)變化和元素間不同維度的對(duì)比，使用戶(hù)能時(shí)刻關(guān)注到視覺(jué)焦點(diǎn)并引導(dǎo)視線流。要注意的是適度添加動(dòng)效，不能打擾用戶(hù)在獲取內(nèi)容時(shí)的注意力，營(yíng)造連貫流暢的視線流。

位移、旋轉(zhuǎn)、縮放、漸變是UI元素最基礎(chǔ)的形態(tài)變化屬性，人眼會(huì)快速捕捉到運(yùn)動(dòng)的物體，元素的形態(tài)變化直接影響用戶(hù)對(duì)視覺(jué)焦點(diǎn)（注視點(diǎn)）的捕捉。視線流是用戶(hù)持續(xù)關(guān)注內(nèi)容后留下的一串視覺(jué)焦點(diǎn)的流向。通過(guò)元素間時(shí)間、空間、色彩、形態(tài)、質(zhì)感維度的差異對(duì)比，可以輕松吸引用戶(hù)的注意力到界面希望展示的內(nèi)容上。時(shí)間維度有動(dòng)靜、持續(xù)時(shí)間、時(shí)機(jī)的對(duì)比；空間有幅度、路徑的對(duì)比；色彩有色相、明暗、飽和度的對(duì)比；形態(tài)有具象、大小的對(duì)比；質(zhì)感有肌理、光澤、透明度的對(duì)比。通過(guò)對(duì)比可以表現(xiàn)運(yùn)動(dòng)過(guò)程中元素間的關(guān)系和內(nèi)容的邏輯層級(jí)。

三、行為水平層動(dòng)效的情感化設(shè)計(jì)方法

在本能層的視覺(jué)因素起主導(dǎo)作用之后，用戶(hù)的意識(shí)會(huì)轉(zhuǎn)向關(guān)注功能易用性，這就是行為層上講的效用。根據(jù)諾曼教授提出的優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面：功能性、物理感覺(jué)、易懂性和可用性總結(jié)出動(dòng)效設(shè)計(jì)原則應(yīng)遵循功能性、物理性、反饋性、隱喻性和一致性。

功能性。動(dòng)畫(huà)最基礎(chǔ)的需求，為實(shí)現(xiàn)一定的目的服務(wù)。動(dòng)效有展示層級(jí)、傳達(dá)狀態(tài)、提示信息等多種功能。設(shè)計(jì)師需要根據(jù)用戶(hù)使用體驗(yàn)的反饋，謹(jǐn)慎添加動(dòng)效，任何形式的動(dòng)效首先是要有用的，能達(dá)到一定目的的。比如在ios的解鎖密碼界面，輸錯(cuò)密碼后搖晃的動(dòng)畫(huà)瞬間就能傳達(dá)出錯(cuò)誤的意思。

物理性。讓用戶(hù)有一種視覺(jué)上的運(yùn)動(dòng)真實(shí)感。基于牛頓三大運(yùn)動(dòng)定律，對(duì)現(xiàn)實(shí)生活中常見(jiàn)的重力、摩擦力、彈力、慣性總結(jié)提煉，即使在抽象的界面中也可以使動(dòng)畫(huà)看上去更真實(shí)自然。在設(shè)計(jì)某一元素或物體的動(dòng)效前，應(yīng)研究現(xiàn)實(shí)世界與之相匹配物體的運(yùn)動(dòng)原理，契合用戶(hù)對(duì)力的認(rèn)知經(jīng)驗(yàn)。

反饋性。為用戶(hù)的操作提供及時(shí)明確的響應(yīng)。反饋動(dòng)效需要在合適的時(shí)機(jī)引起用戶(hù)注意，按發(fā)生時(shí)機(jī)不同分為過(guò)程反饋和結(jié)果反饋。過(guò)程反饋告知當(dāng)前操作狀態(tài)，比如在語(yǔ)音搜索時(shí)聲波擴(kuò)散的效果會(huì)傳達(dá)出正在接收信息的反饋。結(jié)果反饋的響應(yīng)要迅速且精確，過(guò)長(zhǎng)的動(dòng)畫(huà)讓人感覺(jué)響應(yīng)遲鈍，過(guò)短的動(dòng)畫(huà)又難以理解變化邏輯。在經(jīng)常使用的功能上不要添加復(fù)雜或長(zhǎng)動(dòng)畫(huà)，會(huì)增加用戶(hù)等待時(shí)間，影響運(yùn)行流暢度。

隱喻性。用熟悉的動(dòng)作形式為用戶(hù)提供操作預(yù)期。隱喻的作用是在人們用語(yǔ)言思考所感知的物質(zhì)世界和精神世界時(shí)，能從原先互不相關(guān)的不同事物、概念和語(yǔ)言表達(dá)中發(fā)現(xiàn)相似點(diǎn)，建立想象極其豐富的聯(lián)系。所以利用用戶(hù)的經(jīng)驗(yàn)和認(rèn)知，模擬現(xiàn)實(shí)世界中物體產(chǎn)生的動(dòng)作，為虛擬的動(dòng)畫(huà)效果找到真實(shí)的參照，可以簡(jiǎn)單快速理解操作或內(nèi)容，使隱喻順理成章。例如微信閱讀的翻頁(yè)動(dòng)效就是模擬現(xiàn)實(shí)中書(shū)本翻頁(yè)的動(dòng)作。

一致性。在整個(gè)系統(tǒng)或應(yīng)用中采用統(tǒng)一和諧的動(dòng)態(tài)效果，令交互體驗(yàn)統(tǒng)一。在設(shè)計(jì)之前，需要給全局動(dòng)效定義一個(gè)概念，并結(jié)合功能模塊或場(chǎng)景的劃分，定義動(dòng)效是否出現(xiàn)和出現(xiàn)方式，以便在后期不斷變化中保持外觀或感覺(jué)上的一致。例如Android是基于紙質(zhì)的概念，而華為使用磁鐵的概念統(tǒng)一動(dòng)效的運(yùn)動(dòng)方式。

四、反思水平層動(dòng)效的情感化設(shè)計(jì)方法

反思層是意識(shí)的最高水平，在本能層和行為層后對(duì)使用者產(chǎn)生影響。用戶(hù)選擇產(chǎn)品不僅因?yàn)槠梁鸵子?，更高層次是因?yàn)樗鼛?lái)的愉悅感、滿(mǎn)足感和自我認(rèn)同感。設(shè)計(jì)原則是通過(guò)再現(xiàn)場(chǎng)景和契合品牌特性或訴求，引起用戶(hù)情感共鳴。

用戶(hù)在使用產(chǎn)品或體驗(yàn)服務(wù)時(shí)，會(huì)通過(guò)自身的社會(huì)經(jīng)驗(yàn)來(lái)理解形成個(gè)人體驗(yàn)，用動(dòng)效再現(xiàn)場(chǎng)景的方式，喚醒用戶(hù)先前的個(gè)人體驗(yàn)，引導(dǎo)用戶(hù)在動(dòng)畫(huà)效果和現(xiàn)實(shí)生活中產(chǎn)生關(guān)聯(lián)，在回憶中引起用戶(hù)同產(chǎn)品的情感共鳴。動(dòng)效強(qiáng)化界面擬物可以產(chǎn)生移情作用，在絕大部分用戶(hù)心里，這些擬物往往關(guān)聯(lián)了某些情愫、聯(lián)想或回憶。例如2016年天貓國(guó)際圣誕節(jié)的活動(dòng)頁(yè)面，以從頁(yè)面頂部飄下的雪花為動(dòng)畫(huà)元素，營(yíng)造人記憶中圣誕節(jié)下雪的場(chǎng)景，喚醒用戶(hù)回憶引起共鳴。

用戶(hù)根據(jù)自身的喜好、興趣、身份匹配品牌傳達(dá)出的生活理念和價(jià)值觀，獲取認(rèn)同感和歸屬感。直擊消費(fèi)者的心理需求，不但能拉動(dòng)消費(fèi)，更能使消費(fèi)者長(zhǎng)久地保留對(duì)品牌的良好印象5。加入契合品牌特性和訴求的獨(dú)特、有趣、有新意的動(dòng)效，已經(jīng)成為品牌營(yíng)銷(xiāo)的新趨勢(shì)，目前很多品牌都在刷新或加載狀態(tài)添加了增強(qiáng)品牌識(shí)別度的有趣動(dòng)畫(huà)。例如美團(tuán)外賣(mài)的刷新動(dòng)畫(huà)，結(jié)合品牌袋鼠的形象，把腿做成飛奔的動(dòng)畫(huà)，有趣的傳達(dá)了美團(tuán)外賣(mài)配送迅速的品牌訴求。

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

目前各種終端設(shè)備都在使用動(dòng)效優(yōu)化界面體驗(yàn)，在設(shè)計(jì)動(dòng)效時(shí)，應(yīng)綜合考慮本能、行為和反思這三種水平對(duì)動(dòng)效設(shè)計(jì)的要求。本能層通過(guò)UI元素形態(tài)變化和元素間維度變化來(lái)捕捉視覺(jué)焦點(diǎn)和引導(dǎo)視線流；行為層遵循功能性、物理性、反饋性、隱喻性和一致性的設(shè)計(jì)原則，增強(qiáng)產(chǎn)品可用性；反思層通過(guò)再現(xiàn)場(chǎng)景和契合品牌特性，使用戶(hù)產(chǎn)生情感共鳴。盡管不同終端界面的交互方式有所差異，但巧妙的結(jié)合情感化的設(shè)計(jì)方法創(chuàng)造動(dòng)效形式，探索用戶(hù)與界面情感上的溝通，從而不斷提升用戶(hù)體驗(yàn)。

[1]唐納德?A?諾曼.情感化設(shè)計(jì)[M].北京：電子工業(yè)出版社，2005.

[2]傅小貞，胡甲超，鄭元攏.移動(dòng)設(shè)計(jì)[M].北京：電子工業(yè)出版社，2013.

[3] 胡壯麟. 認(rèn)知隱喻學(xué)[M]. 北京:北京大學(xué)出版社,2004.

[4]周睿.啟動(dòng)時(shí)態(tài)界面中動(dòng)效的交互設(shè)計(jì)研究[J].包裝工程，2015，08：83-86

[5]李雪山，聶書(shū)法.品牌廣告的情感設(shè)計(jì)[J].裝飾，2006，09：109-110