Movement

Movement

运动

Movement

运动中的材料也会受到类似真实世界中相似的力,比如重力。

Material in motion abides by forces similar to those of the real world, like gravity.

屏幕内运动

On-screen movement

上弧线

Arc upward

下弧线

Arc downward

移入和移出屏幕运动

In-and-out screen movement

独立运动

Independent movement

相对运动

Relative movement

02-movement.png


在屏幕边界内运动

Movement within screen bounds

屏幕边界内的元素在两点之间的运动要保持自然的弧度,所有屏幕内的运动要使用 标准曲线运动

The movement of an element between two points within the bounds of the screen follows a natural, concave arc. All on-screen movements use the standard curve.

上弧线

Arc upward

上升运动在现实世界中是需要努力对抗重力的。在屏幕内的元素做上升运动时也应该使用减速来模拟现实世界中与重力做对抗的效果。

Rising against gravity in the real world requires effort. Elements moving upward on the screen should similarly depict effort during acceleration through a slower upward movement.

正确,当向斜上方运动时,应该缓角开始,以陡角结束。

Do.When moving diagonally upward, begin with a shallow ascent and end with a steep ascent.

错误,元素在开始做上升运动时,不要以陡角开始。

Don't.Don’t start an element’s upward movement with a steep ascent.

下弧线

Arc downward

在现实世界中,元素在下降过程中,重力会起到加速的作用。屏幕内的元素进行下降运动时,应该使用更快的速度来模拟现实世界中重力加速度的效果。

Falling elements in the real world are accelerated by gravity. Elements moving downward on screen should depict less effort through a faster downward movement.

正确,当物体做下滑运动时,应该以陡角开始,缓角结束。

Do.When moving diagonally downward, descent should begin steeply and end shallowly.

错误,当物体做下滑运动时,不要以缓角开始。

Don't.Don’t start an element’s downward movement with a shallow descent.

何时不用弧线

When not to arc

当元素运动时只沿单轴(垂直或水平)时,不需要使用弧线。这些运动更简单,并且可以使用稍快的速度进行移动。

Elements moving along a single axis (either horizontally or vertically, but not both) do not follow an arc. These movements are simpler and may move at a slightly faster speed.

正确,只沿一个轴的运动,路径要保持直线。

Do.Keep the path for single-axis movement straight.

错误,只沿一个轴的运动时,不要使用不自然的曲线。

Don't.Don’t apply an unnatural arc to single-axis movement.

当元素进入或者退出屏幕时,也使用单轴运动。

Elements entering and exiting the screen also move along a single axis.

正确,线性的进入是一个非常容易跟随,并且具有清晰的进入点。

Do.Linear entrances are easy to follow with a clearly defined entry point.

错误,元素从屏幕外进入屏幕内的运动的路径不要使用弧线,这会使进入点变的更复杂。

Don't.Don’t arc the path of an element if it is moving off-screen, as it complicates the entry point.


进入或移出屏幕的运动

Movement in and out of screen bounds

独立运动

Independent movement

元素进入或移除屏幕并且这些元素的运动不会影响到屏幕上原有的内容时,这些元素被称为独立元素。

Elements entering and exiting the screen are referred to as independent elements as they don't affect the position of other on-screen content.

进入屏幕

Entering the screen

元素进入屏幕时通常使用 减速曲线 运动,进入时是以最高速度进入。

Elements entering the screen use the deceleration curve for a speedy entrance, indicating that they had been travelling at peak velocity.

永久的离开屏幕

Permanently leaving the screen

元素 永久 离开屏幕时,使用 加速曲线运动 ,这些元素不会返回页面同时也不需要用户注意力对他们进行聚焦,所以减少这些元素在屏幕内的留存时间。

Elements permanently leaving the screen use the acceleration curve to speed off-screen over a slightly shorter duration, as they will not be returning and require less user focus.

正确,使用减速曲线运动将元素移入屏幕内,并且不要影响该元素周围其它元素的位置。在移动端,这种运动类型的变换通常需要 225ms。 当这些元素永久离开屏幕时,使用加速曲线运动。在移动端,这种运动类型的变换通常需要 195ms。

Do.Apply the deceleration curve to items entering the screen that do not affect the position of any other elements around it. On mobile, this transition typically occurs over 225ms. Apply the acceleration curve to these same items when they permanently leave the screen. On mobile, this transition typically occurs over 195ms.

错误,不要在这种情况下使用标准曲线运动。对于元素进入的时候,加速运动会让元素最终位置的焦点产生误导。对于元素离开屏幕的时,减速运动也是没有必要的,因为它已经移出屏幕了。

Don't.Don’t use the standard curve for either these cases. For entrances, slow acceleration is unnecessary as focus should be on the final resting point. For exits, slow deceleration is unnecessary as the ending point isn’t visible.

临时离开屏幕

Temporarily leaving the screen

元素 临时 离开屏幕的运动应该是用急弯曲线,因为他们有可能在任何时间都返回到屏幕内,所以他们应该在目标位置的附近。

Elements temporarily leaving the screen should use the sharp curve, as they may return to the screen at any time and should appear nearby and within reach.

正确,对于临时离开屏幕的元素,使用急弯曲线运动,并以相同的离开点返回。当他们返回时,使用减速曲线运动。在移动端,这种类型的变化大约需要 300ms。

Do.Apply the sharp curve to items temporarily leaving the screen that may return from the same exit point. When they return, use the deceleration curve. On mobile, this transition typically occurs over 300ms.

错误,当元素永久离开屏幕时使用加速曲线,然后他们返回时从不同的位置返回。如果他们返回,那么就用减速曲线运动。

Don't.Apply the acceleration curve to items permanently leaving the screen, or if they are to return from a different location. If they return, use the deceleration curve.

相对运动

Relative movement

屏幕上原有的元素要沿着进入或移出屏幕的元素进行顺滑的变速曲线运动,这样能够保持最小的破坏性并避免奇怪的运动吸引用户的注意力。

Entering or exiting elements that move other on-screen elements do so along a smooth easing curve, so that they remain minimally disruptive and avoid eye-catching, dramatic movement.

元素使用 标准曲线进入和移出屏幕,与独立元件相比,该曲线拥有稍长的持续时间。

The standard curve is used for moving elements both in and out of the bounds of the screen. This curve has a slightly longer duration compared to independent elements.

正确,由于屏幕上的浮动按钮也受到进入屏幕卡片的影响,所以两个元素从开始到结束时,保持相同的标准曲线运动。在移动设备上,这种变化需要大概 300ms。

Do.Since the on-screen floating action button’s movement is influenced by the entering card, the standard curve is applied to the movement of both elements to maintain a smooth start and stop. On mobile, this transition typically occurs over 300ms.

错误,在屏幕直上直下的元素运动中,使用减速或加速曲线运动,导致浮动按钮突然开始,或突然停止。这个与运动将会非常生硬并且不协调的。

Don't.Using deceleration and acceleration curves for the upward and downward movement cause the on-screen floating action button to abruptly start moving upward and abruptly stop moving downward. This movement is harsh and disruptive.