大色欧美,色老头网站久久网,最近最新手机中文字幕在线看,最新毛片网,a视频在线播放,中文字幕一区二区三区有限公司,国产成人精品视频免费

新版MATERIAL DESIGN 官方動效指南(二)

作者:
2016-05-20
1261

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

速度

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

16motion20160513

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

15motion20160513

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

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

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

14motion20160513

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

13motion20160513

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

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

移動設(shè)備

移動設(shè)備上,動畫通常會持續(xù)300ms左右:

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

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

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

動畫超過400ms會顯得慢而拖沓。

大屏幕移動設(shè)備

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

平板設(shè)備

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

可穿戴設(shè)備

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

12motion20160513

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

桌面

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

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

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

11motion20160513

桌面動效明顯看起來更快。

自然的緩動曲線

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

10motion20160513

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

9motion20160513

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

緩動曲線

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

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

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

8motion201605137motion20160513

減速曲線(“緩出”)

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

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

6motion201605135motion20160513

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

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

4motion201605133motion20160513

急轉(zhuǎn)曲線

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

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

2motion201605131motion20160513

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


0
1
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號