交互

如何利用微交互設計提升用戶體驗？

2934

好的產品通常會做好兩件事情：功能和細節(jié)。功能能夠吸引用戶關注這個產品，而細節(jié)則能夠讓關注的用戶留下來。功能和細節(jié)兩者都很重要，但是功能居首，細節(jié)次之。不過，讓用戶喜歡或者討厭一個APP或者網站，往往緣起于細節(jié)。隨著網站交互設計和動效的大規(guī)模普及，我們現(xiàn)在所看到的許多細節(jié)設計，都可以歸類于微交互。微交互所要求的關注細節(jié)是獲得有效、強大用戶體驗的關鍵原則。優(yōu)秀的動效是完善用戶體驗中不可或缺的一環(huán)，擁有好用且令人難忘的細節(jié)能讓產品脫穎而出。

——Dan Saffer

1.微交互在界面中的作用

2.微交互的必要性

3.按用途劃分動效設計類型

4.如何輸出動效

5.如何書寫動效設計文檔

6.微交互的測試過程

「微交互在界面中的作用」

傳遞狀態(tài)信息和層級信息

1.通過一定的動效暗示，可以讓用戶更好的理解整個app的信息結構。

2.賦予app生命感，讓用戶知道app正在積極的為用戶執(zhí)行操作。

提示隱藏信息功能或讓用戶快速識別提示信息

1.若我們需要隱藏一些需要適時出現(xiàn)的，或需要用戶探索的界面或按鈕，可以通過適當?shù)膭有гO計進行合理的引導，提示，銜接。

2.微動畫可以使用戶能夠快速識別界面視覺元素，并高效的與之進行交互，同時也能使實際顯示的形式更加優(yōu)雅。

傳遞情感化信息交互及時得到反饋

1.使等待不枯燥

2.使變化不生硬

3.使反饋不單調

4.增加用戶參與度，讓用戶更加愉悅的體驗產品

注冊和登錄流程一直是產品中最為枯燥繁瑣但又必不可少的環(huán)節(jié)，微動畫用有趣和交互性元素改進了填充表單的枯燥過程，可以有效的環(huán)節(jié)用戶在體驗上的負面情緒。

當輸入密碼錯誤的時候，密碼輸入欄會顯示出一個搖頭的效果。完全可以想象，假設用一個錯誤提示的彈窗，不僅會中斷用戶的操作流程，引起人的反感，而且很容易讓人受挫。通過動效，設計者用一種更友好簡單的方式達到了提示的目的。

「微交互的必要性」

提升用戶體驗

1.讓用戶覺察視覺元素的連續(xù)變化，對新舊狀態(tài)的更替有更清晰的感知，為用戶提供良好的動態(tài)沉浸式體驗，使用戶更加清晰愉悅的使用產品。

2.解決扁平化的弊端，扁平化雖然可以讓用戶將注意力放在內容本身，但是在多信息的情況下很難區(qū)分信息層級關系，合適的動效可以讓用戶更好的理解信息層級關系，賦予設計情感，增加用戶參與度。

增添產品氣質

1.合理的動效能更立體的傳遞信息，提高產品的“表達能力”。

2.增添產品的親和力和趣味性，利于品牌的建立，未添加動效的產品，會有種死氣沉沉的感覺，所有內容平鋪直敘，即使界面設計的再美觀，也會缺乏一種靈動細膩的氣質。

3.但是動效并不是越多越好，不同產品對不同動效需求也不盡相同，如：新聞類，深度閱讀類產品過度的動效反而會干擾閱讀。所以要針對產品本身的屬性來恰當?shù)脑O計動效。

「動效設計類型(按用途劃分)」

過渡型

人腦灰質會對動態(tài)事物（如：移動、形變、色變等）保持敏感。在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關系。好的過渡動效避免了界面快速切換時給用戶帶來的迷失感，作為最為常見的交互，它會在潛意識中引導用戶，而用戶通常不需要去思考就會下意識執(zhí)行。

反饋型

無論是點擊、長按、拖拽、滑動等交互行為，（如：下拉刷新，loading，tabbar上的微交互）都應該得到系統(tǒng)的即時反饋，將其以視覺或動效的方式展現(xiàn)，幫助用戶了解當前系統(tǒng)對交互過程的響應情況，為用戶帶來安全感。

表單設計中最容易被忽視的，其實是對于出錯信息的處理。表單，尤其是長表單，填寫內容出錯其實是很正常的事情，等到提交信息的時候再報錯，用戶會非常沮喪。而微交互結合實時驗證，能夠讓用戶在輸入的過程中就發(fā)現(xiàn)錯誤并進行修改，一次通過，不用等待提交的時候再回頭處理。

功能型

特定工具類，直播類產品所需的元素動效，安全、清理類產品的掃描動效，emoji表情動效等。

情感型(趣味型)

增加情感交流，強化品牌調性。

如：刷新、loading動效，加載過程往往比較枯燥，有趣的動效可以吸引用戶注意力，從而減緩用戶負面情緒。

相關實驗數(shù)據(jù)表明，較差的loading動效讓用戶感受到的等待時長比實際時長還要長，普通的loading動效讓用戶感受到的等待時長和實際時長相差不多，優(yōu)秀有趣的loading動效讓用戶感受到的等待時長比實際時長要短。

以此說明，出色有趣的動效會更加吸引用戶注意力，從心理上忘記時間的流逝，大大提升了用戶體驗。

「如何輸出動效」

1.通常我們做的偏復雜的 app 動效（例如：情感型、功能型），在實際落地過程中會遇到很多問題，比如：Gif 圖失真、占內存過大、開發(fā)成本過高。

2.Airbnb 開源的動畫渲染庫 Lottie 可以有效的解決了這一系列問題。Lottie 可以直接利用 AE 導出的 JSON 動畫文件，將其解析為原生代碼，在 iOS 和 Android 設備平臺上運行。

3.使用方法：設計師使用After Effect制作動畫，并通過插件bodymovie導出.json文件給開發(fā)人員；開發(fā)人員通過Lottie開源庫進行渲染。

4.Lottie獲取方法：微信公眾號后臺輸入“Lottie插件”，會有下載鏈接。

以上動效輸出方式只針對復雜動效，普通過度轉場動效還是使用原始方式，標注說明給開發(fā)。

「如何書寫動效設計文檔」

1.動效輸出后會出現(xiàn)開發(fā)和設計師對接困難的問題，是因為沒有通過精準的參數(shù)去描述動效。要解決這個問題，我們需要創(chuàng)造一套有效的動效標注系統(tǒng)（或書寫一份動效設計文檔），這個系統(tǒng)必須做到以下兩點：讓設計師可以輕松地描述動效，讓開發(fā)可以準確地還原動效。

2.如何向開發(fā)具象的陳述動效，需要做到以下幾步（如圖），先拆解動效，將組合動效拆解成基礎動畫；在從變化、時長、曲線這三方面，闡述每個屬性的變化數(shù)據(jù)。