超全面的UI設(shè)計(jì)動(dòng)效的基本規(guī)則總結(jié)

 

現(xiàn)如今，優(yōu)秀的界面動(dòng)畫(huà)很能讓人產(chǎn)生深刻印象，甚至是帶來(lái)驚喜。它一方面表達(dá)了界面之間的交互過(guò)程，解釋說(shuō)明如何使用應(yīng)用，另一方面也能正確引導(dǎo)用戶的注意力。在瀏覽關(guān)于動(dòng)效的文章時(shí)，我發(fā)現(xiàn)幾乎所有的文章都只描述了特定的案例或者關(guān)于動(dòng)畫(huà)的一般事實(shí)，但是我還沒(méi)有遇到過(guò)任何一篇文章能夠清晰的描述所有關(guān)于界面動(dòng)畫(huà)的使用規(guī)范。在這篇文章中我不會(huì)寫任何新的知識(shí)，我只是想把所有的主要原則和規(guī)范做一個(gè)收集歸納，這樣就能便于其他設(shè)計(jì)師進(jìn)行快速?zèng)Q策了。接下來(lái)從三個(gè)方向總結(jié)動(dòng)效表達(dá)形式。

 

一、動(dòng)效時(shí)間節(jié)奏

二、動(dòng)效模式

三、動(dòng)效案例分類

 

 

一、動(dòng)效時(shí)間節(jié)奏

 

1：動(dòng)畫(huà)的速度和持續(xù)時(shí)間

當(dāng)界面元素改變他們的狀態(tài)和位置時(shí)，動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。合適的動(dòng)畫(huà)時(shí)長(zhǎng)，既不要太快也不至于慢到讓用戶打哈欠。

 

大量的研究發(fā)現(xiàn)在界面中最優(yōu)的時(shí)間是200-500ms。這個(gè)數(shù)字是根據(jù)人類大腦的特殊性得出來(lái)的。任何小于100ms的動(dòng)畫(huà)是人類很難感知到的，而其他大于1秒的動(dòng)畫(huà)又會(huì)讓用戶覺(jué)得有些延遲，不夠流暢。

動(dòng)畫(huà)的持續(xù)時(shí)間是使得界面流暢的關(guān)鍵

 

在手機(jī)上，谷歌設(shè)計(jì)規(guī)范同樣建議動(dòng)畫(huà)的持續(xù)時(shí)間在200-300ms為宜。在平板電腦上，這個(gè)時(shí)間會(huì)稍微長(zhǎng)30%，大約在400-450ms。原因很簡(jiǎn)單，在更大的屏幕上，元素變化的位置路徑會(huì)更長(zhǎng)。基于此，在可穿戴設(shè)備中，持續(xù)時(shí)間又要縮短30%了，大約在150-200ms，因?yàn)樾∑聊簧显刈兓奈恢寐窂綍?huì)更短。設(shè)備的大小會(huì)影響動(dòng)畫(huà)的持續(xù)時(shí)間。

 

在網(wǎng)頁(yè)上又會(huì)是另外一種方式。由于我們習(xí)慣于在瀏覽器中快速打開(kāi)網(wǎng)頁(yè)，所以我們也希望在不同的狀態(tài)之間能夠快速切換。所以，在網(wǎng)頁(yè)上的動(dòng)畫(huà)應(yīng)該要比在手機(jī)上持續(xù)時(shí)間少2倍多，在150-200ms之間。一旦超過(guò)這個(gè)時(shí)間區(qū)間，用戶就會(huì)覺(jué)得網(wǎng)頁(yè)是不流暢的，或者覺(jué)得是不是網(wǎng)絡(luò)有了問(wèn)題。但是，如果你是在頁(yè)面中創(chuàng)建一些裝飾性的動(dòng)畫(huà)或者目的是為了吸引用戶的注意力，此時(shí)就應(yīng)該拋棄這些規(guī)范，時(shí)間你可以做的更長(zhǎng)一些。

