本文微交互動(dòng)效設(shè)計(jì)描繪的方向?qū)儆诠δ苄詣?dòng)效，適用于UI界面的交互動(dòng)效設(shè)計(jì)。具有清晰的邏輯目的，著重幫助用戶理解和有效的度過當(dāng)前所處的狀態(tài)。動(dòng)效涵蓋范圍有入場(chǎng)/出場(chǎng)動(dòng)效（enter & exit）、過渡動(dòng)效（transition）、通知?jiǎng)有В╪otice）和加載動(dòng)效（loading）。

Web、App中添加動(dòng)效設(shè)計(jì)所遵循的12條原則

• 緩動(dòng)（Easing）、偏移量和延遲（Offset & Delay）主要與時(shí)間相關(guān)。
• 父子關(guān)系（Parenting）用于闡述元素之間的關(guān)系。
• 變形（Transformation）、數(shù)值變化（Value Change）、遮罩（Masking）、覆蓋（Overlay）、生成（Cloning）多作用于加強(qiáng)元素自身的延續(xù)性。
• 視差（Parallax）多作用于表明元素的層級(jí)關(guān)系。
• 蒙層（Obscuration）、多維化（Dimensionality）、鏡頭平移與縮放（Dolly & Zoom）作用于表明元素與空間的關(guān)系。

1. 緩動(dòng)（Easing）

當(dāng)運(yùn)動(dòng)發(fā)生的時(shí)候，元素運(yùn)動(dòng)速率的變化符合用戶的預(yù)期。自然界之中是很少存在完全線性的運(yùn)動(dòng)的，沒有任何東西能夠完美的保持勻速運(yùn)動(dòng)，緩動(dòng)效果能夠讓運(yùn)動(dòng)看起來更加接近自然，符合用戶的認(rèn)知，達(dá)到用戶的預(yù)期。

例子：你手機(jī)里面幾乎所有動(dòng)態(tài)效果都是緩動(dòng)的，看起來是不是非常舒服和諧呢？

2. 偏移量和延遲（Offset & Delay）

利用偏移和延遲來錯(cuò)開元素的運(yùn)動(dòng)時(shí)間，表明元素之間的層級(jí)與關(guān)系。設(shè)計(jì)師利用錯(cuò)開運(yùn)動(dòng)時(shí)間的方法，讓信息或界面元素按照有所區(qū)別的秩序進(jìn)退場(chǎng)，利用明顯的錯(cuò)序運(yùn)動(dòng)暗示用戶信息與界面元素之間或許存在某些區(qū)別，或利用錯(cuò)序的方法吸引用戶的注意。但一般情況設(shè)計(jì)師不應(yīng)該使用太多的延時(shí)效果，因?yàn)槠┤缯f網(wǎng)絡(luò)的加載本身就已經(jīng)需要時(shí)間，所以延遲效果的使用最好只用于服務(wù)于技術(shù)。

例子：蘋果官網(wǎng)各商品詳情頁(yè)均有大量運(yùn)用。

3. 父子關(guān)系（Parenting）

在用戶進(jìn)行操作時(shí)，有父子關(guān)系的元素幫助用戶更好地理解它們之間的層級(jí)關(guān)系以及帶來更加有理可循的操作反饋。正如上面給出的這張動(dòng)圖，位于下方的方塊的左右運(yùn)動(dòng)，而位于上方的方塊跟隨下方方塊進(jìn)行左右運(yùn)動(dòng)并同時(shí)進(jìn)行自己的縮放運(yùn)動(dòng)，他們之間構(gòu)成了父子關(guān)系。說得簡(jiǎn)單一點(diǎn)，父子關(guān)系就是子元素的某個(gè)屬性的值隨父元素的某個(gè)屬性參數(shù)的值按照一定的比例進(jìn)行變化。

例子：Google Allo 按住發(fā)送按鈕向上滑動(dòng)，發(fā)送內(nèi)容字體變大。

4. 變形（Transformation）

利用變形來告知用戶元素的狀態(tài)或作用發(fā)生了改變。人們對(duì)于實(shí)物的變形是敏感的，合理的變形能夠清晰高效地將正確的信息以最高效、最令人愉悅的方式傳遞給用戶。注意，這里所說的變形并不一定要像上面那種動(dòng)圖一樣動(dòng)作那么大才算變形。或許是顏色的變化，也有可能是角度的改變，這些都能達(dá)成我們想要的效果。

例子：知乎 Live 選擇贊助金額的動(dòng)畫效果。

5. 數(shù)值變化（Value Change）

連續(xù)性的數(shù)值變化動(dòng)態(tài)效果能讓用戶清晰地看見數(shù)值到底是在變多還是變少。關(guān)于這一點(diǎn)，我想多用兩張動(dòng)圖呈現(xiàn)，大家可以看到，數(shù)值變化有連續(xù)性動(dòng)態(tài)效果的一張是不是更能讓你知道數(shù)字是在變多還是變少？想象一下，假如在某款理財(cái) App 里面，這個(gè)數(shù)值是你的錢的話，那么數(shù)量的增加與減少這個(gè)信息對(duì)于用戶來說就非常重要了。

例子：京東金融手機(jī) App，“總資產(chǎn)”，及“白條”頁(yè)面的數(shù)值變化效果。

6. 遮罩（Masking）

遮罩型的動(dòng)畫是在界面元素進(jìn)場(chǎng)或者退場(chǎng)的時(shí)候創(chuàng)造連續(xù)性效果的一種選擇。這種類型的動(dòng)效似乎在 Material Design 里面比較常見，所以沒有使用過原生安卓系統(tǒng)的伙伴們可能比較陌生。

