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:



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.



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.



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.




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.