動效設計的好處和效用顯而易見，甚至能夠輕松掩蓋起其可能帶來的不利后果。然而，成功高效的UI動效設計應是能為App錦上添花，而非畫蛇添足。

移動端因為有很多組件構成一個界面，添加的動效就需更具目的性和功能性，而不僅僅只是增添美感的裝飾。而且，UI設計中的動效，從設計的最初階段就應該納入考慮范圍，以避免不太成熟的設計，導致頁面整體設計太過突?；虿粔騾f調。

當然，動效的添加也需要設計師事先詳細分析其可能帶來的影響，尤其是對于App可用性和性能方面的影響。

如果，從一開始就無法預見到任何積極正面的影響，那么，設計師就需要重新考慮，是否有必要添加動效，提升用戶體驗。盡管，動效設計的好處和效用顯而易見，甚至能夠輕松掩蓋起其可能帶來的不利后果。然而，成功高效的UI動效設計應是能為App錦上添花，而非畫蛇添足。

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

反饋動效

反饋動效通知用戶特定操作已完成或失敗。其目的旨在：保證用戶與App之間保持一直處于交流的狀態。所以，一定程度上講，這類動效是模仿真實世界中人類與物體之間互動的一種方式。比如，在現實世界中，當人們按下按鈕之后，一般會感受到自己按下的力量，以及按鈕的反作用力。

而在使用移動端應用時，這樣的交互感受卻無法實現：用戶點擊屏幕時，是不能獲得類似的物理反饋。

這也就解釋了為什么，設計師們努力嘗試添加各種感應屏幕交互設計，通過震動和視覺設計等，獲得相應的app響應。而且，這也是UI動效設計中會時常嵌入一些小游戲的原因。通過動態的按鈕, 頁面切換, 開關, “對號”或“叉號”標志等，迅速通知用戶：操作已完成。

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

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

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

進度動效

如若UI交互過程比較長，而用戶需要等待時，他們更愿意或更希望了解在期間正在發生什么和進展。而進度動效的最大優勢就是能夠給予用戶一定的保證，讓他們在使用App的過程中，認識到等待期間，應用正在積極解決他們的問題，從而對其充滿信心，避免出現直接退出離開的情況。

獲得一個信心滿滿的用戶，時常意味著軟件需要提供更優的用戶體驗，并為更高的用戶留存率奠定基礎。而動態進度條，時間線以及其他動態部件的添加，能夠輕松實現類似效果：

• 通知用戶交互進程情況
• 提升界面趣味性，緩和等待帶來的消極影響
• 加強App設計的獨創性，成為一大特色，鼓勵用戶積極分享，并吸引更多用戶參與其中，實現一定的商業價值

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

加載動效

加載動效是最廣泛使用的移動端動畫類型之一。它也時常被視作是進度動效的一個子類型。因為其主要目的也是告知用戶：加載過程是活躍的，并且正在進行。而且，在實際的設計中，也存在很多加載動效的變體。例如：加載程序，啟動頁動效以及下拉刷新動畫等等。

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

吸引注意力的動效

當用戶與App互動時，這類動效發揮著增強界面可操作性的重要作用。通過吸引用戶的注意力，能夠引導用戶了解更多產品細節的炫酷動效，建立一定的視覺層次結構。如此，以縮短用戶瀏覽界面的時間，讓其導航更加清晰直觀。

如下圖，這一款Tasty Burger App的交互設計，突出特點就是其動態的價格變換。由于融入了更多現實因素，顯得更加自然。而且，其動效設計，美觀而且吸引用戶的注意力，能夠讓用戶不由自主的集中于界面的核心信息，給予用戶以無形的暗示，非常值得學習和效仿。

轉場動效

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

如下面這一款Perfect Recipes app的頁面轉換設計。其目標頁面之間的動態轉換，就給用戶提供了非常優質的用戶體驗。

而且，轉場動畫的設計和添加，不僅能夠增添整款App設計的美感，還能提升其視覺空間感，讓界面布局更加寬敞和明亮。

如圖所示：

如下圖例子，當用戶需要通過餅圖或列表視圖之類圖表展示相關數據時，動效設計能夠有效的實現其數據的可視化展示，加深用戶的印象。

營銷動效

巧妙的將品牌融入UI設計，能夠有效地提升品牌形象和知名度。而在具體的設計實例中，設計師時常通過在歡迎頁面添加品牌logo，吉祥物之類相關動效設計，加以實現。而營銷動效則通常側重于引導人們對品牌視覺標志的關注，加深其品牌知名度。

以下這款Whizzly的動態Logo設計， 引人入勝，令人難忘，輕松實現與用戶的情感交流，是一款不錯的營銷動效設計。

通知動效

通知是吸引用戶注意應用程序更新的方式。通過添加一定程度的動效設計，讓通知相對明顯，引人注目，從而降低用戶錯過重要軟件信息的可能。

如圖，在Home Budget App的界面設計中，通知不僅用鮮艷的顏色突出，而且用模仿運動的脈動突出。

滾動動效

滾動是我們在web和移動界面中使用的典型交互之一。動畫在這個過程中增添了美與雅，使之時尚、原創、和諧。請記住，滾動可以應用于不同的方向，不僅是垂直的，而且是水平的，如下圖所示的圖片應用程序。

故事化或游戲化設計

移動端App設計之所以需要添加動效設計，另一個重要原因就是：通過故事化或游戲化的動效設計，能夠有效增強應用的趣味性和吸引力。動態的表情包，徽章，獎勵以及吉祥物等，能夠讓界面更加生動有趣。比如，以下Mood Messenger的幾款反映人類情感的動態表情包，使用它們可以為用戶體驗增加強烈的情感吸引力。

UI動效設計的優缺點

添加動效與否，需要設計師事先分析其可能帶來的正面和負面影響，以權衡其必要性。我們準備了一份簡短的清單，可以幫助您進行決策。

移動端App動效設計優點：

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

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

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

譯文原地址：https://blog.tubikstudio.com/ux-design-how-to-use-animations-in-mobile-apps/

本文由 @小賤劍 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議