Two key to creating a cool, practical app for dynamic performance

Editor's note: The dynamic effect has clearly become a new trend of mobile internet products, how to design interesting and attractive dynamic effect has become a new task for designers. Different products are suitable for different types of dynamic effects, some products are suitable for the cool effect, and some are not suitable. Remember not to design showy as flashy, but as a new way to improve the user experience.

Mobile internet age has arrived, the app has been like the stars in the sky, the number is not clear. With the continuous upgrading of mobile phone hardware, the realization of cool and smooth dynamic is no longer a distant dream. If you're the app's talent and you like to experiment with apps, you'll surely find more and more apps starting to work.

A real beauty must be at the same time both external beauty and inner beauty, evaluation of the dynamic effect is also the case. A truly "beautiful" dynamic requires two conditions: first it needs to be lively and interesting, good-looking and fluid; again, it is not dispensable, it needs to have the function of optimizing interaction and enhancing experience.

One, the external beauty of app dynamic effect

A piece of activity needs to be vivid and interesting first, not only to have a nice look but also to have a smooth experience. In order to do this, we need to give vitality to the dynamic effect, there are several ways:

1.1 Simulation Inertia

The movement of objects in the real world is inertia, for example, when a bus suddenly brakes, the passengers will suddenly fall forward. Careful observation of the following 3 sections of the action, the image in the change (zoom, shrink and flip) of the end will be "beyond" the point of "bounce" back immediately, such a processing method makes the whole dynamic and dynamic, lively and interesting.

1.2 Simulated Gravity

As with inertia, gravity is also a reality in which all objects fall, such as dumping rubbish, without upward support. The dynamic effect of a general app removal card is to slide sideways until it disappears, but the following action adds Gravity. That is, the card in the horizontal slide and also in the flip and fall, just like the reality of dumping rubbish into the trash. While making the whole dynamic and interesting, it is also easy for users to understand the meaning of operation.

1.3 Uniform speed

An excellent dynamic effect will certainly not be uniform, uniform motion of the object appears stiff and rigid, like a robot. To make an image move alive, you need to "design" the speed at which it is moving. Careful observation of the following diagram shows the dynamic effect, although the interface of different elements of the speed of movement is not the same, but its movement are guided by a certain principle, one of which is uniform speed, remember "urgent." That is, the initial speed of the interface elements in the movement of 0, in order to accelerate the start of the movement, and at the end of the campaign often can be stopped.

1.4 The movement of debris

A good way to make an application more personalized is to add cool to it, and the usual way to make an action cool is to move to the debris movement. Simply put the image in the interface into pieces, and then let them carry out different steps of the movement, the use of time intervals and variable speed to create cool effect. As in the following a dynamic, the image of the different elements of the rhythm of the presentation, using time difference to create effects.

Second, the intrinsic beauty of app's dynamic effect

Really good performance is not only beautiful appearance of the vase, but also have to optimize the interaction and enhance the experience of the role. The following is a summary of 3 dynamic "intrinsic beauty", which is guided, simplified, and enhanced feedback, respectively.

2.1 Boot

Graphical interface is difficult to understand and abstract, enhanced guidance is a good way to reduce the difficulty of software operation and improve the user experience.

2.1.1 Dynamic focus

Through the dynamic processing guide the user to focus the key parts of the interface, so that the experience more fluent. Frogs can quickly capture moving objects, and human eyes have similar characteristics, and objects in motion always arouse subconscious attention. As shown in the following figure, the number at the top of the screen is not directly displayed a number, but from 0 to the rapid increment to the value, deliberately show a dynamic effect, the purpose is to attract the user's eyes, play a focused role. The domestic Alipay Wallet app also uses this kind of special effects.

2.1.2 Signal Transition

The transition is the change to the interface and the smooth transition, the goal is to guide users to understand exactly what happened, without making it overwhelmed. As shown in the following diagram, the process of adding a card is vividly simulated, making it easy for the user to understand what is happening. Imagine if the page is not sliding effect, but a direct blunt jump, is not a lot worse?

2.1.3 Space Transitions

The transition dynamic effect is a kind of special effect which the designer universally attaches importance to, its function also is to guide the user, let the user understand the page to jump better, know oneself body where. The following illustration shows a dynamic effect is a beautiful transition, in order to avoid the jump between the two pages too blunt, the use of dynamic effect to fill the page jump in the middle of the process, making the experience more fluent and natural.

2.2 Simplification

Sometimes a good design is an excellent simplification. Simplifying interface information and interaction levels can reduce operational difficulty and enhance the user experience.

2.2.1 Hide level Two action items

The use of dynamic effect can make the part of the information hidden in the interface, when some of the operation of the hidden content will be dynamically expanded, so as to achieve the purpose of simplifying the initial interface, so that the interface concise atmosphere.

2.2.2 Button Dynamic Performance

Make the button dynamic effect can let the interface important information dynamically to appear on the same button, make the user's eyes tightly stare at the button, weaken the page jump brings interference, make the experience smoother.

2.3 Enhanced Feedback

Software feedback is critical to the improvement of experience, and enhanced feedback can be a better cue to make the experience process easier and more enjoyable. Jitter is one of the ways to enhance feedback, using dynamic feedback to replace the static hints of graphic text, more natural and eye-catching. The following figure shows that the dynamic effect from Apple's pages software, when entering the editing state to edit the object into the constant jitter, play a good role in guiding.

Summarize

Dynamic efficiency has become a new trend of mobile internet products, and how to design interesting and attractive dynamic effects has become a new subject for designers. Different products are suitable for different types of dynamic effects, some products are suitable for the cool effect, and some are not suitable. Remember not to design showy as flashy, but as a new way to improve the user experience.