新版MATERIAL DESIGN 官方動(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)場(chǎng)動(dòng)畫應(yīng)該短一點(diǎn)荞膘,而有些轉(zhuǎn)場(chǎng)動(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í)間,這樣用戶就會(huì)減少對(duì)他的注意力脏答。


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


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

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

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

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

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

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

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

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

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

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

平板設(shè)備

平板設(shè)備上動(dòng)效的持續(xù)時(shí)間應(yīng)該比移動(dòng)設(shè)備長(zhǎng)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è)備上會(huì)移動(dòng)很大的距離,動(dòng)畫可能會(huì)比小屏幕設(shè)備上看起來略為放緩榜跌。

桌面

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

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

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


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

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

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


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


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

緩動(dòng)曲線

緩動(dòng)曲線可能會(huì)在不同的平臺(tái)或者軟件上有所不同佛吓。不同平臺(tái)上的緩動(dòng)曲線準(zhǔn)則會(huì)涉及到普通緩動(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í)不會(huì)減速。



急轉(zhuǎn)曲線

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

物體可能會(huì)在屏幕上某一點(diǎn)迅速加速览祖,然后以一個(gè)對(duì)稱的曲線快速減速運(yùn)動(dòng)到屏幕外的某一點(diǎn)。減速會(huì)稍快于標(biāo)準(zhǔn)曲線拂蝎,因?yàn)樗麄儾粫?huì)尊循于一個(gè)準(zhǔn)確的路徑到屏幕外的某一點(diǎn)穴墅。物體可能會(huì)隨時(shí)回到原點(diǎn)。


譯文來自:優(yōu)設(shè)

原文地址:google.com

譯者:@平行煎餅

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末温自,一起剝皮案震驚了整個(gè)濱河市玄货,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌悼泌,老刑警劉巖松捉,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異馆里,居然都是意外死亡隘世,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門鸠踪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丙者,“玉大人,你說我怎么就攤上這事营密⌒得剑” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵评汰,是天一觀的道長(zhǎng)纷捞。 經(jīng)常有香客問我,道長(zhǎng)被去,這世上最難降的妖魔是什么主儡? 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮惨缆,結(jié)果婚禮上糜值,老公的妹妹穿的比我還像新娘丰捷。我一直安慰自己,他們只是感情好臀玄,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6 390
  • 文/花漫 我一把揭開白布瓢阴。 她就那樣靜靜地躺著畅蹂,像睡著了一般健无。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上液斜,一...
    開封第一講書人閱讀 51,245評(píng)論 1 299
  • 那天累贤,我揣著相機(jī)與錄音,去河邊找鬼少漆。 笑死臼膏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的示损。 我是一名探鬼主播渗磅,決...
    沈念sama閱讀 40,120評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼检访!你這毒婦竟也來了始鱼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤脆贵,失蹤者是張志新(化名)和其女友劉穎医清,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卖氨,經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡会烙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了筒捺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柏腻。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖系吭,靈堂內(nèi)的尸體忽然破棺而出五嫂,到底是詐尸還是另有隱情,我是刑警寧澤村斟,帶...
    沈念sama閱讀 35,460評(píng)論 5 344
  • 正文 年R本政府宣布贫导,位于F島的核電站,受9級(jí)特大地震影響蟆盹,放射性物質(zhì)發(fā)生泄漏孩灯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3 327
  • 文/蒙蒙 一逾滥、第九天 我趴在偏房一處隱蔽的房頂上張望峰档。 院中可真熱鬧败匹,春花似錦、人聲如沸讥巡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)欢顷。三九已至槽棍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間抬驴,已是汗流浹背炼七。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留布持,地道東北人豌拙。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像题暖,于是被迫代替她去往敵國(guó)和親按傅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

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