您可能聽(tīng)說(shuō)過(guò)：好的設(shè)計(jì)是顯而易見(jiàn)的而優(yōu)秀的設(shè)計(jì)是無(wú)形的。同樣的原理也適合于開(kāi)發(fā)移動(dòng)APP的動(dòng)效：一個(gè)優(yōu)秀的動(dòng)效使您的APP便于使用并且抓人眼球，同時(shí)在用戶(hù)使用APP時(shí)完全不會(huì)被動(dòng)效分心。任何動(dòng)效的主要任務(wù)都是向用戶(hù)闡釋APP的邏輯。在此我希望分享一下我們?cè)谠O(shè)計(jì)美觀并實(shí)用的動(dòng)效時(shí)的一些經(jīng)驗(yàn)。

動(dòng)效的種類(lèi)：

為了充分利用動(dòng)效，你必須了解動(dòng)效在App中的定位和職責(zé)，我們一起看一些動(dòng)效的種類(lèi)吧。

1. 視覺(jué)反饋

對(duì)于任何用戶(hù)界面來(lái)講，視覺(jué)反饋都是至關(guān)重要的。在物理世界中，我們跟物品的相互作用是伴隨著視覺(jué)反饋的。同樣地，人們期待從APP元素中得到一個(gè)類(lèi)似的效果。App給的視覺(jué)，聽(tīng)覺(jué)及觸覺(jué)反饋，使用戶(hù)感到他們?cè)诓倏谹PP。同時(shí)視覺(jué)反饋有個(gè)更簡(jiǎn)單的用途：它暗示著您的APP運(yùn)行正常。當(dāng)一個(gè)按鈕在放大或者一個(gè)被滑動(dòng)圖像在朝著正確方向移動(dòng)，那么很明顯，這個(gè)APP在運(yùn)行著呢，在回應(yīng)著用戶(hù)的操作。下面的例子顯示，當(dāng)用戶(hù)點(diǎn)擊屏幕以示完成任務(wù)時(shí)，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色。

來(lái)自：“WORKOUT BOOK” ANIMATION.READ THE CASE STUDY HERE. CHECK OUT THE SHOT ON DRIBBBLE

眾所周知的應(yīng)用：Tinder，往左劃動(dòng)代表喜歡，往右劃動(dòng)代表pass。也被當(dāng)作了一種視覺(jué)反饋的動(dòng)效類(lèi)型。我們已經(jīng)將這種動(dòng)效實(shí)施于Koloda了，它是我們的開(kāi)源圖書(shū)館：

來(lái)自：KOLODA TINDER-LIKE ANIMATION. SOURCES: SHOT ON DRIBBBLE, GITHUB COMPONENT FORIOS, CASESTUDY ON OUR BLOG

2. 功能改變

這種動(dòng)效展示出，當(dāng)用戶(hù)與一個(gè)元素互動(dòng)時(shí)，這個(gè)元素是變化的。當(dāng)您想要闡明一個(gè)元素功能如何變化時(shí)，這種動(dòng)效是最好的選擇。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計(jì)元素一起使用。

從第一個(gè)例子中您可以看到一個(gè)圖標(biāo)從漢堡菜單變成了“X”狀，以表示按鈕的功能其實(shí)已經(jīng)發(fā)生了改變。

來(lái)自：PRINCIPLE ANIMATION. CHECK OUT THE SHOT ON DRIBBBLE

第二個(gè)例子中，圖標(biāo)隨著內(nèi)容的變化而變化：

來(lái)自：CONTACT DISPLAY SWITCH. CHECK OUT THE SHOT ON DRIBBBLE

3. 空間擴(kuò)展

大部分的移動(dòng)APP都有非常復(fù)雜的結(jié)構(gòu)，所以設(shè)計(jì)師的的工作就是盡可能地簡(jiǎn)化APP的導(dǎo)航。對(duì)于這項(xiàng)任務(wù)來(lái)講，動(dòng)效是極其有幫助的。如果您的動(dòng)效展示出了元素被藏在哪里，那么用戶(hù)下次找起來(lái)就會(huì)很容易了。第一個(gè)例子中，我們看到導(dǎo)航欄的菜單，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，它顛倒過(guò)來(lái)了：

