Shulou(Shulou.com)06/02 Report--

This article shows you the details of Material Design transition animation and moving users, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

For ordinary users, it is often a difficult choice to focus on an application itself or to focus more on the process of changing the elements of the application from point A to point B. Carefully arranged animation can effectively guide the user's attention in the process of multi-step operation; avoid confusion when the layout changes or elements are reorganized; and improve the overall beauty of the user experience. Animation design should not only be beautiful, but also serve the function.

Visual coherence

The transition between two visually different pages should be smooth, brisk and, more importantly, make the user feel clear rather than confused. A good transition can give users a clear understanding of where they should pay attention. Each transition should contain the following three types of elements:

New elements (Incoming elements): completely new elements need to be guided by beginners, and elements transformed from existing scenes need to be re-identified.

Outgoing elements: elements that are not related to the current scene should be removed in an appropriate manner

Shared elements: refers to those elements that have not changed from the beginning to the end of the transition. It can be as subtle as a single icon or as significant as a picture display that occupies the screen

Thinking point

When designing an animation, you can start with the following points:

How should the user's attention be directed? What elements and animations can help achieve this goal? How should new elements, fade-out elements and general elements be emphasized or weakened in this transition?

Consider the transition when designing the scene, and try to establish visual connections between different scene transformations through colors and common elements.

Carefully add animation and think about how to move a particular element to make the transition clearer and enjoyable

Use paper overlay when appropriate. In general, new paper elements should slide into line of sight. With the exception of font elements (ink element), they should appear as faded. Full-screen fade in and out is not recommended, but it is also better than instant screen cutting.

Avoid instant screen cutting (hard cut). Cutting the screen in an instant is too sudden, and it will make it difficult for users to understand the transition.

Hierarchical timing

When establishing a transition, the order and timing of element movement should be carefully considered. Make sure that this animation makes the presentation of information hierarchical. In other words, it can guide the user's attention and pass on the most important content to the user.

However, this does not mean that the most important things move first, and the least important things move later. The timing of the transition of elements should be smooth and avoid the feeling of disconnection.

Use successive animations to guide the user's attention.

If all elements change at the same time, the important content will not be highlighted. If all elements are equally important (if you're sure this will happen), consider using higher-level animation to display them in groups.

A coherent arrangement

As the transition elements move across the full screen, they need to move in a coordinated manner. The whole moving process of the elements that play the role of guiding visual focus should be meaningful and orderly. Random animation distracts attention. A choreographed application can also provide users with opportunities to learn. If all the elements of the transition are well coordinated, the user's understanding of the application will be enhanced. They "understand" this application and will not be at a loss because of animation.

Practice

Unless the animation is limited to one axis or moves harmoniously with other elements from / to a point, try to avoid linear paths

Make sure that the direction in which the element moves is consistent throughout the transition. Avoid conflicting actions and overlapping motion paths

Think about the deeper meaning: what moves beneath what, and why?

If all the moving elements move along the path on the screen, does it look beautiful and neat? Does this give users a clear idea of where to look?

Express the spatial relationship through the animation of the coherence of new and old elements.

Guide the user's attention through harmonious and consistent animation

Avoid chaotic and incoherent animation, elements leaving or entering in a random direction will cause confusion to users.

The details that move the user

Animation can exist in all components and extensions of the application, from small icons to core scene transformations and actions, all elements work together to build a seamless, beautiful and powerful application.

The most basic use of animation scene is excessive effect, but even the most basic animation, as long as it is just right and good enough, can also move the user. For example, when a menu icon becomes an arrow or a playback control button, the seamless switching between services not only allows users to perceive, but also fills your application with perfect details and superb design. Users will really feel these small details.

What are the details of the Material Design transition animation and moving users? have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.