不要隨便設計UI動效，請先明白這12項動效原理

Sponsor

前言：有不少動效設計的初學者，他們剛開始做UI的動效設計基本都是很生硬，沒有一種自然的感覺。他們做的動效往往以裝飾性為主，僅僅如此的話，可能會損害產品的可用性。今天給大家介紹12項動效設計原理，這些都適合用于UX/UI設計項目中，是非常有用的運動原理。

動效對于數字產品的用戶體驗有著深遠的影響，但如果界面元素沒有表現出基本的動效設計原理，那么會損害產品的可用性。在用戶界面中，動效不僅僅是一種視覺裝飾，而是一種強大的力量，它可增強產品參與度并擴展設計交流的范圍。

我們的世界是運動著的。即便在靜止的瞬間，葉子也會發抖，肺部也會擴張。在數字產品設計領域中，動效似乎是第二自然，是日常工作的擴展，可以毫不費力地加以利用。要是那是真的就好了。

只需問問第一次制作動畫UI元素的人。數小時的努力只產出了業余的成果。把一張卡片滑到屏幕上這樣簡單的事情看起來都很尬。這是為什么？

從理論上講，讓UI元素移動是很容易。在預定路徑上定義關鍵點，然后軟件對間隙進行補間。而實際上，它不是那樣工作的。工具和技術是必不可少的，但它們的力量來源于基本原理。如果要提高數字產品的可用性，則必須以適用于無數用例的不變行為規則為基礎。

一、動效設計的起源

動效設計和UX的結合相對較新，而其根源是迪士尼。弗蘭克·托馬斯（Frank Thomas）和奧利·約翰斯頓（Ollie Johnston）是迪斯尼（Walt Disney）最受重視的動畫師，也是匹諾曹（Pinnochio），小鹿斑比（Bambi）和狂想曲（Fantasia）等經典作品的重要貢獻者。他們的12項動畫基本原理在電影、電視和數字內容的動態圖形中仍然具有影響力。

迪斯尼原理為了生動地講故事，提煉出了身體物理運動的基本定律。它們賦予了畫中的角色移動和情感，但它們不足以滿足現代用戶界面中的交互動效需求。

當代設計師試圖彌補這一缺口。一個更具說服力的例子是由動畫專家Jorge R. Canedo Estrada改編的迪士尼電影《動畫設計的10項原則》（the?10 Principles of Motion Design）。不過如果要將這些整體應用到數字產品設計中，這些要點仍然需要轉化。

Jorge R. Canedo Estrada的運動設計10原理

圍繞交互UI元素（以及它們對用戶體驗的重要性）重新定義運動原理，最雄心勃勃的嘗試是Issara Willenskomer的《運動宣言》中的用戶體驗。它的深度令人吃驚，但并不能讓人輕松閱讀。

在建立UX動效的12條原則時，Willenskomer

• 區分了動畫設計和UI動效
• 闡明了動效如何提高可用性
• 解開了核心動效行為的內部運作方式

二、動效設計和用戶體驗：重要區別

在講解動效設計原理之前，有必要重點說明一下與Willenskomer宣言中的動效的主要區別。

動效不僅僅是裝飾

動效設計不是UI動畫的代名詞。這一點很關鍵，因為UI動畫幾乎總是被當作一種經過深思熟慮的裝飾，而與UX無關（除了增加魅力）。動效不是裝飾，它是行為，而行為只能幫助或阻礙用戶體驗。

兩種互動類型：實時與非實時

動效設計涉及兩個基本交互：實時和非實時。

• 實時：當用戶在屏幕上操作UI元素時，實時交互可提供即時反饋。換句話說，動效行為會立即響應用戶輸入。
• 非實時：非實時交互發生在在用戶輸入之后，這意味著用戶必須短暫暫停并觀察所產生的運動行為，然后才能繼續。

實時交互: 動效行為立即響應用戶的輸入. (Stan Yakusevich)

非實時交互: 在用戶觸發交互后，必須短暫暫停并觀察運動行為。(Vitaly Rubtsov)

動效支持可用性

動效設計必須以四種不同的方式支持可用性：

• 期望值：當用戶與UI元素交互時，他們期望看到哪些運動行為？動效是符合預期還是引起迷惑？
• 連續性：交互是否在整個用戶體驗中產生一致的運動行為？
• 故事性：交互及其觸發的動作行為，是否與滿足用戶意圖的事件的邏輯進程相關聯？
• 關聯性：UI元素的空間，美學和層次結構屬性如何相互關聯并影響用戶的決策？動效如何影響存在的各種元素關系？

三、數字產品的12項動效原理

1. 緩動

緩動是模擬現實對象隨時間加速和減速的方式。它適用于所有的UI動效元素。

緩動的對立面是直線運動。直線運動中的UI元素會立即從靜止速度變為全速，從全速直接變為靜止。這種行為在現實世界中不存在，對用戶來說似乎停止了。

卡片和對應的椅子移動很快，但他們受緩動影響，移動平滑而在受控中停止。 (Saptarshi Prakash)

2.偏移和延遲

當多個UI元素同時并快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身的功能。

偏移和延遲會在同時移動的UI元素之間創建層次結構，并傳達它們相關但又不同的信息。元素的時間、速度和間距不是完全同步，而是交錯排列，從而產生微妙的“一個接一個”的效果。

當用戶切換頁面時，偏移和延遲表明存在多個交互選項。

比特幣App一次顯示了多個元素。 它們的出現略微有些錯開，從而讓用戶感知這些元素是相關聯但又截然不同。(Gapsy Studio)

3. 父級

