移動APP的7種動效設(shè)計(jì)
你可能聽說過：好的設(shè)計(jì)是顯而易見的而優(yōu)秀的設(shè)計(jì)是無形的。對于App的動效設(shè)計(jì)來說也是一樣的。一個優(yōu)秀的動效能你的App變得友好而且抓人眼球区宇，但是絕不會讓用戶分心议谷。任何動效的主要任務(wù)都是向用戶闡釋APP的邏輯卧晓。在此我希望分享一下我們在設(shè)計(jì)美觀并實(shí)用的動效時的一些經(jīng)驗(yàn)赴捞。
動效的種類：
為了充分利用動效赦政，你必須了解動效在App中的定位和職責(zé)恢着，我們一起看一些動效的種類吧。
視覺反饋
對于任何用戶界面來講从诲，視覺反饋都是至關(guān)重要的盏求。在現(xiàn)實(shí)生活中，人們和任何物體的交互都是伴隨著回應(yīng)的磅废。
同樣地拯勉，人們期待從APP元素中得到一個類似的效果宫峦。App給的視覺导绷，聽覺及觸覺反饋，使用戶感到他們在操控APP钦购。同時視覺反饋有個更簡單的用途：它暗示著您的APP運(yùn)行正常褂萧。當(dāng)一個按鈕在放大或者一個被滑動圖像在朝著正確方向移動导犹，那么很明顯谎痢，這個APP在運(yùn)行著呢，在回應(yīng)著用戶的操作掰烟。下面的例子顯示纫骑，當(dāng)用戶點(diǎn)擊屏幕以示完成任務(wù)時先馆，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色煤墙。
Tinder中使用的左劃喜歡右劃跳過被大家所熟知仿野，而這種交互方式同樣也是一種視覺反饋脚作。這個動畫效果已經(jīng)被我們實(shí)現(xiàn)出來放在開源庫Koloda中了球涛。
功能改變
這種動效展示出元素在與用戶進(jìn)行交互的時候是如何發(fā)生變化的當(dāng)您想要闡明一個元素功能如何變化時亿扁，這種動效是最好的選擇从祝。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計(jì)元素一起使用稀蟋。
從第一個例子中您可以看到一個圖標(biāo)從漢堡菜單變成了“X”狀退客，以表示按鈕的功能其實(shí)已經(jīng)發(fā)生了改變链嘀。
第二個例子中，圖標(biāo)隨著內(nèi)容的變化而變化：
空間擴(kuò)展
大部分的移動APP都有非常復(fù)雜的結(jié)構(gòu)茫藏，所以設(shè)計(jì)師的的工作就是盡可能地簡化APP的導(dǎo)航务傲。對于這項(xiàng)任務(wù)來講售葡，動效是極其有幫助的挟伙。如果您的動效展示出了元素被藏在哪里尖阔，那么用戶下次找起來就會很容易了榨咐。第一個例子中块茁，我們看到導(dǎo)航欄的菜單，當(dāng)用戶點(diǎn)擊按鈕時，它顛倒過來了：
下面這個例子中昌跌，我們可以看到更多選項(xiàng)是如何從屏幕底部出現(xiàn)的蚕愤，這也改進(jìn)了用戶進(jìn)行選擇的流程：
元素的層次結(jié)構(gòu)及其交互
動效完美地描述了界面的各個部分并且闡明了它們之間是如何進(jìn)行交互的萍诱。動效中每個元素都有其目的和定位裕坊。比如，一個按鈕可以激活彈出菜單周瞎，那么此菜單最好從按鈕彈出而不是從屏幕側(cè)面滑出來：這樣就會給用戶顯示按下按鈕的回應(yīng)声诸。這樣就會幫助用戶理解這兩個元素（按鈕和彈出菜單）是有聯(lián)系的彼乌。
所有動效都應(yīng)該闡釋元素之間是如何聯(lián)系的渊迁。這種層次結(jié)構(gòu)和元素的互動對于一個直觀的界面來講是非常重要的宫纬。下面第一個例子顯示當(dāng)按鈕被點(diǎn)擊后菜單欄出現(xiàn)，并且在用戶的眼里蝌衔，菜單欄和按鈕本質(zhì)上是同樣的元素噩斟，只是變大了：
第二個例子中剃允，一張包含信息的卡片在用戶點(diǎn)擊了之后變大斥废，讓用戶知道這是同一個元素牡肉，唯一的不同是尺寸：
視覺提示
動效暗示如何與元素進(jìn)行交互统锤。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動模式時，動效提供視覺線索就十分必要了煌寇。在這個例子中阀溶，當(dāng)用戶打開一個博文系列時嘲驾，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)辽故，用戶就可以知道要水平地滑動來瀏覽這些卡片：
第二個例子中誊垢，用了同樣的方法喂走，只是運(yùn)用到了社交圖標(biāo)上：
系統(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í)時聲波動效就可以顯示出聲音的大小沸柔。
這種動效最常見的一種類型就是下拉刷新動效：
有趣的動效
有趣的動效可以畫龍點(diǎn)睛也可以畫虎類犬褐澎。它們通常都沒有什么意義工三，而且會讓開發(fā)的工作變得異常復(fù)雜俭正。但一個非常獨(dú)特的動效就可能很吸引用戶并且讓您的APP脫穎而出焙畔。這是設(shè)計(jì)師讓用戶愛上他們產(chǎn)品的一個秘密武器宏多。獨(dú)特的動效可以助您創(chuàng)立一個識別度高的品牌。
在我們的例子中姥闪，移動的圓圈看起來非常別致并且很吸引人的注意力筐喳。沿著屏幕移動的這種效果能夠帶來愉悅感和游戲感避归，簡單并且有趣管呵。
我也非常確信下拉刷新的動效如果做成正在煮菜的鍋账锹，會給人耳目一新的感受：
在制作有趣的動效時要注意兩點(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.1.材質(zhì)
給用戶展示界面元素是由什么構(gòu)成的：輕盈的還是笨重的窍育？死板的還是靈活的漱抓？平面的還是多維度的乞娄？你需要讓用戶對界面元素的交互模式有個基本的感覺显歧。
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)動規(guī)則會讓元素的移動變得更加自然众辨。
4.聚焦動效
要集中注意力于屏幕的某一特定區(qū)域鹃彻。例如蛛株，閃爍的圖標(biāo)就會吸引用戶的注意育拨，用戶會知道那有個提醒并去點(diǎn)擊熬丧。這種動效常用于有太多細(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)在屏幕上，你可以讓這疊卡片最上面的一張卡傾斜蜕煌，那么用戶就可以推測出這些卡片可以移動斜纪。
9.韻律
動效中的韻律和音樂與舞蹈中的韻律有著同樣的功能盒刚；它使動效結(jié)構(gòu)化绿贞。使用韻律可以使您的動效更加自然籍铁。
10.夸張
夸張的表現(xiàn)方法常常會被用到拒名，但它并不是那么容易被闡釋，因?yàn)樗腔诒豢鋸埢念A(yù)期動作或效果雁佳。它可以幫助吸引額外的注意力到特殊元素上甘穿。
在這篇文章中温兼，我們探討了動效的類型，以及設(shè)計(jì)動效的原則荡含。希望能幫助你創(chuàng)造出獨(dú)特有效的動效释液。
這里有需要您記住的且非常重要的5點(diǎn)：
1.記住誰是您的目標(biāo)用戶装处，并且設(shè)計(jì)您的原型方案去解決他們的問題；
2.請確保您的動效的每個元素都具有其背后的基本原因（為什么是這樣寝蹈？為什么會是如此箫老？為什么這個時間點(diǎn)黔州？）流妻；
3.為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動模式來創(chuàng)造自然的動效各薇；
4.在項(xiàng)目的任何階段君躺，都要隨時與開發(fā)人員保持溝通；
5.做出好的動效林螃，記得分享哦
譯者評：原文作者說“任何動效的主要任務(wù)都是向用戶闡釋APP的邏輯俺泣。”是的横漏，任何動效其實(shí)都是為產(chǎn)品所服務(wù)的，他是要完成自己存在的使命的扎拣。所以請讓動效的每一幀都得有它的道理素跺，那樣的動效設(shè)計(jì)才算是成功的，在動效設(shè)計(jì)中切忌為了炫而炫刊愚，為了動效而動效鸥诽。
英文原文地址：https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/
