基于用戶情感化體驗的App動效設計研究

朱潔皓

（江蘇商貿(mào)職業(yè)學院，江蘇 南通 226011）

界面中的動效設計使界面展示信息時更加易于理解，展示內(nèi)容更清晰，能及時地與用戶進行交流并作出響應，好的動效設計能使用戶在操作界面時邏輯更清晰，使用更便捷，隨著人們情感體驗精神需求的不斷提升，App 設計中對用戶情感的關注也逐漸成為設計優(yōu)良的評價標準，人們對動效設計的情感化體驗也展開了設計與研究。

1 App 動效的設計

1.1 動效設計

動效設計是一種以畫面為載體，將資訊輸入到界面設計中的一種重要的視覺表達方式。動效設計在圖形設計的基礎上，添加了時間的概念，按照一定的物理法則，給使用者提供信息，讓用戶可以看到自己的動作，可以對用戶的行為做出反應，清楚地說明界面設計中的互動行為的起始和終止[1]。動效設計的研究和實踐也在注重對用戶體驗的產(chǎn)品優(yōu)化，動態(tài)效果能夠在靜止的網(wǎng)頁上引起用戶的注意，更加清晰和有力地傳遞信息。

1.2 情感化設計

情感設計是由唐納德·諾曼在《設計心理學》一書中提出的。情感化設計分為本能層、行為層、反思層三個層次。隨著人們生活水平的提高，用戶對各類產(chǎn)品的要求已不僅僅是功能的滿足，越來越多的用戶在滿足功能的基礎上，提出視覺美觀，個性化的本能層要求；操作邏輯清晰，產(chǎn)品易用的行為層要求；情感關懷、產(chǎn)生共鳴、價值感認同，留下深刻印象的反思層要求[2]。隨著設計心理學的興起，人們越來越注重對用戶的情感體驗，因此情感設計也得到了廣泛的重視，將人們的目光從功能滿足轉(zhuǎn)向了人性關懷，使其更貼近使用者。在圖像效果方面，情緒設計也是非常重要的，充滿感情的動態(tài)效果能為使用者帶來更好的使用體驗，為用戶提供了一個清晰的界面和愉快的使用體驗，從而達到視覺美觀，邏輯引導清晰，反饋及時易懂等基本需求，提高使用愉悅感。

1.3 交互動態(tài)效果的運用

傳統(tǒng)信息的傳播是單向的，靜態(tài)的，隨著技術和網(wǎng)絡的發(fā)展，越來越多的交互功能被實現(xiàn)，信息的傳播實現(xiàn)了差異化，不同的用戶根據(jù)需要可以與產(chǎn)品之間進行交互，選擇需要的信息來進行展示，突出了信息傳遞的準確性。交互需要在實現(xiàn)視覺設計時，更多地顧及使用者的感受與需要，改變了傳統(tǒng)的視覺傳播方式，即用戶在單向接受靜態(tài)信息時，根據(jù)使用者的習慣及視覺體驗，讓用戶有一種身臨其境的感覺。交互帶個用戶的信息精準度，與用戶交流中的情感依賴與共鳴，這是靜態(tài)的視覺展示無法實現(xiàn)的，為了使產(chǎn)品與用戶之間的黏性增加，使用戶與產(chǎn)品之間產(chǎn)生更多的共鳴，在實現(xiàn)產(chǎn)品基礎功能的前提下，深入研究和提升交互動態(tài)效果的運用是必要的。

2 情感化體驗在動效設計中的應用分析

2.1 動態(tài)效果的基本要素

在完成靜態(tài)界面添加動態(tài)效果時，必須先掌握最基礎的可視化參數(shù)。動效設計的中心思想是通過恰當?shù)膭赢?，在合適的時機，以合適的速度來傳達觀念和訊息。動效的設計應該主要圍繞元素位移、縮放、不透明度變化、旋轉(zhuǎn)等基本屬性來進行設計。當基本的運動規(guī)則被確定后，再通過調(diào)整特定的屬性來達到精煉的效果。

在動態(tài)效果設計中，動態(tài)效果響應的時間，和動態(tài)效果的觸發(fā)點是需要根據(jù)產(chǎn)品進行設計的。首先動作效果必須有某種含義，在一些重要的場合，達到反饋、傳遞信息、引導任務、集中注意力的目的。不能隨意地堆疊，甚至是照搬模板。動態(tài)效果比使用者的動作要慢一些，有一些反應的時間，便于使用者掌握使用的節(jié)拍。下一步是將預設值與啟動值之間的間隔時間控制在最佳值。太短的動態(tài)效果不但沒有傳遞出足夠的訊息，而且一閃而過讓使用者無法看清，引起誤解。動態(tài)效果的響應時間太久或等待的時候顯示比較單調(diào)，會讓用戶失去耐心，放棄等待。在動態(tài)效果上，不同層次的函數(shù)在視覺上要有顯著的差別，同樣的動作和效果，用時間來營造有序和一致性，增加可讀性。在動態(tài)的作用下，元素的變形，比如擠壓和拉伸，都是模仿物理的。在虛擬世界中引入了現(xiàn)實的物理法則，模擬了重力、摩擦力和慣性對運動目標的變形，能提高活動性。自然中沒有任何一種物質(zhì)是均勻的，也不會有什么東西會突然停下來，因此，很多界面的移動、翻頁，都需要設置動態(tài)曲線。

