轉(zhuǎn)自：水手哥學(xué)設(shè)計(jì)（ID：shuishouge_design）作者： 水手哥

我們花了很大精力來(lái)提升數(shù)字產(chǎn)品的用戶體驗(yàn)，而動(dòng)效設(shè)計(jì)往往更容易被忽略。在實(shí)際工作中，我們?cè)谥谱鲃?dòng)畫(huà)時(shí)大多依靠個(gè)人的感覺(jué)，但是感覺(jué)是否合適取決于它有沒(méi)有很自然的模仿我們與現(xiàn)實(shí)世界的日常互動(dòng)。

另外我們可能沒(méi)有過(guò)多的思考就為數(shù)字產(chǎn)品添加動(dòng)畫(huà)，或許它看上去很酷炫，我們也堅(jiān)信他會(huì)為用戶帶來(lái)價(jià)值。產(chǎn)品服務(wù)于用戶的時(shí)候，是否有助于用戶更好的體驗(yàn)產(chǎn)品功能，是否會(huì)增加用戶操作經(jīng)驗(yàn)值？

那么我們?cè)鯓硬拍茉O(shè)計(jì)出更有意義的動(dòng)效服務(wù)于我們的產(chǎn)品？我們?nèi)绾未_保我們的動(dòng)效能夠增加產(chǎn)品的用戶體驗(yàn)？

答案就是通過(guò)科學(xué)與原則

什么是動(dòng)畫(huà)？

動(dòng)畫(huà)是一種將單個(gè)圖像組合在一起，使它們看起來(lái)像一個(gè)平滑的奇異運(yùn)動(dòng)的方法。你今天看到的每一個(gè)動(dòng)畫(huà)都是由多個(gè)圖像（或者一個(gè)處于多個(gè)狀態(tài)的圖像）組成的。

一秒鐘動(dòng)畫(huà)內(nèi)的幀數(shù)稱為幀速率或每秒幀數(shù)（FPS）。人眼需要至少24幀才能將動(dòng)畫(huà)視為流體運(yùn)動(dòng)。

在Web中CSS動(dòng)畫(huà)的幀速率很大程度上取決于瀏覽器和計(jì)算機(jī)的速度。如果你的計(jì)算機(jī)速度很慢，你可能會(huì)看到動(dòng)畫(huà)卡頓或滯后，這通常表明幀速率已降至24 幀每秒以下。

游戲是另一個(gè)很好的例子;當(dāng)你的電腦無(wú)法以24 幀每秒的速度運(yùn)行游戲時(shí)，游戲顯得比較遲鈍 - 盡管大多數(shù)游戲玩家會(huì)堅(jiān)持認(rèn)為60幀每秒以下的任何東西都是滯后的。

物理基礎(chǔ)

時(shí)間和節(jié)奏

時(shí)間是對(duì)象移動(dòng)所需的時(shí)間或幀數(shù)。如果球需要5秒鐘才能落到地面，其動(dòng)畫(huà)時(shí)間將為120幀（5 x 24 FPS）。

時(shí)間在動(dòng)畫(huà)設(shè)計(jì)制作中起著巨大的作用。

在產(chǎn)品中我們不需要計(jì)算應(yīng)用程序中設(shè)置按鈕動(dòng)畫(huà)所需的幀數(shù)，但是我們可以確定設(shè)置按鈕的動(dòng)畫(huà)時(shí)間長(zhǎng)短。

節(jié)奏感是運(yùn)動(dòng)發(fā)生的速度快慢。如果你的動(dòng)畫(huà)太慢，它可能會(huì)讓用戶厭煩沮喪。如果它們太快，你的用戶可能會(huì)忘記他們所在的位置或他們正在做的事情。

我們知道，現(xiàn)實(shí)世界中的大多數(shù)物體都有大小和重量。這些尺寸賦予了一個(gè)物體所謂的重心，這對(duì)它的運(yùn)動(dòng)和旋轉(zhuǎn)方式有影響。

組件還具有大小和重量，而這反過(guò)來(lái)又用于確定層次結(jié)構(gòu)。與現(xiàn)實(shí)世界相似，我們的自然選擇是使用組件的中心作為其重心。這既實(shí)用又現(xiàn)實(shí)。重心也可能隨著其尺寸的變化而改變。

by Wouter Raateland

重力

