Motion basics and usage

Transitions harmonized with logical spatial structure

One UI uses motion to emphasize the depth of screens and help users understand the relationship between UI elements. For example, Always On Display elements move out of the way to uncover the Lock screen underneath, which in turn disappears in a zoom animation to reveal the Home screen when the phone is unlocked.

One UI motion uses sets of movements and consistent rules so that users can predict the results of any action and understand the path to complete a task.

When a new interface opens in One UI, the old one smoothly dims or blurs into the background so the user naturally focuses on the interface that's just opened in the foreground.

Non-interrupted motion and interaction

Motion representing the interface context

Interaction providing a preview of movements for efficient guidance

When transitioning between images, fading the first image out completely before the new image fades in can reveal the background and cause glare. To avoid this, the new image should start fading in before the old image has disappeared entirely.

Overlapping the fade in time for text, however, can make screen look busy and lower readability. So, we wait for the text to disappear completely before fading in the new text.

The new image fades in before the first image disappears. / The first image fades out completely.

The old body copy disappears completely. / Texts overlap and impede readability.

Speed type and attributes

Basic motions in One UI accelerate quickly then slow down gradually. While accelerating, movements and changes happen fast. As the animation gets closer to its conclusion, things slow down and UI elements gently settle in their proper places.

One UI Basic Path Interpolator (One UI basic motion values)
[0.22, 0.25, 0.00, 1.00]

Find out more on

In addition to this basic motion style, 4 other styles (Linear, Ease in, Ease out, Ease in and out) are also available in One UI. The choice of which to use is based on the variance (value), which determines the speed, and duration. It is important to pick the right style of motion to ensure the correct response speed, perceived speed, and affective quality for the situation.

Linear

Linear motions keep the same speed from the beginning to the end. It's best to use Linear motions for things like transparency changes, such as screens dissolving away. Linear motions should be avoided for movements, rotations, or scale changes as they can look artificial or forced.

Ease in

The Ease in motion style starts slowly and gradually gets faster. It's used when the starting point of a motion is visible while the ending point isn't specified. For example, when an element moves outside the screen or fades away.

Ease out

The Ease out style of motion starts fast and gradually gets slower. It's used when the decrease in speed needs to be very visible. However, this style of motion isn't recommended if the element in motion leaves the screen or disappears in a fade out.

Ease in out

The Ease in and out style of motion starts slow, gradually gets faster, and then slows down again. It's used when the entire motion needs to be highly visible. However, this style isn't recommended when the duration is short compared to the amount of movement.

Duration

The duration of any motion in One UI depends on the object size and variance. The motion duration should be at least 100 ms, which is the minimum recognizable length, and should never exceed 500 ms to avoid interfering with subsequent tasks.

Real-time feedback response

Users view screens with their eyes, but they use touch to interact, perform actions, and make choices. One UI aims to serve these senses and delight users by showing immediate responses to even the most subtle touches.

Lively animations

One UI's detailed and sophisticated animations should draw attention without demanding it, while also providing a fun, lively, and approachable experience.

Icon animation

Icon animations are used to deliver the status information in a clear, witty way. These provide information without distracting users or interrupting their flow.

3D animation

3D animations can be used in One UI to visually instruct users if it's hard to understand a function with 2D images or text alone.