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

——Dan Saffer

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

2.微交互的必要性

3.按用途劃分動(dòng)效設(shè)計(jì)類型

4.如何輸出動(dòng)效

5.如何書寫動(dòng)效設(shè)計(jì)文檔

6.微交互的測(cè)試過(guò)程

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

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

1.通過(guò)一定的動(dòng)效暗示，可以讓用戶更好的理解整個(gè)app的信息結(jié)構(gòu)。

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

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

1.若我們需要隱藏一些需要適時(shí)出現(xiàn)的，或需要用戶探索的界面或按鈕，可以通過(guò)適當(dāng)?shù)膭?dòng)效設(shè)計(jì)進(jìn)行合理的引導(dǎo)，提示，銜接。

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

傳遞情感化信息交互及時(shí)得到反饋

1.使等待不枯燥

2.使變化不生硬

3.使反饋不單調(diào)

4.增加用戶參與度，讓用戶更加愉悅的體驗(yàn)產(chǎn)品

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

當(dāng)輸入密碼錯(cuò)誤的時(shí)候，密碼輸入欄會(huì)顯示出一個(gè)搖頭的效果。完全可以想象，假設(shè)用一個(gè)錯(cuò)誤提示的彈窗，不僅會(huì)中斷用戶的操作流程，引起人的反感，而且很容易讓人受挫。通過(guò)動(dòng)效，設(shè)計(jì)者用一種更友好簡(jiǎn)單的方式達(dá)到了提示的目的。

「微交互的必要性」

提升用戶體驗(yàn)

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

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

增添產(chǎn)品氣質(zhì)

1.合理的動(dòng)效能更立體的傳遞信息，提高產(chǎn)品的“表達(dá)能力”。

2.增添產(chǎn)品的親和力和趣味性，利于品牌的建立，未添加動(dòng)效的產(chǎn)品，會(huì)有種死氣沉沉的感覺(jué)，所有內(nèi)容平鋪直敘，即使界面設(shè)計(jì)的再美觀，也會(huì)缺乏一種靈動(dòng)細(xì)膩的氣質(zhì)。

3.但是動(dòng)效并不是越多越好，不同產(chǎn)品對(duì)不同動(dòng)效需求也不盡相同，如：新聞?lì)?，深度閱讀類產(chǎn)品過(guò)度的動(dòng)效反而會(huì)干擾閱讀。所以要針對(duì)產(chǎn)品本身的屬性來(lái)恰當(dāng)?shù)脑O(shè)計(jì)動(dòng)效。

「動(dòng)效設(shè)計(jì)類型(按用途劃分)」

過(guò)渡型

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

反饋型

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

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

功能型

特定工具類，直播類產(chǎn)品所需的元素動(dòng)效，安全、清理類產(chǎn)品的掃描動(dòng)效，emoji表情動(dòng)效等。

情感型(趣味型)

增加情感交流，強(qiáng)化品牌調(diào)性。

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

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

以此說(shuō)明，出色有趣的動(dòng)效會(huì)更加吸引用戶注意力，從心理上忘記時(shí)間的流逝，大大提升了用戶體驗(yàn)。

「如何輸出動(dòng)效」

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

2.Airbnb 開源的動(dòng)畫渲染庫(kù) Lottie 可以有效的解決了這一系列問(wèn)題。Lottie 可以直接利用 AE 導(dǎo)出的 JSON 動(dòng)畫文件，將其解析為原生代碼，在 iOS 和 Android 設(shè)備平臺(tái)上運(yùn)行。

3.使用方法：設(shè)計(jì)師使用After Effect制作動(dòng)畫，并通過(guò)插件bodymovie導(dǎo)出.json文件給開發(fā)人員；開發(fā)人員通過(guò)Lottie開源庫(kù)進(jìn)行渲染。

4.Lottie獲取方法：微信公眾號(hào)后臺(tái)輸入“Lottie插件”，會(huì)有下載鏈接。

以上動(dòng)效輸出方式只針對(duì)復(fù)雜動(dòng)效，普通過(guò)度轉(zhuǎn)場(chǎng)動(dòng)效還是使用原始方式，標(biāo)注說(shuō)明給開發(fā)。

「如何書寫動(dòng)效設(shè)計(jì)文檔」

1.動(dòng)效輸出后會(huì)出現(xiàn)開發(fā)和設(shè)計(jì)師對(duì)接困難的問(wèn)題，是因?yàn)闆](méi)有通過(guò)精準(zhǔn)的參數(shù)去描述動(dòng)效。要解決這個(gè)問(wèn)題，我們需要?jiǎng)?chuàng)造一套有效的動(dòng)效標(biāo)注系統(tǒng)（或書寫一份動(dòng)效設(shè)計(jì)文檔），這個(gè)系統(tǒng)必須做到以下兩點(diǎn)：讓設(shè)計(jì)師可以輕松地描述動(dòng)效，讓開發(fā)可以準(zhǔn)確地還原動(dòng)效。

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

變化

變化可以劃分為四類（如動(dòng)圖所示），這四類變化基本涵蓋了界面元素的全部運(yùn)動(dòng)方式，只要我們準(zhǔn)確地描述元素在動(dòng)效前后的變化量，就可以準(zhǔn)確地完成「變化」這個(gè)參數(shù)的對(duì)接。

