Motion design looks hard, but it doesn’t have to be

Motion helps make user interfaces expressive and easy to use. Despite its great potential, the movement is perhaps the least understood of all the disciplines of design. This may be due to the fact that he is one of the newest members of the UI designer family.

Visual and interaction design dates back to early graphic interfaces, but Motion had to wait for modern hardware to make animation smooth. The overlap between the movement of the user interface and the traditional animation also scrambles the waters.

A lifetime can be spent mastering the [1219] basic principles of Disney Does this mean that the AC movement is so complex? People often tell me that designing a movement is complicated or that choosing the right values ​​is ambiguous. I argue that in the most important areas for a user interface, motion design can and should be simple.

Where to begin

Motion's main task is to help users navigate an application by illustrating the relationship between the elements of the user interface. Motion can also add character to an application with animated icons, logos, and illustrations. However, the ease of use must take precedence over the addition of expressiveness.

Before you tap into your character animation skills, let's start by designing a strong motion base with a focus on navigation transitions.

Transition patterns

When designing a navigation transition, simplicity and consistency are essential. To do this, we will choose two types of motion models:

Container-based transitions
Transitions without container

Transitions based on a container

If a composition involves a container, for example a button, map, or list, the design of the transition is based on the animation of the container. Containers are usually easy to spot based on their visible edges, but remember that they can also be invisible until the beginning of the transition, as a list item without separators. This model is divided into three stages:

1. Animate the container with the help of Standard attenuation of the material (c. that is to say, it accelerates quickly then stops slowly). In this example, the dimensions and corner radii of the container are animated from a circular button to a rectangle that fills the screen.

2. Adjust the items in the container to fit them to the width. Items are pinned up and hidden inside the container. This creates a clear connection between the container and the elements inside.

3. The elements that come out during the transition gradually disappear as the container accelerates. The incoming elements blend when the container decelerates. A seamless effect is achieved by attenuating the elements as they move quickly.

The application of this model to all transitions involving a container establishes a consistent style. This also clarifies the relationship between start and end compositions because they are linked by the animated container. To show the flexibility of this motif, it is applied here to five different compositions:

Some containers simply slide off the screen using Standard Material Flexibility. The direction in which it slides is informed by the location of the component with which it is associated. For example, if you tap an icon in the top-left navigation drawer, the container slides from the left.

If a container enters inside the limits of the screen, it disappears gradually. Instead of animating from 0%, it starts at 95% to avoid drawing excessive attention to the transition.

Scale animation uses The deceleration of the material accelerates which means that it starts at top speed and slowly decelerates at rest. To exit, the container simply disappears without scaling. The release animations are designed to be more subtle than the entries in order to attract attention to new content.

The animation slows down to illustrate how containers can come in with fading and scaling animation

Transitions without Container

Some compositions will not have a container on which to base the transition design, for example if you tap an icon in a bottom navigation to bring the user to a new destination. In these cases, a two-step model is used:

The starting composition leaves by fading, then the final composition enters by erasure.
As the final composition appears, it also increases subtly using Material's deceleration attenuation. Again, the scale is applied to the incoming composition only to emphasize new content in relation to the old.

If start and end compositions have a clear spatial or sequential relationship, you can use the shared move to reinforce it. When you navigate in a step-by-step component, for example, start and end compositions share a vertical slide motion when they fade.

This reinforces their vertical disposition. When you press the next button in an embed stream, the compositions share a horizontal drag gesture. Moving from left to right reinforces the notion of progression in a sequence. The shared move uses Material's standard easing.

Leave a Reply

Your email address will not be published.