"Material Design visual Design language" applied animation

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

Animation reflects the application components in the space of the relationship, function and the trend throughout the system.

An animated design principle 1.1 animation truly responds to the real world

Animations should be complete to show the true nature of objects, such as elegance, simplicity and aesthetics, to achieve a magical seamless user experience,

Example

Rapid acceleration and smooth deceleration will feel natural and enjoyable

Linear motion will feel mechanical, at the end and the beginning of the abrupt speed change means that the object suddenly began to move or stop, which will make users bored.

Attention

Not all objects move in the same way.

• Light/small objects may accelerate and decelerate faster because they are of relatively small mass, so less force can make them move.
• A large/heavy object may take more time to reach his maximum speed or return to the stop state.

Think carefully about how to move objects and apply them to the UI elements of our application.

1.2 Animations respond positively to user actions

Thoughtful, purposeful, non-random, responsive interactions allow users to trust and delight, giving users more attention to our applications. Responsive interaction takes an application from a simple presentation of the information requested by the user to a tool that produces stronger, more specific interactions with the user

There are several responses to the interaction

Surface Response

Touch ripple is a visual shape that an app receives an input event (such as a tap screen) that is immediately drawn on an interactive contact with a visually similar ink diffusion-like effect. Touch ripples allow users to perceive changes in touch buttons and voice input in a timely manner.

All inputs have a center point, and the ripple effect should be expanded from the touch point, the voice icon on the screen when the voice is on, and the key click position when the keyboard is entered.

These input actions should form a visual association at the center point, and a ripple effect from the center point of a series of actions.

element Response

Like the touch ripples in the surface response, each element itself can respond interactively, and the object can float at touch or click to indicate that the element is active. Users can create, change, or directly manipulate elements by clicking or dragging them.

1.2 Transitions animations are really meaningful

Transition animations are used to show the transition of one element to another, and excellent transition animations can effectively guide the user's attention during multi-step operations, avoid confusion when layout changes or element reorganization, and improve the overall aesthetic of the user experience.

Animation design should not only graceful, but also should serve the function, then how should we design the transition animation?

1.2.1 Transition animations to maintain visual coherence

Transitions between two visually different pages should be smooth, light, and more important to make users feel clear rather than confusing. Excellent transition animations give users a clear idea of where they should focus.

A transition animation typically consists of 3 elements:

• New elements (Incoming elements): Completely new elements need to be novice-guided, and elements that have been transformed from existing scenes need to be re-identified.
• Fade-out element (outgoing elements): elements that are not relevant to the current scene should be removed in the appropriate manner.
• Universal element (Shared elements): Refers to elements that have not changed from the beginning of the transition to the end. It can be subtle to a single icon, or it can be a dramatic display of images that occupy the screen.

1.2.2 Transition animations should have a hierarchy of timings

When establishing a transition, the sequence and timing of the elements ' movement should be considered in detail. Make sure that the animation gives you a layered sense of the presentation of the information. In other words, it directs the user's attention and delivers the most important content to the user. However, this is not to say that the most important thing moves first, and the least important thing moves back. The timing of the element transitions is smooth and avoids a sense of disconnection.

Two animation design Practice

1. How the user's attention should be directed, what elements and animations can assist in achieving this goal. How new elements, fade-out elements, and common elements should be emphasized or weakened in this transition.

2. Take transitions into account when designing a scene, and try to establish visual contact between different scene transformations through color and common elements to ensure that the direction of element movement is consistent throughout the transition process. Avoid conflicting movements and overlapping motion paths. Carefully add animations and think about how to move a particular element to make the transition clearer and enjoyable.

3. Avoid linear paths unless the animation is constrained to a certain axis or is moved from/toward a point along with other elements.

4. If all the moving elements are moving on the screen by path, whether it looks neat or not, does this give the user a clear idea of where to look.

5. The spatial relationship is represented by the animation of the continuity of the old and new elements.

6. Guide the user's attention with a harmonious and consistent animation.

7. Avoid chaotic and incoherent animations, where elements leave or enter in random directions, and so on will cause confusion for users.

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Material Design visual Design language" applied animation