來(lái)自：GUILLOTINE MENU ANIMATION. CHECK OUTTHE SHOT ONDRIBBBLE, GITHUB COMPONENT FOR IOS AND FOR ANDROID, AND CASE STUDIESON OUR BLOG FOR IOS AND FOR ANDROID

下面這個(gè)例子中，我們可以看到屏幕底端出現(xiàn)了更多的選擇項(xiàng)，它同樣精煉了選擇的過(guò)程：

來(lái)自：BOTTOM NAVIGATION. CHECK OUT THE SHOT ON DRIBBBLE

4. 元素的層次結(jié)構(gòu)及其交互

動(dòng)效完美地描述了界面的某些部分和闡明了是怎樣與它們進(jìn)行互動(dòng)的。動(dòng)效中每個(gè)元素都有其目的和定位。比如，一個(gè)按鈕可以激活彈出菜單，那么此菜單最好從按鈕彈出而不是從屏幕側(cè)面滑出來(lái)：這樣就會(huì)給用戶(hù)顯示按下按鈕的回應(yīng)。這樣就會(huì)幫助用戶(hù)理解這兩個(gè)元素（按鈕和彈出菜單）是有聯(lián)系的。

所有動(dòng)效都應(yīng)該闡釋元素之間是如何聯(lián)系的。這種層次結(jié)構(gòu)和元素的互動(dòng)對(duì)于一個(gè)直觀的界面來(lái)講是非常重要的。下面第一個(gè)例子顯示當(dāng)按鈕被點(diǎn)擊后菜單欄出現(xiàn)，并且在用戶(hù)的眼里，菜單欄和按鈕本質(zhì)上是同樣的元素，只是變大了：

來(lái)自：HAMBURGER MENU ANIMATION. CHECK OUT THE SHOT ON DRIBBBLE

第二個(gè)例子中，一張包含信息的卡片在用戶(hù)點(diǎn)擊了之后它的元素變大，使用戶(hù)知道這是同一個(gè)元素，唯一的不同是尺寸：

來(lái)自：3D TOUCH AND APPLE PAY CONCEPT. CHECK OUTTHE SHOT ON DRIBBBLE

5. 視覺(jué)提示

動(dòng)效暗示如何與元素進(jìn)行交互。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動(dòng)模式時(shí)，動(dòng)效提供視覺(jué)線(xiàn)索就十分必要了。在這個(gè)例子中，當(dāng)用戶(hù)打開(kāi)博客，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)，用戶(hù)就可以知道要水平地滑動(dòng)來(lái)瀏覽這些卡片：

來(lái)自：TRAVEL BLOG APP. CHECK OUT THE SHOT ON DRIBBBLE

第二個(gè)例子中，用了同樣的方法，只是運(yùn)用到了社交圖標(biāo)上：

來(lái)自：SHARE AND STATISTICS MENU CONCEPT. CHECKOUT THE SHOT ON DRIBBBLE

6. 系統(tǒng)狀態(tài)

在您的APP中，總有那么幾個(gè)進(jìn)程在后臺(tái)運(yùn)行著：從服務(wù)器下載數(shù)據(jù)，進(jìn)行計(jì)算等。您的任務(wù)就是讓用戶(hù)知道APP并沒(méi)有停止運(yùn)行或者崩潰掉，要讓用戶(hù)知道APP在工作著。通過(guò)App表現(xiàn)出來(lái)的視覺(jué)符號(hào)的進(jìn)展給用戶(hù)一種控制感。理想狀態(tài)下，APP中的每個(gè)進(jìn)程都應(yīng)該被一個(gè)獨(dú)立的動(dòng)效所伴隨。比如，當(dāng)音頻錄制正在進(jìn)行，屏幕可能要顯示一條波動(dòng)的音頻軌道。實(shí)時(shí)聲波動(dòng)效就可以顯示出聲音的大小。

來(lái)自：RECORD AUDIO SAMPLE. CHECK OUT THE SHOT ON DRIBBBLE

這種動(dòng)效最常見(jiàn)的一種類(lèi)型就是下拉刷新動(dòng)效：

