Those of you who study animation know Disney’s 12 principles of animation design, right? This is probably one of the most important and invaluable principles in traditional animation. It was developed by Ollie Johnston and Frank Thomas in their book The Illusion of Life. Although these principles were originally applied to animation design, they are also applicable and effective in today’s UI.
Most of these 12 principles can be applied to UI dynamics and interaction design to take interactions and experiences to the next level. Based on these 12 principles, this article has sorted out 9 principles that can be applied to UI design.
1. Squeeze and stretch
In animation, extrusion and stretching are mainly reflected in the performance of objects under the influence of gravity. This animation effect can reflect the quality, weight and flexibility. When the marble hits the ground, it squeezes and stretches like this. In the UI, squeeze and stretch are mostly displayed on button elements.
For example, when a button is pressed, a squeeze and stretch effect can be added, and this dynamic effect can quickly make the button appear to be close to real physics. Of course, it can manifest itself in many other interactive elements besides buttons.
2. Preparatory action
Pre-action usually refers to giving the user advance notice of what is about to happen so that the design fits the user’s expectations. To shoot an arrow, a character raises his arm and pulls it back. You can clearly see the “no shot” state before the arrow is fired, and then you have an expectation of the arrow being fired. In the user interface, when you hover over a button, the button changes and enters the “hover” state, which indicates that it is clickable, which is its preparatory action.
The hover interaction tells the user what to do next.
Controls that scroll horizontally usually show parts of some element that make the user aware of swiping interactions.
3. Time control
In traditional animation, time controls determine the number of frames to draw and the content. The more frames, the smoother the animation, and the slower the content changes. At the same time, the amount of time an animation takes will also affect the performance of the characters and the mood of the user.
Time control is the foundation of animation design. Time control and easing play an important role in animation choreography, too long a transition will make the user wait too long, if too fast, the user may feel that important information is missed. In general, most animations are between 200ms and 600ms in length, such as hover and click feedback are usually around 300ms, and transitions are usually around 500ms. You can refer to the time handling of animations in Material Design.
The transition on the right makes the user feel like they’re waiting too long.
4. Tapering and tapering
In the real world, most things follow the law of slow motion. In other words, nothing suddenly starts and stops, and free fall accelerates.
So, adding easing effects to UI elements makes them look more natural and conform to expectations, and combining easing and time control allows you to define the motion system of the entire interface.
The one on the left is moving at a constant speed without slowing down, while the one on the right looks more natural with slowing down.
5. Performance and presentation
Set the stage for the characters and let them enter the scene as if they were on stage. In other words, you need to use animation to “tell the story,” thinking about how to get it into the scene, how to present it, how to act it out, how to use camera language to direct the user’s attention.
In THE UI interface, the way of performance and presentation corresponds to the placement of elements, as well as how elements enter the interface, how to capture the user’s attention, and how to conduct reasonable animation choreography.
When you are thinking about how to present a music APP interface, you may need to recommend similar songs, based on the user preferences so like music/collection will be an important part of the interaction, and the song of songs, presented may require a separate interface, so you must like/collection button, jump out to make songs from the list, And the related music is listed below.
6. Arc trajectory
Few things move purely in a straight line, and a ball thrown from a height moves in an arc. In many cases, arcs are more consistent with nature and our daily perception.
In the UI interface, important elements can be presented with curved motion tracks, which will appear more natural and comfortable, especially those elements that move along the diagonal.
7. Accessory actions
In traditional animation, auxiliary actions are mainly used to support and assist the main action. For example, if a character is walking, his head swings and turns are usually seen as ancillary movements,
In the UI, secondary actions can make the main animation effects stand out. These elements can be very useful where user feedback is needed. Almost all microinteractions are designed on the basis of subsidiary actions.
The particle effect here enhances the functionality of the button itself.
8, exaggerated
In many scenes, the character needs to be attractive enough to use some exaggerated actions to attract more attention.
In the UI, the most important interactions can be enhanced with exaggerated dynamic effects that capture the user’s attention. FAB motion in Material Design is one of the most typical bombastic motion, and its final static effect is very attractive, because it extends the color of a button across the entire interface, and emphasizes it to the extreme at the top of all elements.
Use FAB motion to exaggerate
Use exaggerated effects in payment apps to enhance
9. Follow and overlap
Nothing comes to a sudden stop. Usually motion is one after another. There is also a more concise expression is “the mover constant motion”. Imagine a rabbit jumping from a high building. When the rabbit starts moving, its ears naturally shift and wiggle with the movement. When the rabbit lands, its ears may still be moving after its body is basically still. The former is a “follow action”, and parallax scrolling is a typical follow action. While the latter is “overlapping action”, after the previous action has stopped, some parts are still in motion.
In the UI, you can have an element call another interaction or action before it stops, making the whole action and interaction more fluid, coherent and natural.
The following action of the modal pop-up box continues to move after the underlying dynamic effect stops and then comes to rest.
As you scroll, the card and the bottom element move at different rates, similar to parallax.
conclusion
In the actual design process, UI dynamic effect and interaction should be adjusted flexibly according to the actual situation, so that the whole UI interface in the natural condition, in the right position to add different interaction, dynamic effect and micro interaction, this makes the whole interaction and UI interface itself more deeply combined.
More design materials can be on the first-class design network, mass domestic and foreign high-quality design materials waiting for you.