編輯導(dǎo)語：動效設(shè)計如今是非常重要的，我們手機里有各種App，你使用時如果連個最基本的加載的動態(tài)效果都沒有，是不是會覺得很奇怪；優(yōu)秀的動效設(shè)計可以提升產(chǎn)品體驗，提高用戶粘性；本文作者分享了關(guān)于動效設(shè)計原理，我們一起來看一下。

動效在產(chǎn)品設(shè)計中扮演著重要角色，它的好壞與否直接影響了用戶的使用體驗和對產(chǎn)品的印象。

動效對產(chǎn)品的可用性體驗有多維度的影響，在界面中動效不僅僅是一種視覺裝飾，它能夠提升產(chǎn)品的參與度并擴展交流的范圍。

本文追根溯源，先從動效的起源講起，一步步推進與產(chǎn)品、體驗之間的關(guān)系；最后通過案例分析動效設(shè)計的原理和應(yīng)用，一起來看看吧～

一、動效設(shè)計的起源

動效與用戶體驗的結(jié)合相對較新，其根源是迪士尼動畫設(shè)計的十二個條基本原理。

迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規(guī)律，這些原理能讓繪制的卡通角色移動和表演，但不能充分滿足現(xiàn)代UI界面的交互需求。

為了彌合這個差距，動效專家Canedo Estrada改編的《動效設(shè)計的10條原理》更適合應(yīng)用到數(shù)字產(chǎn)品設(shè)計中。

在圍繞界面元素建立用戶體驗時，重新定位動效原理的關(guān)鍵在于：

• 將動效設(shè)計與UI動畫區(qū)分開；
• 闡明動效如何幫助可用性；
• 解開核心動效的內(nèi)部工作機制。

二、動效設(shè)計與用戶體驗

在討論動效設(shè)計的原理之前，重要的是要強調(diào)動效不僅僅是裝飾，而是一種用來幫助用戶體驗的行為。

動效設(shè)計涉及兩種基本的交互類型：實時和非實時。

1. 實時

當(dāng)用戶在屏幕上點擊UI元素時，實時交互提供即時反饋，會對用戶的操作做出即時響應(yīng)。

2. 非實時

非實時交互發(fā)生在用戶操作后，這意味著用戶需要經(jīng)過短暫的轉(zhuǎn)場才能看到結(jié)果，然后再繼續(xù)。

另外動效設(shè)計通過四種不同的方式來提升產(chǎn)品的可用性：

• 期望：當(dāng)用戶與界面交互時，他們期望看到哪些行為？動效是否符合預(yù)期或引起混亂？
• 連續(xù)性：交互在整個體驗中是否發(fā)生一致的運動行為？
• 敘述：觸發(fā)的動作是否與滿足用戶意圖的事件的邏輯進程相關(guān)聯(lián)？
• 關(guān)系：UI界面的空間、美學(xué)和層級結(jié)構(gòu)如何相互關(guān)聯(lián)并影響用戶的決策？動效如何影響各種元素的關(guān)系？

三、產(chǎn)品動效設(shè)計原理

這里提供12種動效設(shè)計原理的解析，每一種對應(yīng)不同的案例，從更直觀的角度來解讀抽象的原理。

1. 緩動（Easing）

緩動效果模擬了現(xiàn)實世界中對象隨時間加速或減速的方式，它適用于所有運動的UI元素；下圖中的卡片和對應(yīng)的椅子移動速度很快，但由于緩動效果它們可以平穩(wěn)地受到控制。

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

當(dāng)多個UI元素同時快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素自身的功能性。

偏移和延遲會在移動的UI元素之間創(chuàng)建層級結(jié)構(gòu)，并傳達它們相關(guān)但又不同的消息。

元素的時間、速度和間距不是完全同步的，而是交錯排列從而產(chǎn)生一種微妙的“一個接一個”的效果；當(dāng)用戶在屏幕之間穿梭時，偏移和延遲表明存在多個交互選項。

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

父子關(guān)系將一個元素的屬性鏈接到其他元素中，當(dāng)父元素中的屬性更改時，子元素的鏈接屬性也會更改，同時所有元素的屬性都可以相互鏈接。

在下圖中，將父元素（藍色滑塊）的位置與子元素（燈泡發(fā)光效果&光照強度）相關(guān)聯(lián)；當(dāng)父元素左右移動時，子元素的發(fā)光效果的范圍和光照強度的數(shù)值會發(fā)生變化。

父子關(guān)系在元素間創(chuàng)建關(guān)系并建立層級結(jié)構(gòu)，允許多個元素同時與用戶交互。因此這種效果非常適用于實時交互中。

