用戶體驗要好，App動畫得這麼作

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

在用戶體驗設計方面，App動畫的設計和添加，帶給設計師無限的創造空間的同時，也成爲設計師羣體最具爭議的話題之一。而針對這一話題，本文將就如何經過移動端App動畫設計，提供更加優質的用戶體驗以及流暢穩定的交互，進行分析。但願對你們有所啓發：

當各種App部件彙集在同一個界面時，添加的動畫就需更具目的性和功能性，而不只僅只是增添美感的裝飾。並且，UI設計中的動效，從用戶流計劃和設計的最初階段就應該歸入考慮範圍，以免不太成熟的設計，致使頁面總體設計太過突兀或不夠協調。固然，動畫的添加也須要設計師事先詳細分析其可能代來的影響，尤爲是對於App可用性和需求性方面的影響。若是，從一開始就沒法預見到任何積極正面的影響，那麼，設計師就須要從新考慮，是否有必要添加動畫，提高用戶體驗。儘管，動畫設計的好處和效用顯而易見，甚至可以輕鬆掩蓋起其可能帶來的不利後果。然而，成功高效的UI動畫設計應是能爲App錦上添花，而非多此一舉。

下面，咱們就一塊兒來回顧一些最受歡迎，且成功大幅提高用戶體驗的動畫設計類型，總結相關的設計技巧：

反饋動畫

反饋動畫可以清楚直觀地告知用戶，某些操做已成功或失敗。其目的旨在：保證用戶與App之間保持必定的交流，即便是一些最基本的操做，其做用也是如此。因此，必定程度上講，這類動畫是模仿真實世界中人類與物體之間互動的一種方式。好比，在現實世界中，當人們按下按鈕以後，通常會感覺到本身按下的力量，以及按鈕的副作用力。而在使用移動端應用時，這樣的交互感覺卻沒法實現：用戶點擊屏幕時，是不能得到相似的物理反饋。這也就解釋了爲何，設計師們努力嘗試添加各類感應屏幕交互設計，經過震動和視覺設計等，得到相應的app響應。並且，這也是UI動畫設計中會時常嵌入一些小遊戲的緣由。經過動態的按鈕, 頁面切換, 開關, 「對號」或「叉號」標誌等，迅速通知用戶：操做已完成。

好比，下面這個關於Cinema App購票流程的動畫設計, 從放映屏幕到座位的選擇方面都是經過電影海報風格的動畫加以展現：用戶選擇好喜歡的座位後，該座位的顏色會相應發生變化，以代表系統已經爲其選定好該座位。而以後，打鉤符號的出現，則預示着購票過程已完成。

又如，下面這款澆水追蹤應用的交互設計：澆水完成以後，用戶點擊查看相關詳情，界面右邊的藍色水滴按鈕就會相應的轉變成打鉤標誌，通知用戶：澆水操做已完成。

並且，即便是最多見的基礎導航設計，動效的添加也能爲用戶提供反饋，帶來樂趣。例如，看看下面這款關於按鈕展開的概念性動畫設計：經過一系列動效設計，模仿物體之間的相互做用，打造出若是凍般Q彈的展開效果。

進程動畫

如若UI交互過程不可避免的須要花費較長的時間，而用戶不得不等待時，他們更願意或更但願瞭解在其等待期間，軟件究竟作了什麼，以及其交互的進展狀況如何。而進程動畫的最大優點就是可以給予用戶必定的保證，讓他們在使用App的過程當中，認識到等待期間，應用正在積極解決他們的問題，從而對其充滿信心，避免出現直接退出離開的狀況。得到一個信心滿滿的用戶，時常意味着軟件須要提供更優的用戶體驗，併爲更高的用戶留存率奠基基礎。而動態進度條，時間線以及其餘動態部件的添加，可以輕鬆實現一舉幾得的相似效果：

• 告知用戶交互進程狀況
• 提高界面趣味性，弱化等待帶來的消極影響
• 增強App設計的首創性，成爲一大特點，鼓勵用戶積極分享，並吸引更多用戶參與其中，實現必定的商業價值

又以下圖，該款Timeline App，在用戶等待期間，經過添加從白天到夜晚的場景變換，以及數字的動態變化，展示進程狀況等動效，以減緩用戶等待時的負面情緒。

加載動畫

加載動畫是設計師最經常使用的移動端動畫類型之一。它也時常被視做是進程動畫的一個細小分支。由於其主要目的也是告知用戶：加載過程是活躍的，而且正在進行。並且，在實際的設計中，也存在不少加載動畫的變體。例如：加載器，啓動動畫以及下拉刷新動畫等等。

