聲明：如需轉(zhuǎn)載，請(qǐng)申請(qǐng)本人授權(quán)并保留文章全部信息，嚴(yán)禁私自用于任何商業(yè)用途，請(qǐng)尊重原文作者及譯者權(quán)益。

在用戶體驗(yàn)設(shè)計(jì)中，app動(dòng)畫呈現(xiàn)了無(wú)限的創(chuàng)造可能性，同時(shí)也是目前引起熱議的設(shè)計(jì)趨勢(shì)。在今天的文章中，我們將討論在app設(shè)計(jì)中如何使用動(dòng)畫來(lái)獲得積極的用戶體驗(yàn)和流暢的交互操作。

因?yàn)樗袞|西都被整合到一個(gè)頁(yè)面，app動(dòng)畫必須是功能型元素而不是裝飾性元素。動(dòng)效元素應(yīng)該在策劃用戶旅程初期就考慮。設(shè)計(jì)動(dòng)畫時(shí)，你需要分析它們?cè)诳捎眯院涂善谕陨系挠绊?mdash;—如果你看不到積極的影響，就要重新考慮下。在交互過(guò)程中，動(dòng)效的優(yōu)點(diǎn)和效用必須是顯而易見的，并且要超過(guò)可能出現(xiàn)的缺陷。好的UI動(dòng)畫可以達(dá)到錦上添花的作用。讓我們回顧一下能增強(qiáng)用戶界面體驗(yàn)的最流行的幾種動(dòng)畫類型。

反饋型動(dòng)畫

反饋型動(dòng)畫告訴用戶特定的操作是成功了還是失敗了。即使在最基本的操作中，這種動(dòng)畫也能保持用戶和app之間的交流。某種程度上，它能在物理世界引發(fā)和真實(shí)物體之間的互動(dòng)。比如，當(dāng)你按一個(gè)真的按鈕時(shí)，你能感受到這個(gè)動(dòng)作的力度和按鈕的阻力。在移動(dòng)設(shè)備上，這種情況是不可能的：你只是點(diǎn)擊屏幕，但是卻沒(méi)有相應(yīng)的反饋。這就是為什么在與傳感器屏幕交互時(shí)，我們通過(guò)震動(dòng)和視覺(jué)符號(hào)來(lái)獲得反饋。這是UI動(dòng)畫拯救游戲的時(shí)代。如果動(dòng)作完成，動(dòng)畫按鈕、切換、開關(guān)、滴答或交叉符號(hào)會(huì)迅速通知用戶。

比如，這是cinema app買票的交互流程。從放映頁(yè)面到選擇座位的過(guò)渡，是通過(guò)電影海報(bào)動(dòng)畫完成的，屏幕變成了電影大廳的樣子。按下所需的座位，用戶可以看到按鈕顏色的變化，理解系統(tǒng)并獲取數(shù)據(jù)。打鉤的動(dòng)畫標(biāo)志著任務(wù)的結(jié)束。

另一個(gè)例子可以在澆水跟蹤app的交互中看到：澆水后，用戶按下按鈕，圖像從水滴形狀變成打鉤符號(hào)，表示所需操作已經(jīng)完成。

即使是基本的導(dǎo)航，移動(dòng)動(dòng)畫添加的可能不僅僅是反饋，還可增加樂(lè)趣。反思這個(gè)可擴(kuò)展按鈕的概念：通過(guò)少量運(yùn)動(dòng)，它模仿了像果凍這種物質(zhì)的物理特性。

進(jìn)行中的動(dòng)畫

如果交互的過(guò)程稍長(zhǎng)，用戶必須等待，他們更愿意了解發(fā)生了什么，以及進(jìn)展如何。這種動(dòng)態(tài)交互的最大優(yōu)點(diǎn)是為用戶提供了保證，使他們?cè)谑褂卯a(chǎn)品的過(guò)程中能夠感知并且保持信心。一個(gè)自信的用戶意味著積極的用戶體驗(yàn)，并為留住高水平用戶提供了良好的基礎(chǔ)。進(jìn)度條、時(shí)間線和其他動(dòng)態(tài)元素的動(dòng)畫可以起到一箭雙雕的作用：

– 告訴用戶目前的進(jìn)度。

– 提供娛樂(lè)性元素，減少等待中的負(fù)面情緒。

– 優(yōu)雅原創(chuàng)的設(shè)計(jì)可能成為現(xiàn)象級(jí)功能，用戶將愿意與他人分享，并吸引更多用戶參與其中。

下面，你會(huì)看到一個(gè)時(shí)間軸app：等待的時(shí)間是由從白天到黑夜的過(guò)渡插畫來(lái)支持的，數(shù)字顯示的是等待的時(shí)長(zhǎng)。

加載動(dòng)畫

這是移動(dòng)端使用最多的動(dòng)畫。它可以被認(rèn)為是進(jìn)度動(dòng)畫的子動(dòng)畫，因?yàn)樗嬖V用戶加載過(guò)程是活動(dòng)的。加載動(dòng)畫有不同的變體，如加載，預(yù)加載、下拉刷新。

這是Slumber app對(duì)下拉刷新的運(yùn)用：拉下新一集，用戶等待時(shí)會(huì)看到加載小菊花的微動(dòng)畫，表示正在刷新過(guò)程中。而動(dòng)效插畫使用戶在等待過(guò)程中也不至于太無(wú)聊。

