交互界面動效的情感化設計研究

劉 洋 （江南大學 214122）

交互界面動效的情感化設計研究

劉 洋 （江南大學 214122）

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

動效；情感化；交互界面；用戶體驗

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

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

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

二、本能水平層動效的情感化設計方法

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

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

三、行為水平層動效的情感化設計方法

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

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

物理性。讓用戶有一種視覺上的運動真實感?；谂ｎD三大運動定律，對現(xiàn)實生活中常見的重力、摩擦力、彈力、慣性總結提煉，即使在抽象的界面中也可以使動畫看上去更真實自然。在設計某一元素或物體的動效前，應研究現(xiàn)實世界與之相匹配物體的運動原理，契合用戶對力的認知經(jīng)驗。

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

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

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

四、反思水平層動效的情感化設計方法

反思層是意識的最高水平，在本能層和行為層后對使用者產(chǎn)生影響。用戶選擇產(chǎn)品不僅因為漂亮和易用，更高層次是因為它帶來的愉悅感、滿足感和自我認同感。設計原則是通過再現(xiàn)場景和契合品牌特性或訴求，引起用戶情感共鳴。

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

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

五、結語

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

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

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

[3] 胡壯麟. 認知隱喻學[M]. 北京:北京大學出版社,2004.

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

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