Use Productive motion for moments when user needs to focus on tasks—micro-interactions such as button interaction and dropdown menus, revealing additional information upon user’s request, or rendering data tables and visualizations.Expressive motion delivers enthusiastic and vibrant movement, and is thus more visible. There is a useful article The topic of UI Motion Design Specification is quite fresh but very important. Modern software tools for Designers focus on Prototyping with advanced animated transitions and microinteractions. These three reasons show how motion is an important aspect of a delightful user experience. You may find the blog post with template usage description below:Google UX Team has also shared their Motion Design Workflow and released a tool that automates specs. Right motion design answers following user’s questions:There are lots of articles that cover the topic of basics in Motion UX. Thankfully there are some places on the internet where we may be truly inspired.If you need some inspiration you should regularly visit following sites:When you will watch the trends in UX Motion Design you will be able to explore your own animations.While Adobe After Effects is a tool specialized in Animation Design (not only UI Motion), there are lots of tools that do even more in the matter of User Interface Animation.
The purpose of animation is to increase the satisfaction of people using the app. Motion helps to connect not only the screens of the UI, but helps the UI connect to its users.
This is why I created the file done in Sketch.
Use expressive motion for significant moments such as a user opening a new page, or clicking the primary action button, or when the movement itself conveys a meaning that needs to be noticed by the user such as system alert or notification box appearing.Productivity and Expression are both essential to an interface. There was a time when a prototype or a video file with some notes was enough to implement “some” animations of the app. Solutions to a UX need, such as reducing cognitive load with progressive disclosure. Just click that big, beautiful button above. To learn more about fluent Motion, please refer to its documentation here. If you would like to learn or remind the fundamental principles I definitely recommend to read following ones:When you will read mentioned posts I would like you to get some inspiration before you start creating your own animations.
To ensure good UX in motion you have to be empathic. The easiest way to start is to make tutorials from their website. Let’s begin.Why learning the basics of motion design is important? Identify key moments and opportunities for UI motion in the journey.
Add Between the two motion styles, Productive motion is significantly faster than Expressive motion. Ultimately, Motion perfectly accents the way product works. Reserve Expressive motion for occasional, important moments to better capture a user’s attention, and offer a rhythmic break to the productive experience.Reserve Expressive motion (magenta) for key moments in a user’s experience.Strictly linear movement appears unnatural to the human eye. Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style. We guide the users to value as quickly as possible.Easing curves that suggest bounce, stretch, or sudden stops are not recommended.An exception to exits: if an element leaves the view but stays nearby, ready to reappear upon user action, use Standard easing instead. The panel would leave the view, but slows down as it exits, implying that it would come to rest just outside the view, and be ready to be recalled.Cubic-bezier curve notation is the standard way to express easing curves.
We commonly use one of these three types of easing.Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a lightweight material.Avoid easing curves that are unnatural, distracting, or decorative. This is "UI/UX in Motion: Gaia Cosmetics" by Jamie Chou on Vimeo, the home for high quality videos and the people who love them. It can bring your work to life, guide users through complex experiences, and help make progress—from here to there, now to next, start to finish. The Duration is calculated based on the style and size of the motion. But if you would like to go further, you will find good training on this sites:If you would like to explore possibilities of including Motion creation in your Design workflow. Motion’s duration should be dynamic based on the size of the animation — the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.Duration contrast between a taller and a shorter component.When custom duration is possible, please use the Motion Generator to get the customized duration calculated for your element.
Motion is a powerful tool in designing and building communication through the user experience. Everything is explained in the article Good UI Motion Design Specs is the final word for the animation created for the apps. In this article, we will see how we can use the motion effects in the SPFx webpart.
