Body language of products – interactive animation

With the advent of the era of experience economy, people's expectations of the product interface is also getting higher, interactive animation in the field of mobile phone applications have been very common, such as the iphone fully play the advantages of animation in the interactive ease of use. Interactive animation will give users a comfortable, natural and smooth feeling. Interactive animation has gradually become the communication between the product and the user, becoming the body language of the product. Especially at present, the performance of high-end machine is promoted rapidly, which provides effective hardware guarantee for the execution efficiency of interactive animation.

Google Maps to make tools and physical integration, regardless of the effect of the page, or the effect of the Pushpin, are to restore the real scene of the operation, through the performance of animation, to make it more realistic. Also makes the interface more layered.
In the process of product design, the rational use of interactive animation to make products and users better interaction, so that products become more emotional, reasonable animation can be used:

Improve user operation fluency
With the mobile terminal equipment hardware and software continue to be strong, the choice will be more and more rich, users in the use of product features, but also the pursuit of the perfect operation, and products have good interaction.
At present, the visual effects of app and WAP station are gorgeous and perfect, at the same time, with a lot of complex visual elements, deal with the relationship between each visual element, and effectively convey the user after the operation of the elements of the relationship between the changes, you need to design interactive animation, explain the changes in the logic and process, so that the operation more reasonable, smoother.

Improve user interest and reduce learning costs
Through the ingenious Interactive animation lets the user understand the product function, then lets the user produce the good psychological feeling. Let the user understand the function more easily, the better convenient use product. Sometimes detailed functional explanations are often less appealing than a simple interactive animation effect. It is now widely used in games.

Strengthen brand consistency
Pop-up layer, interface sliding, split screen, back, forward and so on, these interactive animation all reveal the brand's characteristics and feelings
A symbolic animation effect, often will also be a product endorsement.

Interactive Animation Design Rules

Convey valuable information
Show the results to the user before they complete their behavior so they can be more certain of their behavior and avoid mistakes. Help users anticipate the consequences of their actions.
When moving the app icon on the iphone screen, when you drag an icon to a position, the next icon moves backwards or sideways to tell you where the icon will be parked when you release the hand.
The following are some of the design principles of the summary interactive animation:

Articulate clearly and accurately guide
Animation is a clear description of the product function of the switching process. When a user enters a different interaction mode, such as a switch between two applications, the animation can provide a guideline that tells the user that they have entered another scene.
When we maximize the window, the window is not simply magnified, but it is smoothed toward the perimeter. So we can see clearly that the window is magnified.

Animation time is cleverly controlled
When designing animations, be aware of the timing of the animation and the animations in some of the higher-frequency operations that you can skip by manipulating (clicking on two or more actions, clicking on a blank or target area, and so on).

Implementation efficiency needs more consideration
At present, interactive animation in high-end machine applications more and more, but the configuration of various models are not the same, when considering the animation, we should pay attention to the implementation of various models of efficiency, if the coverage of a wide range of products, need to set a reasonable minimum configuration and build a test environment, To ensure that animations do not cause excessive pressure on the machine.

Respect the law of reality, or let the user have "super ability"
is to conform to the logic and the laws of nature. For example, if there is displacement in the animation, it should be moving in the direction of the target position. Sometimes it can also be true in the real scene, let the user complete the real scene of human things can not be completed also with the user satisfaction.

It's too detrimental.
The use of animation is like a double-edged sword, with its potential can be used to create more perfect products, such as improper use or abuse, often counterproductive.

Use high frequency function, use interactive animation carefully
If the user usage is very high function, interactive animation must be cautious. Too many animations can cause users to resent and prolong the operation time.

User input, do not disturb
When users focus on the creation of content or fill in information, the animation distracts the user's attention and even creates a bad mood for the user. But the information submits, the information sends and so on the operation, the design ingenious animation, often can increase the user's achievement feeling.

Respect user habits, "unconventional" not to take
We should avoid touching the standard behavior of the system and respect the user's habits as much as possible. In the iphone, the animated response is the standard interface style, such as the scroll of the contents of the window, the appearance and disappearance of the elements, as well as the amplification, narrowing and so on of the content.
Users are aware of how these common interface elements work, and they don't want to be forced to spend extra time looking at unnecessary animations each time they click on a button.

Source Address: http://mux.baidu.com/?p=2185