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

我們花了很大精力來提升數(shù)字產(chǎn)品的用戶體驗，而動效設(shè)計往往更容易被忽略。在實際工作中，我們在制作動畫時大多依靠個人的感覺，但是感覺是否合適取決于它有沒有很自然的模仿我們與現(xiàn)實世界的日常互動。

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

那么我們怎樣才能設(shè)計出更有意義的動效服務(wù)于我們的產(chǎn)品？我們?nèi)绾未_保我們的動效能夠增加產(chǎn)品的用戶體驗？

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

什么是動畫？

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

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

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

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

物理基礎(chǔ)

時間和節(jié)奏

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

時間在動畫設(shè)計制作中起著巨大的作用。

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

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

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

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

by Wouter Raateland

重力

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

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

by Nick Taylor

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

by Ildiko Ignacz

阻力

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

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

by benjamin berger

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

by James G

作用力和反作用力

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

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

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

對于每一個動作，相互作用的兩個物體之間的作用力和反作用力總是大小相等，方向相反，作用在同一條直線上。

-艾薩克·牛頓爵士

牛頓第三定律與界面中的動畫息息相關(guān)。當涉及到數(shù)據(jù)、大小、顏色、背景等方面的變化時。動畫的作用是創(chuàng)建可視化的視覺提示，讓用戶知道他們在哪里，他們在做什么。當用戶點擊下載圖像時，希望看到一些進展、失敗或成功的跡象。

by chashi

動畫的12個原則

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

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

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

1.擠壓和拉伸

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

by Scott Brookshire

擠壓和拉伸也是一種很有用的方法來進行縮放動畫。

by Stan Yakusevich

2.預(yù)備動作

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

以非常相似的方式，我們可以使用小動畫來為我們的用戶創(chuàng)建預(yù)期。懸停效果就是一個很好的例子，因為它向用戶表明這個對象（例如按鈕）可以執(zhí)行更大的操作。

by Yancy Min

3.演出布局

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

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

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

by Su

骨架加載是加載器圖標的擴展，被認為是更好的加載體驗。將向用戶顯示要加載的內(nèi)容的“骨架”，然后在內(nèi)容加載時進行填充。

by UI8

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

這個原理指的是動畫的繪制方式。從第1幀開始并繪制每個后續(xù)幀。這通常會導(dǎo)致更好的真實性和平滑性，因為您可以控制每個后續(xù)動作。

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

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

5.跟隨與重疊動作

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

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

by Anton Skvortsov

也許最重要的重疊動作例子是古老的視差動畫。

by Anton Skvortsov

6.緩入緩出

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

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

by Anton Skvortsov

7.弧形運動

在自然界中，很少有東西是以直線運動的，僅僅是因為沒有人能以精確的直線投擲一個球。自然界中的物體經(jīng)常以弧形運動?；【€本質(zhì)上是彎曲的路徑，如果你扔球，球會在上面移動。

一般來說，接口是與某種網(wǎng)格系統(tǒng)對齊的，所以我們傾向于不為弧中的組件設(shè)置動畫。在某種程度上，緩和是我們使用的弧線，因為它使我們的動畫感覺好像是在弧線上動畫。也就是說，在這些動畫中實現(xiàn)某種弧形是有實際價值的，因為它們增加了自然流動感。這只是尋找合適機會的一個案例。

by Divan Raj

8.次要動作

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

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

by Oleg Frolov

9.節(jié)奏

動作的節(jié)奏就是速度的快慢，過快或者過慢都會讓該動作看起來不自然，而不同的角色也會有不用的節(jié)奏，因為動作的節(jié)奏會影響到角色的個性，也會影響到動作自然與否。

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

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

by Anton Tkachev

10.夸張

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

by Voicu Apostol

11＆12.素描和吸引力

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

by Anton Skvortsov

總結(jié)

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

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

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

作者：Vernon Joyce

翻譯：水手哥