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

朱潔皓

（江蘇商貿職業學院，江蘇 南通 226011）

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

1 App 動效的設計

1.1 動效設計

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

1.2 情感化設計

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

1.3 交互動態效果的運用

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

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

2.1 動態效果的基本要素

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

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

2.2 動態效果的視覺沖擊性與功能性特征

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

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

2.3 利用動態效果提升用戶體驗的原則性

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

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

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

3.1 轉場動效

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

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

3.2 展示動效

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

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

3.3 引導動效

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

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

3.4 加載動效

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

在加載動效的設計中，常用“變形”的方法，當加載進程結束時，可以進行形態的變化，以提示對象效用發生的變化，以創建連續的產品敘事流程，變形是提升可用性動效中最明顯和最具穿透力的。“值變”的方法也時在加載動效中常用的方法，運用數值的變化來提示加載的進度，在實際的設計案例中，數值的變化可以用一些與產品相關的動態圖形來展示，例如旅行類產品中運用奔跑的小人；飲品點單產品中運用逐漸注滿水的杯子等，提升用戶對產品的印象，提升親和力，增進個性化的情感。

3.5 反饋動效

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

在反饋動效中，常會用到“生成”的方法，這種動畫能展示出通過操作而發生的新的事件，以及前后事件之間的關系。“生成”可以引導用戶從交互前的信息轉向交互后的信息，反饋信息之間的關系，提示進一步的操作，增強用戶信任度，提升產品安全感。

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

4 結語

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