New elements of mobile user experience design

Whether it's a quick switch between a series of sketches, or a switch between a screen and a screen, or something like that, it's not easy to make a perfect transition to a dynamic in these scene transitions. This is an art that requires patience, which requires careful observation of how people and objects move and change in two dimensions of time and space.

This very clever dynamic and animation, is slowly becoming a new, interesting design elements of mobile experience. And worthy of the user experience practitioners to learn, and ultimately learn how to efficiently and elegantly use in their own design. Good dynamic and cut-and-go animations can convey to users a clearer picture of the current scene and hierarchical relationships, and even give users a sense of pleasure and fun. However, excessive or exaggerated activity can destroy a perfect mobile user experience. So the first step in the design of the ingenious and artistic use of the animation is to understand the principle and principle of the animated art.

When it comes to understanding animation art, nobody can say that no one understands more than the two outstanding animators who work at Walt Disney, Ollie Johnston and Frank Thomas. Luckily, the two animators wrote a book about the principles of animation that were summed up in the Disney animation process, sharing the illusion of life:D Isney Animation.

Read here you may want to know what role animation needs to play in mobile user experience design. Although the origins of animation art in the film and television industry, but from the beginning of animation art in the field of computer and digital media art embodies great value, and now mobile devices are also beginning to use animation and dynamic. Whether it's the transition between screen and screen, or the interaction of UI elements with gestures, animation and dynamic effects have become important elements of mobile device interface design. Designers can use the dynamic effect to guide the user to follow their own design experience path to operate.

Or from the two animators, the text will explain the 12 basic principles of animation from the book "The Illusion of Life:D Isney Animation". Although the book focuses on movies and television animation, these fundamentals still apply to today's mobile devices. If you can use the Smart mobile device interface, not only can enhance the mobile device user experience, even let the user feel a little bit of fantasy feeling.

"The Illusion of Life:disney Animation" describes the 12 basic principles of animation

The 12 basic principles of animation described in the following book

extrusion and stretching anticipation show coherent action method and key action method repeat with cyclic action slow into and slow out radian secondary exercise timing exaggerated reliable sketch appeal

Animation 12 Principles of principle 1. Extrusion and stretching

People and objects have their intrinsic quality. When an object moves, its state tends to reflect the rigidity of the object. Objects in the real world, such as bookshelves and wooden chairs, are more rigid and flexible. Soft surfaces, such as clothes and leaves, are less rigid but have better flexibility. The animation principle of extrusion and stretching is used to accurately show how rigid an object is.

Like a balloon filled with water with organic and soft surface objects, there is a degree of flexibility in their appearance. The animation principle of extrusion and stretching exactly describes this state.

The image above is a comparison of Flipboard and ibooks, and Flipboard is shown to be the UI elements like planks. Conversely, the transition of the ibooks interface uses the extrusion and stretching principles to show the soft effect of turning pages in real world books.

principle 2. Expected

When we try to describe the state of an object or a person's movement, there are three separate stages that need to be considered in order for the movement to appear more realistic:

the results of movement during the preparation stage before the movement

For example, a baseball batter will bow his body in the preparation stage before hitting the ball, a state that the spring compresses before bouncing. This principle is expected to describe the preparation of the object before the movement, as well as elaborate a stage play scene-lighting, layout, props and the composition of the characters, all of which is to give the user a clue what is about to happen.

The position and movement of a bowling-ball squatting before throwing it is one of the best examples of what the expected principle applies

The expected principles apply equally in the field of mobile user experience. The expected principle is to give users a premonition of what is about to happen. For example, this principle can be used in the visual design of the "splash Screen" interface, also in the transition to different experiences, and can be used to help increase the visibility of gestures. In total, it is expected to provide clues as to the speed and direction that the element will move in the interface.

This aperture animation is used in camera applications in many smartphones, which describe the stage the user prepares before taking a photo.

This palm card stream UI is designed to give users the visibility of gesture use

The Windows Phone 7 screen-hopping animation also uses the expected principles to give users a glimpse of Windows Phone's 7 dynamic tile UI Design

principle 3. Show