大界面中的動(dòng)畫(huà)就一定是慢的嗎？并不一定。還需要記住的一點(diǎn)就是，無(wú)論在什么平臺(tái)，動(dòng)畫(huà)的持續(xù)時(shí)間不僅跟它的移動(dòng)距離有關(guān)，還跟它本身的大小有關(guān)系。小的元素或者變化不大的動(dòng)畫(huà)應(yīng)該要移動(dòng)的更快，而大的元素或者復(fù)雜的元素持續(xù)時(shí)間稍長(zhǎng)一些看起來(lái)會(huì)更好。

 

在大小相同的對(duì)象中，移動(dòng)距離最短的物體應(yīng)該最先停止。小的對(duì)象與大的對(duì)象相比較，小對(duì)象移動(dòng)速度顯得更慢，因?yàn)闀?huì)產(chǎn)生更大的偏移量。動(dòng)畫(huà)的持續(xù)時(shí)間取決于物體的大小和移動(dòng)的距離。

 

 

當(dāng)對(duì)象發(fā)生碰撞時(shí)，根據(jù)物理原則，碰撞的能量必須在碰撞對(duì)象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈，往往會(huì)顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。避免使用彈跳效果，因?yàn)樗鼤?huì)分散注意力。

 

 

物體的運(yùn)動(dòng)軌跡應(yīng)該是清晰銳利的，所以盡量不要使用動(dòng)態(tài)模糊（在AE中做動(dòng)畫(huà)效果除外）。即使是在現(xiàn)在最新的設(shè)備上也很難重現(xiàn)這些效果，不能把這種動(dòng)態(tài)模糊的動(dòng)畫(huà)效果應(yīng)用到界面中。動(dòng)畫(huà)中盡量不要使用動(dòng)態(tài)模糊。

 

 

列表項(xiàng)的出現(xiàn)應(yīng)該只允許有一個(gè)短暫的延遲。每一個(gè)新列表項(xiàng)的出現(xiàn)間隔應(yīng)該在20-25ms之間。元素出現(xiàn)太慢的話，會(huì)讓用戶感到很不爽。列表項(xiàng)出現(xiàn)的動(dòng)畫(huà)應(yīng)該在20-25ms之間。

 

 

 

2：緩動(dòng)

 

緩動(dòng)可以讓物體運(yùn)動(dòng)的更加自然。這是動(dòng)畫(huà)的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書(shū)中有詳細(xì)的解釋。為了讓動(dòng)畫(huà)看起來(lái)不會(huì)覺(jué)得太過(guò)機(jī)械，物體的運(yùn)動(dòng)應(yīng)該會(huì)同時(shí)伴有一些加速度，就像現(xiàn)實(shí)世界中的運(yùn)動(dòng)一樣，不會(huì)有絕對(duì)勻速的運(yùn)動(dòng)形式。

緩動(dòng)的物體會(huì)比較線性運(yùn)動(dòng)的物體看起來(lái)更加自然

 

 

3：線性運(yùn)動(dòng)

 

不受任何物理因素影響的運(yùn)動(dòng)叫做勻速運(yùn)動(dòng)，這種動(dòng)畫(huà)在用戶眼中看來(lái)是非常的機(jī)械和不真實(shí)的。

所有的APP動(dòng)畫(huà)都會(huì)用到動(dòng)畫(huà)曲線。我將試著去解釋如何閱讀它們并說(shuō)明它們的含義。下面的例子中，運(yùn)動(dòng)就是勻速的，可以看到對(duì)象在相同的時(shí)間間隔中移動(dòng)了相同的位置。

線性動(dòng)畫(huà)在什么時(shí)候會(huì)用到？舉個(gè)例子，對(duì)象僅改變它的顏色和透明度的時(shí)候會(huì)用到。一般來(lái)說(shuō)，當(dāng)一個(gè)對(duì)象不改變它的位置而只是改變狀態(tài)時(shí)，可以嘗試用線性動(dòng)畫(huà)來(lái)改變狀態(tài)。

 

4：緩入或者說(shuō)加速曲線

