2017 Material design 第二章第三節《運動》

3、運動(Movement)

Material的運動借鑑了現實世界中的物理法則,好比重力的參考。html

屏幕上的運動(On-screen movement)
圓弧狀向上(Arc upward)
圓弧狀向下(Arc downward)ide

進入和離開屏幕的運動(In-and-out screen movement)
獨立運動(Independent movement)
關聯運動(Relative movement)ui

在屏幕範圍內運動

在屏幕範圍內兩點間運動的對象的運動路徑呈凹型圓弧狀,而且都使用標準曲線(Standard curve)緩動效果。google

圓弧狀向上
模擬現實世界中重力的影響,故在屏幕範圍內Material對象作向上移動會受到重力的影響。pwa

對象向斜上方移動,整個運動過程是逐漸加速移動。
對象向斜上方移動,整個運動過程是逐漸加速移動。

可行

對象向斜上方移動忽略了重力對其的影響,顯得很是不天然。
對象向斜上方移動忽略了重力對其的影響,顯得很是不天然。

不可行

圓弧狀向下
一樣地,對象向下移動時受到重力影響加速運動。3d

對象向斜下方移動,整個運動過程是逐漸減速移動。
對象向斜下方移動,整個運動過程是逐漸減速移動。

可行

對象向斜下方移動忽略了重力對其的影響,顯得很是不天然。
對象向斜下方移動忽略了重力對其的影響,顯得很是不天然。

不可行

不是沿圓弧路徑運動的狀況
若是對象沿單一軸向(橫向或縱向)移動,就不須要沿圓弧路徑運動。這種狀況下,這些簡單的對象移動能夠稍微加快點速度。cdn

保持對象沿單一軸向直線運動。
保持對象沿單一軸向直線運動。

可行

對象沿單一軸向移動的狀況下不要使用圓弧路徑。
對象沿單一軸向移動的狀況下不要使用圓弧路徑。

不可行


對象進入和離開屏幕的動效也是沿單一軸向運動。htm

對象沿直線進入屏幕有助於在用戶腦海中造成對對象入口位置的清晰瞭解。
對象沿直線進入屏幕有助於在用戶腦海中造成對對象入口位置的清晰瞭解。

可行

在離開屏幕的運動中不要應用圓弧路徑,由於這會讓用戶難以理解入口的位置。
在離開屏幕的運動中不要應用圓弧路徑,由於這會讓用戶難以理解入口的位置。

不可行


進入和離開屏幕的運動

獨立運動
從屏幕外(內)到屏幕內(外)作運動的對象由於不會影響到其餘對象在屏幕上的位置,因此被稱之爲獨立對象。對象

進入屏幕
對象進入屏幕動效應用的是減速曲線(Deceleration curve)效果。從屏幕外加速進入屏幕內,進入後慢慢減速直至中止。運用這種效果的對象運動看起來就像是匆匆趕過來的同樣。blog

永久地離開屏幕
若是一個對象離開屏幕後不再會返回屏幕,那它應使用加速曲線(Acceleration curve)的運動效果。在時間上,其離開的時間應比進入屏幕的時間要短,由於該對象不再會返回,也不須要用戶太多對其的關注,因此就讓它趕快走吧。

減速曲線(Deceleration curve)適用於進入屏幕的對象運動,這類對象運動不會影響到其餘對象在屏幕上的位置。在移動端上,進入屏幕的動效持續時間通常是225ms。與之對應的加速曲線Acceleration curve)適用於永久地離開屏幕的對象運動。在移動端上,永久離開屏幕的動效持續時間通常在195ms以上。
減速曲線(Deceleration curve)適用於進入屏幕的對象運動,這類對象運動不會影響到其餘對象在屏幕上的位置。在移動端上,進入屏幕的動效持續時間通常是225ms。與之對應的加速曲線Acceleration curve)適用於永久地離開屏幕的對象運動。在移動端上,永久離開屏幕的動效持續時間通常在195ms以上。

