支付寶設計規范往期回顧：

• 《內部教程！超詳細的支付寶設計規范之圖形圖案篇》
• 《內部教程！超詳細的支付寶設計規范之配色篇》
• 《內部教程！超詳細的支付寶設計規范之線上字體篇》
• 《內部教程！超詳細的支付寶設計規范之線下字體篇》
• 《內部教程！超詳細的支付寶設計規范之版式篇》

一、可用性價值

動效很容易被象成某種增強愉悅的東西，自身并不具備什么價值。常常被當做可有可無部分，通常作為最后一步點綴。實際上，動效是一種更高級的設計展現形式：表達界面元素在交互事件下的行為動作。它在用戶體驗中的價值可以分為：信息交互、操作反饋、緩解負面情緒、創造個性優雅的愉悅體驗。

1. 信息交互

元素的狀態發生變化時銜接的動效，使過渡更自然。同時，引導用戶在視圖中的視覺焦點，暗示元素之間的層級關系。

△ 反饋操作&反饋狀態

2. 操作反饋

用戶交互時元素變化，為操作提供可視化的實時反饋。建立起虛擬元素與真實世界之間的認知聯系，讓操作符合用戶的直覺。

△ 反饋操作&反饋狀態

3. 緩解負面情緒

等待，讓用戶感到焦慮；報錯，讓用戶感到挫敗。加入有趣的動畫可以緩解負面情緒，提高用戶對產品的容忍度。

△ 緩解等待&錯誤焦慮

4. 創造個性優雅的體驗

產品中展示品牌調性的趣味性動效，可以強化品牌的認知，創造愉悅的使用體驗，加深用戶對產品的認可度。

△ 動效創造個性優雅的體驗

二、設計原則

動效通過模擬真實世界的運動，建立起用戶與手機屏幕內虛擬世界的認知連續，從而創造出符合用戶認知習慣的操作體驗，使 APP 的操作更自然流暢。

同時，品牌的不同特性所表現出來的行為和動作也不盡相同。所以，品牌特性亦會對動效的設計有所影響，并產生指導和約束。

△ 品牌關鍵詞和動效原則

安全、專業、信賴、便捷、想象力是支付寶品牌特性的五個關鍵詞，從這五個關鍵詞我們挖掘和推導出動效設計的四個基本原則：真實自然、快速響應、簡單明了、刻意編排。

1. 真實自然

動效蘊含了元素的運動規律、材質特性、空間關系、屬性變化，這些應該符合真實世界的物理規律，不能增加用戶的理解和認知成本。

運動定律

真實世界的運動遵循基本的物理規律。物體受力發生變化時，運動狀態會發生變化。根據牛頓的力學定律，我們可以得到了符合運動規律的兩條二維曲線。

曲線一：勻速運動

根據牛頓第一定律——慣性定律，「任何物體都要保持靜止狀態或勻速直線運動狀態，直到外力迫使它改變運動狀態?！?/p>

下面的動畫展示了物體到達目的地的過程是「靜止 - 勻速運動 - 到達」，沒有加速和減速的過程。由于阻力的存在，我們模擬出來的勻速直線運動在真實世界中是基本不存在的，所以動畫效果看起生硬不自然。設計中一定要避免這種生硬的動效。

△ 勻速直線運動

曲線二：勻加減速運動。

根據牛頓第二定律：「物體加速度的大小跟作用力成正比，跟物體的質量成反比，且與物體質量的倒數成正比；加速度的方向跟作用力的方向相同?！?/p>

下面的動畫展示了物體到達目的地的過程是「靜止 - 加速運動 - 減速運動 - 到達」，在靜止和運動狀態的轉換過程中加入了加速和減速的過程，這符合自然的基本規律，所以動畫看起來自然了很多。

△ 勻加減速運動

材質特征

好的動效在滿足了基本的物理原則之后還有很多「材質」上的細節補充，而材質特征影響到物體的質量和彈性等。

前面的運動規律講到物體的加速度和質量成反比，所以材質的特征會影響到運動曲線的具體曲率，下圖的曲線描述了重和輕兩種材質物體的運動曲線。

△ 不同材質物體的運動曲線

曲線一：加速度<減速度

相同環境，一樣的正向力，同等的位移，較重的物體加速度較小，需要更長的加速時間和更短的減速時間。

△ 厚重遲緩的運動

曲線二：加速度>減速度

相同環境，一樣的正向力，同等的位移，較輕的物體加速度較大，需要更短的加速時間和更長的減速時間

△ 輕盈敏捷的運動

我們實際體驗下兩種運動曲線下的動效的感受，發現用曲線一的動效感覺厚重遲緩，曲線二的動效感覺輕盈敏捷。

