?譯者：Lily

來源：Medium-Tubik工作室

原文鏈接:https://uxplanet.org/ux-design-how-to-use-animations-in-mobile-applications-a8257ebffe90

在用戶體驗設計中兢榨，應用動畫為界面帶來了更大的創(chuàng)意空間跌榔，也是為什么我們要在界面中加入動畫元素的原因之一。在今天的文章中辈挂，我們將考慮如何在移動應用程序設計中使用動畫來為界面設計提供良好的的用戶體驗和順暢的交互。

當所有的內容都集中到界面時匠题，APP動畫必須是功能元素而不是裝飾边涕。我們所添加的動畫必須分析它們對移動應用程序的可用性和可取性，如何造成反面影響衍锚，請重新考慮該方法的使用友题。在交互過程中運動的優(yōu)點和效用必須是顯而易見的，良好的UI動畫只會使界面更加出色戴质。接下來看一下目前比較流行的動畫類別有哪些：

反饋動畫

是通知用戶的操作失敗或成功度宦。它是用戶和應用程序之間的通信線，它的創(chuàng)作靈感來源于我們真實世界中與物體的互動告匠。例如戈抄，當你按下一個真實按鈕時，您會感受到動作的強度和阻力后专。而在移動應用程序中呛凶，這種感覺是不可能的：您點擊屏幕時，并沒有物理反饋行贪。這就是為什么我們要為屏幕設計交互的原因漾稀，我們的操作需要震動或者視覺信息來為應用程序提供響應。當我們要操作按鈕時建瘫，點擊按鈕崭捍，切換、開關啰脚、勾號或者十字加號可以快速通知用戶操作是否完成殷蛇。

例如实夹，我們購買電影門票時的交互流程。從放映屏幕到座位選擇的轉換是通過電影海報的動畫制作的：屏幕轉換成電影播放廳的圖片粒梦。選擇需要的座位亮航，用戶可以看到按鈕顏色的轉變來了解到系統(tǒng)是否接受了數(shù)據(jù)。

另一個例子的交互中可以看到給植物澆水匀们，用戶點擊按鈕缴淋，它將圖像從下降到刻度，出現(xiàn)的勾號動畫泄朴，表示所需的操作已完成重抖。

即使是基本的標簽導航，移動UI動畫也可以為用戶的操作帶來樂趣祖灰。檢查這個可擴展按鈕的概念：通過一撮運動钟沛，它模仿與果凍等物質的彈出物理交互動作。

進度動畫

如果頁面的交互時間過長局扶，用戶必須等待恨统，這時我們必須告訴用戶正在發(fā)展的事情的進展。這種動畫交互最大的優(yōu)勢就是為用戶提供保證三妈，使他們在使用產(chǎn)品的過程中感到愉悅畜埋。進度條和時間軸的運用使我們可以清晰的為用戶提供發(fā)展情況：

告訴用戶有關進度的信息

情感化設計，減少用戶等待的焦慮感

優(yōu)雅的設計沈跨，可以像病毒一樣得到傳播由捎，讓用戶希望與他人分享，讓用戶參與其中

下面這個例子是一個時間軸的交互動畫：從白天到夜晚的過度饿凛，而按鈕顯示數(shù)字的進度狞玛。

加載動畫

加載動畫是最廣泛使用的交互動畫類型之一。它可以定義為進度動畫的子類型涧窒，因為它也是通知用戶加載過程的活動心肪。它有不同的變體，如加載器纠吴、預加載硬鞍、拉動刷新等動畫。

下面是Slumber應用程序中的puii-to-refresh的例子：拉動新劇集的標簽戴已，用戶正在等待并看到加載的微動畫固该，其中顯示軌道庫刷新正在進行中，而動畫插圖使得等待的時間并不那么無聊糖儡。

注意力動畫

當用戶與你的應用程序互動時伐坏，這種動畫扮演用戶體驗的角色。他支持一般的視覺層次結構握联，動作引起用戶的注意并將其引導至必要的細節(jié)桦沉。此外每瞒，通過動作，它可以吸引用戶注意核心信息纯露，從而提示要查看的內容剿骨。

Tasty Burger應用程序的這組交互動畫功能在價格變化上使用的動畫。流暢自然的動畫給價格變動增添了生命埠褪。

過渡動畫

過渡動畫在交互過程中風格優(yōu)雅浓利，我們常見的引導頁設計就采用這種典型的交互動畫，從一個屏幕到另一個屏幕组橄。

以下是Perfect Recipes應用程序中的一組過渡：用戶根據(jù)他們的目標和飲食選擇食譜荞膘，卡片之間的過渡起到良好的用戶體驗罚随。

下面一個列子玉工，當用戶從餅圖列表到列表視圖保存和顏色標記時，這是轉換過程的創(chuàng)意動畫的另一個示例：動畫使屏幕和數(shù)據(jù)可視化之間的連接彼此緊密連接淘菩，并讓用戶看到此鏈接遵班。

營銷動畫

明智地將品牌整合到UI設計可以提高品牌的知名度。大多數(shù)情況下潮改，它是徽標狭郑、吉祥物等的動畫，通常使用場景在啟動頁面汇在。這樣的運用可以吸引用戶對品牌視覺標志的關注翰萨。

通知動畫

通知是吸引用戶注意應用程序更新的標志。在動人的動畫的支持下糕殉，通知變得更加明顯亩鬼，并且可以使用戶不錯過重要的信息的可能性更高。下面這個例子：通知不僅具有鮮艷的顏色阿蝶，而且還具有模仿脈動的運動雳锋。

滾動動畫

滾動是我們在web和移動界面中習慣使用的典型交互之一。動畫的使用使這個過程增添了美感和優(yōu)雅羡洁。請記住玷过，滾動可以應用于不同的方向，垂直方向或者水平方向筑煮，如下面的Photo App所示：

故事和情緒化動畫

在移動應用程序中使用動畫的另一個原因是使其成為故事或游戲的一部分辛蚊。動畫貼紙，徽章真仲，獎勵袋马，吉祥物 - 這些只是使應用界面有趣和生動的幾種方法。例如袒餐，這里可以看到Mood Messenger的動畫貼紙飞蛹，反映出各種感受谤狡，它們可以為用戶體驗增添強烈的情感吸引力。

UI動畫的優(yōu)點與缺陷

在移動應用中的動畫卧檐，設計師應分析他們可能對應用互動產(chǎn)生的積極和消極影響墓懂。

UI動畫的優(yōu)點：

保存了屏幕空間

提高了可用性

獨創(chuàng)性

方便易用的互動

能夠同時完成多個功能

加快互動過程

向用戶提供明確的反饋

創(chuàng)造必要的期望

UI動畫的缺點：

加載時間的等待

個別動畫的運用容易使用戶分心

耗費時間和精力的技術實現(xiàn)

文章看完了，有私貨給你霉囚。這里有一份 【免費領取設計素材】?的機會捕仔，你要嗎？

掃碼一次性加入知識星球盈罐，不定期更新設計素材資源榜跌，可隨時獲得各種設計素材（UI設計界面、教學教程視頻盅粪、app界面模版下載钓葫，還有相關PDF電子版設計書籍等你來領。統(tǒng)統(tǒng)都是源文件哦）票顾。

獲取方式：由于是新開賬戶所以前【10】名加入者是免費的础浮，不收取任何費用。關注微信公眾號“U點計”奠骄，回復【666】添加星主微信豆同，私發(fā)免費入口給你，免費名額還有【3】 個含鳞，掃描可預覽星球主題影锈。機會難得快快行動吧！