編者按：昨天@平行煎餅?發(fā)了新版Material Design 官方動(dòng)效指南的第一節(jié)，今天繼續(xù)第二部分，從動(dòng)效的速度、動(dòng)態(tài)持續(xù)時(shí)間、通用持續(xù)時(shí)間和緩動(dòng)曲線4個(gè)部分，教你創(chuàng)建平滑一致的Material Design 動(dòng)效。再系統(tǒng)的干貨都比不上官方的動(dòng)效指南，西瓜就在這，趕緊來撿。

Material Design的動(dòng)效設(shè)計(jì)是響應(yīng)式的，自然的。使用緩動(dòng)曲線和持續(xù)時(shí)間模式可以創(chuàng)建平滑、一致的動(dòng)效。

速度

某個(gè)元素移動(dòng)或者改變狀態(tài)的時(shí)候，運(yùn)動(dòng)速度應(yīng)該足夠快，使用戶不用等待。出現(xiàn)頻率高的轉(zhuǎn)場動(dòng)畫應(yīng)該短一點(diǎn)，而有些轉(zhuǎn)場動(dòng)畫要慢一點(diǎn)，來保證用戶能理解它。

正確：動(dòng)效應(yīng)該足夠快，讓用戶不用等待動(dòng)畫完成。

錯(cuò)誤：不要做無意義的拖延。

動(dòng)態(tài)持續(xù)時(shí)間

應(yīng)該調(diào)整每個(gè)持續(xù)時(shí)間，來適應(yīng)不同的移動(dòng)距離、每個(gè)元素的速度、和表面的變化。而不是所有動(dòng)畫都用同樣的持續(xù)時(shí)間。物體離開屏幕應(yīng)該是一個(gè)很短的持續(xù)時(shí)間，這樣用戶就會減少對他的注意力。

當(dāng)物體需要移動(dòng)較大位移，或有很巨大的變化時(shí)，應(yīng)該占用更長的持續(xù)時(shí)間。

當(dāng)物體移動(dòng)較小距離，或者有很微小的變化時(shí)，應(yīng)該減少持續(xù)時(shí)間，這樣就不會使動(dòng)效看起來很慢很遲鈍。

通用持續(xù)時(shí)間

移動(dòng)設(shè)備

移動(dòng)設(shè)備上，動(dòng)畫通常會持續(xù)300ms左右：

大而復(fù)雜的全屏移動(dòng)設(shè)備上，通常需要更長的持續(xù)時(shí)間，375ms左右。

物體進(jìn)入屏幕的持續(xù)時(shí)間大概是225ms。

物體離開屏幕的持續(xù)時(shí)間大概是195ms。

動(dòng)畫超過400ms會顯得慢而拖沓。

大屏幕移動(dòng)設(shè)備

在大屏幕移動(dòng)設(shè)備上，同一時(shí)間段內(nèi)，物體移動(dòng)較長的距離速度比移動(dòng)較短的距離更快。越大的屏幕物體移動(dòng)的持續(xù)時(shí)間應(yīng)該更長，這樣動(dòng)效不會顯得太快。

平板設(shè)備

平板設(shè)備上動(dòng)效的持續(xù)時(shí)間應(yīng)該比移動(dòng)設(shè)備長30%左右。移動(dòng)設(shè)備上300ms的持續(xù)時(shí)間，在平板設(shè)備上應(yīng)該是390ms左右。

可穿戴設(shè)備

可穿戴設(shè)備上的動(dòng)效時(shí)間應(yīng)該比移動(dòng)設(shè)備上短30%左右。移動(dòng)設(shè)備上300ms的持續(xù)時(shí)間，在可穿戴設(shè)備上應(yīng)該是210ms左右。

動(dòng)效元素在大屏幕設(shè)備上會移動(dòng)很大的距離，動(dòng)畫可能會比小屏幕設(shè)備上看起來略為放緩。

桌面

桌面動(dòng)畫應(yīng)該比移動(dòng)設(shè)備上的動(dòng)畫更快、更簡單。通常只會持續(xù)150ms到200ms。

由于桌面動(dòng)畫可能不太引人注目，他們的響應(yīng)應(yīng)該更敏捷、更迅速。

復(fù)雜的網(wǎng)頁動(dòng)畫肯能會導(dǎo)致掉幀（除非他們專門為GPU加速）。更短的持續(xù)時(shí)間可以讓動(dòng)效快速完成，減少注意。

桌面動(dòng)效明顯看起來更快。

自然的緩動(dòng)曲線

緩動(dòng)曲線可以對物體的速度、透明度、大小產(chǎn)生效果。

加速和減速變化應(yīng)該是應(yīng)該是平滑的貫穿于動(dòng)畫的持續(xù)時(shí)間之中的，使動(dòng)效看起來不會那么機(jī)械化。（紅色無緩動(dòng)，藍(lán)色有緩動(dòng)）

當(dāng)加速和減速不對稱時(shí)，動(dòng)效會看起來更自然，更令人愉悅。（紅色對稱，藍(lán)色不對稱）

緩動(dòng)曲線

緩動(dòng)曲線可能會在不同的平臺或者軟件上有所不同。不同平臺上的緩動(dòng)曲線準(zhǔn)則會涉及到普通緩動(dòng)曲線、減速緩動(dòng)曲線、加速緩動(dòng)曲線，和急轉(zhuǎn)緩動(dòng)曲線。

標(biāo)準(zhǔn)緩動(dòng)曲線

這是最常見的緩動(dòng)曲線。物體可以根據(jù)在屏幕上的位置迅速加速或緩慢減速。這個(gè)曲線適用于增加或減少元素，和其他屬性的變化。

減速曲線（“緩出”）

物體全速進(jìn)入進(jìn)入屏幕時(shí)，然后慢慢減速靜止在屏幕上的某個(gè)點(diǎn)。

在減速過程中，物體可能從很小變到正常大小，也可能從透明變到不透明。有時(shí)候，當(dāng)物體透明進(jìn)入屏幕，可能從稍大的大小縮小到正常的大小。

加速曲線（“緩進(jìn)”）

物體離開屏幕是以全速離開，他們離開屏幕時(shí)不會減速。

急轉(zhuǎn)曲線

急轉(zhuǎn)曲線被用于隨時(shí)離開屏幕隨時(shí)回到屏幕的情況。

物體可能會在屏幕上某一點(diǎn)迅速加速，然后以一個(gè)對稱的曲線快速減速運(yùn)動(dòng)到屏幕外的某一點(diǎn)。減速會稍快于標(biāo)準(zhǔn)曲線，因?yàn)樗麄儾粫鹧谝粋€(gè)準(zhǔn)確的路徑到屏幕外的某一點(diǎn)。物體可能會隨時(shí)回到原點(diǎn)。

本章到此結(jié)束，如果想提前閱讀可到：https://www.google.com/design/spec/motion?查看。

另外，阿里

「2016年設(shè)計(jì)趨勢」

1. 設(shè)計(jì)篇：《再作印證！2016年網(wǎng)頁設(shè)計(jì)領(lǐng)域11個(gè)流行趨勢預(yù)測》
2. 電商網(wǎng)站篇：《不學(xué)就落伍咯！2016年電商設(shè)計(jì)的9個(gè)熱門趨勢（附案例）》
3. 插畫設(shè)計(jì)：《畫出個(gè)未來！幫你梳理2016年網(wǎng)頁插畫設(shè)計(jì)趨勢》

原文地址：google.com
譯者：@平行煎餅