重力是一種自然發(fā)生的力，它將我們錨定在地球上，并對(duì)海洋的潮汐負(fù)責(zé)。它會(huì)對(duì)物體運(yùn)動(dòng)產(chǎn)生巨大影響。

在我看來(lái)，我們的設(shè)備有兩個(gè)重力作用它 - 首先在Y軸上從上到下，其次是在Z軸上的UI界面深度。Google很早就意識(shí)到我們的設(shè)備具有Z軸上的深度，并且已經(jīng)建立了大量的材料設(shè)計(jì)理念。

by Nick Taylor

以同樣的方式，我想知道我們把設(shè)計(jì)元素往下掉的趨勢(shì)是否是我們對(duì)y軸重力的解釋的結(jié)果。下拉列表、選擇框、手風(fēng)琴等所有這些組件都會(huì)在應(yīng)用程序的底部顯示動(dòng)畫(huà)。

by Ildiko Ignacz

阻力

這是我們每天都經(jīng)歷的事情（就像你不愿下床一樣），是一種物體在空間和時(shí)間中移動(dòng)時(shí)在大自然中所發(fā)現(xiàn)的一種力量的結(jié)果。

界面設(shè)計(jì)中經(jīng)常使用阻力。蘋(píng)果的3dTouch（Rip）就是一個(gè)很好的例子，它的界面幾乎“抵制”了一個(gè)動(dòng)作，直到你用力按下。然后通過(guò)動(dòng)畫(huà)演示此阻力，根據(jù)應(yīng)用的壓力，圖標(biāo)或多或少突出顯示。

by benjamin berger

下拉刷新是另一個(gè)很好的例子，在這個(gè)例子中，用戶必須下拉界面來(lái)顯示最新的內(nèi)容。使用者必須下拉產(chǎn)生一些阻力，達(dá)到頁(yè)面重新加載出動(dòng)畫(huà)。

by James G

作用力和反作用力

每一個(gè)物體都保持靜止或勻速直線運(yùn)動(dòng)，除非它被施加在物體上的力強(qiáng)迫改變這種狀態(tài)。

牛頓定律與UX和動(dòng)畫(huà)有著驚人的關(guān)系。當(dāng)你按下一個(gè)按鈕，你會(huì)有反應(yīng)。在某種程度上，重力迫使你移動(dòng)鼠標(biāo)，按鈕會(huì)顯示懸停效果，做出劇烈的反應(yīng)。

這一切都很科學(xué)，不是嗎？

對(duì)于每一個(gè)動(dòng)作，相互作用的兩個(gè)物體之間的作用力和反作用力總是大小相等，方向相反，作用在同一條直線上。

-艾薩克·牛頓爵士

牛頓第三定律與界面中的動(dòng)畫(huà)息息相關(guān)。當(dāng)涉及到數(shù)據(jù)、大小、顏色、背景等方面的變化時(shí)。動(dòng)畫(huà)的作用是創(chuàng)建可視化的視覺(jué)提示，讓用戶知道他們?cè)谀睦?，他們?cè)谧鍪裁?。?dāng)用戶點(diǎn)擊下載圖像時(shí)，希望看到一些進(jìn)展、失敗或成功的跡象。

by chashi

動(dòng)畫(huà)的12個(gè)原則

1981年，兩位迪士尼動(dòng)畫(huà)師奧利約翰斯頓和弗蘭克托馬斯提出所有動(dòng)畫(huà)都包含 [十二個(gè)基本原則]。這些原則遵循前面提到的物理定律，并作為創(chuàng)造現(xiàn)實(shí)運(yùn)動(dòng)的指導(dǎo)。

這些原則可以應(yīng)用在用戶體驗(yàn)和設(shè)計(jì)時(shí)具有卓越的價(jià)值。

我已經(jīng)列出了這些原則以及下面的Dribbble最好的例子。

1.擠壓和拉伸

在自然界中，物體具有可塑性 - 它們的形狀隨著它們與世界的相互作用而變化。它們能夠根據(jù)自己的成分進(jìn)行擠壓和拉伸。同樣，我們的界面可以在與它們交互時(shí)擠壓和拉伸。部件的重量和重心不會(huì)改變，而只是移位。

by Scott Brookshire

擠壓和拉伸也是一種很有用的方法來(lái)進(jìn)行縮放動(dòng)畫(huà)。

by Stan Yakusevich

2.預(yù)備動(dòng)作