我們可以在曲線上看到，在相同時(shí)間內(nèi)，位置的變化會(huì)越來(lái)越大。這就說(shuō)明一個(gè)物體是在進(jìn)行加速運(yùn)動(dòng)。

 

 

這種曲線一般應(yīng)用在對(duì)象移出界面時(shí)，這些可能是系統(tǒng)通知，也可能只是界面中的卡片設(shè)計(jì)。但是記住，這種動(dòng)畫(huà)曲線只是會(huì)用在物體移出界面時(shí)，而反過(guò)來(lái)就不適用了。

 

 

動(dòng)畫(huà)曲線有助于表達(dá)正確的情緒。在下面的例子中，物體動(dòng)畫(huà)的持續(xù)時(shí)間和位移大小都是相同的，但你會(huì)發(fā)現(xiàn)即使是曲線上一些微小的變化也會(huì)讓你看動(dòng)畫(huà)的感受不同。

當(dāng)然，通過(guò)改變曲線，可以讓物體的運(yùn)動(dòng)顯得更加真實(shí)自然。

相同的持續(xù)時(shí)間和相同的位移變化，但是會(huì)有不同的感受

 

 

5：緩出或者說(shuō)減速曲線

與緩入恰恰相反，物體的運(yùn)動(dòng)在開(kāi)始時(shí)位移變化很大，但是后面會(huì)越來(lái)越小直到最后完全停止。

減速曲線

 

 

這種類型的運(yùn)動(dòng)曲線通常是用在物體進(jìn)入界面中時(shí)——快速進(jìn)入屏幕然后再慢慢停下來(lái)，在不同卡片或?qū)ο髲钠聊煌膺M(jìn)入界面時(shí)可以應(yīng)用上。

減速曲線在此時(shí)會(huì)讓動(dòng)畫(huà)顯得更加自然

 

 

 

6：緩入緩出或者說(shuō)標(biāo)準(zhǔn)曲線

這種曲線使物體有加速和減速的過(guò)程。這種類型的動(dòng)畫(huà)在界面中是最常用的，當(dāng)你還在遲疑該用怎樣的動(dòng)畫(huà)曲線時(shí)，選擇標(biāo)準(zhǔn)曲線準(zhǔn)沒(méi)錯(cuò)。

標(biāo)準(zhǔn)曲線

 

 

根據(jù)谷歌規(guī)范，建議最好是用一些非對(duì)稱曲線來(lái)使得物體運(yùn)動(dòng)的更加自然真實(shí)。動(dòng)畫(huà)的結(jié)尾會(huì)比動(dòng)畫(huà)的開(kāi)頭更加需要去強(qiáng)調(diào)，這樣的結(jié)果是加速時(shí)間要小于減速時(shí)間。在這個(gè)情況下，動(dòng)畫(huà)能夠引導(dǎo)用戶更加關(guān)注元素的結(jié)束部分，以至于關(guān)注到其新的狀態(tài)。

注意觀察對(duì)稱與非對(duì)稱曲線的區(qū)別

 

 

緩入緩出動(dòng)畫(huà)常被用在界面中對(duì)象從一個(gè)位置移動(dòng)到另一個(gè)位置時(shí)。在這種情況下，動(dòng)畫(huà)的目的是為了不讓人有過(guò)多不必要的關(guān)注。

卡片的非對(duì)稱曲線運(yùn)動(dòng)

 

 

同樣的情況還適用于，元素在界面中消失后用戶還能隨時(shí)顯示，抽屜導(dǎo)航就是這樣的例子。

抽屜導(dǎo)航的收起過(guò)程就是應(yīng)用到了標(biāo)準(zhǔn)曲線

 

 

從很多例子中可以看出許多初學(xué)者都忽略了一個(gè)基本的規(guī)則——開(kāi)始動(dòng)畫(huà)不等同于結(jié)束動(dòng)畫(huà)，應(yīng)該分別去設(shè)置，比如在抽屜導(dǎo)航動(dòng)效中——打開(kāi)是一個(gè)減速動(dòng)畫(huà)但關(guān)閉時(shí)卻是一個(gè)標(biāo)準(zhǔn)曲線動(dòng)畫(huà)。另外，根據(jù)谷歌設(shè)計(jì)規(guī)范，物體出現(xiàn)的動(dòng)畫(huà)持續(xù)時(shí)間應(yīng)該略長(zhǎng)，以吸引用戶更多的注意力。

