UI動畫設計，不僅極大地豐富了整個Web/App界面設計，有效提升其視覺魅力. 對於展示和突出界面重要信息和功能，提升用戶體驗，也發揮著不容小覷的作用。

然而，設計一款既符合軟件特色，又不失功能性的界面動效，卻並非易事。

所以，為幫助大家輕鬆設計出吸睛炫酷，又不失創意和趣味性的UI動畫，從本月開始，Mockplus將每月為大家收集和分析最新最具創意的Web/移動端App界面動畫設計實例，希望能給大家帶來滿滿的設計靈感：

32個驚豔到爆的UI動畫設計，分分鐘打造最佳用戶體驗

從開年到現在，2019年已然過去一半。在這期間，設計界也不斷湧現出了一系列實用高效且視覺效果巨佳的界面動效設計。下面，小編就為大家一一列舉和介紹本月Mockplus為大家蒐集的最優設計：

加載動畫

現今，加載動畫，不僅能夠幫助用戶打發枯燥無味的等待時間，對於娛樂用戶，分散用戶注意，降低跳出率，也發揮著十分重要的作用。所以，下面我們來看看加載動畫應該如何設計，才能更有新意：

1. Cute Buss Loading Animation

此款公車預約租賃類App選用了卡通公車作為其主體部分，緊扣軟件主題。而且，設計中使用的行駛中的公車動畫，不斷延續，循環播放，分散用戶注意的同時，也讓用戶不自覺地忘卻時間的流逝，從而在界面停留更長的時間，成功降低軟件跳出率。

學習點：

• 緊扣Web/App主題或特色進行動畫設計

2. Robot Loading Animation

此款與進度條設計巧妙結合的加載動畫，採用了極賦現代感的機器人作為其主體部分， 輕鬆賦予網頁現代氣息。而且，隨著加載進度的加快，機器人動作也會相應加快，其表情也會隨之變化，給予用戶實時反饋的同時，也極具趣味性。

非常適合希望打造一款現代感極強的網站（例如現代科技類網站、現代家居以及裝修類網站）的設計師學習和模仿。

學習點：

• 選取新穎的動畫主題
• 結合進度條進行設計，給予用戶實時反饋，輕鬆緩解用戶的焦躁情緒

推薦閱讀：24個最新創意進度條設計，分分鐘讓你靈感爆表！！！

3. Gravity Loader

本款動畫的突出特點就在於使用了非常吸睛的重力特效。動畫中每一個字母和標點都像受到重力影響一樣，自然垂直落下，輕鬆將其同其它常見加載動畫（例如單由點、線以及形狀之類簡單元素，結合機械動效循環往復的加載動畫）有效區分開來。

學習點：

• UI動畫設計中添加吸睛炫酷的特效，例如重力/懸浮/飛行特效等

4. Happy & Sad Loading Animation

本款動畫的突出之處在於：為用戶提供了實時的情感反饋。加載過程中，界面會根據加載情況的好壞，展示不同表情包，給予用戶直觀實時的視覺反饋。傷心或高興，一目瞭然。界面加載情況，也同步瞭解。

學習點：

• UI動畫設計中提供視覺或情感反饋，優化設計，引起用戶共鳴

5. Flight Searching Loading Screen

此款由HTML和CSS打造的航班搜索界面設計，擁有一款非常炫酷有趣的加載動畫。當界面需要一定時間加載航班相關數據時，左側猴子“機長”也會隨之瞭望查看。“大師兄”專屬瞭望手勢的添加，也是非常靈動有趣了。

頁面切換動畫

頁面切換動畫也是Web/App設計的重要組成部分：

6. Bear Plant Transition Animation

此款小清新的植物類App設計，選用了左右滑動的切換動畫，簡潔易用，方便用戶根據需要自如地切換和選擇需要的植物。而且，切換時，頂部起引導作用的小熊動畫，也是十分生動可愛。

學習點：

• 添加多樣的頁面切換或引導動畫，豐富設計，例如左右/上下劃入、漸入、推入等

而這方面，在原型製作和設計的過程中，Mockplus團隊提供的全面高效的協作設計工具Mockplus iDoc就為設計師們提供了非常豐富的頁面動畫設計功能。例如上下/左右推入、劃入、翻轉以及縮放等等。觸發命令和動畫時長也可一鍵輕鬆設置。

7. Mini Game Transition Animation

此款作品集類網站設計使用了獨特的右下角切入的轉換動畫。用戶可輕鬆點擊“Next”進行頁面切換，查看網頁詳情。

8. Closer Cards Transition Animation

此款遊戲類網頁設計選用了非常吸睛的旋轉切換動畫。

9. Digital Stream Transition Animation

此款科技類網頁設計案例採用了非常炫酷的卡片流轉轉換動畫。用戶可輕鬆點擊需要的卡片模塊，瞭解其相關內容。

導航動畫

一款絕佳的導航動畫，不僅能夠有成功引導用戶，還能有效提升網站專業度、趣味性以及可用性：

10. Online RPG Bottom Navigation Animation

環形導航在移動端設計中日益流行。不單單因其相較於常見的橫排或豎排導航更加吸睛炫酷，還因其簡潔實用，結合不同色彩、圖標甚至展開動畫的變化，更具多變性，視覺吸引力也更強。

