Motion helps make UIs expressive and easy to use.
Despite having so much potential, motion is perhaps the least understood of all the design disciplines.
This may be due to it being one of the newer members of the UI design family.
The overlap between UI motion and traditional animation also muddies the waters.
A lifetime can be spent mastering Disneys12 basic principles, does this mean UI motion is similarly complex?
People often tell me that designing motion is complicated, or that choosing the right values is ambiguous.
I contend that in areas most important to a UI, motion design can and should be simple.
Transition patterns
When designing a nav transition, simplicity and consistency are key.
2.Scale elements in the container to fit to width.
Elements are pinned to the top and masked inside the container.
This creates a clear connection between the container and the elements inside.
3.Elements that exit during the transition fade out as the container accelerates.
Elements that enter fade in as the container decelerates.
A seamless sleight of hand effect is achieved by fading elements as they move quickly.
Applying this pattern to all transitions involving a container establishes a consistent style.
It also makes the relationship between the start and end compositions clear since theyre linked by the animated container.
The direction it slides from is informed by the location of the component its associated with.
If a container enters from within the screen bounds, it fades in and scales up.
The scale animation usesMaterials deceleration easing, meaning it starts at peak velocity and gently slows to rest.
This reinforces their vertical layout.
When tapping the next button in an onboarding flow, the compositions share a horizontal sliding motion.
Moving left to right reinforces the notion of progressing in a sequence.
Shared motion uses Materials standard easing.
This isnt to say they shouldneverbe stylized, just be sure style choices are justified by the brand.
Durations are chosen based on how much of the screen the animation occupies.
In contrast, small components like a switch use a short duration of 100ms.
Easing describes the rate that animations speed up and slow down.
Most nav transitions use Materials standard easing, which is an asymmetrical easing throw in.
If a transition appears stiff or robotic, its likely symmetrical or linear easing has been mistakenly chosen.
The patterns and best practices outlined in this article are meant to establish a practical and subtle motion style.
This is suitable for most apps, however some brands may call for more intense expressions of style.
To learn more about stylizing motion, read our customization guidelineshere.
Once nav transitions are taken care of, the challenge of adding character to your app begins.
This is where simple patterns are inadequate and the craft of animation truly shines.
If youre interested to learn more about the potential of motion, be sure to read ourMaterial motion guidelines.
This article was published byJonas Naimark, a Motion Designer at Google.
you’re able to read the original articlehere.
