支付寶設計規範往期回顧：
內部教程！超詳細的支付寶設計規範之配色篇
超詳細的支付寶設計規範之圖形圖案篇
超詳細的支付寶設計規範之線上字體篇
超詳細的支付寶設計規範之線下字體篇
內部教程！超詳細的支付寶設計規範之版式篇
動效很容易被象成某種增強愉悅的東西， 自身並不具備什麼價值。 常常被當做可有可無部分， 通常作為最後一步點綴。 實際上， 動效是一種更高級的設計展現形式：表達介面元素在交互事件下的行為動作。 它在用戶體驗中的價值可以分為：資訊交互、操作回饋、緩解負面情緒、創造個性優雅的愉悅體驗。
元素的狀態發生變化時銜接的動效， 使過渡更自然。 同時， 引導使用者在視圖中的視覺焦點， 暗示元素之間的層級關係。
△ 回饋操作&回饋狀態
2. 操作回饋使用者交互時元素變化， 為操作提供視覺化的即時回饋。 建立起虛擬元素與真實世界之間的認知聯繫， 讓操作符合用戶的直覺。
△ 回饋操作&回饋狀態
等待， 讓用戶感到焦慮；報錯， 讓用戶感到挫敗。 加入有趣的動畫可以緩解負面情緒， 提高使用者對產品的容忍度。
△ 緩解等待&錯誤焦慮
4. 創造個性優雅的體驗產品中展示品牌調性的趣味性動效， 可以強化品牌的認知， 創造愉悅的使用體驗， 加深使用者對產品的認可度。
△ 動效創造個性優雅的體驗
二、設計原則動效通過模擬真實世界的運動，建立起使用者與手機螢幕內虛擬世界的認知連續，從而創造出符合用戶認知習慣的操作體驗，使 APP 的操作更自然流暢。
同時，品牌的不同特性所表現出來的行為和動作也不盡相同。所以，品牌特性亦會對動效的設計有所影響，並產生指導和約束。
△ 品牌關鍵字和動效原則
安全、專業、信賴、便捷、想像力是支付寶品牌特性的五個關鍵字，從這五個關鍵字我們挖掘和推導出動效設計的四個基本原則：真實自然、快速回應、簡單明瞭、刻意編排。
1. 真實自然動效蘊含了元素的運動規律、材質特性、空間關係、屬性變化，這些應該符合真實世界的物理規律，不能增加使用者的理解和認知成本。
運動定律
真實世界的運動遵循基本的物理規律。物體受力發生變化時，運動狀態會發生變化。根據牛頓的力學定律，我們可以得到了符合運動規律的兩條二維曲線。
曲線一：勻速運動
根據牛頓第一定律——慣性定律，「任何物體都要保持靜止狀態或勻速直線運動狀態，直到外力迫使它改變運動狀態。」
下面的動畫展示了物體到達目的地的過程是「靜止 – 勻速運動 – 到達」，沒有加速和減速的過程。由於阻力的存在，我們模擬出來的勻速直線運動在真實世界中是基本不存在的，所以動畫效果看起生硬不自然。設計中一定要避免這種生硬的動效。
△ 勻速直線運動
曲線二：勻加減速運動。
根據牛頓第二定律：「物體加速度的大小跟作用力成正比，跟物體的品質成反比，且與物體品質的倒數成正比；加速度的方向跟作用力的方向相同。」
下面的動畫展示了物體到達目的地的過程是「靜止 – 加速運動 – 減速運動 – 到達」，在靜止和運動狀態的轉換過程中加入了加速和減速的過程，這符合自然的基本規律，所以動畫看起來自然了很多。
△ 勻加減速運動
材質特徵
好的動效在滿足了基本的物理原則之後還有很多「材質」上的細節補充，而材質特徵影響到物體的品質和彈性等。
前面的運動規律講到物體的加速度和品質成反比，所以材質的特徵會影響到運動曲線的具體曲率，下圖的曲線描述了重和輕兩種材質物體的運動曲線。
△ 不同材質物體的運動曲線
曲線一：加速度<減速度
相同環境，一樣的正向力，同等的位移，較重的物體加速度較小，需要更長的加速時間和更短的減速時間。
△ 厚重遲緩的運動
曲線二：加速度>減速度
相同環境，一樣的正向力，同等的位移，較輕的物體加速度較大，需要更短的加速時間和更長的減速時間
△ 輕盈敏捷的運動
我們實際體驗下兩種運動曲線下的動效的感受，發現用曲線一的動效感覺厚重遲緩，曲線二的動效感覺輕盈敏捷。
綜合安全、專業、信賴、便捷、想像力的特徵，我們可以推導出品牌特徵對材質方面的要求：牢固堅韌、精准可靠、敏捷輕盈、靈性活力。所以，支付寶品牌的動效裡材質應該是偏輕和偏硬。
為了表現品牌便捷、想像力的特徵，我們一般情況應該選擇看起來輕盈便捷的動效曲線。
空間關係
手機的螢幕空間有限，但是元素運動的卻不一定僅限於螢幕以內。所以有些運動是用戶可見的，有些運動是用戶不可見的。
△ 螢幕空間外的運動
從上圖我們可以看到：當元素離開螢幕時，後半段的減速過程不可見；當元素進入螢幕時，前半段的加速過程不可見。所以，這兩種場景應該分別使用加速、減速兩條不同的曲線。
△ 加速曲線&減速曲線
2. 快速回應我們的動效應該快速準確地對用戶的操作做出回應。動效的時間一般不宜過長，過長的動效反而讓用戶感覺拖遝不乾脆。時間太長會給人拖遝的感覺。
人的反應分三種：條件反射 – 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. 輸出標準動效設計的實現很大程度上涉及到開發。如果我們只給開發一段視頻或者動畫效果，他們是不能完全符合我們的期望。所以，我們應該按照工程化的語言將動效標注給開發，注明元素的變化狀態、變化數值、持續時間。
------
作者：Alipay Design，原創發佈，如需轉載請聯繫原文作者
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
△ 動效創造個性優雅的體驗
二、設計原則動效通過模擬真實世界的運動，建立起使用者與手機螢幕內虛擬世界的認知連續，從而創造出符合用戶認知習慣的操作體驗，使 APP 的操作更自然流暢。
同時，品牌的不同特性所表現出來的行為和動作也不盡相同。所以，品牌特性亦會對動效的設計有所影響，並產生指導和約束。
△ 品牌關鍵字和動效原則
安全、專業、信賴、便捷、想像力是支付寶品牌特性的五個關鍵字，從這五個關鍵字我們挖掘和推導出動效設計的四個基本原則：真實自然、快速回應、簡單明瞭、刻意編排。
1. 真實自然動效蘊含了元素的運動規律、材質特性、空間關係、屬性變化，這些應該符合真實世界的物理規律，不能增加使用者的理解和認知成本。
運動定律
真實世界的運動遵循基本的物理規律。物體受力發生變化時，運動狀態會發生變化。根據牛頓的力學定律，我們可以得到了符合運動規律的兩條二維曲線。
曲線一：勻速運動
根據牛頓第一定律——慣性定律，「任何物體都要保持靜止狀態或勻速直線運動狀態，直到外力迫使它改變運動狀態。」
下面的動畫展示了物體到達目的地的過程是「靜止 – 勻速運動 – 到達」，沒有加速和減速的過程。由於阻力的存在，我們模擬出來的勻速直線運動在真實世界中是基本不存在的，所以動畫效果看起生硬不自然。設計中一定要避免這種生硬的動效。
△ 勻速直線運動
曲線二：勻加減速運動。
根據牛頓第二定律：「物體加速度的大小跟作用力成正比，跟物體的品質成反比，且與物體品質的倒數成正比；加速度的方向跟作用力的方向相同。」
下面的動畫展示了物體到達目的地的過程是「靜止 – 加速運動 – 減速運動 – 到達」，在靜止和運動狀態的轉換過程中加入了加速和減速的過程，這符合自然的基本規律，所以動畫看起來自然了很多。
△ 勻加減速運動
材質特徵
好的動效在滿足了基本的物理原則之後還有很多「材質」上的細節補充，而材質特徵影響到物體的品質和彈性等。
前面的運動規律講到物體的加速度和品質成反比，所以材質的特徵會影響到運動曲線的具體曲率，下圖的曲線描述了重和輕兩種材質物體的運動曲線。
△ 不同材質物體的運動曲線
曲線一：加速度<減速度
相同環境，一樣的正向力，同等的位移，較重的物體加速度較小，需要更長的加速時間和更短的減速時間。
△ 厚重遲緩的運動
曲線二：加速度>減速度
相同環境，一樣的正向力，同等的位移，較輕的物體加速度較大，需要更短的加速時間和更長的減速時間
△ 輕盈敏捷的運動
我們實際體驗下兩種運動曲線下的動效的感受，發現用曲線一的動效感覺厚重遲緩，曲線二的動效感覺輕盈敏捷。
綜合安全、專業、信賴、便捷、想像力的特徵，我們可以推導出品牌特徵對材質方面的要求：牢固堅韌、精准可靠、敏捷輕盈、靈性活力。所以，支付寶品牌的動效裡材質應該是偏輕和偏硬。
為了表現品牌便捷、想像力的特徵，我們一般情況應該選擇看起來輕盈便捷的動效曲線。
空間關係
手機的螢幕空間有限，但是元素運動的卻不一定僅限於螢幕以內。所以有些運動是用戶可見的，有些運動是用戶不可見的。
△ 螢幕空間外的運動
從上圖我們可以看到：當元素離開螢幕時，後半段的減速過程不可見；當元素進入螢幕時，前半段的加速過程不可見。所以，這兩種場景應該分別使用加速、減速兩條不同的曲線。
△ 加速曲線&減速曲線
2. 快速回應我們的動效應該快速準確地對用戶的操作做出回應。動效的時間一般不宜過長，過長的動效反而讓用戶感覺拖遝不乾脆。時間太長會給人拖遝的感覺。
人的反應分三種：條件反射 – 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. 輸出標準動效設計的實現很大程度上涉及到開發。如果我們只給開發一段視頻或者動畫效果，他們是不能完全符合我們的期望。所以，我們應該按照工程化的語言將動效標注給開發，注明元素的變化狀態、變化數值、持續時間。
------
作者：Alipay Design，原創發佈，如需轉載請聯繫原文作者
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！