在頁面中注入動畫設計，可以使得原本沉悶的頁面變得更加生動活躍起來，給使用者帶來更深刻的印象，同時增長停留的時間。本文總結了十個動畫設計，希望對你有所幫助。
在設計過程中，動畫的加入能為産品增加閃光點，讓原本沉悶的界面更有活力，給使用者帶來更深的印象。
通過彙總動畫設計值得注意的十個方法，幫助大家進一步了解UI/UX設計中的動畫應該怎麼做～
一、從原型設計開始
無論是設計初學者還是經驗豐富的設計師，在建立動畫前都需要進行原型設計。
在原型階段，對産品和界面進行打磨推敲，能夠避免在後期動畫設計過程中花費時間返工修改。
二、符合實體定律
這條原則是指動畫設計要展現現實中物體運動的規律，符合重力、慣性、摩擦等實體定律。確定每個元素都沿着預設的軌迹移動，同時考慮到形狀、大小和其他實體特性。
通過遵循實體定律，動畫能展現更多細節，為使用者帶來熟悉的感覺和更好的體驗，避免動畫過于生硬和單調。
三、擠壓/拉伸元素
在常見到的卡片式界面設計中，對使用者的操作做出卡片收縮、放大、改變重心等回報效果，讓動畫盡可能逼真。
四、確定平穩移動
在現實生活中，物體不能一直勻速不變的運動，而是以抛物線的形式運動。把這個特性加入到動畫設計中，使用者與界面的互動會更加自然，緩入緩出的動畫效果會更好。
五、注意螢幕間的過渡
在APP中避免突然從一個螢幕切換到另一個，應該讓使用者有所感覺，能夠為即将發生的操作做好準備。
每款産品界面的過渡動畫都不太一樣，我們可以充分發揮想象力，讓這類必備的翻頁動畫過渡的更有創意。
六、添加趣味性
為了讓使用者清楚地了解每一步操作之後的結果，并讓他們将注意力集中在這一點上，可以讓等待的過程變得更加具有趣味性。
例如在展示操作錯誤的場景中，可以彈出感歎号或叉号來告訴使用者操作出現了問題，以及希望使用者采取的操作。
七、劃分層次結構
通過動效設計，可以很清晰地反映出界面中哪個元素更重要。因為最重要的元素通常會在動畫的開頭就出現，優先級最高，友善使用者快速捕捉。
八、提供視覺提示
對于剛使用某個産品的新使用者來說，要想完全摸透這個産品的全部功能，需要花費很多的學習成本和時間成本，通過動畫提示，可以顯著降低初次使用産品的門檻。
例如，使用動畫提示向新使用者解釋如何處理界面元素或者給出示例。
九、確定動畫時長與操作相比對
考慮每一段動畫應該持續多長時間，這樣使用者就不需要點選了某個操作，還要等這段動畫結束了之後，再進行下一步操作。
另外，如果動畫結束得太快，可能不利于觀看導緻使用者無法了解。是以在最終上線前，要經過嚴格的測試和稽核，確定每一段動畫的時長都能與使用者的目标相比對。
十、考慮動畫的類型
在設計過程中，我們要根據産品的調性和使用場景比對最合理的動畫類型，為産品帶來錦上添花的效果。
例如，彈跳類型的動畫不适用于太過正式的企業應用或者官網上，同理，過于單調、不起眼的動畫放在娛樂類APP中也不太搭配。
最後
以上就是動畫設計值得注意的十個方法，希望通過這些内容能讓大家進一步了解UI/UX設計中的動畫，讓單調的界面“動”起來~
專欄作家
作者：Clippp，微信公衆号：Clip設計夾。每周精選設計文章，專注分享關于産品、互動、UI視覺上的設計思考。
本文原創釋出于人人都是産品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。