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

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

一、可用性價(jià)值

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

1. 信息交互

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

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

2. 操作反饋

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

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

3. 緩解負(fù)面情緒

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

△ 緩解等待&錯(cuò)誤焦慮

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

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

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

二、設(shè)計(jì)原則

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

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

△ 品牌關(guān)鍵詞和動(dòng)效原則

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

1. 真實(shí)自然

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

運(yùn)動(dòng)定律

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

曲線一：勻速運(yùn)動(dòng)

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

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

△ 勻速直線運(yùn)動(dòng)

曲線二：勻加減速運(yùn)動(dòng)。

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

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

△ 勻加減速運(yùn)動(dòng)

材質(zhì)特征

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

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

△ 不同材質(zhì)物體的運(yùn)動(dòng)曲線

曲線一：加速度<減速度

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

△ 厚重遲緩的運(yùn)動(dòng)

曲線二：加速度>減速度

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

△ 輕盈敏捷的運(yùn)動(dòng)

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

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

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

空間關(guān)系

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

△ 屏幕空間外的運(yùn)動(dòng)

從上圖我們可以看到：當(dāng)元素離開屏幕時(shí)，后半段的減速過程不可見；當(dāng)元素進(jìn)入屏幕時(shí)，前半段的加速過程不可見。所以，這兩種場(chǎng)景應(yīng)該分別使用加速、減速兩條不同的曲線。

△ 加速曲線&減速曲線

2. 快速響應(yīng)

我們的動(dòng)效應(yīng)該快速準(zhǔn)確地對(duì)用戶的操作做出響應(yīng)。動(dòng)效的時(shí)間一般不宜過長，過長的動(dòng)效反而讓用戶感覺拖沓不干脆。下面的動(dòng)效分別用了600ms 和300ms，我們可以明顯的感覺到時(shí)間太長會(huì)給人拖沓的感覺。

△ 快速敏捷 VS 冗長拖沓

人的反應(yīng)分三種：條件反射 - 50ms，僵尸反射 - 100ms，意識(shí)處理反射 - 200ms 以上。

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

3. 簡(jiǎn)單明了 & 刻意編排

動(dòng)效要簡(jiǎn)單明了，并保持連貫，避免同時(shí)加入太多效果。動(dòng)效的編排要有目的，要么提升可用性，要么加強(qiáng)品牌感知。

1. 唯一的動(dòng)效主體

用戶交互出發(fā)的動(dòng)效應(yīng)該對(duì)應(yīng)唯一的動(dòng)效主體，以便對(duì)應(yīng)操作觸發(fā)點(diǎn)和動(dòng)效反饋之間的對(duì)應(yīng)關(guān)系，避免眼花繚亂的感覺。

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

2. 就近原則

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

三、動(dòng)效規(guī)范

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

1. 緩動(dòng)曲線

為了讓動(dòng)效真實(shí)自然，每一個(gè)動(dòng)效都應(yīng)該設(shè)置緩動(dòng)曲線。并且根據(jù)不同的運(yùn)動(dòng)場(chǎng)景選擇統(tǒng)一的曲線。

△ 運(yùn)動(dòng)曲線

2. 時(shí)間長度

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

△ 動(dòng)效時(shí)長表

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

3. 回彈次數(shù)

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

△ 彈性曲線

4. 輸出標(biāo)準(zhǔn)

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

動(dòng)效輸出模版.sketch

「新手必看的動(dòng)效設(shè)計(jì)好文」

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

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

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

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