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

D27發表於2017-07-27

三、運動(Movement)

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

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

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

在螢幕範圍內運動

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

圓弧狀向上
模擬現實世界中重力的影響,故在螢幕範圍內Material物件做向上移動會受到重力的影響。

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

可行

物件向斜上方移動忽略了重力對其的影響,顯得非常不自然。
物件向斜上方移動忽略了重力對其的影響,顯得非常不自然。

不可行

圓弧狀向下
同樣地,物件向下移動時受到重力影響加速運動。

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

可行

物件向斜下方移動忽略了重力對其的影響,顯得非常不自然。
物件向斜下方移動忽略了重力對其的影響,顯得非常不自然。

不可行

不是沿圓弧路徑運動的情況
如果物件沿單一軸向(橫向或縱向)移動,就不需要沿圓弧路徑運動。這種情況下,這些簡單的物件移動可以稍微加快點速度。

保持物件沿單一軸向直線運動。
保持物件沿單一軸向直線運動。

可行

物件沿單一軸向移動的情況下不要使用圓弧路徑。
物件沿單一軸向移動的情況下不要使用圓弧路徑。

不可行


物件進入和離開螢幕的動效也是沿單一軸向運動。

物件沿直線進入螢幕有助於在使用者腦海中形成對物件入口位置的清晰瞭解。
物件沿直線進入螢幕有助於在使用者腦海中形成對物件入口位置的清晰瞭解。

可行

在離開螢幕的運動中不要應用圓弧路徑,因為這會讓使用者難以理解入口的位置。
在離開螢幕的運動中不要應用圓弧路徑,因為這會讓使用者難以理解入口的位置。

不可行


進入和離開螢幕的運動

獨立運動
從螢幕外(內)到螢幕內(外)做運動的物件因為不會影響到其他物件在螢幕上的位置,所以被稱之為獨立物件。

進入螢幕
物件進入螢幕動效應用的是減速曲線(Deceleration curve)效果。從螢幕外加速進入螢幕內,進入後慢慢減速直至停止。運用這種效果的物件運動看起來就像是匆匆趕過來的一樣。

永久地離開螢幕
如果一個物件離開螢幕後再也不會返回螢幕,那它應使用加速曲線(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以上。

可行

雖然是關聯運動,但這並不意味著被迫移動的浮動按鈕也會使用減速、加速曲線效果。從圖中你可以看出,如果應用了這兩個效果,你就會看到浮動按鈕非常突然地開始和結束運動。這肯定會引起使用者注意,製造不必要的視覺干擾。
雖然是關聯運動,但這並不意味著被迫移動的浮動按鈕也會使用減速、加速曲線效果。從圖中你可以看出,如果應用了這兩個效果,你就會看到浮動按鈕非常突然地開始和結束運動。這肯定會引起使用者注意,製造不必要的視覺干擾。

不可行

相關文章