2.2 動態(tài)效果的視覺沖擊性與功能性特征

以用戶體驗為宗旨，分析使用者的操作習慣、用戶的喜好，軟件的使用情況和整個過程的架構(gòu)，在進行動態(tài)效果設計時，力求利用元素、色彩、流暢的動態(tài)效果來創(chuàng)造舒適的效果，做好可視化的指導。這些信息是按照等級順序排列的，每個單元的布局可以有明顯的主次關系，有了視覺上的突出，讓使用者知道哪些地方值得注意，這是一個值得探索的地方。再進一步發(fā)掘出合適的動態(tài)植入時機，為用戶添加一些有創(chuàng)造性的點子。

視覺上的震撼與功能的結(jié)合并不矛盾，并且是一種包含的關系，并且在視覺經(jīng)驗中也包括了功能的展示，也是一種提升體驗的方式。動態(tài)效果設計能清楚地向使用者展示App 的運行過程，例如點擊一個圖標就可以完成網(wǎng)頁的跳躍，它會不斷地變小，然后變大，這是一個準備。若動作幅度較大，則會有較小的反彈。位移的改變不是一條直線，但在動態(tài)效果設計中，遵循自然法則和邏輯，除非那些法則有特別的含義被破壞。

2.3 利用動態(tài)效果提升用戶體驗的原則性

動效發(fā)生在使用者的動作之后，作出回應，具有自我解釋力，它能緩解使用者的耐心和焦躁，讓使用者有一種安全感和互動的感覺。動態(tài)效用表現(xiàn)在轉(zhuǎn)場過渡和資訊層次上，能讓使用者理清思路，更好地了解整體和局部的關系，讓新的消息和界面不會突然地冒出來。至于下一層會有什么，前饋效應具有強烈的提示作用，為將要發(fā)生的事情做好準備，提高使用效率和便利性，優(yōu)化操作體驗。

良好的動態(tài)效果能夠?qū)⒉煌墓δ軈^(qū)分開來，也可以把沒有規(guī)則的數(shù)據(jù)整理起來，通過軟件界面架構(gòu)的連接，加強邏輯關系，提高認識的有效性，方便使用者在交互過程中不出戲，準確的查找需要的資料。對點擊后的反應進行及時的反饋，能夠消除使用者的焦躁感，減少負擔，最大限度地減少信息轉(zhuǎn)換間隙所造成的焦慮和困惑，提高使用的便利性。要善于運用減法的強弱，刪除不必要的，讓它更適合于核心功能，協(xié)助用戶使用、理解和記憶，擁有最佳的操作體驗[3]。舉個例子，在加載過程中，增加了動態(tài)功能，導致了時間感的扭曲，通過加載動畫的視覺效果，使觀眾有一種等待時間不長的感覺，從而降低了耐心的消磨，加強互動的體驗。

3 常見動效的情感表達方法

3.1 轉(zhuǎn)場動效

轉(zhuǎn)場動效應用在頁面的切換和功能的轉(zhuǎn)換，有不少應用在頁面切換時沒有動效，是直接的跳轉(zhuǎn)，在用戶觀看時，會有卡頓的感覺，顯得比較生硬，界面缺少友好性；在頁面切換中加入一些動效可以使頁面看起來更加流暢，提升觀看的舒適度，同時，應用一些不同的動效，也能幫助用戶理清應用頁面的層級關系。例如，在很多應用中，進入應用會用由小到大的動效，退出則用由大到小的動效；進入某項功能的子層級，常用向左滑動的動效，退回上一層級常用向右滑動的動效；動效的加入能使用戶的操作邏輯更清晰。

轉(zhuǎn)場動效的設計中，需要使用“緩動”來讓動效的表達更符合實際的情況和用戶的期望，在生活中，動作的轉(zhuǎn)換一定不是勻速的運動，常會出現(xiàn)加速或減速的變化，在動效的設計時，要根據(jù)實際的應用場景，選擇緩動的變化曲線，以符合應用的場景。

3.2 展示動效

展示動效應用在需要重點展示的信息中，通過一些動態(tài)效果的添加，幫助用戶理解信息內(nèi)容，并獲得信息中的情感。例如，在天氣App 中，常會見到根據(jù)不同的天氣狀態(tài)，會有不同的展示動效，以更加直觀地提示用戶天氣的變化，在觀看信息時，能通過動效直接的獲取，節(jié)省閱讀的時間，也提升了產(chǎn)品的易用性。但由于設備屏幕的尺寸有限，在需要展示較多信息的時候，還可以通過縮放、翻轉(zhuǎn)、折疊化等動效，來對信息進行更為豐富的展示，動過動效的添加，可以將信息以漸進的方式進行展示，提升用戶認識的同時，也能表達出信息之間的層級關系，幫助用戶理解信息邏輯，提升使用體驗。

