material design (2)移動(dòng)

一 物體運(yùn)動(dòng)

  1. 為什么需要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),修飾辣苏,令人愉悅的
  2. 物體是怎樣運(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)用戶的注意力
  3. 一個(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í)間與緩入緩出

  1. 速度 速度的大小既要足夠快不讓用戶等待又要給予充分的時(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. 自然的緩入緩出
    (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)曲線川尖。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末登下,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子空厌,更是在濱河造成了極大的恐慌庐船,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嘲更,死亡現(xiàn)場(chǎng)離奇詭異筐钟,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)赋朦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門篓冲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宠哄,你說我怎么就攤上這事壹将。” “怎么了毛嫉?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵诽俯,是天一觀的道長。 經(jīng)常有香客問我承粤,道長暴区,這世上最難降的妖魔是什么闯团? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮仙粱,結(jié)果婚禮上房交,老公的妹妹穿的比我還像新娘。我一直安慰自己伐割,他們只是感情好候味,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著隔心,像睡著了一般白群。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上济炎,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天川抡,我揣著相機(jī)與錄音,去河邊找鬼须尚。 笑死崖堤,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的耐床。 我是一名探鬼主播密幔,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼撩轰!你這毒婦竟也來了胯甩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤堪嫂,失蹤者是張志新(化名)和其女友劉穎偎箫,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體皆串,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡淹办,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了恶复。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怜森。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖谤牡,靈堂內(nèi)的尸體忽然破棺而出副硅,到底是詐尸還是另有隱情,我是刑警寧澤翅萤,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布恐疲,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏培己。R本人自食惡果不足惜糜烹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望漱凝。 院中可真熱鬧,春花似錦诸迟、人聲如沸茸炒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽壁公。三九已至,卻和暖如春绅项,著一層夾襖步出監(jiān)牢的瞬間紊册,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工快耿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留囊陡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓掀亥,卻偏偏與公主長得像撞反,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子搪花,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

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