父級將一個UI元素的屬性鏈接到其他UI元素的屬性。當父級元素中的屬性更改時，子級元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。例如，父級元素的位置可以綁定子級元素的大小比例。當父級元素移動時，子級元素的大小會增加或減小。

父級會在UI元素之間創建關系，建立層次結構，并允許多個元素立即顯示在用戶面前。因此，父級在實時交互中使用時影響最大。

這里，藍色滑塊的位置控制著背景遮罩的不透明度、燈泡周圍的輝光效果以及光強度刻度的數值。(Ayoub Kada)

4. 轉換

當一個UI元素變成另一個UI元素時，將發生轉換。例如，下載按鈕轉換為進度條，并進一步轉變為完成圖標。

從用戶體驗的角度來看，轉換是向用戶展示其與目標相關的狀態的有效方法（系統狀態的可見性）。當UI元素顯示從開始到結尾的過程時，這就特別有用（例如下載文件）。

轉換顯示了下載的開始，過程和完成。?(Aaron Iker)

5. 值的變化

在數字界面中，值的表現形式（數字的，基于文本的或圖形的表示）很豐富，經常出現在從銀行App到個人日歷再到網購站點的各個產品中。由于這些表現形式都與實際存在的數據相關，因此它們可能會發生變化。

值的變化傳達了數據展示的動態性，并告知用戶數據是交互式的，并且可能會受到一定程度的影響。當沒有動效的出現數值，用戶參與數據的意愿降低。

動態引入值向用戶顯示他們有能力影響數據。（Taras Migulko）

6.遮罩

遮罩用于UI元素各部分的顯示和隱藏。遮罩通過更改元素范圍的形狀和大小，保持元素本身的辨識度的同時，實現了功能的轉變。由此，像照片和插圖這樣的詳細視覺效果是理想選擇。

從可用性的角度來看，設計師可以通過遮罩向用戶顯示他們正在進行一系列的交互。

遮罩可用于從圖像捕獲，到上傳到電商平臺的過渡。（SELECTO）

7.疊加

在平面空間中，沒有深度，UI元素只能沿X或Y軸移動。疊加會在UI的平面中產生前景/背景區別的錯覺。通過模擬深度，疊加可以根據用戶需要隱藏和顯示元素。

使用疊加時，信息層次結構是重要的考慮因素。例如，用戶在做筆記應用程序中應該首先看到的是他們的筆記列表。然后，疊加可用于為每個消息（如Delete或Archive）顯示輔助選項。

疊加允許用戶快速歸檔或刪除此筆記應用程序中的條目。(Karan Kapoor)

8.克隆

克隆是將UI元素拆分為其他元素的一種動效。這是突出顯示重要信息或交互選項的明智方法。

當UI元素在界面中具體化時，它們需要一個清晰的原點來鏈接到屏幕上已經存在的元素。如果元素只是簡單的放大或消失，那么用戶會不太清楚頁面中間的交互邏輯。

用戶可以放心地單擊彩色圓圈，它們顯然來源于“添加注釋”圖標。?(Ariuka)

9. 模糊

想象磨砂玻璃門。它需要交互才能打開，但是可以辨別另一端正在等待什么（在某種程度上）。

模糊處理的方式相同。它為用戶提供了一個界面，該界面要求進行交互，同時顯示要跟隨的屏幕提示。常見的示例有：導航菜單，密碼屏幕和文件夾/文件窗口。

模糊處理為用戶提供了重要的互動方式，同時使他們保持產品敘事的方向。?(Kyle Abarquez)

10. 視差

當兩個（或多個）UI元素同時移動但速度不同時，將顯示視差。再次強調，其目的是為了建立層次結構。

• 交互式元素移動速度更快，并顯示在前景中。
• 非交互式元素移動速度變慢并退回到背景。

視差引導用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設計統一性。

使用視差時，最重要的交互式元素移動最快，而非交互式元素移動較慢并退回到背景。(Tubik)

11.維度

維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉的，浮動的或具有逼真的深度屬性而實現的。

作為一種敘事手段，維度意味著UI元素的不同側面被鏈接在一起，并實現了無縫的屏幕過渡。

維度意味著2D UI元素具有多個交互方面，就像物理世界中的對象一樣。(Sang Nguyen)

12.移動式攝像機和縮放

移動式攝像機和縮放允許用戶在空間上查看 UI元素，或增加元素比例以顯示更多細節。

• 移動式攝像機：發生在用戶的角度更接近（或遠離）UI元素時。想象一下，一個拿著照相機走到一朵花的人近距離拍攝。
• 縮放：使用縮放時，用戶的視角和UI元素保持固定，但是該元素在用戶屏幕內的被放大（或縮?。，F在想象該人保持姿勢并使用相機的變焦功能使花朵顯得更大。

移動式攝像機：用戶的視點似乎越來越接近背景圖像。(Yanosh)

縮放：用戶的視角不會更接近圖像。而是圖像的比例會增加。(Victor Aldabalde)

四、動效是一種溝通方式

交互體驗需要各種輕快和微妙的動效形式。當堅持動效設計原則時，即使最基本的UI元素也成為人類復雜交流的媒介。如果忽略動效原理，動效就體現了自然界所沒有的特征。再多的美學光彩也無法克服由此產生的笨拙。

動效設計與數字產品用戶體驗之間的關系正在迅速成熟。有原則的動效方法可以防止過度依賴趨勢，工具和技術的短暫效用。更棒的是，它跨越了2D屏幕上元素的抽象運動與3D世界中對運動感知之間的鴻溝。

原鏈接：https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79
12項動畫基本原理：http://frankandollie.com/PhysicalAnimation.html
Creating Usability with Motion: The UX in Motion Manifesto:?https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
譯者：拾柒醬（zcool.com.cn/u/13687583）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。