而此款經典在線RPG遊戲類App就採用環形導航設計。用戶可輕鬆旋轉導航，查看需要的內容信息。

學習點：

• 添加炫酷吸睛的環形導航，輕鬆提升設計高級感

11. Menu Animation

此款導航設計的突出特點就在於：用戶可簡單點擊切換各個選項，簡約而實用。十分適合一些Android/iOS移動端App選用的設計。

12. Ukraine Navigation Sidebar Animation

本款時尚服裝類網頁採用了簡潔易用的側邊欄導航設計。用戶可簡單點擊展開或隱藏該導航，從而更加輕鬆快捷地查找需要的時尚服飾。

13. Dyrdek Machine Navigation Animation

本款網頁設計獨特之處在於：選用了線性導航設計。用戶左右手勢滑動，即可輕鬆切換不同網頁模塊。

學習點：

• 導航設計不僅可在展開方式上做文章，展開特效也能讓其與眾不同

14. Bottom Bar Animation

此款移動端App底部導航欄添加了極具特色的選中特效，以優化其導航設計。

學習點：

• 添加吸睛選中特效，優化設計

例如，在具體的導航設計中，添加色彩、圖標、形狀，背景、位置、文本以及動效的變化，以突出選中項。

按鈕動畫

吸睛的按鈕動畫，吸引用戶點擊的同時，也能夠有效促成網站或App商業價值的實現。

15. Subscribe Animation Template

此款Youtube訂閱類按鈕動畫展示了一系列擁有炫酷特效的訂閱和點贊類按鈕設計。非常適合設計師們學習和借鑑。

16. Ghost Button Animation

幽靈按鈕搭配幽靈動畫，絕配，不是嗎？

17. Floating Action Button Interaction

現今，懸浮按鈕常見於極簡主義網頁/App設計中，用於打造簡約幹練的界面設計。用戶點擊懸浮按鈕，即可展開網頁/App導航，輕鬆切換到其他網頁/App界面和模塊，簡潔易用。

18. Night Mode Button Animation

此款按鈕設計創意的結合了夜間模式和白天模式進行設計，極具有特色。

學習點

：

• 夜間模式和白天模式不僅可用於按鈕設計，也可擴展運用到整個網頁/App設計中，使其更具創意和個性

品牌/Logo動畫

UI設計中的品牌或Logo動畫，向用戶展示品牌或產品信息的同時，也給用戶以深刻印象，從而輕鬆提升網站或品牌知名度。

19. Home of Drones Logo Animation

本款Logo動畫採用滿屏抽象化的無人機設計吸引用戶注意，讓用戶輕鬆記住其品牌的同時，也更加清晰生動的展示其產品和主題，非常直觀實用。

20. Tapwander Logo Animation

此款2D logo動畫的優秀之處就在於添加了非常自然靈動的小鳥設計，瞬間賦予網站生機。而且，漸變色的運用，也使整個Logo設計更具視覺魅力。

21. Logo Animation

簡單線條和基本動效的結合也可與眾不同。

22. Fly Logotype Animation

一款真正能夠“飛翔”的Logo設計，名副其實。

23. Be GLAD Logo Animation

網頁或Logo動畫設計中，添加豐富的動效設計，也可成為一大突破點。

鼠標懸浮動畫

優質吸睛的鼠標懸浮動畫，也是設計師提升UI視覺表現力的重要因素：

24. Femme Fierce Hover Animations

此款服裝類網頁設計在整個UI設計中添加了非常豐富的鼠標懸浮動畫，讓用戶抑制不住點擊，從而成功實現購買。

更多優質創意UI動畫實例：

25. Portfolio Website Animation

進入本作品集網站之後，用戶可輕鬆點擊，打散滿屏的文本字母，如玩遊戲一般，十分有趣。

26. Sign In Form UI Animation

當用戶輸入用戶名和密碼進行登錄時，界面右側的卡通毛蟲設計，也會隨之矇眼，以體現其安全性。十分貼心周到。

27. Request Form Design Animation

當用戶填寫相關表單內容時，右側無色圖片也會逐漸添加對應色彩，給予用戶同步的視覺反饋的同時，也無形中暗示用戶儘快將表單填寫完整。

28. Dashboard Animations

簡潔直觀的數據展示和清晰流暢的聯動設計，是判斷Dashboard類界面設計好壞與否的重要依據。而從這兩點來看，此款轎車類dashboard設計無疑是不容錯過的優秀設計。

29. Card UI Animation

此款動畫設計展示了一系列美觀實用的UI卡片式設計，非常值得設計師學習。

30. Ekpatrioci Web UI Animation

此款推廣營銷類網頁選用了多樣的插畫動畫，來直觀展示其網頁信息，美觀吸睛，又不失實用性。右側線性導航設計也是相當簡潔易懂。

31. Square Game UI Animation

此款網頁設計實例添加了大量動畫設計。無論是其圖片動畫、文本動畫，還是背景動畫，都無形中講述著一句話“Let’s rock!”。非常符合其遊戲類網站的主題。

32. Mirror Ball UI Animation

此款市場營銷類網站打造了一個非常吸睛炫酷的創意球來展示其以往營銷案例。用戶可輕鬆拖拽旋轉或滾動鼠標放大或縮小來選擇和查看需要的項目。

---

希望大家能夠在此獲得靈感，併產出精美的設計。