一 物體運(yùn)動(dòng)
- 為什么需要motion
motion提供:
引導(dǎo)不同視圖
暗示用戶當(dāng)完成某個(gè)動(dòng)作時(shí)的結(jié)果
元素之間的層級(jí)和空間關(guān)系
分散用戶注意力當(dāng)后臺(tái)在運(yùn)行的時(shí)候(比如獲取內(nèi)容或者加載下一個(gè)視圖的時(shí)候)
有特點(diǎn),修飾辣苏,令人愉悅的 - 物體是怎樣運(yùn)動(dòng)的
(1)反應(yīng)靈敏 一旦觸發(fā)凛俱,能夠快速響應(yīng)
(2)自然運(yùn)動(dòng) 在外力作用下自然運(yùn)動(dòng)
(3)與周圍物體互動(dòng)
(4)具有目的性 引導(dǎo)用戶的注意力 - 一個(gè)成功的動(dòng)作設(shè)計(jì)具有的特點(diǎn)
(1)快速 避免引起用戶不必要的等待
(2)動(dòng)作簡潔干凈連續(xù)经窖,避免一次做太多動(dòng)作
(3)運(yùn)動(dòng)是相關(guān)的 物體是速度,反應(yīng)和目的的結(jié)合烛卧,app的每一個(gè)自定義的動(dòng)作應(yīng)該保持統(tǒng)一貫穿于整個(gè)app隘庄。
二 持續(xù)時(shí)間與緩入緩出
- 速度 速度的大小既要足夠快不讓用戶等待又要給予充分的時(shí)間讓用戶理解這種過渡
2 持續(xù)時(shí)間 持續(xù)時(shí)間與物體的運(yùn)動(dòng)距離,速度及表面變化相吻合生棍,而不是用單一的持續(xù)時(shí)間,當(dāng)一個(gè)物體離開屏幕的時(shí)候用更短的時(shí)間因?yàn)樗鼈儧]必要引起用戶的注意媳谁。
通常的持續(xù)時(shí)間:
(1)手機(jī):
通常情況下涂滴,手機(jī)上動(dòng)作的過渡時(shí)間一般在300ms左右,但以下情況除外:
大的晴音,復(fù)雜的柔纵,全屏的過渡需要更長的過渡時(shí)間,375ms左右锤躁;
進(jìn)入屏幕需要225ms搁料;
離開屏幕需要195ms
過渡時(shí)間超過400ms,會(huì)讓人覺得太漫長系羞。
(2)大屏幕:
大屏幕需要的持續(xù)時(shí)間要大于小屏幕的郭计,因?yàn)槲矬w相同時(shí)間內(nèi),運(yùn)動(dòng)距離越長速度越大椒振。
(3)平板電腦
平板運(yùn)動(dòng)的持續(xù)時(shí)間比手機(jī)長30%昭伸。例如,在手機(jī)上需要300ms的運(yùn)動(dòng)時(shí)間在平板電腦上需要390ms澎迎。
(4)可穿戴設(shè)備
在可穿戴設(shè)備上的運(yùn)動(dòng)持續(xù)時(shí)間要比手機(jī)上短30%庐杨。
(5)臺(tái)式電腦
臺(tái)式電腦上的運(yùn)動(dòng)應(yīng)該比移動(dòng)設(shè)備的更快更簡潔。一般在150ms到200ms夹供。
因?yàn)榕_(tái)式電腦的過渡不需要太明顯辑莫,復(fù)雜的web運(yùn)動(dòng)經(jīng)常導(dǎo)致丟失幀,快速的運(yùn)動(dòng)使得這個(gè)現(xiàn)象不明顯罩引。
- 自然的緩入緩出
(1)物體的加速和減速要平滑
(2)加速和減速不對(duì)稱
緩入緩出曲線的有多種形式,最常見的有:標(biāo)準(zhǔn)曲線枝笨,減速曲線袁铐,加速曲線揭蜒,銳曲線
標(biāo)準(zhǔn)曲線:最常見的的形式,物體快速加速緩慢減速剔桨,適用于事物放大和縮小
減速曲線:物體全速進(jìn)入屏幕屉更,然后減速到達(dá)靜止位置,在減速過程中洒缀,物體或者尺寸增大到100%瑰谜,或者透明度增加到100%。有些情況下树绩,當(dāng)物體進(jìn)入屏幕時(shí)透明度為0%萨脑,在進(jìn)入的過程中可能會(huì)尺寸稍微縮小。
加速曲線:物體全速離開屏幕饺饭。離開過程中不減速渤早。物體在動(dòng)畫一開始就開始加速,活著尺寸減速到0%瘫俊,或者透明度減到0%鹊杖。
銳曲線:適用于物體會(huì)隨時(shí)回到屏幕的情況下。
加速出現(xiàn)在屏幕扛芽,減速離開屏幕骂蓖,加速和減速時(shí)對(duì)稱的。減速過程快于標(biāo)準(zhǔn)曲線川尖。