現(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ì)寫(xiě)任何新的知識(shí)，我只是想把所有的主要原則和規(guī)范做一個(gè)收集歸納，這樣就能便于其他設(shè)計(jì)師進(jìn)行快速?zèng)Q策了。
動(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)?；诖耍诳纱┐髟O(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之間。
緩動(dòng)
緩動(dòng)可以讓物體運(yùn)動(dòng)的更加自然。這是動(dòng)畫(huà)的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫(xiě)的《 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)更加自然
線性運(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)。
緩入或者說(shuō)加速曲線
我們可以在曲線上看到，在相同時(shí)間內(nèi)，位置的變化會(huì)越來(lái)越大。這就說(shuō)明一個(gè)物體是在進(jìn)行加速運(yùn)動(dòng)。
加速運(yùn)動(dòng)曲線
這種曲線一般應(yīng)用在對(duì)象移出界面時(shí)，這些可能是系統(tǒng)通知，也可能只是界面中的卡片設(shè)計(jì)。但是記住，這種動(dòng)畫(huà)曲線只是會(huì)用在物體移出界面時(shí)，而反過(guò)來(lái)就不適用了。
加速曲線應(yīng)用在物體移出界面時(shí)
動(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ì)有不同的感受
緩出或者說(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)用上。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
