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