那么這個(gè)時(shí)候我們需要記錄的狀態(tài)（這里只涉及到變化）就應(yīng)該是這樣：

初始狀態(tài)：

? 位移：X軸 0

? 旋轉(zhuǎn) ：0度

? 尺寸：1

? 透明度：0.2

結(jié)束狀態(tài)：

? 位移：X軸 200px

? 旋轉(zhuǎn)：+180度

? 尺寸：1.5

? 透明度：1

時(shí)長(zhǎng)

第二個(gè)關(guān)鍵參數(shù)就是時(shí)長(zhǎng)，這個(gè)顧名思義也就是動(dòng)畫播放的時(shí)間長(zhǎng)度。無(wú)論變化是多是少，簡(jiǎn)單還是復(fù)雜，我們需要把每一段變化的時(shí)間確定，時(shí)間短干脆利落，時(shí)間長(zhǎng)輕緩柔和。標(biāo)注清楚起始時(shí)間和終止時(shí)間。

曲線

曲線描述的是物體運(yùn)動(dòng)時(shí)候的速度變化，如果說(shuō)變化和時(shí)長(zhǎng)是動(dòng)效的本體，那么曲線就是動(dòng)效的靈魂。對(duì)于一個(gè)運(yùn)動(dòng)的物體，同樣的變化，同樣時(shí)間，賦予不同的速度曲線，會(huì)讓它的動(dòng)效產(chǎn)生豐富的變化。 所以在動(dòng)效設(shè)計(jì)中，曲線也是設(shè)計(jì)者最為關(guān)注的部分。

最基礎(chǔ)的速度曲線有線性（就是全程勻速）、緩入、緩出、緩入緩出四種，動(dòng)效描述中要闡述清楚使用的是何種曲線，如需特殊曲線需要展示出來(lái)。

「微交互的測(cè)試過(guò)程」

發(fā)現(xiàn)問(wèn)題

使用下面描述的流程作為測(cè)試微交互的開始：

1.首先，詢問(wèn)用戶希望通過(guò)這個(gè)微交互做什么？在使用這個(gè)微交互之前，問(wèn)問(wèn)用戶是否需要學(xué)習(xí)什么東西，特別是如果他們以前從未使用過(guò)類似的交互時(shí)。

2.允許用戶在沒(méi)有任何幫助的情況下使用這個(gè)微交互，并實(shí)時(shí)收集定量數(shù)據(jù)。

3.觀察用戶使用微交互的每一步。傾聽用戶對(duì)所做選擇的印象和描述。觀察微交互規(guī)則對(duì)參與者是否作用明顯，注意差異。

4.與用戶溝通，記錄用戶想讓微交互幫助記住哪些數(shù)據(jù)。

5.最后，請(qǐng)用戶表達(dá)在這個(gè)微交互中還有哪些地方是需要繼續(xù)優(yōu)化的。

這個(gè)過(guò)程能幫助你發(fā)現(xiàn)微交互的很多問(wèn)題。它能驗(yàn)證一般的目標(biāo)和期望。對(duì)兩個(gè)用戶團(tuán)隊(duì)重復(fù)這個(gè)過(guò)程至少兩次。在既定時(shí)間內(nèi)，利用用戶反饋來(lái)分析和優(yōu)化你的微交互。

使用研究數(shù)據(jù)

這些是可以測(cè)試的一些定量數(shù)據(jù)：

? 完成率

? 微交戶互持續(xù)時(shí)間

? 具體每一步的持續(xù)時(shí)間

? 步驟數(shù)

? 點(diǎn)擊/敲擊/選擇的次數(shù)

? 人為失誤的數(shù)量

優(yōu)化微交互并重新測(cè)試一遍，看看是否需要進(jìn)一步改進(jìn)。 另外也需要注意樣本量，測(cè)試用戶不多可能會(huì)使錯(cuò)誤或偏好變得更加明顯。

數(shù)據(jù)可以幫助你做出更好的決策，但不能完全依賴數(shù)據(jù)，很多情況還是需要具體問(wèn)題具體分析。

「總結(jié)」

1.微交互可以提高產(chǎn)品的用戶體驗(yàn)，幫助用戶記住你的品牌。增添產(chǎn)品親和力和趣味性。微交互存在的目的是讓用戶感覺(jué)順暢、愉悅，設(shè)計(jì)師借此創(chuàng)造出吸引人或者令人高興的瞬間，或者說(shuō)，讓用戶在這一刻感受到人性化。

2.動(dòng)效的作用是更好的呈現(xiàn)界面元素間的邏輯關(guān)系，幫助用戶梳理信息層級(jí)，規(guī)避了扁平化的缺陷；有趣的動(dòng)畫可以減緩用戶使用過(guò)程中的負(fù)面情緒，增加用戶參與度，讓用戶更加愉悅的體驗(yàn)產(chǎn)品。

3.動(dòng)效不是越多越好，越炫酷越好，要針對(duì)產(chǎn)品自身定位來(lái)設(shè)計(jì)動(dòng)效，讓用戶意識(shí)不到動(dòng)效的存在，才是最合適的，否則會(huì)適得其反，干擾用戶操作。

（注意：以上內(nèi)容均有參考，作者只負(fù)責(zé)梳理和總結(jié)，圖片均來(lái)源于網(wǎng)絡(luò)，侵刪）

作者：33

公眾號(hào)： Panda Plus