例如，下面一款Slumber app的下拉刷新動畫，用戶下拉刷新劇集以後，會看到一個加載輪動畫，代表劇集庫正在運行，加載相關劇集。而相應的動態插畫設計，也有效地減緩了用戶等待期間的枯燥乏味之感。

吸睛動畫

當用戶與App互動時，這類動畫發揮着加強界面可供性的重要做用。經過打造吸睛，且可以引導用戶瞭解更多產品細節的炫酷動畫，創建必定的視覺層次結構。如此，以縮短用戶瀏覽界面的時間，讓其導航更加清晰直觀。

以下圖，這一款Tasty Burger App的交互設計，突出特色就是其動態的價格變換。因爲融入了更多現實因素，顯得更加天然。並且，其動效設計，美觀吸睛，可以讓用戶情不自禁的集中於界面的核心信息，給予用戶以無形的暗示，很是值得學習和效仿。

轉場動畫

轉場動畫爲頁面之間的相互轉換添加了必定轉換風格和美感，在App 動效設計中也是很是重要的一類。

以下面這一款Perfect Recipes app（一款可以幫助用戶，根據各自目標和飲食限制，定製本身專屬的食譜的軟件）的頁面轉換設計。其目標頁面之間的動態轉換，就給用戶提供了很是優質的用戶體驗。

並且，轉場動畫的設計和添加，不只可以增添整款App設計的美感，還能提高其視覺空間感，讓界面佈局更加寬敞和明亮。如圖所示：

以下圖例子，當用戶須要經過餅圖或列表視圖之類圖表展現相關數據時，動畫設計可以有效的實現其數據的可視化展現，加深用戶的印象。

營銷動畫

巧妙的將品牌融入UI設計，可以有效地提高品牌形象和知名度。而在具體的設計實例中，設計師時常經過在歡迎頁面添加品牌logo，吉祥物之類相關動畫設計，加以實現。而營銷動畫則一般側重於引導人們對品牌視覺標誌的關注，加深其品牌知名度。如下這款Whizzly（一款可以幫助年輕一代自我提高的應用軟件）的動態Logo設計， 引人入勝，使人難忘，輕鬆實現與用戶的情感交流，是一款不錯的營銷動畫設計。

通知動畫

通知是引導用戶瞭解和使用軟件更新的重要方式。經過添加必定程度的動效設計，讓通知相對明顯，引人注目，從而下降用戶錯太重要軟件信息的可能。如圖，在Home Budget App的界面設計中，軟件通知經過明亮色彩的選用和跳動動效的添加，以吸引用戶注目。

滾動動畫

滾動交互是在Web和移動端應用設計中，最典型的交互設計之一。而動效設計可以極大地加強滾動設計的美感，使其更加新穎時尚，優雅和諧。這方面，設計師須要牢記的是：滾動設計能夠應用到各個方向，而不只限於垂直方向。以下圖 的Photo App, 也可添加水平方向的滾動設計：

故事化或遊戲化設計

移動端App設計之因此須要添加動畫設計，另外一個重要緣由就是：經過故事化或遊戲化的動畫設計，可以有效加強應用的趣味性和吸引力。動態的表情包，徽章，獎勵以及吉祥物等，可以讓界面更加生動有趣。好比，如下Mood Messenger的幾款反映人類情感的動態表情包，應用到界面設計中時，就可以有效的加強用戶的情感體驗，吸引和留住用戶，下降跳出率。

UI動畫設計的優缺點

添加動畫與否，須要設計師事先分析其可能帶來的正面和負面影響，以權衡其必要性。如下就是一個簡單的UI動畫設計優缺點對照表，但願能幫助你作出正確的選擇：

移動端App動效設計優勢：

• 節省界面空間
• 提高軟件可用性
• 增強界面設計的首創性
• 提供更加簡單、便捷的交互設計
• 提高多功能性
• 加快交互過程
• 提供清晰直觀的用戶反饋
• 建立必要的指望

而另外一方面，設計師也須要考慮到其可能帶來的一些負面影響：

• 動畫加載時間
• 增長界面干擾因素
• 費時費力的技術實現

總之，但願設計師們可以更加全面，詳細的考慮相關的優點和可能存在的問題陷阱，打造更加優質吸睛的移動端動畫App。

相關性閱讀：

15款最新家在動畫設計，讓等待成爲一種享受

UI動畫中的微交互設計技巧

提高用戶體驗：巧妙使用轉場動畫

爲何動效設計如此重要

6原則，輕鬆搞定移動端App動效設計

做者：Marina Yalanska

原文連接：tubikstudio.com/ux-design-h…

學習工具，但不受限於某種工具。Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。