側(cè)邊欄的動(dòng)畫(huà)是配合減速曲線和標(biāo)準(zhǔn)曲線一起來(lái)實(shí)現(xiàn)的。有一個(gè)立方貝塞爾函數(shù)常用來(lái)描述這種速度曲線。之所以叫立方是因?yàn)樗腔?個(gè)點(diǎn)來(lái)的。第一個(gè)點(diǎn)在坐標(biāo)軸中是（0，0）（左下），最后一個(gè)點(diǎn)是（1，1）(右上)。

基于此，我們只需要描述圖上的兩個(gè)點(diǎn)，這是由貝塞爾函數(shù)的四個(gè)參數(shù)給出的:前兩個(gè)是第一個(gè)點(diǎn)的坐標(biāo)x和y，后兩個(gè)是第二個(gè)點(diǎn)的坐標(biāo)x和y。

 

為了便于實(shí)際工作，我建議使用2個(gè)工具網(wǎng)站來(lái)操作

https://easings.net/

http://cubic-bezier.com

第一個(gè)包含一些最常使用的曲線列表，可以直接將其復(fù)制到原型工具中去。

第二個(gè)是可以給你自己自定義動(dòng)畫(huà)的曲線，并能實(shí)時(shí)查看效果。

 

 

不同類型的動(dòng)畫(huà)曲線以及他們不同的參數(shù)

 

 

7：動(dòng)畫(huà)在界面中的編排

就像芭蕾舞編排一樣，主要思想是從一個(gè)狀態(tài)到另一個(gè)狀態(tài)的過(guò)渡引導(dǎo)用戶注意力方向。

一般會(huì)有2種編排形式——同級(jí)動(dòng)畫(huà)和從屬動(dòng)畫(huà)。

 

 

同級(jí)動(dòng)畫(huà)

同級(jí)動(dòng)畫(huà)意味著所有對(duì)象的外觀都服從一個(gè)特定的規(guī)則。

在這種情況下，所有卡片都按一個(gè)相同的流程出現(xiàn)，引導(dǎo)用戶注意力在一個(gè)方向上，即從上到下。如果我們不按照這個(gè)順序，用戶的注意力就會(huì)分散，如果所有元素同時(shí)出現(xiàn)也會(huì)很糟糕。

用戶的注意力應(yīng)被引導(dǎo)在一個(gè)方向上

 

 

至于表格視圖，就會(huì)略微有些復(fù)雜。這種情況下，用戶往往是以對(duì)角線為焦點(diǎn)去看界面的，所以逐個(gè)出現(xiàn)的形式也比較糟糕。另外，逐個(gè)出現(xiàn)的動(dòng)畫(huà)在時(shí)間上也會(huì)過(guò)長(zhǎng)，而且把用戶的注意力引導(dǎo)成鋸齒狀，這是很不友好的。

按對(duì)角線出現(xiàn)的表格視圖動(dòng)畫(huà)

 

 

從屬動(dòng)畫(huà)

從屬動(dòng)畫(huà)是指有一個(gè)核心運(yùn)動(dòng)的元素，它吸引用戶所有的注意力，其他元素也都跟隨它的運(yùn)動(dòng)。這種類型的動(dòng)畫(huà)會(huì)顯得更有秩序感，讓用戶更多的去關(guān)注到內(nèi)容本身。

而在其他情況下，用戶是很難知道他到底要去看哪個(gè)元素，注意力很容易被分散。如果要設(shè)置多個(gè)動(dòng)畫(huà)元素，一定要清楚的知道他的動(dòng)畫(huà)順序，并盡可能的將其他動(dòng)畫(huà)元素弱化。

