動(dòng)效設(shè)計(jì)的好處和效用顯而易見(jiàn)，甚至能夠輕松掩蓋起其可能帶來(lái)的不利后果。然而，成功高效的UI動(dòng)效設(shè)計(jì)應(yīng)是能為App錦上添花，而非畫蛇添足。

移動(dòng)端因?yàn)橛泻芏嘟M件構(gòu)成一個(gè)界面，添加的動(dòng)效就需更具目的性和功能性，而不僅僅只是增添美感的裝飾。而且，UI設(shè)計(jì)中的動(dòng)效，從設(shè)計(jì)的最初階段就應(yīng)該納入考慮范圍，以避免不太成熟的設(shè)計(jì)，導(dǎo)致頁(yè)面整體設(shè)計(jì)太過(guò)突?；虿粔騾f(xié)調(diào)。

當(dāng)然，動(dòng)效的添加也需要設(shè)計(jì)師事先詳細(xì)分析其可能帶來(lái)的影響，尤其是對(duì)于App可用性和性能方面的影響。

如果，從一開(kāi)始就無(wú)法預(yù)見(jiàn)到任何積極正面的影響，那么，設(shè)計(jì)師就需要重新考慮，是否有必要添加動(dòng)效，提升用戶體驗(yàn)。盡管，動(dòng)效設(shè)計(jì)的好處和效用顯而易見(jiàn)，甚至能夠輕松掩蓋起其可能帶來(lái)的不利后果。然而，成功高效的UI動(dòng)效設(shè)計(jì)應(yīng)是能為App錦上添花，而非畫蛇添足。

下面，我們就一起來(lái)回顧一些最受歡迎，且成功大幅提升用戶體驗(yàn)的動(dòng)效設(shè)計(jì)類型，總結(jié)相關(guān)的設(shè)計(jì)技巧：

反饋動(dòng)效

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

而在使用移動(dòng)端應(yīng)用時(shí)，這樣的交互感受卻無(wú)法實(shí)現(xiàn)：用戶點(diǎn)擊屏幕時(shí)，是不能獲得類似的物理反饋。

這也就解釋了為什么，設(shè)計(jì)師們努力嘗試添加各種感應(yīng)屏幕交互設(shè)計(jì)，通過(guò)震動(dòng)和視覺(jué)設(shè)計(jì)等，獲得相應(yīng)的app響應(yīng)。而且，這也是UI動(dòng)效設(shè)計(jì)中會(huì)時(shí)常嵌入一些小游戲的原因。通過(guò)動(dòng)態(tài)的按鈕, 頁(yè)面切換, 開(kāi)關(guān), “對(duì)號(hào)”或“叉號(hào)”標(biāo)志等，迅速通知用戶：操作已完成。

比如，下面這個(gè)關(guān)于電影APP購(gòu)票流程的動(dòng)效設(shè)計(jì), 從放映屏幕到座位的選擇方面都是通過(guò)電影海報(bào)風(fēng)格的動(dòng)效加以展示：用戶選擇好喜歡的座位后，該座位的顏色會(huì)相應(yīng)發(fā)生變化，以表明系統(tǒng)已經(jīng)為其選定好該座位。而之后，打鉤符號(hào)的出現(xiàn)，則預(yù)示著購(gòu)票過(guò)程已完成。

又如，下面這款澆水追蹤應(yīng)用的交互設(shè)計(jì)：澆水完成之后，用戶點(diǎn)擊查看相關(guān)詳情，界面右邊的藍(lán)色水滴按鈕就會(huì)相應(yīng)的轉(zhuǎn)變成打鉤標(biāo)志，通知用戶：澆水操作已完成。

而且，即使是最常見(jiàn)的基礎(chǔ)導(dǎo)航設(shè)計(jì)，動(dòng)效的添加也能為用戶提供反饋，帶來(lái)樂(lè)趣。例如，看看下面這款關(guān)于按鈕展開(kāi)的概念性動(dòng)效設(shè)計(jì)：通過(guò)一系列動(dòng)效設(shè)計(jì)，模仿物體之間的相互作用，打造出如果凍般Q彈的展開(kāi)效果。

進(jìn)度動(dòng)效