4. 轉(zhuǎn)換（Transformation）

當(dāng)一種UI元素變成另一種形式時就會發(fā)生轉(zhuǎn)換；例如，轉(zhuǎn)換展示了下載的開始、中間和完成狀態(tài)——下載按鈕轉(zhuǎn)換為進度條，進度條轉(zhuǎn)換為完成圖標(biāo)。

從UX角度看，轉(zhuǎn)換效果告知用戶元素的狀態(tài)發(fā)生了變化并將信息傳遞給用戶，提高了用戶的認(rèn)知度。

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

數(shù)值的變化（數(shù)字、文本或圖形）在數(shù)字界面中非常豐富，從銀行APP到日歷到電商網(wǎng)站的各種產(chǎn)品中都會出現(xiàn)。

在某種程度上，數(shù)據(jù)的動態(tài)表達和交流可能會對數(shù)據(jù)的價值產(chǎn)生影響；例如下圖中的數(shù)值被動態(tài)引入，向用戶顯示他們有能力影響數(shù)據(jù)，提升了參與活動的意愿。

6. 遮罩（Masking）

遮罩是對界面上的部分內(nèi)容進行戰(zhàn)略性的顯示和隱藏；通過改變元素的形狀和比例，在改變元素效果的同時允許元素本身保持可識別性；因此，照片和插圖等視覺形式是理想的選擇。

從可用性的角度來看，設(shè)計師可以通過遮罩向用戶展示產(chǎn)品正在進行一系列的交互。

7. 覆蓋（Overlay）

二維空間中沒有深度，元素只能沿X或Y軸移動，疊加在界面中創(chuàng)造出前景/背景相區(qū)分的位置關(guān)系；通過模擬深度，覆蓋可以根據(jù)用戶的需要隱藏和顯示元素。

在使用覆蓋時，信息層級結(jié)構(gòu)是重要的考慮因素；例如，用戶在筆記應(yīng)用中首先應(yīng)該看到的是筆記列表，然后使用覆蓋來顯示每個筆記的輔助選項，如刪除或歸檔。

8. 克隆（Cloning）

克隆是將現(xiàn)有的對象拆分成新對象，這是一種突出顯示重要信息或交互選項的方法；通過克隆將元素與界面相鏈接，如果元素只是突然出現(xiàn)或消失沒有關(guān)聯(lián)性，那么用戶將缺乏信心去交互。

9. 模糊（Obscuration）

想象一扇磨砂玻璃門，雖然看不清門后的東西但是我們能察覺到門后事物的存在。

模糊的工作原理是一樣的，它為用戶提供提示，讓用戶意識到自己正在操作的界面之后還有其他的層級結(jié)構(gòu)，導(dǎo)航菜單、密碼屏幕和文件窗口是常見的示例。

10. 視差（Parallax）

當(dāng)兩個(或更多)元素同時以不同的速度移動時會構(gòu)成視差效果。

視差的主要目的是劃分層級結(jié)構(gòu)：

• 可交互的元素移動速度更快，出現(xiàn)在前景中；
• 非交互式元素移動速度較慢，退到背景中。

視差引導(dǎo)用戶點擊可交互的元素，同時允許非交互的元素保留在屏幕上并保持設(shè)計的統(tǒng)一性。

11. 維度（Dimensionality）

維度使界面元素具備具多個方向的交互，這種行為是使元素看起來是可折疊、可翻轉(zhuǎn)、浮動的或具有深度。

作為一種敘述性工具，維度意味著元素的不同側(cè)面是相互聯(lián)系的，并且可以實現(xiàn)無縫的屏幕過渡。

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

平移與縮放通過視角的變化能產(chǎn)生更多空間上的體驗，逐級遞進顯示更高級別的細節(jié)。

平移：點擊元素后發(fā)生距離遠近的平移，用戶的視點會越來越接近圖像（一個人拿著照相機走到一朵花前面近距離拍攝）。

縮放：用戶的視角與圖像的距離保持不變，但圖像在屏幕中的比例會增加（這個人站在原地不動，只利用相機的變焦功能使花顯得更大）。

三、總結(jié)——動效即交流

互動體驗要求動效具備敏捷和微妙的形式，堅持動效設(shè)計原理，即使最基本的界面元素也能成為交流的復(fù)雜媒介。

動效設(shè)計與產(chǎn)品用戶體驗之間的關(guān)系正在迅速成熟，而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝。

原文：toptal.com/designers/ux/motion-design-principles

原文作者：Micah Bowers

譯者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

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

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