可行

不要使用標準曲線(standard curve)在進入或離開屏幕的對象運動上面。如在剛入屏之時,對象運動不該該仍是在逐漸加速的,由於咱們更須要關注的是它停留在屏幕上的位置,因此它應該加速進入屏幕以後朝着屏幕上的停留點逐漸減速;在離屏的時候,對象運動不該該是逐漸減速的,由於它離開屏幕後停留的點咱們根本看不見,因此不必用減速運動凸顯它的行進路徑。
不要使用標準曲線(standard curve)在進入或離開屏幕的對象運動上面。如在剛入屏之時,對象運動不該該仍是在逐漸加速的,由於咱們更須要關注的是它停留在屏幕上的位置,因此它應該加速進入屏幕以後朝着屏幕上的停留點逐漸減速;在離屏的時候,對象運動不該該是逐漸減速的,由於它離開屏幕後停留的點咱們根本看不見,因此不必用減速運動凸顯它的行進路徑。

不可行

暫時地離開屏幕
若是一個對象只是暫時離開屏幕,並有可能隨時返回屏幕的話,那它的運動應使用突變曲線(Sharp curve)的運動效果。

突變曲線適用於那些離開屏幕後有可能返回屏幕的對象。當這些對象返回屏幕的時候使用減速曲線(Deceleration curve)。在移動端上,暫時離開屏幕的動效持續時間通常在300ms以上。
突變曲線適用於那些離開屏幕後有可能返回屏幕的對象。當這些對象返回屏幕的時候使用減速曲線(Deceleration curve)。在移動端上,暫時離開屏幕的動效持續時間通常在300ms以上。

可行

加速曲線運動適用於那些離開屏幕後不再會返回屏幕的對象,或者即便返回也是從屏幕上不一樣於以前的位置返回屏幕。
加速曲線運動適用於那些離開屏幕後不再會返回屏幕的對象,或者即便返回也是從屏幕上不一樣於以前的位置返回屏幕。

不可行

關聯運動
若是一個對象在進入(或離開)屏幕的時候跟其餘屏幕上已有的對象發生衝突,那麼其餘對象應該沿着這個對象的運動路徑而且應用平滑的曲線運動效果作關聯運動。這樣作可以最小限度引發對象間關係的混亂,和避免引發用戶注意。

被迫移動的這些對象運動應使用標準曲線(standard curve)效果。

屏幕上的浮動按鈕(FAB)的位置被進入屏幕的卡片(card)所影響,浮動按鈕被迫跟隨卡片的運動路徑運動。爲了不引發對象間關係的混亂和干擾到用戶注意力,浮動按鈕的運動必須使用標準曲線效果,這樣就能夠保持浮動按鈕在開始和結束運動時候的平穩。在移動端上,這種被關聯的運動持續時間通常在195ms以上。
屏幕上的浮動按鈕(FAB)的位置被進入屏幕的卡片(card)所影響,浮動按鈕被迫跟隨卡片的運動路徑運動。爲了不引發對象間關係的混亂和干擾到用戶注意力,浮動按鈕的運動必須使用標準曲線效果,這樣就能夠保持浮動按鈕在開始和結束運動時候的平穩。在移動端上,這種被關聯的運動持續時間通常在195ms以上。

可行

雖然是關聯運動,但這並不意味着被迫移動的浮動按鈕也會使用減速、加速曲線效果。從圖中你能夠看出,若是應用了這兩個效果,你就會看到浮動按鈕很是忽然地開始和結束運動。這確定會引發用戶注意,製造沒必要要的視覺干擾。
雖然是關聯運動,但這並不意味着被迫移動的浮動按鈕也會使用減速、加速曲線效果。從圖中你能夠看出,若是應用了這兩個效果,你就會看到浮動按鈕很是忽然地開始和結束運動。這確定會引發用戶注意,製造沒必要要的視覺干擾。

不可行
相關文章
相關標籤/搜索