如若UI交互過(guò)程比較長(zhǎng)，而用戶需要等待時(shí)，他們更愿意或更希望了解在期間正在發(fā)生什么和進(jìn)展。而進(jìn)度動(dòng)效的最大優(yōu)勢(shì)就是能夠給予用戶一定的保證，讓他們?cè)谑褂肁pp的過(guò)程中，認(rèn)識(shí)到等待期間，應(yīng)用正在積極解決他們的問(wèn)題，從而對(duì)其充滿信心，避免出現(xiàn)直接退出離開(kāi)的情況。

獲得一個(gè)信心滿滿的用戶，時(shí)常意味著軟件需要提供更優(yōu)的用戶體驗(yàn)，并為更高的用戶留存率奠定基礎(chǔ)。而動(dòng)態(tài)進(jìn)度條，時(shí)間線以及其他動(dòng)態(tài)部件的添加，能夠輕松實(shí)現(xiàn)類似效果：

• 通知用戶交互進(jìn)程情況
• 提升界面趣味性，緩和等待帶來(lái)的消極影響
• 加強(qiáng)App設(shè)計(jì)的獨(dú)創(chuàng)性，成為一大特色，鼓勵(lì)用戶積極分享，并吸引更多用戶參與其中，實(shí)現(xiàn)一定的商業(yè)價(jià)值

又如下圖，該款時(shí)間線應(yīng)用，在用戶等待期間，通過(guò)添加從白天到夜晚的場(chǎng)景變換，以及數(shù)字的動(dòng)態(tài)變化，展現(xiàn)進(jìn)程情況等動(dòng)效，以減緩用戶等待時(shí)的負(fù)面情緒。

加載動(dòng)效

加載動(dòng)效是最廣泛使用的移動(dòng)端動(dòng)畫類型之一。它也時(shí)常被視作是進(jìn)度動(dòng)效的一個(gè)子類型。因?yàn)槠渲饕康囊彩歉嬷脩簦杭虞d過(guò)程是活躍的，并且正在進(jìn)行。而且，在實(shí)際的設(shè)計(jì)中，也存在很多加載動(dòng)效的變體。例如：加載程序，啟動(dòng)頁(yè)動(dòng)效以及下拉刷新動(dòng)畫等等。

例如，下面一款Slumber app的下拉刷新動(dòng)效，用戶下拉刷新劇集之后，會(huì)看到一個(gè)加載動(dòng)效，表明劇集庫(kù)正在運(yùn)行，加載相關(guān)劇集。而相應(yīng)的動(dòng)態(tài)插畫設(shè)計(jì)，也有效地減緩了用戶等待期間的枯燥乏味之感。

吸引注意力的動(dòng)效

當(dāng)用戶與App互動(dòng)時(shí)，這類動(dòng)效發(fā)揮著增強(qiáng)界面可操作性的重要作用。通過(guò)吸引用戶的注意力，能夠引導(dǎo)用戶了解更多產(chǎn)品細(xì)節(jié)的炫酷動(dòng)效，建立一定的視覺(jué)層次結(jié)構(gòu)。如此，以縮短用戶瀏覽界面的時(shí)間，讓其導(dǎo)航更加清晰直觀。

如下圖，這一款Tasty Burger App的交互設(shè)計(jì)，突出特點(diǎn)就是其動(dòng)態(tài)的價(jià)格變換。由于融入了更多現(xiàn)實(shí)因素，顯得更加自然。而且，其動(dòng)效設(shè)計(jì)，美觀而且吸引用戶的注意力，能夠讓用戶不由自主的集中于界面的核心信息，給予用戶以無(wú)形的暗示，非常值得學(xué)習(xí)和效仿。

轉(zhuǎn)場(chǎng)動(dòng)效

轉(zhuǎn)場(chǎng)動(dòng)效為頁(yè)面之間的相互轉(zhuǎn)換添加了一定轉(zhuǎn)換風(fēng)格和美感，在App 動(dòng)效設(shè)計(jì)中也是非常重要的一類。

如下面這一款Perfect Recipes app的頁(yè)面轉(zhuǎn)換設(shè)計(jì)。其目標(biāo)頁(yè)面之間的動(dòng)態(tài)轉(zhuǎn)換，就給用戶提供了非常優(yōu)質(zhì)的用戶體驗(yàn)。

