起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識重要的動畫——為你的界面增加價值
在產品設計中，好的動效設計能夠提升數字產品的用戶體驗，并與其他因素一起共同打造一款好產品。
我們花了很大精力來提升數字產品的用戶體驗，而動效設計往往更容易被忽略。在實際工作中，我們在制作動畫時大多依靠個人的感覺，但是感覺是否合適取決于它有沒有很自然的模仿我們與現實世界的日常互動。
另外我們可能沒有過多的思考就為數字產品添加動畫，或許它看上去很酷炫，我們也堅信他會為用戶帶來價值。產品服務于用戶的時候，是否有助于用戶更好的體驗產品功能，是否會增加用戶操作經驗值？
那么我們怎樣才能設計出更有意義的動效服務于我們的產品？我們如何確保我們的動效能夠增加產品的用戶體驗？
答案就是通過科學與原則。
什么是動畫？
動畫是一種將單個圖像組合在一起，使它們看起來像一個平滑的奇異運動的方法。你今天看到的每一個動畫都是由多個圖像（或者一個處于多個狀態的圖像）組成的。
一秒鐘動畫內的幀數稱為幀速率或每秒幀數（FPS）。人眼需要至少24幀才能將動畫視為流體運動。
在Web中CSS動畫的幀速率很大程度上取決于瀏覽器和計算機的速度。如果你的計算機速度很慢，你可能會看到動畫卡頓或滯后，這通常表明幀速率已降至24 幀每秒以下。
游戲是另一個很好的例子;當你的電腦無法以24 幀每秒的速度運行游戲時，游戲顯得比較遲鈍 – 盡管大多數游戲玩家會堅持認為60幀每秒以下的任何東西都是滯后的。
物理基礎
1. 時間和節奏
時間是對象移動所需的時間或幀數。如果球需要5秒鐘才能落到地面，其動畫時間將為120幀（5 x 24 FPS）。
時間在動畫設計制作中起著巨大的作用。
在產品中我們不需要計算應用程序中設置按鈕動畫所需的幀數，但是我們可以確定設置按鈕的動畫時間長短。
節奏感是運動發生的速度快慢。如果你的動畫太慢，它可能會讓用戶厭煩沮喪。如果它們太快，你的用戶可能會忘記他們所在的位置或他們正在做的事情。
我們知道，現實世界中的大多數物體都有大小和重量。這些尺寸賦予了一個物體所謂的重心，這對它的運動和旋轉方式有影響。
組件還具有大小和重量，而這反過來又用于確定層次結構。與現實世界相似，我們的自然選擇是使用組件的中心作為其重心。這既實用又現實。重心也可能隨著其尺寸的變化而改變。
by Wouter Raateland
2. 重力
重力是一種自然發生的力，它將我們錨定在地球上，并對海洋的潮汐負責。它會對物體運動產生巨大影響。
在我看來，我們的設備有兩個重力作用它 – 首先在Y軸上從上到下，其次是在Z軸上的UI界面深度。Google很早就意識到我們的設備具有Z軸上的深度，并且已經建立了大量的材料設計理念。
以同樣的方式，我想知道我們把設計元素往下掉的趨勢是否是我們對y軸重力的解釋的結果。下拉列表、選擇框、手風琴等所有這些組件都會在應用程序的底部顯示動畫。
by Ildiko Ignacz
3. 阻力
這是我們每天都經歷的事情（就像你不愿下床一樣），是一種物體在空間和時間中移動時在大自然中所發現的一種力量的結果。
界面設計中經常使用阻力。蘋果的3dTouch（Rip）就是一個很好的例子，它的界面幾乎“抵制”了一個動作，直到你用力按下。然后通過動畫演示此阻力，根據應用的壓力，圖標或多或少突出顯示。
下拉刷新是另一個很好的例子，在這個例子中，用戶必須下拉界面來顯示最新的內容。使用者必須下拉產生一些阻力，達到頁面重新加載出動畫。
by James G
4. 作用力和反作用力
每一個物體都保持靜止或勻速直線運動，除非它被施加在物體上的力強迫改變這種狀態。
牛頓定律與UX和動畫有著驚人的關系。當你按下一個按鈕，你會有反應。在某種程度上，重力迫使你移動鼠標，按鈕會顯示懸停效果，做出劇烈的反應。
這一切都很科學，不是嗎？
對于每一個動作，相互作用的兩個物體之間的作用力和反作用力總是大小相等，方向相反，作用在同一條直線上。
——艾薩克·牛頓爵士
牛頓第三定律與界面中的動畫息息相關。當涉及到數據、大小、顏色、背景等方面的變化時。動畫的作用是創建可視化的視覺提示，讓用戶知道他們在哪里，他們在做什么。當用戶點擊下載圖像時，希望看到一些進展、失敗或成功的跡象。
by chashi
動畫的12個原則
1981年，兩位迪士尼動畫師奧利約翰斯頓和弗蘭克托馬斯提出所有動畫都包含 [十二個基本原則]。這些原則遵循前面提到的物理定律，并作為創造現實運動的指導。
這些原則可以應用在用戶體驗和設計時具有卓越的價值。
我已經列出了這些原則以及下面的Dribbble最好的例子。
1. 擠壓和拉伸
在自然界中，物體具有可塑性 – 它們的形狀隨著它們與世界的相互作用而變化。它們能夠根據自己的成分進行擠壓和拉伸。同樣，我們的界面可以在與它們交互時擠壓和拉伸。部件的重量和重心不會改變，而只是移位。
by Scott Brookshire
2. 預備動作
預期是導致更大行動的小行動。在野外，貓可能會降低它的背部，拉回它的耳朵，期待著突襲它的獵物。預期也可能是完全沒有動作，比如貓突襲前的戲劇性停頓。這種期待可以作為警告，用來誘惑或創造興奮。
以非常相似的方式，我們可以使用小動畫來為我們的用戶創建預期。懸停效果就是一個很好的例子，因為它向用戶表明這個對象（例如按鈕）可以執行更大的操作。
3. 演出布局
界面設計中的分段原則的典型示例是加載圖標。這不僅解決了技術問題，而且還讓用戶知道“階段”正在被設置。此外，裝載機的實際設計也可用于升級;讓用戶可以一瞥他們可以期待的內容類型。
舞臺布置包括設置一個場景，以強調人物、對象或事件。這可以通過幾種方式實現，如照明、音樂或攝像機移動。分段也可以用來構建預期。
界面設計中分段原則的一個典型例子是加載圖標。這不僅解決了一個技術問題，而且還讓用戶知道“階段”實際上正在被設置。此外，加載程序的實際設計也可用于升級；讓用戶了解他們所期望的內容類型。
by Su
骨架加載是加載器圖標的擴展，被認為是更好的加載體驗。將向用戶顯示要加載的內容的“骨架”，然后在內容加載時進行填充。
by UI8
4. 連續運動與姿態對應
這個原理指的是動畫的繪制方式。從第1幀開始并繪制每個后續幀。這通常會導致更好的真實性和平滑性，因為您可以控制每個后續動作。
使用姿勢構圖，你可以繪制第一幀，然后繪制結束幀，只有這樣才能填充中間的幀。
今天用戶界面中的大多數動畫都是擺姿勢。作為開發人員，我們通常使用CSS編寫靜態組件，然后為動畫狀態編寫CSS，然后我們使用類或關鍵幀切換此動畫。
5. 跟隨與重疊動作
現實世界中的物體通常由多個運動部件組成。汽車、人、動物、植物——都是很好的例子。由于它們的重量和大小，這些多個部分都受到重力等力的不同影響。因此，相同的物體可以具有以不同速度移動或以不同角度旋轉的部件。由于它們的大小會影響加速或減速所需的時間，因此它們也可能具有不同程度的阻力。
以類似的方式，UI組件由多個部分組成，不管是排版、顏色、形狀還是間距。如果要對同一組件的多個部分設置動畫，則必須考慮每個組件的重量和大小以及它們之間的關系。屬于同一組的組件應始終一起動畫，但速度和加速度的細微差別會使它成為一種很好的體驗。
也許最重要的重疊動作例子是古老的視差動畫。
by Anton Skvortsov
6. 緩入緩出
“緩入緩出”實際上只是迪士尼的緩和期限。生活中的物體很少會瞬間停止——它們往往會逐漸失去動力并減速。
大多數設計師和開發人員已經在他們的動畫中實現了緩和。但我們有時會落水嗎？很容易弄亂寬松曲線，這會讓用戶感到有點不安。有很好的資源來獲取預先構建的緩和曲線
7. 弧形運動
在自然界中，很少有東西是以直線運動的，僅僅是因為沒有人能以精確的直線投擲一個球。自然界中的物體經常以弧形運動?；【€本質上是彎曲的路徑，如果你扔球，球會在上面移動。
一般來說，接口是與某種網格系統對齊的，所以我們傾向于不為弧中的組件設置動畫。在某種程度上，緩和是我們使用的弧線，因為它使我們的動畫感覺好像是在弧線上動畫。也就是說，在這些動畫中實現某種弧形是有實際價值的，因為它們增加了自然流動感。這只是尋找合適機會的一個案例。
by Divan Raj
8. 次要動作
輔助操作是除主操作之外發生的任何操作。這些操作通常用于支持主要操作。一個真實世界的例子就是當自行車移動時轉動車輪。
輔助操作非常適合向用戶提供有關其操作的附加信息。按鈕中的圖標就是一個很常見的例子。
by Oleg Frolov
9. 節奏
動作的節奏就是速度的快慢，過快或者過慢都會讓該動作看起來不自然，而不同的角色也會有不用的節奏，因為動作的節奏會影響到角色的個性，也會影響到動作自然與否。
過渡編排是一種協調的動作序列，可在界面適配時保持用戶的注意力。-谷歌材料設計
組件動畫的順序是引導用戶完成旅程的一個很好的方法。即使是在微觀尺度上我們的眼睛會對運動的事物做出反應。
by Anton Tkachev
10. 夸張
夸張（加上素描和吸引力）是動畫師變得更有創造力的地方。對象的大小、形狀或移動被夸大，超出了真實性，以增加對對象的強調或興趣。
by? Voicu Apostol
11＆12. 素描和吸引力
這兩個要素都很簡單，都是指你的組件或體驗對你的用戶有多大的吸引力。這歸結為良好的設計、良好的用戶界面、良好的體驗和精致的動畫。
總結
這些原則幫助迪士尼創造了無數催人淚下的動畫片，這些動畫原則到了很大的作用。
我們如何才能把迪斯尼如此成功的東西應用到我們自己的項目中，我們中的大多數人已經在這樣做了，但這種演變實際又是什么樣的呢？大家可以根據實際項目進行多思考。
原文作者：Vernon Joyce
原文地址：https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182
編譯作者：水手哥，公眾號：水哥愛設計
本文由 @水手哥 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
動畫不錯，很有參考價值