來(lái)自：LATEST NEWS. CHECK OUT THE SHOT ON DRIBBBLE

7. 有趣的動(dòng)效

有趣的動(dòng)效可以畫(huà)龍點(diǎn)睛也可以畫(huà)虎類(lèi)犬。通常它們被用的毫無(wú)意義，并且可能使APP的開(kāi)發(fā)變的非常復(fù)雜。但一個(gè)非常獨(dú)特的動(dòng)效就可能很吸引用戶(hù)并且讓您的APP脫穎而出。這是設(shè)計(jì)師讓用戶(hù)愛(ài)上他們產(chǎn)品的一個(gè)秘密武器。獨(dú)特的動(dòng)效可以助您創(chuàng)立一個(gè)識(shí)別度高的品牌。

在我們的例子中，移動(dòng)的圓圈看起來(lái)非常別致并且很吸引人的注意力。沿著屏幕移動(dòng)的這種效果能夠帶來(lái)愉悅感和游戲感，簡(jiǎn)單并且有趣。

來(lái)自：WORKOUT BOOK DESIGN CONCEPT. SEE THE SHOT ON DRIBBBLE AND READYTHE CASESTUDY

我也非常確信下拉刷新的動(dòng)效如果做成正在煮菜的鍋，會(huì)給人耳目一新的感受：

來(lái)自：PULL TO MAKE SOUP ANIMATION. SEE THE SHOT ON DRIBBBLE, THECOMPONENT FOR IOS ON GITHUB, AND READ HOW WE MADE IT HERE

在制作有趣的動(dòng)效時(shí)要注意兩點(diǎn)：1）一定保證動(dòng)效不會(huì)遮蓋或者隱藏APP的功能；2）一定不能耗時(shí)間。

請(qǐng)參照：https://www.behance.net/gallery/35371211/The-Best-Interface-Animation-by-Yalantis

設(shè)計(jì)的主要原則

我們已經(jīng)看過(guò)了動(dòng)效的主要類(lèi)型和功能。為了設(shè)計(jì)出真正成功的動(dòng)效，請(qǐng)時(shí)刻牢記Walt Disney最初提出來(lái)的動(dòng)畫(huà)的9條原則，這些原則可以非常有效地應(yīng)用在UI設(shè)計(jì)中。

1. 材質(zhì)

展示包含了哪些元素：是輕還是重？靜態(tài)還是動(dòng)態(tài)？扁平的還是多維度的？要給您的用戶(hù)一種，你的UI元素是哪一種互動(dòng)模式。

2. 運(yùn)動(dòng)軌跡

您需要闡明運(yùn)動(dòng)的自然屬性。一般原則顯示沒(méi)有生命的機(jī)械物體的運(yùn)動(dòng)軌跡通常都是直線(xiàn)，而有生命的物體擁有更為復(fù)雜和非直線(xiàn)性的運(yùn)動(dòng)軌跡。您要決定您的UI要給用戶(hù)呈現(xiàn)的什么樣的印象，并且賦予它。

3. 時(shí)間

在設(shè)計(jì)動(dòng)效時(shí)，時(shí)間是最有爭(zhēng)議的和最重要的考慮之一。在現(xiàn)實(shí)世界中，物體并不遵守直線(xiàn)運(yùn)動(dòng)規(guī)則因?yàn)樗鼈冃枰獣r(shí)間來(lái)加速或者減速，使用曲線(xiàn)使您的元素以更加自然地方式運(yùn)動(dòng)。

4. 聚焦動(dòng)效

要集中注意力于屏幕的某一特定區(qū)域。例如，閃爍的圖標(biāo)就會(huì)吸引用戶(hù)的注意，讓用戶(hù)去點(diǎn)擊，因?yàn)橛形醋x消息提示。這種動(dòng)效常用于有太多細(xì)節(jié)和元素的界面，和沒(méi)有辦法能夠區(qū)分開(kāi)來(lái)一個(gè)特殊的元素界面。

5. 跟隨和重疊