而且，轉(zhuǎn)場(chǎng)動(dòng)畫的設(shè)計(jì)和添加，不僅能夠增添整款A(yù)pp設(shè)計(jì)的美感，還能提升其視覺(jué)空間感，讓界面布局更加寬敞和明亮。

如圖所示：

如下圖例子，當(dāng)用戶需要通過(guò)餅圖或列表視圖之類圖表展示相關(guān)數(shù)據(jù)時(shí)，動(dòng)效設(shè)計(jì)能夠有效的實(shí)現(xiàn)其數(shù)據(jù)的可視化展示，加深用戶的印象。

營(yíng)銷動(dòng)效

巧妙的將品牌融入U(xiǎn)I設(shè)計(jì)，能夠有效地提升品牌形象和知名度。而在具體的設(shè)計(jì)實(shí)例中，設(shè)計(jì)師時(shí)常通過(guò)在歡迎頁(yè)面添加品牌logo，吉祥物之類相關(guān)動(dòng)效設(shè)計(jì)，加以實(shí)現(xiàn)。而營(yíng)銷動(dòng)效則通常側(cè)重于引導(dǎo)人們對(duì)品牌視覺(jué)標(biāo)志的關(guān)注，加深其品牌知名度。

以下這款Whizzly的動(dòng)態(tài)Logo設(shè)計(jì)， 引人入勝，令人難忘，輕松實(shí)現(xiàn)與用戶的情感交流，是一款不錯(cuò)的營(yíng)銷動(dòng)效設(shè)計(jì)。

通知?jiǎng)有?/h2>

通知是吸引用戶注意應(yīng)用程序更新的方式。通過(guò)添加一定程度的動(dòng)效設(shè)計(jì)，讓通知相對(duì)明顯，引人注目，從而降低用戶錯(cuò)過(guò)重要軟件信息的可能。

如圖，在Home Budget App的界面設(shè)計(jì)中，通知不僅用鮮艷的顏色突出，而且用模仿運(yùn)動(dòng)的脈動(dòng)突出。

滾動(dòng)動(dòng)效

滾動(dòng)是我們?cè)趙eb和移動(dòng)界面中使用的典型交互之一。動(dòng)畫在這個(gè)過(guò)程中增添了美與雅，使之時(shí)尚、原創(chuàng)、和諧。請(qǐng)記住，滾動(dòng)可以應(yīng)用于不同的方向，不僅是垂直的，而且是水平的，如下圖所示的圖片應(yīng)用程序。

故事化或游戲化設(shè)計(jì)

移動(dòng)端App設(shè)計(jì)之所以需要添加動(dòng)效設(shè)計(jì)，另一個(gè)重要原因就是：通過(guò)故事化或游戲化的動(dòng)效設(shè)計(jì)，能夠有效增強(qiáng)應(yīng)用的趣味性和吸引力。動(dòng)態(tài)的表情包，徽章，獎(jiǎng)勵(lì)以及吉祥物等，能夠讓界面更加生動(dòng)有趣。比如，以下Mood Messenger的幾款反映人類情感的動(dòng)態(tài)表情包，使用它們可以為用戶體驗(yàn)增加強(qiáng)烈的情感吸引力。

UI動(dòng)效設(shè)計(jì)的優(yōu)缺點(diǎn)

添加動(dòng)效與否，需要設(shè)計(jì)師事先分析其可能帶來(lái)的正面和負(fù)面影響，以權(quán)衡其必要性。我們準(zhǔn)備了一份簡(jiǎn)短的清單，可以幫助您進(jìn)行決策。

移動(dòng)端App動(dòng)效設(shè)計(jì)優(yōu)點(diǎn)：

• 節(jié)省界面空間
• 提升軟件可用性
• 加強(qiáng)界面設(shè)計(jì)的獨(dú)創(chuàng)性
• 提供更加簡(jiǎn)單、便捷的交互設(shè)計(jì)
• 提升多功能性
• 加快交互過(guò)程
• 提供清晰直觀的用戶反饋
• 創(chuàng)建必要的期望

而另一方面，設(shè)計(jì)師也需要考慮到其可能帶來(lái)的一些負(fù)面影響：

• 動(dòng)畫加載時(shí)間
• 增加界面干擾因素
• 費(fèi)時(shí)費(fèi)力的技術(shù)實(shí)現(xiàn)

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

本文由 @小賤劍 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議