To talk about those delightful animation effects.

Because the static picture conveys the limited information, many dynamic effects require the designer to express it by adding design instructions and cooperating with the dictation. The advantage of doing this is to save time, help to achieve rapid iteration, low cost; But the disadvantage is not intuitive enough, many details exist in the designer's own mind, only through static pictures and narration can not be fully conveyed, lengthy design instructions to the loss of patience, designers mind the picture, It is often understood as a different form of development.

The inner animation of the designer

Therefore, in the time is more abundant premise, many designers begin to attempt to output the dynamic design draft, in order to own the design idea to use more intuitive and the more attractive way unfolds.

(Web page dynamic design draft case)

(Mobile application dynamic design draft case)

In the process of animation effect design, it will involve how to think, how to make a proper decision, the author collected some cases, I hope to exchange discussions with you. This article will start from the three angles of fluency, moderation and surprise.

Fluent

Smooth and clear animation is always popular, on the contrary, a card of fuzzy animation makes people feel annoyed.

VS

So how do you output a dynamic design that is smooth and clear and easy to display?

Here is a dribbble designer's common output method:

① uses after effects to edit the dynamic effect and render the output as a QuickTime file

② QuickTime file into Photoshop, select file → save as Web format →gif, and adjust the output settings, refer to the following figure:

③ Click Save, Fluent and clear GIF on the export:

This case reference designer Dash's dribbble homepage: http://dribbble.com/Dash

AE source file Template in this case please stamp: http://dribbble.com/shots/1089895-UI8-Presentation-Template

Other designer ae source file Download: Http://dribbble.com/shots/1187158-iOS-7-animation-ae-giveaway

Sharing a mobile-end gesture collection can help designers visually express the interactive way in which animation is triggered: http://areuswade.com/precomposed-touch-gestures/

Second, moderate

There is an old saying in China. Animation is high-end flavor cool, but it is not the more the better, the more complex design is more pleasing to people. The abuse of animation effects will also give users a sense of dizziness, loss of focus, and even generate boredom and resistance to the mood.

① design animation without affecting performance and responsiveness

If the animation affects performance and responsiveness, it becomes cumbersome, not only to elevate the user experience but to become annoying. At this point, either try to improve the light volume of the animation, or simply do not.

② Weigh development costs

The more unique the animation, often the greater the cost of development. Design animation effect before, first clear oneself such design purpose, can ask oneself such goal whether need to use animation way to achieve good effect, if really need, also can take advantage of development easy to achieve the effect to achieve the same goal. Suggest and develop colleagues to discuss design ideas and weigh costs.

③ repeated occurrences of the animation shorter the simpler the better

More beautiful things, see more also easy aesthetic fatigue. Using very frequent operations, it is not recommended to use overly gorgeous animation effects, if you do need animation as a smooth transition, it is recommended to use more basic interference less animation. In addition, when waiting for a long time cannot be avoided, you can consider the contents of the waiting to have a certain randomness.

④ Unless special circumstances require, the animation effect should be kept within the comfort range, to avoid dizziness and interference

Some flash websites, designed to be very flashy, are impressive at first sight, but difficult to retain users. The animation element of the page is too many, make a person dazzling, lose focus, be at a loss, fresh feeling once, don't want to look again.

At design time, you can avoid the occurrence of such problems by controlling the timing of the animation, triggering the way and the scope of the impact. For example, in the design of some Web pages, scrolling to a specific area will trigger an animation in a specific content area, and the animation effect will appear only once the next refresh and scroll to the appropriate location.

three, surprise

Surprises are usually unexpected and understandable. Grasp the opportunity, the design of clever animation enough to enhance the product experience, increase interest, in the user to bring surprises at the same time for the product target service. How to stimulate the interest of users to explore, so that users have a sense of achievement, to provide more than the user expected pleasure experience, design needs to think about the direction.

When we use micro-letters, we notice that when a particular keyword is sent, it triggers some brilliant effects on the background of the micro-letter. These effects are not fixed, special days will have new eggs, often bring us some surprises.

Games often set different levels and achievements, there are small, when the player reached one by one, will receive a certain reward, at this time the user will have a sense of accomplishment, to achieve self satisfaction. The same idea, when the user completes registration, payment, upload file success or to complete other more complex time-consuming tasks, can also be a similar way to motivate users.

Haze is a personal favorite weather application, its dynamic effect and interactive mode concise and novel, completely beyond my expectations of the application of the weather, let people fondle admiringly. Haze's team has recently made a thunderspace application, continuing the same design style, we are interested can also download experience.

I have to mention an application path that designers all like. I was impressed by its sleep animation, click to sleep, the screen gradually darkened, slowly rising from the bottom of the moon, the moon's Yin and Qing yuan will be based on the current time to produce changes.

Deal in the bottom of the interface there is a yellow Kraft paper bag, you can according to wash the long press a project and drag him into the bag, the operation of the feeling is like you tear it from the paper like, full of fun.

Summary:

1, animation to achieve smooth and clear

2, animation effect can not be abused, nor the more complex the better

3, find the right time, give users a little surprise

In the actual process of designing dynamic effects, also need to give specific consideration to the presentation of the animation, trigger time and duration, etc., need to maintain good communication with the development colleagues to ensure that the design from the simple concept of real landing for the product, on this part of the experience hope in the next article and you discuss:

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/about-design-animation.html)