只賦予一個(gè)中心對(duì)象生命是值得的，而所有其他的對(duì)象都服從于它。否則，用戶就不知道到底應(yīng)該注意哪個(gè)元素。

 

 

根據(jù)谷歌規(guī)范，當(dāng)運(yùn)動(dòng)物體的大小不成比例地改變時(shí)，它們應(yīng)該沿著弧線而不是直線運(yùn)動(dòng)。這有助于使動(dòng)畫(huà)更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對(duì)稱地進(jìn)行的，即以不同的速度變化(例如，一個(gè)正方形變成一個(gè)矩形)。

物體的運(yùn)動(dòng)如果不成比例，那應(yīng)該按弧線變化。

 

 

當(dāng)對(duì)象按比例改變其大小時(shí)，則此時(shí)直線運(yùn)動(dòng)的形式會(huì)更好。由于這種運(yùn)動(dòng)形式做起來(lái)容易得多，弧線軌跡運(yùn)動(dòng)的規(guī)律就往往被忽視。在現(xiàn)在很多應(yīng)用中，我們都能找到這種例子。

等比的物體運(yùn)動(dòng)軌跡應(yīng)該使用直線

 

 

曲線軌跡運(yùn)動(dòng)也會(huì)有兩種實(shí)現(xiàn)方式：第一種是開(kāi)始水平移動(dòng)，然后以垂直運(yùn)動(dòng)結(jié)束;第二種是開(kāi)始垂直移動(dòng)，然后以水平運(yùn)動(dòng)結(jié)束。

 

物體沿曲線移動(dòng)的路徑必須與滾動(dòng)界面的方向重合。例如，在下面的例子中，我們可以上下滾動(dòng)界面，相應(yīng)地，卡片以垂直的方式展開(kāi)更合適——先向右，然后向下。

展開(kāi)/折疊卡片的方向應(yīng)與界面的軸線重合

 

如果物體的運(yùn)動(dòng)路徑彼此相交，它們就應(yīng)該不能穿過(guò)對(duì)方。物體應(yīng)該通過(guò)減慢或加速自身的速度為另一個(gè)物體的運(yùn)動(dòng)留下足夠的空間。另一種方式——只是推開(kāi)其他物體。為什么要這么做？因?yàn)槲覀兗僭O(shè)界面中的所有對(duì)象都位于一個(gè)平面上。（譯者注：對(duì)于這一點(diǎn)我不是很認(rèn)同，為了更加真實(shí)么？）

在運(yùn)動(dòng)過(guò)程中，物體不應(yīng)該互相穿透，而是為另一個(gè)物體的運(yùn)動(dòng)留下空間。

 

 

在另一種情況下，移動(dòng)的物體可以通過(guò)抬高于其他物體，而不會(huì)以溶解或通過(guò)其他物體的形式來(lái)移動(dòng)。為什么?因?yàn)槲覀兿嘈沤缑嫔显氐男袨閼?yīng)該要符合物理定律，在現(xiàn)實(shí)世界中沒(méi)有任何實(shí)體能夠做到直接穿透對(duì)方。

 

如果我們總結(jié)上述所有的規(guī)律和原則，可以得出界面動(dòng)畫(huà)應(yīng)該要反映物質(zhì)世界的運(yùn)動(dòng),例如我們都知道的，摩擦，加速等等。模仿現(xiàn)實(shí)世界的行為我們可以創(chuàng)建一個(gè)優(yōu)秀的動(dòng)畫(huà)，滿足用戶的心理預(yù)期。一個(gè)優(yōu)秀的動(dòng)畫(huà)，應(yīng)該是不會(huì)那么刻意，也不會(huì)分散用戶對(duì)目標(biāo)的注意力。如果是的話，就需要優(yōu)化它，或者干脆把動(dòng)畫(huà)去掉。核心標(biāo)準(zhǔn)是動(dòng)畫(huà)不應(yīng)該降低用戶執(zhí)行任務(wù)的效率。但是不要忘記，用戶對(duì)動(dòng)畫(huà)的好壞感受，是感性大于理性的。所以，最好是把做出來(lái)的動(dòng)畫(huà)給用戶進(jìn)行評(píng)鑒，然后再不斷優(yōu)化它。

 

 

 

 

