Material Design: Motion [Note]

fr3eze(68)
Published in
#art
Words
213
Reading
1 min
Listen
Play
8y

Motion is one of the biggest parts in creating an interactive UI, if not biggest. Doing it wrong or overdo it could spell a big disaster to the overall feeling one application gives to its users.

2018-12-24_16-33-48.gif

  • Exiting and closing can have a higher speed than the opening animation. As it requires less user attention than the user's next task.

  • Relatively, animation of small area should use a shorter duration than those that traverse larger areas. For example, animation for icon has a duration of 100ms while a full screen popup could use 300ms.

  • Animation duration is best around 300ms. Make it shorter for a bolder feel, longer for a more relaxed effect.

  • Determine the orientation to use by considering the motion of an expanding surface. The arc should match the primary scrolling axis of the UI. For example, a card in a vertically scrolling UI will expand using a vertical out arc. When the card collapses, the motion reverses, first moving vertically and then horizontally.

2018-12-24_17-09-27.gif


The Motion teaches tons of lesson that make sense and was a little bit overwhelming for my current standard to absorb it all. Definitely coming back to revise this chapter again when I had more experience in UX design. Great read!


Posted from my blog with SteemPress : https://fr3eze.vornix.blog/material-design-motion-note/

Material Design: Motion [Note] | Ecency