【轉】新版Material Design 官方動效指南(二)

Material Design的動效設計是響應式的瘟檩,自然的抹缕。使用緩動曲線和持續(xù)時間模式可以創(chuàng)建平滑、一致的動效芒帕。

速度

某個元素移動或者改變狀態(tài)的時候歉嗓,運動速度應該足夠快,使用戶不用等待背蟆。出現(xiàn)頻率高的轉場動畫應該短一點,而有些轉場動畫要慢一點哮幢,來保證用戶能理解它带膀。


正確:動效應該足夠快,讓用戶不用等待動畫完成橙垢。


錯誤:不要做無意義的拖延垛叨。

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

應該調整每個持續(xù)時間,來適應不同的移動距離柜某、每個元素的速度嗽元、和表面的變化。而不是所有動畫都用同樣的持續(xù)時間喂击。物體離開屏幕應該是一個很短的持續(xù)時間剂癌,這樣用戶就會減少對他的注意力。


當物體需要移動較大位移翰绊,或有很巨大的變化時佩谷,應該占用更長的持續(xù)時間旁壮。


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

通用持續(xù)時間

移動設備

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

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

物體進入屏幕的持續(xù)時間大概是225ms免胃。

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

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

大屏幕移動設備

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

平板設備

平板設備上動效的持續(xù)時間應該比移動設備長30%左右莉撇。移動設備上300ms的持續(xù)時間呢蛤,在平板設備上應該是390ms左右。

可穿戴設備

可穿戴設備上的動效時間應該比移動設備上短30%左右棍郎。移動設備上300ms的持續(xù)時間其障,在可穿戴設備上應該是210ms左右。


動效元素在大屏幕設備上會移動很大的距離涂佃,動畫可能會比小屏幕設備上看起來略為放緩励翼。

桌面

桌面動畫應該比移動設備上的動畫更快、更簡單辜荠。通常只會持續(xù)150ms到200ms汽抚。

由于桌面動畫可能不太引人注目,他們的響應應該更敏捷伯病、更迅速造烁。

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


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

自然的緩動曲線

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


加速和減速變化應該是應該是平滑的貫穿于動畫的持續(xù)時間之中的与涡,使動效看起來不會那么機械化惹谐。(紅色無緩動持偏,藍色有緩動)


當加速和減速不對稱時,動效會看起來更自然氨肌,更令人愉悅鸿秆。(紅色對稱,藍色不對稱)

緩動曲線

緩動曲線可能會在不同的平臺或者軟件上有所不同怎囚。不同平臺上的緩動曲線準則會涉及到普通緩動曲線卿叽、減速緩動曲線、加速緩動曲線恳守,和急轉緩動曲線考婴。

標準緩動曲線

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



減速曲線(“緩出”)

物體全速進入進入屏幕時伊群,然后慢慢減速靜止在屏幕上的某個點考杉。

在減速過程中,物體可能從很小變到正常大小舰始,也可能從透明變到不透明崇棠。有時候,當物體透明進入屏幕丸卷,可能從稍大的大小縮小到正常的大小枕稀。



加速曲線(“緩進”)

物體離開屏幕是以全速離開,他們離開屏幕時不會減速谜嫉。



急轉曲線

急轉曲線被用于隨時離開屏幕隨時回到屏幕的情況萎坷。

物體可能會在屏幕上某一點迅速加速,然后以一個對稱的曲線快速減速運動到屏幕外的某一點沐兰。減速會稍快于標準曲線食铐,因為他們不會尊循于一個準確的路徑到屏幕外的某一點。物體可能會隨時回到原點僧鲁。



譯文來自:優(yōu)設? ?原文地址:google.com??譯者:@平行煎餅

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市象泵,隨后出現(xiàn)的幾起案子寞秃,更是在濱河造成了極大的恐慌,老刑警劉巖偶惠,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件春寿,死亡現(xiàn)場離奇詭異,居然都是意外死亡忽孽,警方通過查閱死者的電腦和手機绑改,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門谢床,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人厘线,你說我怎么就攤上這事识腿。” “怎么了造壮?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵渡讼,是天一觀的道長。 經(jīng)常有香客問我耳璧,道長成箫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任旨枯,我火速辦了婚禮蹬昌,結果婚禮上,老公的妹妹穿的比我還像新娘攀隔。我一直安慰自己皂贩,他們只是感情好,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布竞慢。 她就那樣靜靜地躺著先紫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪筹煮。 梳的紋絲不亂的頭發(fā)上遮精,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天,我揣著相機與錄音败潦,去河邊找鬼本冲。 笑死,一個胖子當著我的面吹牛劫扒,可吹牛的內(nèi)容都是我干的檬洞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼沟饥,長吁一口氣:“原來是場噩夢啊……” “哼添怔!你這毒婦竟也來了?” 一聲冷哼從身側響起贤旷,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤广料,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后幼驶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體艾杏,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年盅藻,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡譬重,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出硕噩,到底是詐尸還是另有隱情,我是刑警寧澤元旬,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布榴徐,位于F島的核電站,受9級特大地震影響匀归,放射性物質發(fā)生泄漏坑资。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一穆端、第九天 我趴在偏房一處隱蔽的房頂上張望袱贮。 院中可真熱鬧,春花似錦体啰、人聲如沸攒巍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柒莉。三九已至,卻和暖如春沽翔,著一層夾襖步出監(jiān)牢的瞬間兢孝,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工仅偎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跨蟹,地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓橘沥,卻偏偏與公主長得像窗轩,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子座咆,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容