二、動(dòng)效模式

 

1.縮放

通過(guò)對(duì)目標(biāo)對(duì)象的突出顯示來(lái)吸引和引導(dǎo)用戶的視線。

適合場(chǎng)景：當(dāng)你設(shè)計(jì)的元素期望用戶點(diǎn)擊。例如在你的頁(yè)面中新推出了活動(dòng)或者是優(yōu)惠項(xiàng)目，這個(gè)效果可以加強(qiáng)用戶點(diǎn)擊的欲望。

 

 

2.旋轉(zhuǎn)

當(dāng)一個(gè)特定對(duì)象需要被突出顯示，旋轉(zhuǎn)動(dòng)畫(huà)可以引人注目。最常見(jiàn)的就是我們?cè)趇OS上刪除應(yīng)用時(shí)，應(yīng)用圖標(biāo)都會(huì)通過(guò)這種動(dòng)畫(huà)來(lái)提示用戶。

適合場(chǎng)景：當(dāng)選中的元素需要進(jìn)行二次確認(rèn)操作，這個(gè)動(dòng)效能反饋被選中。例如刪除安裝的應(yīng)用。

 

 

3.著色

通過(guò)用顏色的區(qū)分來(lái)突出顯示的對(duì)象，一般用于點(diǎn)擊或是選中的狀態(tài)。

適合場(chǎng)景：如果在選項(xiàng)中可以進(jìn)行多選，這個(gè)動(dòng)效就特別適用。例如選擇關(guān)注的明星，人物等。

 

 

4.褪色

周圍對(duì)象的顏色變淡來(lái)突出顯示的目標(biāo)對(duì)象。此效果在點(diǎn)擊圖片放大時(shí)用的較多。

適合場(chǎng)景：如果在選中這個(gè)元素時(shí)將產(chǎn)生過(guò)渡,例如在一些選中圖片進(jìn)行放大過(guò)渡時(shí)，這個(gè)動(dòng)效會(huì)更加適合。

 

 

 

5.模糊

周圍對(duì)象模糊來(lái)突出顯示的目標(biāo)對(duì)象，iOS中的3D touch就是使用的這個(gè)效果。

適合場(chǎng)景：當(dāng)多維度的交互產(chǎn)生時(shí)，不同的操作產(chǎn)生不同的結(jié)果，用動(dòng)效反饋會(huì)更加合適，模糊背景突出選中狀態(tài)可以是長(zhǎng)按的交互操作，iOS中的3D touch就是使用的這個(gè)效果。

 

 

6.變暗

用周圍元素的變暗來(lái)凸顯目標(biāo)對(duì)象，多用于彈窗的出現(xiàn)。

適合場(chǎng)景：選中一個(gè)元素，背景變暗類似于浮動(dòng)效果，多用于選中的元素還要進(jìn)行下一步操作，例如彈窗和輸入框的彈出。

 

 

7.翻轉(zhuǎn)

用翻轉(zhuǎn)目標(biāo)對(duì)象來(lái)顯示選中對(duì)象。我們玩一些翻牌小游戲的時(shí)候經(jīng)常會(huì)出現(xiàn)這樣的效果。

適合場(chǎng)景：點(diǎn)擊某個(gè)元素之后需要強(qiáng)烈反饋的。例如我們做一些趣味小游戲時(shí)，選中之后加上翻轉(zhuǎn)效果會(huì)讓用戶產(chǎn)生期待感。平時(shí)慎用，這個(gè)動(dòng)效會(huì)產(chǎn)生延緩等待的感覺(jué)。

 

 

8.發(fā)光凸顯

通過(guò)對(duì)光影的變化來(lái)凸顯目標(biāo)效果。地圖目標(biāo)顯示經(jīng)常會(huì)使用這樣的效果。

