12 Principles for counting mobile-end animation design

In the area of mobile device user experience design, subtle and exquisite animation has become a very important design element. Adding animations to any object is not easy, and it needs to be seen how objects move in time and space in the real world, requiring designers to be attentive to detail and patient. The right animations provide clear information and a visually interesting experience, while too much animation can lead to a bad user experience. So how do animations on mobile devices design? Johnston and Thomas summed up 12 animation design principles in their 1981 book The Illusion of Life:disney Animation, which was originally proposed for the film and television sectors, But these principles also apply to animation design on small-screen mobile devices.

1. Extrusion deformation

Squeeze a balloon filled with water after deformation, which shows its strong elasticity

Objects have mass, and the deformation state of the object when it is moving can reflect its rigidity and elasticity. such as bookshelf chair such objects have strong rigidity, and clothes, leaves have better elasticity.

In the mobile experience, the use of extrusion deformation principle can arouse the user's subjective memory. If you want to express the effect of applying fortitude, you can use rigid interfaces and graphics, and more precise animations, and if you want to evoke a user's memory of organic matter, you can use a soft, variable interface, and more elegant and softer animations.

Flipboard the fortitude effect of the animation to toggle the interface

ibooks uses more complex, softer page-flipping effects to mimic authentic reading experiences

2. Preparation action

Throwing the arm before the bowling ball is a preliminary action.

The motion of the object is designed to consider these three stages: the preparatory action before the action, the action itself, the result of the action. The preparation action can provide clues and information about what is going to happen, such as the swing arm movement before the baseball player throws the ball, the spring's reverse impulse, and so on. In the user experience design of mobile devices, the preparatory action can also imply the use of the elements in the user's application. Now many mobile applications open animation is a good preparation action case.

The animation used in the application of the camera applied the preliminary principle

WP system main interface at the bottom of the display of a small number of color block icon indicates the upward sliding gesture operation

3. Status

The right side of the picture has a good state of interpretation, clearly demonstrated two characters of the dialogue State; the picture on the left does not explain the mental state of the two characters.

Describes the state's ability to express the central idea of animation more clearly. In the design of mobile experience, the principle of state mainly involves the switch of screen, and the interactive process of user interface. Using color, brightness, composition elements, and animations in the interface to guide users to a reasonable allocation of attention can create a very smooth mobile experience and enhance the usability of the application.

Keynote uses the principle of State to enable users to understand the files being processed well

4. Coherence and key frames

The picture above uses a coherent technique that uses every frame of the picture to represent the action, while the following one uses three keyframes to show the animation

In order to capture fast and special movements, it is often necessary to draw every frame from the beginning to the beginning, which is the principle of coherence. The key frame technology is to draw the key points in the action of the picture, and use the tween to show the animation. Most of the animation design of the mobile end is implemented by the key frame technology, which is simple, suitable for displaying simple actions, and for complex special actions, it may be necessary to use the coherent technique of drawing each frame.

As the game moves more complex, the Fruit Ninja ipad version uses the technology to render the action

Plant vs. zombie ipad version uses key frame technology

5. Homeopathy and stacking

The flow can describe the movement of objects, different parts at various speed of movement (such as the puppy shook his head when the ears, chin swing speed is inconsistent)

Imagine a puppy shaking his head around, and the loose meat on his face will shake along with the first. This is the homeopathy and superposition of actions. Few movements occur suddenly and suddenly stop, and generally stop gradually, and some parts continue to move when the rest of the object has ceased to move. The speed and movement of the different parts of the object may not be the same, and only by taking into account the nuances of the animation will appear to be more authentic image. The interface elements of the mobile end can collaborate to form a whole, superimposed animation effect, these animations can help users understand the interface elements and Operation methods.

WP on the color block icon movement using the action overlay design principles. Color blocks are not individual motions, but color groups overlap at different speeds.

6. Slow appearance and end

Adding more frames to the end of the animation can create a more realistic effect

Almost all movements require a certain amount of time to accelerate or slow down, whether it is a car or a sprinter, an objective rule. Animation design often in the end of the action, relative to the movement process, adding more frames. In the area of mobile experience design, applying the principle of slow access to subtle animations such as scrolling data lists can be a good and real user experience.

Scrolling through the list on the mobile interface uses the ease of ease principle. Add more frames to the end of the animation to make it more consistent with the real rules.

7. Motion Path

Most of the time the trajectory of an object is invisible, but it can be seen under special circumstances, such as a lighted firework that can see its trajectory according to the spark.

