內(nèi)部教程！超詳細的支付寶設計規(guī)范之交互篇

支付寶設計規(guī)范往期回顧：

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

一、可用性價值

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

1. 信息交互

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

△ 反饋操作&反饋狀態(tài)

2. 操作反饋

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

△ 反饋操作&反饋狀態(tài)

3. 緩解負面情緒

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

△ 緩解等待&錯誤焦慮

4. 創(chuàng)造個性優(yōu)雅的體驗

產(chǎn)品中展示品牌調(diào)性的趣味性動效，可以強化品牌的認知，創(chuàng)造愉悅的使用體驗，加深用戶對產(chǎn)品的認可度。

△ 動效創(chuàng)造個性優(yōu)雅的體驗

二、設計原則

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

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

△ 品牌關鍵詞和動效原則

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

1. 真實自然

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

運動定律

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

曲線一：勻速運動

根據(jù)牛頓第一定律——慣性定律，「任何物體都要保持靜止狀態(tài)或勻速直線運動狀態(tài)，直到外力迫使它改變運動狀態(tài)。」

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

△ 勻速直線運動

曲線二：勻加減速運動。

根據(jù)牛頓第二定律：「物體加速度的大小跟作用力成正比，跟物體的質(zhì)量成反比，且與物體質(zhì)量的倒數(shù)成正比；加速度的方向跟作用力的方向相同。」

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

△ 勻加減速運動

材質(zhì)特征

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

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

△ 不同材質(zhì)物體的運動曲線

曲線一：加速度<減速度

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

△ 厚重遲緩的運動

曲線二：加速度>減速度

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

△ 輕盈敏捷的運動

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

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

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

空間關系

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

△ 屏幕空間外的運動

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

△ 加速曲線&減速曲線

2. 快速響應

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

△ 快速敏捷 VS 冗長拖沓

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

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

3. 簡單明了 & 刻意編排

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

1. 唯一的動效主體

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

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

2. 就近原則

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

三、動效規(guī)范

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

1. 緩動曲線

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

△ 運動曲線

2. 時間長度

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

△ 動效時長表

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

3. 回彈次數(shù)

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

△ 彈性曲線

4. 輸出標準

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

動效輸出模版.sketch

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

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

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

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

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備： http://hao.uisdc.com