適合場(chǎng)景：使用發(fā)光效果來(lái)增加點(diǎn)擊引導(dǎo)，例如一些重要按鈕或者新增的功能模塊，通過(guò)發(fā)光來(lái)引導(dǎo)用戶點(diǎn)擊。

 

 

9.改變深度

目標(biāo)移到其他對(duì)象之前，來(lái)突出移動(dòng)的目標(biāo)的結(jié)果，用戶看起來(lái)像是改變了深度。多用于列表的移動(dòng)。

適合場(chǎng)景：兩個(gè)或者多個(gè)對(duì)象進(jìn)行切換時(shí)。例如一些影片或是圖片的切換，表示同一層級(jí)下的不同選項(xiàng)。

 

 

10.放大

目標(biāo)對(duì)象在用戶交互的時(shí)候放大，如果對(duì)象沒(méi)有被激活應(yīng)該回到原來(lái)的大小。通過(guò)放大目標(biāo)來(lái)顯示哪個(gè)對(duì)象在活躍并且正在交互中。多用于一些tab的切換。

適合場(chǎng)景：多個(gè)元素進(jìn)行切換選擇時(shí)。例如tab切換、圖標(biāo)切換。

 

 

 

三、動(dòng)效案例分類

 

1.滑動(dòng)

信息列表會(huì)跟隨著用戶的交互手勢(shì)而動(dòng)，然后卡片到相應(yīng)的位置上，保持整齊感，它屬于指向型動(dòng)畫(huà)，物體的滑動(dòng)取決于用戶是用那種手勢(shì)滑動(dòng)的。它的作用就是通過(guò)指向型轉(zhuǎn)場(chǎng)，有效幫助用戶清理頁(yè)面層級(jí)的排列情況。

適合場(chǎng)景：當(dāng)你設(shè)計(jì)的元素需要導(dǎo)航以列表方式呈現(xiàn)的時(shí)候可以使用滑動(dòng)效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

 

 

2.擴(kuò)大

頁(yè)面中的卡片會(huì)從縮略圖轉(zhuǎn)化為全屏視圖（一般這個(gè)卡片的中心點(diǎn)也會(huì)跟隨移動(dòng)到屏幕的中央）。反向動(dòng)效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。

適合場(chǎng)景：當(dāng)你設(shè)計(jì)的元素是需要和用戶進(jìn)行單一交互的時(shí)候。例如點(diǎn)開(kāi)圖片查看詳情，讓轉(zhuǎn)場(chǎng)過(guò)渡更自然。

 

 

3.最小化

頁(yè)面元素點(diǎn)擊之后縮小，然后移動(dòng)到屏幕上相應(yīng)的位置，相反的動(dòng)效就是擴(kuò)大，從縮略圖重新變?yōu)槿?。這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒(méi)有動(dòng)效引導(dǎo)，可能用戶需要花時(shí)間去尋找。

適合場(chǎng)景：當(dāng)用戶想要最小化某個(gè)元素的時(shí)候。例如搜索、添加快捷按鈕的點(diǎn)擊事件，符合從哪來(lái)到哪去的原理。

 

 

4.切換對(duì)象

當(dāng)前頁(yè)面移動(dòng)到后面，新的頁(yè)面移動(dòng)到前面，這樣能夠清楚解釋頁(yè)面之間是進(jìn)行切換的，不會(huì)顯得轉(zhuǎn)換的太突兀和莫名其妙。

適合場(chǎng)景：當(dāng)用戶在元素之間切換?；瑒?dòng)效果相對(duì)來(lái)說(shuō)比較單一和常見(jiàn)，使用動(dòng)效切換可以讓用戶產(chǎn)生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果。

 

 

5.展開(kāi)推疊

堆疊在一起的元素被展開(kāi)。能夠清楚的告訴用戶每個(gè)元素的排列情況，從哪里來(lái)到哪里去，也顯得更加有趣。

適合場(chǎng)景：當(dāng)用戶打開(kāi)一堆功能選項(xiàng)的時(shí)候。例如一個(gè)功能里面隱藏了好幾個(gè)二級(jí)功能時(shí)，就可以使用這樣的效果，利于用戶引導(dǎo)。

 

 