The real estate economy that is good at selling house often follows a process to "show" each room, for is to let each room use show very clearly. The function of the presentation principle in animation is very similar to that of a real estate broker, and a good presentation will allow the viewer to understand clearly the central idea that the animation wants to illustrate. In the area of mobile user experience, it is important to demonstrate this principle in the interface transition and switching. A good interaction style will highlight, color, layout and dynamic effect of the accurate display and convey to the user's eyes. The principle of the application of reasonable will let mobile device users feel fluent and comfortable, the principle of unreasonable application will make users feel messy and disjointed.

The right side of the show is better, clearly expressing the two characters in dialogue and discussion. The left side of the show is relatively poor, does not describe the dynamics between the two characters, so that the central idea to be expressed is not clear.

When using animation and dynamic performance in Mobile User experience design, how to show it is a difficult to describe but very important factor. The biggest challenge in creating natural user interface is the lack of a conceptual starting point. As a result, many new users who touch the natural UI experience a touch-screen navigation experience and always feel that there is no stable starting point. If the animation and dynamic performance can be demonstrated in the mobile user experience design, the user will be able to understand the whole interface clearly and be willing to interact with it.

For example, the keynote ipad version is more reasonable, and users can clearly sense which file is being edited and what level of the edited file is in all files. This dynamic allows the user to feel more clearly where they are and better understand the entire UI interface

principle 4 Coherent action method and key action method

In the animation sketch drawing process, the consistent action method and the key action method are often used. To capture very fast and irregular motions, animators often use a coherent action method to crawl each frame of the entire movement. The key action is to depict the whole movement with the action key frame and the tween frame between the key frames.

The above illustration describes the sketch method of the coherent action, and the following describes the method of sketch drawing of the key action

Most of the animation and dynamic use of mobile end can be used to draw the key action method, the key action method to use a small amount of work can also meet the performance of most mobile end. A coherent action method can be used for the performance of a particularly complex and unconventional motion effect.

Plants vs Zombies are the key action methods used to draw

Like a Fruit ninja, the motion trajectory is more complex, you can use the coherent motion method to describe the dynamic trajectory

principle 5 Repetition and cyclic action

