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

劉 洋 （江南大學 214122）

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

劉 洋 （江南大學 214122）

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

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

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

一、情感化設計的概念與內涵

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、結語

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

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

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

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

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

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