綜合安全、專業、信賴、便捷、想象力的特征，我們可以推導出品牌特征對材質方面的要求：牢固堅韌、精準可靠、敏捷輕盈、靈性活力。所以，支付寶品牌的動效里材質應該是偏輕和偏硬。

為了表現品牌便捷、想象力的特征，我們一般情況應該選擇看起來輕盈便捷的動效曲線。

空間關系

手機的屏幕空間有限，但是元素運動的卻不一定僅限于屏幕以內。所以有些運動是用戶可見的，有些運動是用戶不可見的。

△ 屏幕空間外的運動

從上圖我們可以看到：當元素離開屏幕時，后半段的減速過程不可見；當元素進入屏幕時，前半段的加速過程不可見。所以，這兩種場景應該分別使用加速、減速兩條不同的曲線。

△ 加速曲線&減速曲線

2. 快速響應

我們的動效應該快速準確地對用戶的操作做出響應。動效的時間一般不宜過長，過長的動效反而讓用戶感覺拖沓不干脆。下面的動效分別用了600ms 和300ms，我們可以明顯的感覺到時間太長會給人拖沓的感覺。

△ 快速敏捷 VS 冗長拖沓

人的反應分三種：條件反射 - 50ms，僵尸反射 - 100ms，意識處理反射 - 200ms 以上。

為了讓我們的動效看起來不是那么倉促和生硬，動效的最短時間建議在250ms 以上。另外根據人眼的視覺停留特性，50ms 的以上的時間長度變化才是用戶可感知的。所以，我們應該以250ms 為基數，以50ms 的倍數為梯度，來定義和劃分動效的時長。

3. 簡單明了 & 刻意編排

動效要簡單明了，并保持連貫，避免同時加入太多效果。動效的編排要有目的，要么提升可用性，要么加強品牌感知。

1. 唯一的動效主體

用戶交互出發的動效應該對應唯一的動效主體，以便對應操作觸發點和動效反饋之間的對應關系，避免眼花繚亂的感覺。

當頁面發生變化時，需考慮元素的進?順序和進?邏輯，保證信息有效的被傳達，同時符合用戶的閱讀規則。在設計過程中需考慮元素主次，進行有效劃分，從而使得動效自然、流暢。

2. 就近原則

當用戶觸發動作展開，彈出元素時，應當告知?戶元素來源及從屬關系，明確觸發區域和反饋區域的關系，同時應避免動效幅度過?，影響?戶閱讀內容。

三、動效規范

前面講了我們動效設計應該遵循的大原則，這些大原則落實到具體的設計中會以更詳細的參數規范指導我們動效的設計。動效設計的參數包括：緩動曲線、時間長度、彈性系數。

1. 緩動曲線

為了讓動效真實自然，每一個動效都應該設置緩動曲線。并且根據不同的運動場景選擇統一的曲線。

△ 運動曲線

2. 時間長度

動效既要快速響應，還要優雅從容，所以，我們以大腦的反應時間為基準（250ms），以人眼的分辨能力為梯度（50ms），統一定義不同場景的動效時長規范。

△ 動效時長表

• 色變、透明度：icon、文字漸隱漸現，250ms；
• 彈出：彈框、Toast、Tips，推薦350ms，可根據體積選擇時間梯度；
• 屏幕范圍的位移：屏幕橫向距離300ms，縱向距離600ms，中等距離350ms，小距離250ms；
• 移入屏幕：根據對象的體積選擇時間梯度，推薦350ms；
• 移出屏幕：根據對象的體積選擇時間梯度，推薦300ms；（表示「拋棄」的動畫需要拋快一點，同時用戶對回退之后的頁面一般是有心理準備的）
• 黑色遮罩層出現：時間長度配合界面其他元素；
• 黑色遮罩層消失：時間長度配合界面其他元素；
• 呼吸循環類：1500ms。

3. 回彈次數

一些特殊場景：Tips 彈出、放大縮小......較小元素需要重點突出，或者發生彈性形變的時候，動效需要有一個回彈的過程。我們統一定義回彈的次數為一次，回彈的變量為目標變量的10%。

△ 彈性曲線

4. 輸出標準

動效設計的實現很大程度上涉及到開發。如果我們只給開發一段視頻或者動畫效果，他們是不能完全符合我們的期望。所以，我們應該按照工程化的語言將動效標注給開發，注明元素的變化狀態、變化數值、持續時間。

動效輸出模版.sketch

「新手必看的動效設計好文」

• 動效設計入門：《超全面的 APP 動效設計必備知識總結》
• 動效設計科普：《超全面！產品動效設計全方位科普手冊》
• 動效設計技巧：《7個實用技巧，讓你的動效變得更優秀！》
• 動效設計工具：《針對不同設計階段，如何選擇合適的動效工具？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com