您可能聽說過：好的設(shè)計(jì)是顯而易見的而優(yōu)秀的設(shè)計(jì)是無形的。同樣的原理也適合于開發(fā)移動APP的動效：一個優(yōu)秀的動效使您的APP便于使用并且抓人眼球，同時在用戶使用APP時完全不會被動效分心。任何動效的主要任務(wù)都是向用戶闡釋APP的邏輯。在此我希望分享一下我們在設(shè)計(jì)美觀并實(shí)用的動效時的一些經(jīng)驗(yàn)。
動效的種類：
為了充分利用動效，你必須了解動效在App中的定位和職責(zé)，我們一起看一些動效的種類吧。
1. 視覺反饋
對于任何用戶界面來講，視覺反饋都是至關(guān)重要的。在物理世界中，我們跟物品的相互作用是伴隨著視覺反饋的。同樣地，人們期待從APP元素中得到一個類似的效果。App給的視覺，聽覺及觸覺反饋，使用戶感到他們在操控APP。同時視覺反饋有個更簡單的用途：它暗示著您的APP運(yùn)行正常。當(dāng)一個按鈕在放大或者一個被滑動圖像在朝著正確方向移動，那么很明顯，這個APP在運(yùn)行著呢，在回應(yīng)著用戶的操作。下面的例子顯示，當(dāng)用戶點(diǎn)擊屏幕以示完成任務(wù)時，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色。
來自：“WORKOUT BOOK” ANIMATION.READ THE CASE STUDY HERE. CHECK OUT THE SHOT ON DRIBBBLE
眾所周知的應(yīng)用：Tinder，往左劃動代表喜歡，往右劃動代表pass。也被當(dāng)作了一種視覺反饋的動效類型。我們已經(jīng)將這種動效實(shí)施于Koloda了，它是我們的開源圖書館：
來自：KOLODA TINDER-LIKE ANIMATION. SOURCES: SHOT ON DRIBBBLE, GITHUB COMPONENT FORIOS, CASESTUDY ON OUR BLOG
2. 功能改變
這種動效展示出，當(dāng)用戶與一個元素互動時，這個元素是變化的。當(dāng)您想要闡明一個元素功能如何變化時，這種動效是最好的選擇。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計(jì)元素一起使用。
從第一個例子中您可以看到一個圖標(biāo)從漢堡菜單變成了“X”狀，以表示按鈕的功能其實(shí)已經(jīng)發(fā)生了改變。
來自：PRINCIPLE ANIMATION. CHECK OUT THE SHOT ON DRIBBBLE
第二個例子中，圖標(biāo)隨著內(nèi)容的變化而變化：
來自：CONTACT DISPLAY SWITCH. CHECK OUT THE SHOT ON DRIBBBLE
3. 空間擴(kuò)展
大部分的移動APP都有非常復(fù)雜的結(jié)構(gòu)，所以設(shè)計(jì)師的的工作就是盡可能地簡化APP的導(dǎo)航。對于這項(xiàng)任務(wù)來講，動效是極其有幫助的。如果您的動效展示出了元素被藏在哪里，那么用戶下次找起來就會很容易了。第一個例子中，我們看到導(dǎo)航欄的菜單，當(dāng)用戶點(diǎn)擊按鈕時，它顛倒過來了：
來自：GUILLOTINE MENU ANIMATION. CHECK OUTTHE SHOT ONDRIBBBLE, GITHUB COMPONENT FOR IOS AND FOR ANDROID, AND CASE STUDIESON OUR BLOG FOR IOS AND FOR ANDROID
下面這個例子中，我們可以看到屏幕底端出現(xiàn)了更多的選擇項(xiàng)，它同樣精煉了選擇的過程：
來自：BOTTOM NAVIGATION. CHECK OUT THE SHOT ON DRIBBBLE
4. 元素的層次結(jié)構(gòu)及其交互
動效完美地描述了界面的某些部分和闡明了是怎樣與它們進(jìn)行互動的。動效中每個元素都有其目的和定位。比如，一個按鈕可以激活彈出菜單，那么此菜單最好從按鈕彈出而不是從屏幕側(cè)面滑出來：這樣就會給用戶顯示按下按鈕的回應(yīng)。這樣就會幫助用戶理解這兩個元素（按鈕和彈出菜單）是有聯(lián)系的。
所有動效都應(yīng)該闡釋元素之間是如何聯(lián)系的。這種層次結(jié)構(gòu)和元素的互動對于一個直觀的界面來講是非常重要的。下面第一個例子顯示當(dāng)按鈕被點(diǎn)擊后菜單欄出現(xiàn)，并且在用戶的眼里，菜單欄和按鈕本質(zhì)上是同樣的元素，只是變大了：
來自：HAMBURGER MENU ANIMATION. CHECK OUT THE SHOT ON DRIBBBLE
第二個例子中，一張包含信息的卡片在用戶點(diǎn)擊了之后它的元素變大，使用戶知道這是同一個元素，唯一的不同是尺寸：
來自：3D TOUCH AND APPLE PAY CONCEPT. CHECK OUTTHE SHOT ON DRIBBBLE
5. 視覺提示
動效暗示如何與元素進(jìn)行交互。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動模式時，動效提供視覺線索就十分必要了。在這個例子中，當(dāng)用戶打開博客，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)，用戶就可以知道要水平地滑動來瀏覽這些卡片：
來自：TRAVEL BLOG APP. CHECK OUT THE SHOT ON DRIBBBLE
第二個例子中，用了同樣的方法，只是運(yùn)用到了社交圖標(biāo)上：
來自：SHARE AND STATISTICS MENU CONCEPT. CHECKOUT THE SHOT ON DRIBBBLE
6. 系統(tǒng)狀態(tài)
在您的APP中，總有那么幾個進(jìn)程在后臺運(yùn)行著：從服務(wù)器下載數(shù)據(jù)，進(jìn)行計(jì)算等。您的任務(wù)就是讓用戶知道APP并沒有停止運(yùn)行或者崩潰掉，要讓用戶知道APP在工作著。通過App表現(xiàn)出來的視覺符號的進(jìn)展給用戶一種控制感。理想狀態(tài)下，APP中的每個進(jìn)程都應(yīng)該被一個獨(dú)立的動效所伴隨。比如，當(dāng)音頻錄制正在進(jìn)行，屏幕可能要顯示一條波動的音頻軌道。實(shí)時聲波動效就可以顯示出聲音的大小。
來自：RECORD AUDIO SAMPLE. CHECK OUT THE SHOT ON DRIBBBLE
這種動效最常見的一種類型就是下拉刷新動效：
來自：LATEST NEWS. CHECK OUT THE SHOT ON DRIBBBLE
7. 有趣的動效
有趣的動效可以畫龍點(diǎn)睛也可以畫虎類犬。通常它們被用的毫無意義，并且可能使APP的開發(fā)變的非常復(fù)雜。但一個非常獨(dú)特的動效就可能很吸引用戶并且讓您的APP脫穎而出。這是設(shè)計(jì)師讓用戶愛上他們產(chǎn)品的一個秘密武器。獨(dú)特的動效可以助您創(chuàng)立一個識別度高的品牌。
在我們的例子中，移動的圓圈看起來非常別致并且很吸引人的注意力。沿著屏幕移動的這種效果能夠帶來愉悅感和游戲感，簡單并且有趣。
來自：WORKOUT BOOK DESIGN CONCEPT. SEE THE SHOT ON DRIBBBLE AND READYTHE CASESTUDY
我也非常確信下拉刷新的動效如果做成正在煮菜的鍋，會給人耳目一新的感受：
來自：PULL TO MAKE SOUP ANIMATION. SEE THE SHOT ON DRIBBBLE, THECOMPONENT FOR IOS ON GITHUB, AND READ HOW WE MADE IT HERE
在制作有趣的動效時要注意兩點(diǎn)：1）一定保證動效不會遮蓋或者隱藏APP的功能；2）一定不能耗時間。
請參照：https://www.behance.net/gallery/35371211/The-Best-Interface-Animation-by-Yalantis
設(shè)計(jì)的主要原則
我們已經(jīng)看過了動效的主要類型和功能。為了設(shè)計(jì)出真正成功的動效，請時刻牢記Walt Disney最初提出來的動畫的9條原則，這些原則可以非常有效地應(yīng)用在UI設(shè)計(jì)中。
1. 材質(zhì)
展示包含了哪些元素：是輕還是重？靜態(tài)還是動態(tài)？扁平的還是多維度的？要給您的用戶一種，你的UI元素是哪一種互動模式。
2. 運(yùn)動軌跡
您需要闡明運(yùn)動的自然屬性。一般原則顯示沒有生命的機(jī)械物體的運(yùn)動軌跡通常都是直線，而有生命的物體擁有更為復(fù)雜和非直線性的運(yùn)動軌跡。您要決定您的UI要給用戶呈現(xiàn)的什么樣的印象，并且賦予它。
3. 時間
在設(shè)計(jì)動效時，時間是最有爭議的和最重要的考慮之一。在現(xiàn)實(shí)世界中，物體并不遵守直線運(yùn)動規(guī)則因?yàn)樗鼈冃枰獣r間來加速或者減速，使用曲線使您的元素以更加自然地方式運(yùn)動。
4. 聚焦動效
要集中注意力于屏幕的某一特定區(qū)域。例如，閃爍的圖標(biāo)就會吸引用戶的注意，讓用戶去點(diǎn)擊，因?yàn)橛形醋x消息提示。這種動效常用于有太多細(xì)節(jié)和元素的界面，和沒有辦法能夠區(qū)分開來一個特殊的元素界面。
5. 跟隨和重疊
跟隨是一個動作的終止部分。物體不會迅速地停止或者開始移動，每個運(yùn)動都可以被拆解為每個部分按照各自速率移動的細(xì)小動作。例如，當(dāng)您扔個球，在球出手后，您的手也依然在移動。
重疊意味著在第一個動作結(jié)束前開始的第二個動作，這樣可以吸引用戶的注意力，因?yàn)閮蓚€動作之間并沒有一段靜止期。
6. 次要動效
次要動效原則類似于跟隨和重疊原則。簡要地講，主要動效可被次要動效伴隨。次要動效使畫面更加生動，但如果一不小心就會引起用戶不必要的分神。
7. 緩入和緩出
緩入/緩出是設(shè)計(jì)的基礎(chǔ)原則，尤其是在移動開發(fā)UI動效，和普通的動畫制作中同等重要。雖然易于理解，但此原則卻常常容易被忽略。緩入/緩出原則是來自于現(xiàn)實(shí)世界中物體不可能立刻開始或者立刻停止運(yùn)動的事實(shí)。任何物體都需要一定的時間用來加速或者減速。當(dāng)你使用緩入/緩出原則來設(shè)計(jì)動效時，將會導(dǎo)出非常真實(shí)的運(yùn)動模式。
8. 預(yù)期
預(yù)期原則適用于提示性視覺元素。在動效展現(xiàn)之前，我們給用戶點(diǎn)時間讓他們預(yù)測一些要發(fā)生的事情。完成預(yù)期其中一種方法就是使用我們上述的緩入原則。物體朝特定方向移動也可以給出預(yù)期視覺提示：例如，一疊卡片出現(xiàn)在屏幕上，您可以點(diǎn)擊一個卡片使其發(fā)生傾斜，那么用戶就可以推測出這些卡片可以移動。
9. 韻律
動效中的韻律和音樂與舞蹈中的韻律有著同樣的功能；它使動效結(jié)構(gòu)化。使用韻律可以使您的動效更加自然。
10. 夸張
夸張的表現(xiàn)方法常常被動效制作者使用，但它并不是那么容易被闡釋，因?yàn)樗腔诒豢鋸埢念A(yù)期動作或效果。它可以幫助吸引額外的注意力到特殊元素上。
在這篇文章中，我們討論了可以幫助您的APP創(chuàng)造一個獨(dú)特的有用的動效的類型和設(shè)計(jì)動效的原則。
這里有需要您記住的且非常重要的5點(diǎn)：
1. 記住誰是您的目標(biāo)用戶，并且設(shè)計(jì)您的原型方案去解決他們的問題；
2. 請確保您的動效的每個元素都具有其背后的基本原因（為什么是這樣？為什么會是如此？為什么這個時間點(diǎn)？）；
3. 為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動模式來創(chuàng)造自然的動效；
4. 在項(xiàng)目的任何階段，都要隨時與開發(fā)人員保持溝通；
5. 不要貪婪-分享您的成果到https://github.com/yalanti或https://yalantis.com/