預(yù)期是導(dǎo)致更大行動(dòng)的小行動(dòng)。在野外，貓可能會(huì)降低它的背部，拉回它的耳朵，期待著突襲它的獵物。預(yù)期也可能是完全沒(méi)有動(dòng)作，比如貓突襲前的戲劇性停頓。這種期待可以作為警告，用來(lái)誘惑或創(chuàng)造興奮。

以非常相似的方式，我們可以使用小動(dòng)畫(huà)來(lái)為我們的用戶創(chuàng)建預(yù)期。懸停效果就是一個(gè)很好的例子，因?yàn)樗蛴脩舯砻鬟@個(gè)對(duì)象（例如按鈕）可以執(zhí)行更大的操作。

by Yancy Min

3.演出布局

界面設(shè)計(jì)中的分段原則的典型示例是加載圖標(biāo)。這不僅解決了技術(shù)問(wèn)題，而且還讓用戶知道“階段”正在被設(shè)置。此外，裝載機(jī)的實(shí)際設(shè)計(jì)也可用于升級(jí);讓用戶可以一瞥他們可以期待的內(nèi)容類型。

舞臺(tái)布置包括設(shè)置一個(gè)場(chǎng)景，以強(qiáng)調(diào)人物、對(duì)象或事件。這可以通過(guò)幾種方式實(shí)現(xiàn)，如照明、音樂(lè)或攝像機(jī)移動(dòng)。分段也可以用來(lái)構(gòu)建預(yù)期。

界面設(shè)計(jì)中分段原則的一個(gè)典型例子是加載圖標(biāo)。這不僅解決了一個(gè)技術(shù)問(wèn)題，而且還讓用戶知道“階段”實(shí)際上正在被設(shè)置。此外，加載程序的實(shí)際設(shè)計(jì)也可用于升級(jí)；讓用戶了解他們所期望的內(nèi)容類型。

by Su

骨架加載是加載器圖標(biāo)的擴(kuò)展，被認(rèn)為是更好的加載體驗(yàn)。將向用戶顯示要加載的內(nèi)容的“骨架”，然后在內(nèi)容加載時(shí)進(jìn)行填充。

by UI8

4.連續(xù)運(yùn)動(dòng)與姿態(tài)對(duì)應(yīng)

這個(gè)原理指的是動(dòng)畫(huà)的繪制方式。從第1幀開(kāi)始并繪制每個(gè)后續(xù)幀。這通常會(huì)導(dǎo)致更好的真實(shí)性和平滑性，因?yàn)槟梢钥刂泼總€(gè)后續(xù)動(dòng)作。

使用姿勢(shì)構(gòu)圖，你可以繪制第一幀，然后繪制結(jié)束幀，只有這樣才能填充中間的幀。

今天用戶界面中的大多數(shù)動(dòng)畫(huà)都是擺姿勢(shì)。作為開(kāi)發(fā)人員，我們通常使用CSS編寫(xiě)靜態(tài)組件，然后為動(dòng)畫(huà)狀態(tài)編寫(xiě)CSS，然后我們使用類或關(guān)鍵幀切換此動(dòng)畫(huà)。

5.跟隨與重疊動(dòng)作

現(xiàn)實(shí)世界中的物體通常由多個(gè)運(yùn)動(dòng)部件組成。汽車、人、動(dòng)物、植物——都是很好的例子。由于它們的重量和大小，這些多個(gè)部分都受到重力等力的不同影響。因此，相同的物體可以具有以不同速度移動(dòng)或以不同角度旋轉(zhuǎn)的部件。由于它們的大小會(huì)影響加速或減速所需的時(shí)間，因此它們也可能具有不同程度的阻力。

以類似的方式，UI組件由多個(gè)部分組成，不管是排版、顏色、形狀還是間距。如果要對(duì)同一組件的多個(gè)部分設(shè)置動(dòng)畫(huà)，則必須考慮每個(gè)組件的重量和大小以及它們之間的關(guān)系。屬于同一組的組件應(yīng)始終一起動(dòng)畫(huà)，但速度和加速度的細(xì)微差別會(huì)使它成為一種很好的體驗(yàn)。

by Anton Skvortsov

也許最重要的重疊動(dòng)作例子是古老的視差動(dòng)畫(huà)。

by Anton Skvortsov

6.緩入緩出

“緩入緩出”實(shí)際上只是迪士尼的緩和期限。生活中的物體很少會(huì)瞬間停止——它們往往會(huì)逐漸失去動(dòng)力并減速。