Imagine a dog with a larger jaw shaking its jaw as the dog shakes its head. "--" This is the fifth principle of animation: repetition and cyclic action. This principle is expected to explain the state of preparation before the action, and the last principle is to describe the course of action until the end. Most actions generally do not end abruptly, but are repetitive processes that gradually weaken until terminated. Repetition and cyclic actions describe the object itself (the head of the dog) to stop moving, and part of the object (the skin next to the dog's jaw) remains a state of movement.

Repetition and cyclic motion describe the state of movement of different parts of an object at different rates (the skin on both sides of the head of the dog).

Now imagine the big dog in the picture above and the owner walking on the sidewalk, the dog's whole body is moving, but the frequency of the dog's legs moving, the dog's tail shaking, and the dog's head shaking varies. The principle of circular motion is used to describe how the different parts of an object are moving at different frequencies, even if the motion frequency difference is very small, if it can be accurately described, it will make the animation look more realistic. Usually, the previous action will not end completely until the next action is started. At the mobile end experience design level, multiple UI elements are required to consider the rate of dynamic repetition and looping, which helps to explain the relationship between the various UI elements.

Windows Phone with dynamic tile is a good example of repetition and cyclic action. These dynamic tiles are not based on a whole movement, and the different tile movements are at different rates.

Principle 6: Slow down

Whether it is the start-up process of a car or a completely compressed spring of a sudden expansion of the process, the object movement at the beginning of the need to accelerate slowly, the process of stopping the object is slow to stop. The slow-motion principle is to accurately describe the intrinsic inertia of people and objects moving in a space.

In animation, there is a simple way to describe the process of adding more frames at the beginning and end of an object's motion, and using fewer frames during motion.

In animation, describe the inertia of the object itself, adding more frames at the beginning and end of the movement.

The slow into slow out principle applies to describing a character's movement between two states, such as sitting down and standing up, or describing the movement of an object, such as the process of a ball falling on the ground and bouncing. The mobile-end experience design is designed in a world behind a screen, and if you can introduce some real-world laws of physics, it makes users feel more real. Whether it's a list or the scrolling of data, or the dynamic effect of an app opening, the slow down and slow out principles make the dynamic experience more natural for the user.

Many app list scrolling uses the slow down principle, more frames at the start and end of the motion. It also embodies the law of inertia of objects in the real world.

The iphone and ipad also use slow-slow-out principles when scrolling home

Principle 7: Radian

In general, objects move in space along certain trajectories, which are influenced by thrust, wind resistance and gravity, rather than random motions. In addition, the trajectory of the object is generally not visible, in addition to some fireworks, as well as the brakes on the car brake sparks, in this case, the trajectory of the spark is visible.

Generally speaking, the trajectory of the object is not visible, except for the spark in the above picture, you can see the trajectory of motion.

In general, most of the motion trajectory of the human eye is not observable, but the motion trajectory of the object has a certain regularity. Rigid and mechanical objects like trains, cars and bicycles, they always try to move along a straight track. And some natural organic form of the motion trajectory of the object is always a certain radian.

In order to make the animation look more realistic, in the design process, these laws should be shown in the process of object movement.

Naturally, objects like fish and water have a certain radian, and should behave in mobile applications as well.

The UI elements in the Android system are all moving in a straight line, giving people a mechanical and modern feel

principle 8: Secondary Movement

Imagine a squirrel running on the lawn and eventually jumping into a tree. If animated description, in the squirrel's legs will be as fast as possible, brisk, lively feeling. And as for the squirrel's tail, it is also a kind of agile, constantly undulating movement. As mentioned above, the tail movement frequency must be different from the leg. The tail movement, compared with the leg movement, can be referred to as a minor exercise to assist in the performance of the main leg movements.

Squirrel's leg movement as the main movement, tail movement as a secondary movement, the combination of the two to make the animation look more realistic

The squirrel's tail is a typical minor movement that supports the main movement of the legs in the animation and does not distract the audience. Secondary movement is used to enhance the main animation of the appeal and expressiveness, but not to rob the main movement of attraction. Another example is clicking on a URL in the iphone's email application. The main movement is that the browser window appears on the screen, and the secondary movement is that the mail application slowly disappears behind the screen. Two movements occur at the same time, but the secondary movement that the message application disappears is a secondary description of the browser appearing

。

e-mail Open link bouncing browser examples explain major and minor movements

principle 9: Timing

In animation, timing means everything, is the soul of animation. This reflects the importance of timing when we feel too slow or too swift for certain objects or characters or even life itself. In the animation world, timing is the number of frames used when a movement starts to end, and this is shown directly in the film as the rate of action. Timing is a skill that animators must master because timing helps to reflect the physical properties of objects and characters such as weight, size, and volume, and the opportunity to show that the object adheres to the physical laws of the real world, and the timing can also help to show the mood, emotional state, and personality of an object or character. For example, a subtle adjustment of timing can reflect the rapt Wile E. Coyote (North American Prairie Wolf) excitedly chasing the easy and cozy M.I. Runner (an animal that naturally runs fast)

Whether it's a list of scrolling speed, or a different interface switch when the rhythm of the action. Timing is a very delicate and very important thing, for the mobile end experience, the timing of the control needs to be more polished and practiced. In the design process, it takes time to figure out what the UI elements want to say in the movement of different rates and rhythms, and it takes time to experiment to find the right time.

The ipad's image unfolds like a stack of cards, and its timing is designed to exceed the real rate, showing a sense of ease and rapidity.

Principle 10: exaggerated

The most interesting thing about animation principles is the exaggeration principle. This principle makes all movements more dynamic, natural and interesting-for example, classic characters Ren and Stimpy.

Canadian animator John Kricfalusi used exaggerated techniques in the Ren and Stimpy series of animations

In animation, if there is no exaggeration of the elements may look very accurate, but it will make people feel very mechanical and inflexible. To master the use of exaggeration in animation, first of all to identify the elements in a movement, and then determine which elements in motion can change the shape and size, and so on, in this way to add some drama animation and performance. Of course, exaggeration does not mean that the shape of the object is extremely distorted.

Disney's classic definition of exaggeration is this: to show a more expressive style on the basis of keeping it real. When the principle of exaggeration is moving at the mobile end, it needs to be controlled as a whole. For example, a scene has multiple elements, the use of exaggerated principles need to consider the balance between the elements, to avoid an element too exaggerated instead of the user to the whole confused.

The amplification of the IPad home page and open app is also an exaggeration, which makes it interesting to open the app, like a spring trampoline.

principles 11 and 12: Reliable sketches and presentation

The last two reliable sketches and Johnston of the 12 principles of animation are the two most relevant to the role animation, and the most unrelated to the mobile user experience two. A reliable sketch says the size and weight of the object and the character in three-dimensional space, by volume and size. A reliable sketch requires an animated designer to understand the three-dimensional form of basic knowledge, including deconstruction, weight, balance, and light and shadow.

Reliable sketches in animation emphasize three-dimensional composition, precise structural anatomy, and control over weight, balance, light and shadow.

The appeal of a character in animation is the same as that of an actor. An influential character is not necessarily compassionate, because the villain and the Beast can also be very contagious. The most important thing is that the viewer of the animation feels the character is real and interesting.

The method of expressing the dynamic effect in the design of

The 12 principles summed up by Johnston and Thomas define the basic framework for dynamic performance, but we still have to confront the core issue of how to combine dynamic effects with products. First, we should consider the dynamic effect as a kind of design material. Then, try to incorporate the dynamic into the design process, which is the key to achieving the magic of action:

sketch phase Diagram stage prototype stage sketch

You should start thinking about action at the sketch stage. Just as the animated character expresses its character through action, the interface and its elements also express the experience characteristics that you give them through the dynamic effect. Start early by drawing ideas about transitions and paragraphs that can help you think about how you want to convey your experience and how you can use it to express it.

This hand-painted animated story board describes the details of opening itunes. The transition animation is basically done with a yellow sticker.

wireframe

The wireframe communicates the interface flow, and it is natural that the transition dynamic is part of the interface design process. You can use pictures or diagrams to express ideas about action. Wireframes can convey design ideas to developers and decision makers, and the document shows that the graphical representation of the dynamic can make everyone aware of the existence of the action and let them start talking about it.

The dynamic details of this online box document are basically described in pictures and illustrations.

prototype Production

Sketches and wireframes are very effective in the initial stages of dynamic design, but nothing can replace the real effect. Using some prototype tools with animation design is a very effective step for designers to become familiar with and master dynamic design. Prototype tools like PowerPoint and Keynote make it easy to make a few real-life effects, let designers polish their dynamic design and better present ideas to other members of the team.

Using Keynotopia templates on keynote makes it easy to simulate a variety of dynamic ideas with real controls

some small suggestions when using animation principles on mobile-end projects

1. Limited use and dynamic effect

It can be annoying to use too much on the mobile side. Although good activity makes people feel happy, don't abuse it. Dynamic performance of the clever and sophisticated, otherwise the dynamic effect will make good user experience worse.

2. Principle of complementarity

This animation principle is not used in isolation, whether it is a scene in an animation or a moving end. On the contrary, most good work, like a symphony orchestra, combines these dynamic principles. With the increase in experience, slowly the designer will be the art of the animation of these principles to integrate the use of.

3. The auxiliary role of animation

In movies, animation is the assistant to tell a story. The same is true in the UX field. Animations are a supportive role for the mobile user experience. When making a dynamic design, make sure that the interaction is an explanation, not a problem for the user.

Summary

Animation is only used in the field of cartoon and film, now the dynamic effect has become an important element in the field of mobile user experience design. Dynamic effect not only can focus and explain some interaction, but also can bring a bit of character and magic to the mobile end experience. If you can take some time to learn how to work, you will certainly be able to make the mobile end experience more color.

The original author: Rachel Hinman

Original link: http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

Thank you for your reading, this article by Tencent Isux Copyright, reprint, please specify the source, the offender will investigate, thank you for your cooperation.
Annotated source format: Tencent Isux (http://isux.tencent.com/mobile-animation.html)