越來越多的設計師認識到運動設計在用戶體驗中的重要性。運動不再僅僅是一種取悅用戶的方式，而是一種讓體驗變得簡單有趣的功能工具。我們中的大多數人都聽說過好的設計就是講故事。運動可以幫助我們在更短的時間內更清晰地講述故事。

在用戶界面內的移動使我們：

直接重點

建立對象之間的層次和空間關系

打造品牌品質

動畫在用戶界面仍然是一個非常新的領域。對于頁面轉換或顯示加載屏幕，幾乎沒有資源來實踐教授。我們所能做的就是通過研究傳統的動畫原理和學習如何將它們應用到抽象形狀和模式（比如我們在數字接口中看到的）來開發一個可用的運動庫。

“運動不再僅僅是一種取悅用戶的方式，而是一種讓體驗變得簡單和有趣的功能工具。”

動畫技術最常用的參考資料之一，是由Frank Thomas和Ollie Johnston在20世紀80年代介紹的迪斯尼12原則動畫。這些原則是用來指導在人物動畫中創造自然運動的錯覺。雖然運動設計師很清楚這些原則，但通過用戶界面的鏡頭來觀察它們，我們可以為這些原則添加一個以前不存在的方面：函數。在他們的指導下，我們可以提供反饋和清晰，以便更有效地與我們的用戶溝通。

用pixar的22條講故事規則改善用戶體驗，通過深入研究這些原則，我們可以獲得關于如何在功能上利用這些原則為用戶創造更好體驗的寶貴信息：

實心繪圖

這個原理或多或少是材料設計的基礎。實心繪圖是指把形狀當作實心物體來處理，因此受物理學自然定律的約束。使用實心繪圖的概念對于發展面板或信息之間的空間關系至關重要。所有物體都保持一定的重量和體積，并且受到重力、摩擦力和慣性等力的影響，所以任何運動的結果都應該反映這一點。

當物體遵守自然法則，對于用戶來說，它們的歸屬和走向是更直觀的，而簡單的感覺更好。由于面板、陰影與層之間是互動的，所以速度根據物理定律變化。

弧

物體移動的方向是告訴對象的類型。通常只有機械物體以完全直線運動，而具有有機特性的物體以弧線運動。無論你希望你的產品被接受為技術的，愚蠢的，還是優雅的，改變弧狀的運動可以讓它感覺真實的品牌的性格。

直線運動保持這款應用程序的整潔和專業，而弧線讓運動感覺更自然。

階段準備工作就是為即將發生的事情做準備。在接口的情況下，良好的運動設計使我們看到了重要的內容。當它們通過屏幕進行轉換時，分期動畫會讓人們關注下一步應該解決的問題，或者引起人們對可能啟動的潛在交互的關注。這有助于建立層次結構，并為用戶澄清操作流程。

提交按鈕只出現在用戶開始輸入評論之后，它為下一步應該采取什么行動設置了舞臺。

夸張

夸張正是它聽起來的樣子：為了引起人們對某事的注意或為了表明觀點而制造更戲劇性的事情。這可以在振動的通知鐘中顯示，或者響應交互錯誤。夸張引導焦點，明確用戶應該注意?？鋸埧梢詮娬{確認狀態和錯誤狀態。

二級動畫

當涉及到轉換時，如果轉換太快或太突然，很容易讓用戶感到困惑；二級動畫確保這不會發生。它重申了主要操作，這樣用戶就可以確定發生了什么。這是一個微妙的，有時是不明顯的推動肯定。

吸引力

吸引力集中在快樂上。如果你的動畫讓一個用戶睜大眼睛，轉過嘴唇的角落，或者發出一聲輕笑，那么你的互動就很吸引人。這給互動一個更令人難忘的體驗，并為你的品牌塑造個性。吸引力把你的產品帶到了一個新的層次——它不僅解決了一個問題，而且還有情感上的吸引力，這就是為什么人們會回來使用你的產品，而不是一個可以幫助他們實現相同目標的不同的產品。

知道這些原則只會讓你走得更遠

學習這些原則將會讓你在用戶界面動畫的大門上有一個堅實的腳，但是有時即使你已經遵守了所有的規則，你的動畫看起來仍然是不正常的。作為一名運動設計師，最重要之一就是培養品味的重要性——那是你大腦中的肌肉，能告訴你什么時候感覺對。密切關注現實世界中事物的運動方式可以顯著改善你的運動眼睛。你最好的朋友走路怎么樣？漲潮時是什么樣子？

你周圍的物體對自己的運動有何反應？開始吸收日常生活的運動，它將以令人驚訝的方式轉化為你的數字作品。

?

“每一個移動都應該是有意的，并且在某種程度上有益于用戶體驗?！?/b>

結論

這些動畫原理是永恒的，因為在設計用戶界面的時候記住它們可以大大提高產品的功能。如果使用得當，動畫甚至可以積極影響您的產品和品牌作為一個整體的成功。當為產品制作動畫時，一定要記住動作的功能——每一個動作都應該是有意的，并且在某種程度上有益于用戶體驗。利用物理學的自然法則來指導物體如何移動和相互作用。

最后，保持樂趣！有目的的設計不應該是無聊的。設計是一個令人愉快的體驗，你的用戶會不斷地回來尋找更多。

本文原鏈接：https://www.invisionapp.com/blog/animation-principles-in-ui/