The motion of most objects is not random, but is based on a predictable path, but usually the trajectory of an object's motion is invisible, but it generally has a certain pattern. For example, mechanical objects, such as trains, cars, trajectory is generally linear, and organic matter, such as plants, animals and people, more inclined to curve movement. The design of the mobile end needs to consider the movement of the interface elements according to the laws of mechanical or organic objects.

The natural elements of the iphone application, such as fish and water, are moving in a curved trajectory.

The interface elements of the Android platform tend to use linear trajectories to move, making the interface more technologically felt

8. Secondary action

The main action is the squirrel's body and feet, squirrel's tail movement is the second movement, these two actions together make the whole action more real.

Imagine the picture: A squirrel ran across the balcony and jumped to a tree, and the action on the foot of the squirrel could show its lightness and agility, and its tail could support the main movements of the run and jump by means of a differentiated movement. However, minor actions are primarily designed to support enhanced initiatives rather than distracting users.

iphone on the application of the use of the second action principle, in the e-mail message click on the link will open the browser window, then the browser interface is the main action, and the mailbox application back into the background is the action, the second action is very good to enhance the initiative to experience, and will not be distracting.

Two animations that apply to the interface switch good use of the principle of the secondary action

9. Speed

At different speeds during the run, the character's physical characteristics (weight, height and range of motion) and his mood are well represented.

When the animation, the object or the role movement is too slow or too fast will cause people's aversion, that is, the speed of animation is very important. In animation design, speed often involves the number of frames that compose an action. Speed is a very important technology, it can make the object looks more accord with the objective law. And through the speed can also express the role of emotional state and personality characteristics.

The speed principle is a very subtle and important technique, whether it's scrolling the list or switching between different interfaces. In the actual design, the speed of animation requires constant trial and error, to verify the speed of experience.

The ipad photo app uses a poker-like shuffle that highlights the sense of lightness, buoyancy, and surreal speed.

10. Exaggerated

Canadian animation designer John Kricfalusi has used a lot of hyperbole in his animated cartoon "Ren and Stimpy".

Exaggeration in animation can bring a lot of fun, and also can make the object more vivid. An animation without exaggeration may look more accurate, but it is easy to feel boring and impersonal. This principle is used in design to change the shape and size of an object to enhance the visual sensation and drama of motion. But exaggeration does not mean complete distortion. Disney's definition of exaggeration: to show the content of authenticity in an imaginative form. In the design of mobile experience requires a certain degree of restraint in the use of exaggeration, the interface of the exaggerated elements should be coordinated with each other to avoid causing confusion and interference to users.

The main interface with the application to open the interface of the switching action is a certain exaggeration. This makes it more fun and resilient to open applications, a bit like a trampoline.

11-12. A plump image and personality

The plump image emphasizes the three-dimensional shape, the sense of precision and the sense of weight, balance and light of the animation.

This principle is the real animation character design proposed, through weight, volume, balance, light and other means to create a three-dimensional sense of the animation role, and should make the character has a personality charm. These two principles are not closely related to the design of the mobile experience. The attraction of a character is like the personal charisma of a live actor.

The above 12 principles are very helpful for mobile end animation design, so what should be done in the actual design process? The first step is to realize that the animation element is a very useful design element, and the second step is to integrate the animation design into the entire design process, including the sketch stage, the wireframe phase, and the prototype stage.

The sketch phase should consider what actions should be used to interface elements in the sketch phase, highlighting the application's individuality and feelings. For example, by changing the state of the interface elements, or the different interface of the switching mode to create the difference in the experience, these can be in the sketch stage through the hand-drawn form of thinking and design.

Wireframe wireframe is often used to represent the flow of the interface, in this phase should be integrated animation design, online block diagram of the use of simple animation to work with the boss to communicate design ideas and ideas.

The animation design in wireframe is mainly in the form of pictures and illustrations.

Prototype stage sketch and Wireframe is the first step in design, high-fidelity design prototype can have better communication effect and persuasive. You can also use prototyping tools to show the effects of animations in your scenario, such as using Keynote and PowerPoint to make animations that can help you and your team verify the feasibility of your design.

Using keynote to create a high-fidelity prototype allows you to test user interaction with the interface and explore the feasibility of the solution.

However, in the actual mobile experience design project, the use of animation has a certain principle:

Controlling too much animation can make people feel restless, destroy the product experience, need to use the animation element sparingly, and use delicate and exquisite animation effect to create a good experience atmosphere.

The principle of complementary principles of animation design is rarely encouraged to exist, so the need to skillfully combine different design principles to design excellent animation effect.

Animation is to support the role of the animation in the movie is to support the plot and role, but also in the mobile-side animation is a supporting design elements, should not be distracting, and can not let users because of animation and create confusion.