Animation effects are an inescapable link in user experience design, and in mobile terminal interactions, animation effects serve as a lubricant for transitions, and exist as an important link between the previous and the next. Whether it is sending a message, opening settings, selecting an element, navigating to the next page, when these changes occur, the dynamic effect makes all this less obtrusive, transitions naturally, presents state changes, and helps users understand the current state more clearly. This is an excellent way.
In today's article, we present as systematically b2b data as possible the common functions and roles of animation and motion in visual and interaction.
show system status
When users interact to trigger interface behavior, they want to see a visual response - the entire interaction system should clearly indicate that it has received the request and processed it. Here are a few common situations where motion feedback can benefit users:
Confirm user behavior. After the system receives the user's feedback, it informs the user that it has received the feedback through animation. Visual feedback prevents the user from taking further actions.
Notify users of the results of their interactions.
Pull down to refresh to update the content. Visual feedback, represented by a loading indicator, informs the user that the system has started processing the previous request.
Subtle animations help users understand what's going on.
Animation while waiting for content to load. Loading doesn't have to be boring. Almost all apps these days use subtle animations to prevent users from leaving while loading. The loading animation gives the user visual feedback that "the information is gradually loading", so the user will feel that time is not as fast as it actually is in the process.
Use animation to connect different steps in multiple steps
Sometimes, the user needs to complete the operation through a series of steps, and the steps need to be connected. With the help of animation, the user can connect the process and complete the whole process smoothly.
The example below shows how animations can chain linear events together.
Designers can use animation to create progressive presentations. Progressive presentation can reduce the amount of information displayed at one time, making the interface smoother and easier to learn. The following is an example of progressive presentation of information:
Introduce new elements
When we want to introduce a new element or control on the page, we try to direct the user's attention to a specific object and tell them "why a new thing came in". When introducing a new element, animation can help you define the relationship between this element and other elements, as well as the hierarchy.
Give users a sense of orientation
Animation effects can help users build a better sense of space. It is especially important for mobile users, because user interaction on small screens is very sensitive and it is easy to get lost without a sense of space.