6.翻頁(yè)

當(dāng)用戶實(shí)施滑動(dòng)手勢(shì)的時(shí)候，出現(xiàn)像現(xiàn)實(shí)生活中翻頁(yè)一般的效果。真正動(dòng)效轉(zhuǎn)場(chǎng)也能夠清晰的展現(xiàn)列表層級(jí)的信息架構(gòu)，并且模仿現(xiàn)實(shí)生活中的動(dòng)效更加富有情感。

適合場(chǎng)景：當(dāng)用戶進(jìn)行一些翻頁(yè)操作時(shí)。例如看小說(shuō)，讀長(zhǎng)篇文章，使用這樣的效果會(huì)更貼近現(xiàn)實(shí)生活，引起用戶共鳴。

 

 

7.添加到列表

新的元素加入到原有的列表中，舊的元素被推開(kāi)而不是替換，從而有現(xiàn)實(shí)中騰出位置的感覺(jué)，這種轉(zhuǎn)場(chǎng)效果能夠清楚的展現(xiàn)列表重新排列的過(guò)程，讓用戶知道新舊信息的位置，不會(huì)產(chǎn)生迷惑。

適合場(chǎng)景：當(dāng)用戶需要進(jìn)行新操作時(shí)。有一些頁(yè)面呈現(xiàn)的是將新的事件替換掉舊的，而使用這樣的動(dòng)效可以讓用戶更清晰的知道自己做了什么，例如點(diǎn)贊，打賞。

 

 

8.導(dǎo)航標(biāo)簽轉(zhuǎn)換

根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)的在視覺(jué)上做出改變，而標(biāo)題是隨著內(nèi)容移動(dòng)而改變的，這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶能夠清晰理解頁(yè)面之間的架構(gòu)。

適合場(chǎng)景：同一層級(jí)頁(yè)面之間的切換。例如切換導(dǎo)航，或者進(jìn)度流程。使用動(dòng)效可以讓用戶更了解架構(gòu)，是標(biāo)簽而不是按鈕的感覺(jué)。

 

 

9.融合

元素會(huì)根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合，用戶可以感受到元素與元素之間的關(guān)聯(lián)，比起直接切換，顯然用融合動(dòng)畫(huà)更加有趣。

適合場(chǎng)景：當(dāng)用戶操作一個(gè)功能點(diǎn)時(shí)可能會(huì)處罰其他功能。例如運(yùn)動(dòng)app開(kāi)始健身或者跑步的時(shí)候，點(diǎn)擊開(kāi)始后會(huì)出現(xiàn)暫定或是結(jié)束。

 

 

10.滾動(dòng)

根據(jù)用戶的手勢(shì)進(jìn)行滾動(dòng)操作，非常使用與列表信息的查看。這個(gè)交互方式是我們用的最頻繁的，仙子我們也可以加入一些動(dòng)效使這個(gè)交互更加的有趣和豐富。

適合場(chǎng)景：當(dāng)用戶垂直或者水平移動(dòng)頁(yè)面時(shí)。例如列表，圖片，很多場(chǎng)景下都可以使用，也因此過(guò)于平凡，可以加一些動(dòng)效讓頁(yè)面活起來(lái)。

 

 

11.平移

當(dāng)一張圖片在我們有限的屏幕里沒(méi)有辦法看完的時(shí)候，會(huì)使用這樣的效果。除了放大效果，這樣的平移還可以加上動(dòng)效配合一些功能使用。

適合場(chǎng)景：移動(dòng)大于界面的的頁(yè)面。例如地圖，可以配合其他功能滾動(dòng)產(chǎn)生平移效果。

 

 

12.保存指示器

用戶一旦進(jìn)行保存、下載某個(gè)物體，物體會(huì)復(fù)制一份，同時(shí)縮小、移動(dòng)到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到，能夠告訴用戶對(duì)象已經(jīng)被添加。

適合場(chǎng)景：當(dāng)用戶添加書(shū)簽、下載、保存，加入等行為的時(shí)候使用。