跟隨是一個(gè)動(dòng)作的終止部分。物體不會(huì)迅速地停止或者開(kāi)始移動(dòng)，每個(gè)運(yùn)動(dòng)都可以被拆解為每個(gè)部分按照各自速率移動(dòng)的細(xì)小動(dòng)作。例如，當(dāng)您扔個(gè)球，在球出手后，您的手也依然在移動(dòng)。

重疊意味著在第一個(gè)動(dòng)作結(jié)束前開(kāi)始的第二個(gè)動(dòng)作，這樣可以吸引用戶(hù)的注意力，因?yàn)閮蓚€(gè)動(dòng)作之間并沒(méi)有一段靜止期。

6. 次要?jiǎng)有?/h4>

次要?jiǎng)有г瓌t類(lèi)似于跟隨和重疊原則。簡(jiǎn)要地講，主要?jiǎng)有Э杀淮我獎(jiǎng)有О殡S。次要?jiǎng)有巩?huà)面更加生動(dòng)，但如果一不小心就會(huì)引起用戶(hù)不必要的分神。

7. 緩入和緩出

緩入/緩出是設(shè)計(jì)的基礎(chǔ)原則，尤其是在移動(dòng)開(kāi)發(fā)UI動(dòng)效，和普通的動(dòng)畫(huà)制作中同等重要。雖然易于理解，但此原則卻常常容易被忽略。緩入/緩出原則是來(lái)自于現(xiàn)實(shí)世界中物體不可能立刻開(kāi)始或者立刻停止運(yùn)動(dòng)的事實(shí)。任何物體都需要一定的時(shí)間用來(lái)加速或者減速。當(dāng)你使用緩入/緩出原則來(lái)設(shè)計(jì)動(dòng)效時(shí)，將會(huì)導(dǎo)出非常真實(shí)的運(yùn)動(dòng)模式。

8. 預(yù)期

預(yù)期原則適用于提示性視覺(jué)元素。在動(dòng)效展現(xiàn)之前，我們給用戶(hù)點(diǎn)時(shí)間讓他們預(yù)測(cè)一些要發(fā)生的事情。完成預(yù)期其中一種方法就是使用我們上述的緩入原則。物體朝特定方向移動(dòng)也可以給出預(yù)期視覺(jué)提示：例如，一疊卡片出現(xiàn)在屏幕上，您可以點(diǎn)擊一個(gè)卡片使其發(fā)生傾斜，那么用戶(hù)就可以推測(cè)出這些卡片可以移動(dòng)。

9. 韻律

動(dòng)效中的韻律和音樂(lè)與舞蹈中的韻律有著同樣的功能；它使動(dòng)效結(jié)構(gòu)化。使用韻律可以使您的動(dòng)效更加自然。

10. 夸張

夸張的表現(xiàn)方法常常被動(dòng)效制作者使用，但它并不是那么容易被闡釋?zhuān)驗(yàn)樗腔诒豢鋸埢念A(yù)期動(dòng)作或效果。它可以幫助吸引額外的注意力到特殊元素上。

在這篇文章中，我們討論了可以幫助您的APP創(chuàng)造一個(gè)獨(dú)特的有用的動(dòng)效的類(lèi)型和設(shè)計(jì)動(dòng)效的原則。

這里有需要您記住的且非常重要的5點(diǎn)：

1. 記住誰(shuí)是您的目標(biāo)用戶(hù)，并且設(shè)計(jì)您的原型方案去解決他們的問(wèn)題；

2. 請(qǐng)確保您的動(dòng)效的每個(gè)元素都具有其背后的基本原因（為什么是這樣？為什么會(huì)是如此？為什么這個(gè)時(shí)間點(diǎn)？）；

3. 為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動(dòng)模式來(lái)創(chuàng)造自然的動(dòng)效；

4. 在項(xiàng)目的任何階段，都要隨時(shí)與開(kāi)發(fā)人員保持溝通；

5. 不要貪婪-分享您的成果到https://github.com/yalanti或https://yalantis.com/

英文原文：ANATOLY NESTEROV, 7 TYPES OF ANIMATIONS FOR YOUR MOBILE APP.

原文地址：HTTPS://YALANTIS.COM/BLOG/-SEVEN-TYPES-OF-ANIMATIONS-FOR-MOBILE-APPS/

譯文地址：DDC