使用者體驗要好，App動畫得這麼做

Mockplus發表於2018-09-07

以下內容由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的幾款反映人類情感的動態表情包，應用到介面設計中時，就能夠有效的增強使用者的情感體驗，吸引和留住使用者，降低跳出率。