Google has released a new material Design dynamic performance Guide

Material Motion

In the material design world, the dynamic utility is an elegant, flowing way to describe spatial relationships, functions, and intentions.

　Why is it important to be effective?

Action can show us how an app is made and used.

Dynamic effect can be done:

Focus Guide between different views

When the user completes a gesture, prompts the user what will happen

Define the hierarchical and spatial relationships between elements

Distracting the user's attention when the program is running in the background (for example, getting content or loading the next view)

Retouching the entire app: personalized, enjoyable

How to make the dynamic effect of material design?

The motion of material design absorbs some real-world mechanical elements, such as gravity and friction. These forces respond to the effect of the user on the screen operation and how these elements are fed back to each other.

The motion of material design has the following characteristics:

1. Response-Type

The dynamic effect of material design is energetic. It responds quickly and accurately to content triggered by user users.

Long animations on mobile devices are about 300-400ms, and short animations are probably 150-200ms. Too long animation makes people feel dull, too short animation makes people find it difficult to see clearly.

When the user touches the screen, the user can confirm the input through the Yi Lian animation. A rise in the card indicates that the card is in an active state.

Displays the connection between the trigger component or action and the new card created.

　2. The Natural

The dynamic effect of material design shows the natural motion process by imitating the force of the real world.

In the real world, an object can be quickly accelerated or slowed down by the weight, surface friction, and so on. Similarly, the motion of the material design does not suddenly stop, or suddenly start, there will be an acceleration or deceleration.

Forces in the real world, such as gravity, can cause an element to move along a curve rather than a straight line.

The dynamic transitions of material design are along an arc.

　　3. The detectable

The dynamic effect of material design can be detected by the surrounding environment, including the user and other elements around. It can be attracted to objects and respond appropriately to the user's intentions.

As a transitional element, they and the movement of the elements around them are carefully arranged and can be seen through the process of their relationship.

Cards can drive other cards and let them make a way for themselves.

Elements may attract other elements to join when they are close together.

　4. Have the intention of guiding

The dynamic performance of the material design focuses on the right point at the time of focus.

A transition animation helps guide the user through the next interaction.

Motion can transmit different signals, for example, whether an operation is not available.

Animations enable users to focus on specific objects.

　How do I design a good animation for transitions?

Good dynamic design should comply with the following points:

1. The action is quick.

An interactive action should not allow the user to do unnecessary waiting.

Correct: The animation must be fast, the user does not need to wait for the animation to complete.

Error: Many elements are slow to move, another animation is prolonged

　2. The dynamic effect is clear

Transitions animations should be clear, simple, and consistent. You should avoid one or too many elements of the dynamic effect.

Correct: Keep a clear path into the next view, and the best components are organized into one group.

Error: Multiple elements moving in different directions or cross paths can cause confusion in transition animations

　3. The dynamic effect is unified

The dynamic effect of material design is unified by speed, responsiveness, and intention. Any custom dynamic experience in the app should run through the entire app.

Even though these apps have different functions, their similar animation experiences make people feel connected.

　　The meaning of dynamic effect

The benefits of dynamic performance can be seen in the following two examples: One app follows these patterns and the other fails.

Correct: In the process of transition, the user is directed to the next view. The surface transitions clearly convey a hierarchical relationship. The loading process is performed in the background to reduce latency.

Error: The occurrence point of the transition does not have a clear focus, so the link between the new page and the old one is not visible. No sense of any level of relationship, loading with a circle of the semicircle performance is too obvious, feel a sense of delay.