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

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

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

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

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

加載動畫

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

1. Cute Buss Loading Animation

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

學習點：

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

2. Robot Loading Animation

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

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

學習點：

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

推薦閱讀：24個最新創(chuàng)意進度條設計，分分鐘讓你靈感爆表！?。?/p>

3. Gravity Loader

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

學習點：

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

4. Happy & Sad Loading Animation

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

學習點：

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

5. Flight Searching Loading Screen

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

頁面切換動畫

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

6. Bear Plant Transition Animation

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

學習點：

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

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

7. Mini Game Transition Animation

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

8. Closer Cards Transition Animation

此款游戲類網(wǎng)頁設計選用了非常吸睛的旋轉(zhuǎn)切換動畫。

9. Digital Stream Transition Animation

此款科技類網(wǎng)頁設計案例采用了非常炫酷的卡片流轉(zhuǎn)轉(zhuǎn)換動畫。用戶可輕松點擊需要的卡片模塊，了解其相關(guān)內(nèi)容。

導航動畫

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

10. Online RPG Bottom Navigation Animation

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

而此款經(jīng)典在線RPG游戲類App就采用環(huán)形導航設計。用戶可輕松旋轉(zhuǎn)導航，查看需要的內(nèi)容信息。

學習點：

• 添加炫酷吸睛的環(huán)形導航，輕松提升設計高級感

11. Menu Animation

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

12. Ukraine Navigation Sidebar Animation

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

13. Dyrdek Machine Navigation Animation

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

學習點：

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

14. Bottom Bar Animation

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

學習點：

• 添加吸睛選中特效，優(yōu)化設計

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

按鈕動畫

吸睛的按鈕動畫，吸引用戶點擊的同時，也能夠有效促成網(wǎng)站或App商業(yè)價值的實現(xiàn)。

15. Subscribe Animation Template

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

16. Ghost Button Animation

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

17. Floating Action Button Interaction

現(xiàn)今，懸浮按鈕常見于極簡主義網(wǎng)頁/App設計中，用于打造簡約干練的界面設計。用戶點擊懸浮按鈕，即可展開網(wǎng)頁/App導航，輕松切換到其他網(wǎng)頁/App界面和模塊，簡潔易用。

18. Night Mode Button Animation

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

學習點：

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

品牌/Logo動畫

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

19. Home of Drones Logo Animation

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

20. Tapwander Logo Animation

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

21. Logo Animation

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

22. Fly Logotype Animation

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

23. Be GLAD Logo Animation

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

鼠標懸浮動畫

優(yōu)質(zhì)吸睛的鼠標懸浮動畫，也是設計師提升UI視覺表現(xiàn)力的重要因素：

24. Femme Fierce Hover Animations

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

更多優(yōu)質(zhì)創(chuàng)意UI動畫實例：

25. Portfolio Website Animation

進入本作品集網(wǎng)站之后，用戶可輕松點擊，打散滿屏的文本字母，如玩游戲一般，十分有趣。

26. Sign In Form UI Animation

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

27. Request Form Design Animation

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

28. Dashboard Animations

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

29. Card UI Animation

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

30. Ekpatrioci Web UI Animation

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

31. Square Game UI Animation

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

32. Mirror Ball UI Animation

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

希望大家能夠在此獲得靈感，并產(chǎn)出精美的設計。