大多數(shù)設(shè)計(jì)師和開(kāi)發(fā)人員已經(jīng)在他們的動(dòng)畫(huà)中實(shí)現(xiàn)了緩和。但我們有時(shí)會(huì)落水嗎？很容易弄亂寬松曲線，這會(huì)讓用戶感到有點(diǎn)不安。有很好的資源來(lái)獲取預(yù)先構(gòu)建的緩和曲線 - 我最喜歡的是 Animista

by Anton Skvortsov

7.弧形運(yùn)動(dòng)

在自然界中，很少有東西是以直線運(yùn)動(dòng)的，僅僅是因?yàn)闆](méi)有人能以精確的直線投擲一個(gè)球。自然界中的物體經(jīng)常以弧形運(yùn)動(dòng)?；【€本質(zhì)上是彎曲的路徑，如果你扔球，球會(huì)在上面移動(dòng)。

一般來(lái)說(shuō)，接口是與某種網(wǎng)格系統(tǒng)對(duì)齊的，所以我們傾向于不為弧中的組件設(shè)置動(dòng)畫(huà)。在某種程度上，緩和是我們使用的弧線，因?yàn)樗刮覀兊膭?dòng)畫(huà)感覺(jué)好像是在弧線上動(dòng)畫(huà)。也就是說(shuō)，在這些動(dòng)畫(huà)中實(shí)現(xiàn)某種弧形是有實(shí)際價(jià)值的，因?yàn)樗鼈冊(cè)黾恿俗匀涣鲃?dòng)感。這只是尋找合適機(jī)會(huì)的一個(gè)案例。

by Divan Raj

8.次要?jiǎng)幼?/strong>

輔助操作是除主操作之外發(fā)生的任何操作。這些操作通常用于支持主要操作。一個(gè)真實(shí)世界的例子就是當(dāng)自行車移動(dòng)時(shí)轉(zhuǎn)動(dòng)車輪。

輔助操作非常適合向用戶提供有關(guān)其操作的附加信息。按鈕中的圖標(biāo)就是一個(gè)很常見(jiàn)的例子。

by Oleg Frolov

9.節(jié)奏

動(dòng)作的節(jié)奏就是速度的快慢，過(guò)快或者過(guò)慢都會(huì)讓該動(dòng)作看起來(lái)不自然，而不同的角色也會(huì)有不用的節(jié)奏，因?yàn)閯?dòng)作的節(jié)奏會(huì)影響到角色的個(gè)性，也會(huì)影響到動(dòng)作自然與否。

過(guò)渡編排是一種協(xié)調(diào)的動(dòng)作序列，可在界面適配時(shí)保持用戶的注意力。-谷歌材料設(shè)計(jì)

組件動(dòng)畫(huà)的順序是引導(dǎo)用戶完成旅程的一個(gè)很好的方法。即使是在微觀尺度上我們的眼睛會(huì)對(duì)運(yùn)動(dòng)的事物做出反應(yīng)。

by Anton Tkachev

10.夸張

夸張（加上素描和吸引力）是動(dòng)畫(huà)師變得更有創(chuàng)造力的地方。對(duì)象的大小、形狀或移動(dòng)被夸大，超出了真實(shí)性，以增加對(duì)對(duì)象的強(qiáng)調(diào)或興趣。

by Voicu Apostol

11＆12.素描和吸引力

這兩個(gè)要素都很簡(jiǎn)單，都是指你的組件或體驗(yàn)對(duì)你的用戶有多大的吸引力。這歸結(jié)為良好的設(shè)計(jì)、良好的用戶界面、良好的體驗(yàn)和精致的動(dòng)畫(huà)。

by Anton Skvortsov

總結(jié)

這些原則幫助迪士尼創(chuàng)造了無(wú)數(shù)催人淚下的動(dòng)畫(huà)片，這些動(dòng)畫(huà)原則到了很大的作用。

我們?nèi)绾尾拍馨训纤鼓崛绱顺晒Φ臇|西應(yīng)用到我們自己的項(xiàng)目中，我們中的大多數(shù)人已經(jīng)在這樣做了，但這種演變實(shí)際又是什么樣的呢？大家可以根據(jù)實(shí)際項(xiàng)目進(jìn)行多思考。

原文：
https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182

作者：Vernon Joyce

翻譯：水手哥