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.

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]

• 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.