吸引注意動(dòng)畫

這種動(dòng)畫在用戶與你的app交互時(shí)起著用戶體驗(yàn)可供性作用，它支持一般的視覺(jué)層次，通過(guò)動(dòng)作捕捉用戶的注意力，并將其導(dǎo)向必要的細(xì)節(jié)處。這樣可以節(jié)省掃描整個(gè)屏幕的寶貴時(shí)間，使導(dǎo)航更加清晰直觀。

這一組美味漢堡app的互動(dòng)動(dòng)畫功能是，改變價(jià)格。它給這個(gè)過(guò)程增加了生氣，使它變得自然。而且通過(guò)移動(dòng)，它會(huì)立刻吸引用戶的眼球，以這種方式提供一個(gè)提示信息。

過(guò)渡動(dòng)畫

過(guò)渡的動(dòng)畫在交互過(guò)程中，從一個(gè)屏幕到另一個(gè)屏幕，給APP增添了個(gè)性，使其變得優(yōu)雅。

這是完美菜譜app的過(guò)渡動(dòng)畫：用戶可以自定義他們的菜單，根據(jù)他們的目標(biāo)和飲食限制?；瑒?dòng)的目標(biāo)卡之間的轉(zhuǎn)換，給用戶積極的體驗(yàn)。

是的，這不僅僅是美觀的問(wèn)題。在我們最近的文章《關(guān)于移動(dòng)應(yīng)用程序的概念性UI動(dòng)畫》中，我們展示了一些例子，說(shuō)明了過(guò)渡動(dòng)畫如何在元素之間添加更多空間的錯(cuò)覺(jué)，從而使布局變得透氣、明亮，如下所示：

當(dāng)用戶從餅狀圖到列表視圖，保存和標(biāo)記顏色時(shí)，這里還有一個(gè)關(guān)于轉(zhuǎn)換過(guò)程創(chuàng)造性動(dòng)畫的例子:動(dòng)畫使屏幕與數(shù)據(jù)可視化之間的連接緊密相連，讓用戶看到這一聯(lián)系。

營(yíng)銷型動(dòng)畫

品牌與UI設(shè)計(jì)的巧妙結(jié)合對(duì)提高品牌認(rèn)知度有重要作用。在大多數(shù)情況下，它是動(dòng)態(tài)的logo、吉祥物類似的，通常被有效地應(yīng)用于啟動(dòng)頁(yè)。APP的營(yíng)銷動(dòng)畫通常集中于吸引人們注意品牌標(biāo)志。這是我們?yōu)閃hizzly設(shè)計(jì)的動(dòng)畫logo，這是一個(gè)用來(lái)推銷年輕人才的APP。動(dòng)畫很迷人，令人印象深刻，具有生動(dòng)的感染力。

動(dòng)效通知

通知能吸引用戶去更新app。在不那么引人注目的動(dòng)畫支持下，通知變得更加吸引人，讓用戶不錯(cuò)過(guò)重要信息。下面你可以看到Home Budget app中的一個(gè)例子:通知不僅以明亮的顏色突出顯示，還模仿了脈動(dòng)進(jìn)行突出顯示。

滑動(dòng)動(dòng)畫

滾動(dòng)是我們?cè)趙eb和移動(dòng)端中使用的典型交互之一。這種動(dòng)畫增添了美感和優(yōu)雅氣質(zhì)，使產(chǎn)品變得時(shí)尚、創(chuàng)意、和諧。記住，滾動(dòng)可以應(yīng)用于不同的方向，不僅是垂直的，也可以是水平的，如下圖所示。

講故事和游戲化

在APP中使用動(dòng)畫的另一個(gè)原因是它成為故事或游戲的一部分。動(dòng)畫貼紙、徽章、獎(jiǎng)勵(lì)、吉祥物——這些是讓應(yīng)用界面變得有趣和生動(dòng)的幾種方法。比如，這里你可以看到Mood Messenger使用的動(dòng)畫貼紙，它反映出了不同的情緒，使用它們可以增加強(qiáng)烈的情感吸引力。

UI動(dòng)畫的利弊

在APP中使用動(dòng)效，設(shè)計(jì)師應(yīng)該分析它們可能對(duì)APP產(chǎn)生的正面和負(fù)面影響。我們簡(jiǎn)單的整理下，將有助于你的決策。

在APP中使用動(dòng)效的好處：

1、節(jié)省屏幕空間

2、增加可用性

3、創(chuàng)意

4、方便和簡(jiǎn)單的交互

5、能夠同時(shí)完成多項(xiàng)功能

6、加快互動(dòng)過(guò)程

7、向用戶提供清晰的反饋

8、創(chuàng)建必要的期望

另一方面，設(shè)計(jì)師不得不考慮的缺點(diǎn)：

1、加載時(shí)間

2、干擾因素

3、耗時(shí)費(fèi)力的技術(shù)實(shí)現(xiàn)。

歡迎關(guān)注我的公眾號(hào)：愛(ài)設(shè)計(jì)的狐貍

原文地址：tubikstudio

譯文地址：站酷

譯者：愛(ài)設(shè)計(jì)的狐貍