在展示動效的設計中，常使用“堆疊”的方法來進行信息的分層展示，體現(xiàn)出信息間的連續(xù)性與邏輯關系，在“堆疊”切換的過程中，運用縮放、模糊效果，模擬生活中近大遠小、近實遠虛的透視效果。常用“維度變化”的方法體現(xiàn)信息的翻轉(zhuǎn)和折疊，當新的信息產(chǎn)生或消失時，運用維度變化，做出翻轉(zhuǎn)、折疊的效果，展示出信息的敘事、連續(xù)性和邏輯關系。

3.3 引導動效

引導動效的應用往往是希望引起用戶的注意力，根據(jù)一般視覺注意的規(guī)律，人眼總是會先注意到運動的元素，通過抓取用戶注意，引導用戶點擊，進入到目標場景。例如，很多App 的導航中都會有“+”按鈕，點擊常會出現(xiàn)更多選項，在出現(xiàn)的過程中根據(jù)產(chǎn)品使用合適的動效，能給用戶帶來清晰的思路，快速找到需要點擊的按鈕。

在引導動效中，常使用“鏡頭平移與縮放”的方法，對界面元素進行展示，并保持過程的連續(xù)性和空間變化，這種動效可以暗示觀察者視角的變化，也可以暗示靜止的視角下對象改變位置。通過連續(xù)性和敘述來支持可用性，幫助用戶在界面對象和目的地之間無縫轉(zhuǎn)換。還可以結(jié)合“維度變化”來引導更多的空間，更直觀地向用戶傳達與當前信息相關聯(lián)的上一層與地下一層的內(nèi)容，幫助用戶更好的搭建產(chǎn)品邏輯結(jié)構(gòu)。

3.4 加載動效

加載動效應用在由于網(wǎng)絡原因或數(shù)據(jù)流量較大時，不能及時呈現(xiàn)內(nèi)容時，有一定等待時間，在等待的同時，運用動效，讓用戶了解加載的進度，同時緩解等待時的焦躁、無聊等負面情緒，以提升產(chǎn)品的體驗感。

在加載動效的設計中，常用“變形”的方法，當加載進程結(jié)束時，可以進行形態(tài)的變化，以提示對象效用發(fā)生的變化，以創(chuàng)建連續(xù)的產(chǎn)品敘事流程，變形是提升可用性動效中最明顯和最具穿透力的?！爸底儭钡姆椒ㄒ矔r在加載動效中常用的方法，運用數(shù)值的變化來提示加載的進度，在實際的設計案例中，數(shù)值的變化可以用一些與產(chǎn)品相關的動態(tài)圖形來展示，例如旅行類產(chǎn)品中運用奔跑的小人；飲品點單產(chǎn)品中運用逐漸注滿水的杯子等，提升用戶對產(chǎn)品的印象，提升親和力，增進個性化的情感。

3.5 反饋動效

反饋動效運用在當用戶與產(chǎn)品產(chǎn)生點擊、滑動、縮放、拖拽等交互時，產(chǎn)生的視覺或聽覺或觸覺的動態(tài)反饋，以向用戶反饋交互的結(jié)果，幫助客戶了解交互過程中所處的狀態(tài)，給用戶帶來安全感，讓用戶清楚地了解目前處在什么狀態(tài)，當前發(fā)生了什么事情。例如在眾多產(chǎn)品的密碼輸入頁面，用綠色代表安全性高或登錄成功，紅色代表安全性低或錯誤，很多時候還會加入音效或震動，通過多種感知來反饋當前的狀態(tài)，以及時的提示用戶交互操作的狀態(tài)。在生活中如果去按下按鈕，你能感受到按下時的力度和按鈕的阻力，但這些是在點擊屏幕的時候所無法接收到的反饋，所以就需要通過一些視覺、聽覺或觸覺的方式來及時將交互的結(jié)果反饋給用戶[4]。

在反饋動效中，常會用到“生成”的方法，這種動畫能展示出通過操作而發(fā)生的新的事件，以及前后事件之間的關系?！吧伞笨梢砸龑в脩魪慕换デ暗男畔⑥D(zhuǎn)向交互后的信息，反饋信息之間的關系，提示進一步的操作，增強用戶信任度，提升產(chǎn)品安全感。

通過以上常見動效的情感表達方法，可以幫助我們在動效設計中更為準確地表達情感，提升產(chǎn)品的人性化體驗，增強客戶的黏度。在實際案例的設計中，可以根據(jù)不同產(chǎn)品的具體情況，進行各種表達方法的組合，來衍生出各類復雜并變化豐富的動效，提升產(chǎn)品可用性，提升情感體驗。

4 結(jié)語

隨著設計對情感化的重視，App 的情感設計也在逐步提升，而在App 界面中，動效是最容易引起用戶注意，并與用戶產(chǎn)生交流最多的因素。本文通過對App 動效的分析和情感化設計的研究，總結(jié)常見動效的情感表達方法，希望能給App 動效設計提供一定的參考。但App 的種類形式多樣，針對不同產(chǎn)品的情感化設計研究還需再進一步深入。