例子：原生安卓系統(tǒng)（5.0 以上 7.0以下版本可見，7.0取消了菜單按鈕，以上劃操作代替。）點(diǎn)擊菜單按鈕呼出菜單的動(dòng)畫效果。美圖秀秀手機(jī) App 處于首頁(yè)的各個(gè)功能按鈕點(diǎn)擊后的轉(zhuǎn)場(chǎng)效果。

7. 覆蓋（Overlay）

覆蓋用于在扁平化（沒有厚度）設(shè)計(jì)的界面上闡明兩個(gè)相互獨(dú)立的元素的位置關(guān)系。在實(shí)際上沒有厚度、沒有縱深概念扁平化設(shè)計(jì)中，覆蓋動(dòng)畫的使用能讓本來就非常有限的屏幕空間被更好的利用起來。

例子：微信橫劃刪除聊天記錄。

8. 蒙層（Obscuration）

蒙層與覆蓋非常相似，在沒有縱深概念的扁平化設(shè)計(jì)中表現(xiàn)縱深，它并不完全將處于下方的元素遮蓋住，而通常是通過高斯模糊或變暗的手段讓下方的元素保留一定的可視性。

例子：在 iOS 里面隨處可見的毛玻璃效果。

9. 生成（Cloning）

當(dāng)元素被生產(chǎn)出來時(shí)，表達(dá)元素與元素之間的連續(xù)性的關(guān)系。這種動(dòng)畫能夠非常清晰地表達(dá)因某個(gè)操作而產(chǎn)生的一個(gè)或數(shù)個(gè)事件發(fā)生以及它們之間的關(guān)系。

例子：蘋果的 Messages 發(fā)送信息的效果。

10. 視差（Parallax）

界面元素同時(shí)開始運(yùn)動(dòng)，但運(yùn)動(dòng)的效率不同，構(gòu)成一種視差的效果。用戶在進(jìn)行滾動(dòng)操作的時(shí)候通過視差效果可以在扁平化的界面里面表現(xiàn)空間中個(gè)元素的位置及層級(jí)關(guān)系。這種效果還非常的美觀高端，能讓整個(gè)頁(yè)面看起來更加活潑一些。通過視差的特性，我能引導(dǎo)用戶去關(guān)注應(yīng)該應(yīng)該關(guān)注的地方，運(yùn)動(dòng)效率高的元素通常表達(dá)的是距離用戶更近，適合承載更加有使用性意義的重要信息，而運(yùn)動(dòng)效率較低的元素通常表達(dá)的是距離用戶較遠(yuǎn)，而且或許沒有承載什么重要的信息。

例子：蘋果官網(wǎng)各商品詳情頁(yè)。

11. 多維化（Dimensionality）

將界扁平化的界面元素多維化從而表達(dá)空間中個(gè)元素的位置及層級(jí)關(guān)系。其實(shí)扁平并不符人類認(rèn)知邏輯的（而符合人類認(rèn)知邏輯是幾乎可以說是可用性的第一原則），所以人們?cè)诒馄交慕缑胬锩嫦伦懔斯Ψ騺碓跊]有縱深和厚度的界面里表達(dá)縱深和厚度，這句話讀起來非常拗口，但實(shí)際上就是這樣的。多維化的使用比較少，因?yàn)樘砑涌v深感有很多種手法（覆蓋、蒙層、陰影，etc.），而多維化的開發(fā)成本是比較高的。

例子：iBooks 的翻頁(yè)效果和 Flipboard 的翻頁(yè)效果，滴滴打車退出呼叫狀態(tài)的 Appbar 動(dòng)畫。

12. 鏡頭平移與縮放（Dolly & Zoom）

鏡頭平移與縮放聽起來好像是一樣的東西，事實(shí)上確完全是兩碼事。鏡頭平移是拍攝的術(shù)語(yǔ)，被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)，縮放是鏡頭與被攝物體在位置上保持靜止而被攝物自身進(jìn)行縮放。鏡頭平移與縮放效果表明元素與空間之間的關(guān)系，也能表現(xiàn)出一種縱深感。

例子：iOS 的解鎖動(dòng)畫是典型的鏡頭平移效果，而雙擊放大圖片操作的那個(gè)動(dòng)畫是典型的縮放效果。

優(yōu)秀的微動(dòng)效，歸納成三個(gè)核心原則

克制有度：控制出現(xiàn)頻率和出現(xiàn)時(shí)長(zhǎng)，不增加額外的操作，不干擾用戶和給予用戶足夠的理解時(shí)間。

清晰聚焦：符合邏輯，重點(diǎn)突出，給予用戶充足清晰的閱讀時(shí)間。

自然流暢：保持基本視覺的連續(xù)性，緩沖過渡，做到一氣呵成。

I Remember?— 一個(gè)有關(guān)回憶的網(wǎng)站，點(diǎn)開后給你耳目一新的瀏覽體驗(yàn)。

Intro

結(jié)語(yǔ)

交互微動(dòng)效以功能性為主，須遵循克制有度、清晰聚焦、自然流暢這三個(gè)核心設(shè)計(jì)原則。在設(shè)計(jì)前，思考希望如何影響用戶的注意力、動(dòng)效的目標(biāo)是什么、動(dòng)效出現(xiàn)的頻率和觸發(fā)機(jī)制是怎樣的，在設(shè)計(jì)時(shí)選擇合適動(dòng)效類型和持續(xù)時(shí)間并關(guān)注反饋的響應(yīng)時(shí)間，做到有理有據(jù)、令人信服。

譯者：L_Lainey

自譯參考：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

本文由 @L_Lainey 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議