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" action requires two conditions at the same time, first it needs to be lively and interesting, both good-looking and smooth; again, it is not dispensable, it needs to have the function of optimizing interaction and enhancing experience.
1.APP the external beauty of the 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.
2.APP the inner beauty of the 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.
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.
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.
Dynamic efficiency has become a new trend of mobile internet products, and how to design interesting and attractive dynamic effects 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.