2021-3-15 ui設計分享達人
迪士尼的12條動畫基本原則是傳統動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統動畫（例如角色動畫）設計的，但在本文中，我們將探討如何將其中的一些原理應用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質量，彈性。當場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結合。
例如，按鈕的按下狀態為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態。除此之外，它還可以應用于界面上的所有的交互式元素。
應用于按鈕上的擠壓和拉伸
應用于側邊欄的擠壓和拉伸
預備動作為用戶展示了即將發生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預備動作。在UI動效中，懸停狀態就是很好的例子。每當我們將鼠標懸停在元素上時，某些元素都會做出反應，表明它是可單擊的，并且當您單擊它時會發生某些事情。
懸停互動通常會告訴我們接下來有一個動作發生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現在滾動/滑動中
在傳統動畫中，時間由繪制的幀動畫來控制。幀數越多，動畫將越流暢和越慢。時間還可以表現對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續時間都有很好的解釋。
右側的過渡會使用戶等待太久
現實世界中的大多數對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節奏和緩動標準可以讓你建立一個高效的動效庫。
右側添加了緩動效果，所以看起來更自然
轉場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉場決定了元素的放置位置以及在發生交互時如何對元素進行排版。它將用戶的注意力引向最關鍵的元素。
這是一個音樂類的APP，轉場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。
弧線運動更加生動自然
在動畫中，輔助動畫用于強調場景中發生主要動作。例如，角色的頭發在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設計就是一個很好的例子，懸浮的按鈕在靜態狀態很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當發生任何交互時，夸張的動畫讓它可以占據整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設計師深海
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務