Material motion

Material motion

Motion(运动)在 Material Design 的世界中是以美丽和流畅的方式来描述空间关系,功能和目的手段。

Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.


为什么 motion 很重要?

Why does motion matter?

Motion 表达了应用的组织方式和它能做什么?

Motion shows how an app is organized and what it can do.

Motion 作用:

  • 引导视图(页面)的焦点
  • 提示用户如果完成手势之后会发生什么
  • 元素之间的层次和空间关系
  • 将用户的注意力从当前的目的转移(例如载入界面,和下载新内容)
  • 可以润色你的应用,并且更具有特色,增添光彩

Motion provides:

  • Guided focus between views
  • Hints at what will happen if a user completes a gesture
  • Hierarchical and spatial relationships between elements
  • Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
  • Character, polish, and delight

材料如何移动

How does material move?

Material 环境从现实世界中吸取灵感,如重力和摩擦力。这些力反映在用户输入时对屏幕上的元素,以及元素与元素之间的相互作用。

The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.

Material 的 Motion 具有以下特性:

Material in motion has the following characteristics:

反馈

Responsive

Material 是充满活力的。它在用户使用手指输入内容触碰屏幕的那一刹就产生快速的反馈。

Material is full of energy. It quickly responds to user input precisely where the user triggers it.

移动设备上的较大动画长度为300-400ms。 较短的动画可以短到150-200ms。动画过长或过短都会让用户感到缓慢或难以跟随。

Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow.

查看更多 Common Durations

See more in Common Durations.

墨水波纹的效果是从用户接触屏幕的触摸点向外进行扩散,此效果用来反馈用户输入。卡片升起是用来表示激活状态

Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.

查看更多关于 Radial reaction

See more in Radial reaction

显示面板和创建它们的元素或操作之间的关系

Show the connection between new surfaces and the element or action that creates them.

查看更多关于 Creation

See more in Creation.

自然

Natural

Material 描绘了真实世界中的运动是由外力作用而产生的。在现实世界中,物体加速或减速的能力是受重量和表面摩擦力有关。根据此原理,在 Material Design 中不会发生立即启动和停止动作。

Material depicts natural movement inspired by forces in the real world.In the real world, an object's ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.

在现实世界中,物体加速或减速的能力是受重量和表面摩擦力有关。根据此原理,在 Material Design 中不会发生立即启动和停止动作

In the real world, an object's ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.

查看更多关于 Natural easing curves

See more in Natural easing curves.

现实世界的力量,如重力,作用在元素身上产生的位移,路径通常是弧线而不是直线。

Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.

查看更多关于 Movement

See more in Movement.

材料变形遵循弧形运动。

Material transformations follow an arc of movement.

查看更多关于 Transforming material

See more in Transforming material.

察觉

Aware

Material 能够察觉周围的环境,包括用户和其它材料。它可以吸引对象,并适当的影响用户的注意力。

Material is aware of its surroundings, including the user and other material around it. It can be attracted to objects and respond appropriately to user intent.

查看更多关于 Choreography

See more in Choreography.

当元素进入到视图中时,它会对周围的环境和元素产生联系,并以一种自然的方式入场

As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.

材料可以推动其它材料

Material can push other material out of the way.

元素可以吸引其周围的元素加入进来

Elements may attract other elements and join with them as they approach one another.

目的

Intentional

运动中的材料要引导用户在恰当的时间将注意力聚焦到正确的点。

Material in motion guides focus to the right spot at the right time.

查看更多关于 Continuity

See more in Continuity

一个过度可以帮助引导用户进入下一步操作

A transition helps guide the user to the next step of an interaction.

移动可以传递出不同的信号,比如该动作是否可用

Movement can communicate different signals, such as whether an action is unavailable.

动画可以将用户的注意力聚焦到需要聚焦的位置。

Animation can bring focus to objects that need user attention.


如何将过度做好

What makes a good transition?

成功的动作设计需要遵循以下的特征:

Successful motion design possesses the following characteristics:

动作是快速的

Motion is quick

一个反应不应该让用户等待过长时间。

An interaction shouldn't keep the user waiting longer than necessary.

正确,动画应该快速,用户永远不需要等待动画完成。

Do.Animate quickly so that the user never has to wait for the animation to finish.

错误,不要通过增加多个元素的动画从而延长用户等待的时间

Don't.Staggering and slowing the movement of many elements can lengthen the duration.

非常的干净

Motion is clear

过度应该是干净,简介,连贯的。应当避免一次过度中做过多的动作。

Transitions should be clear, simple, and coherent. They should avoid doing too much at once.

正确,保持一个简介的路径进入下一个视图,即使元素以一个组为行动

Do.Maintain a clear path into the next view, even while elements are choreographed as a group.

错误,当有多个元素需要移动时,不要将各个物体对移动路径设置为相互交叉,从而产生混乱

Don't.Transitions can get confusing when multiple items need to move in different directions or cross paths.

保持一致

Motion is cohesive

Material 的元素通过其速度,反应,和意图进行统一的结合。对于你应用的内任何运动体验都应该保持一致。

Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.

当这些应用实现不同的功能,但他们相似的动态体验让你感觉他们之间还是存在的某种联系

While these apps have different functions, their similar animation experiences make them feel related.


动作的意义

Implications of motion

有意义的动作的好处可以根据以下两个例子对比可以明显的感觉出来,一个存在意义而另一个不存在。

The benefits of these motion patterns are observable in the following two examples, in which an app that follows these patterns is compared with an app that does not.

正确,在转场的过程中,是将用户引导到下一个视图中。表面的变形来表现层次。加载动画可以将用户的注意力转移,以减少用户感知的等待时间

Do.During the transition, the user is guided to the next view. The surface transforms to communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.

错误,因为过度之间是没有联系,也没有焦点,所以新视图和旧视图的关系无法表现出来。任何层次感都无法表现出来,圆形加载动画加深了用户的感知时间。

Don't.It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading is more apparent by the display of a circular spinner.