What is a dynamic UI? UI dynamic design, summary some basic rules

What is a dynamic UI? Or UI dynamic design?

Animation has now penetrated into every corner of the UI interface. The switching between screens is more coherent because of dynamic effects, and the context logic of interaction is clearer because of dynamic effects. Dynamic efficiency is an important part of products and users. But when I browse the relevant articles, I find that the vast majority of the articles related to dynamic effects are only for specific cases of dynamic effect design to analyze and describe, few articles really systematically expound what rules should be followed by dynamic effects, what characteristics should be conformed to. In this article, I won’t talk about new techniques or cutting-edge trends, but I’ll bring together the main principles and standards of dynamic design and summarize them.

With this article, you won’t have to learn basic dynamic design rules elsewhere.

———-By What is a dynamic UI?

Duration and speed of dynamic effects

When the position and state of the element changes, the dynamic effect should be slow enough to last long enough for the user to notice the change, but not slow enough to require the user to wait.

A large number of studies have shown that the optimal duration of dynamic effects is between 200 milliseconds and 500 milliseconds. The research figures are based on the human brain’s cognitive style and information digestibility. Anything less than 100 milliseconds is almost instantaneous to the human eye and difficult to recognize. And more than one second of the dynamic effect will give people a sense of delay.

———-By What is a dynamic UI?

The duration of dynamic effect is longer in the interface.

On mobile devices such as mobile phones, according to Material Design’s recommendation, the duration should be limited to 200-300 milliseconds. On tablets, it should be extended by about 30%, that is, 400-450 milliseconds. The reason is very simple, the larger the screen size, elements in the displacement, the longer the distance across, speed is fixed, the longer the natural time. Correspondingly, on the small screen of the wearable device, the duration should be reduced by 30%, between 150 and 200 milliseconds.

———-By What is a dynamic UI?

The screen size of the mobile terminal device affects the duration of the animation.

The way to handle web pages is different. Because we are accustomed to open the web page directly in the browser, considering the browser performance and everybody’s usage habits, the user’s expectation of the change rate of efficiency in the browser is still relatively fast. In other words, the duration of the effect should be between 150 and 200 milliseconds. If the duration is too long, users will be unable to help feeling the page is stuck.
However, if the effects used in your pages are not functional, but decorative, or to attract the attention of users, then forget this rule, in which case the effects can be longer.

———-By What is a dynamic UI?

Larger screen = slower action? Absolutely not!
Keep in mind that no matter what platform you are on, the duration of the action depends not only on screen size and movement distance, but also on platform characteristics, element size, function settings, and so on. The smaller the element or the smaller the change, the corresponding dynamic effect should be quicker. Therefore, large and complex elements can last longer and look more comfortable.
Elements of the same size, which move the shortest distance when moving, are the first to stop.
Compared with larger elements, smaller elements should move more slowly, because the same distance, for small elements, the displacement distance and its own size ratio is larger, the relative offset is farther.

———-By What is a dynamic UI?

The duration of dynamic effect is also related to the size of elements and the distance of movement.

The kinetic effects should be in accordance with the physical laws. When the elements move to the boundary and collide, the “energy” of the collision will eventually be evenly distributed. The special effects of bouncing are not suitable in most cases, but suitable for use only in special cases.

———-By What is a dynamic UI?

Avoid bouncing effects, which distract users’ attention.

The movement of elements should be clear, and try not to use fuzzy effects in motion (yes, AE’s followers of fuzzy effects), which are not suitable for use in UI interfaces.

———-By What is a dynamic UI?

Do not use fuzzy effect in dynamic performance.

List items (news lists, mailing lists, etc.) use the dynamic effect, in the actual movement process, there should be a slight delay between items, elements between the delay should be controlled between 20 to 25 milliseconds, if the duration is longer, may give people a sense of hysteresis.

The delay between list items should be 20~25 milliseconds.

———-By What is a dynamic UI?

Slow motion

Slow motion refers to the phenomenon of gradual acceleration or deceleration of objects under physical rules. It is one of the basic principles of motion that the effect of slow motion is added to the kinetic effect to make the movement appear more natural. Two of Disney’s key animators, Ollie Johnston and Frank Thomas, described the slow motion in great detail in their book The Illusion of Life: Disney Animation.
In order not to make the effects appear too mechanical or artificial, the movement of elements should be characterized by gradual acceleration and gradual deceleration, as is the case with other objects in the physical world.

———-By What is a dynamic UI?

Uniform rectilinear motion

Unaffected by any physical force, uniform linear motion seems very unnatural, especially for the human eye.
All applications designed for animation use coordinate axes and curves to illustrate kinematic characteristics, and I’ll try to explain what they mean and how to use them. The X axis of the coordinate axis is realized, and the Y axis represents the only, in other words, as we learned in junior high school physics, the lines on the coordinate axis describe the characteristics of speed and acceleration. The straight line shown below shows that the speed is uniform, that is, uniform linear motion, the distance of the object in the same time is unchanged.

———-By What is a dynamic UI?

Coordinates of uniform rectilinear motion

Uniform changes are usually used only for color changes or transparent changes. Generally speaking, we can also make the background element move uniformly, while the foreground element remains unchanged to present its state, just like the picture above.

———-By What is a dynamic UI?

Slow motion acceleration curve

From the curve we can see that the initial velocity of the object is relatively low at the beginning, the movement is slow, and then the speed increases gradually, which means that the object is accelerating.

Acceleration curve

This acceleration curve can be used when the object accelerates out of the screen, such as a card thrown out of the interface by the user using a sliding gesture. But remember, this is only used when the moving object needs to leave the interface completely, and not if it needs to come back again.

Throw cards out of the screen with accelerated motion.

Animation curves help to convey the message correctly, and even express emotions and feelings. In the following case, we can see that the movement displacement of each element is exactly the same, and the total time consumed is the same, but the movement rate varies, which is also reflected in the curve, showing different emotions. Of course, by adjusting the curve, you can make the movement of the object as close as possible to the real world.

Slow moving deceleration curve

When elements move from screen to screen, dynamic effects should follow the motion characteristics of these curves. From full speed into the screen, the speed decreases until it stops completely.

Deceleration curve

The deceleration curve can be applied to a variety of UI controls and elements, including cards and entries from outside the screen into the screen.

———-By What is a dynamic UI?

Deceleration curve case


Slow moving standard curve

Under this curve, the object accelerates at rest, then slows down until it reaches its peak. This type of element is most common in UI interfaces, and you can try standard curves whenever you don’t know which mode of motion to use in dynamic effects.

standard curve

According to the Material Design specification, it is best to use an asymmetrical process of growth and deceleration to make the dynamics look more realistic. At the same time, people will pay more attention to the result of the movement, the end of the curve, that is, the end of the movement process is best properly stressed, in other words, the deceleration process is best continued longer than the beginning of acceleration, the user will be more clearly observed the final result of the movement, so as to better understand the end of the movement. Stop state.

Differences between symmetric and asymmetric motions

When an element moves from one position on the screen to another, it’s best to use this standard slow motion curve. In this process, try not to make the animation noticeable or dramatic.

When the card element moves from the screen, the asymmetrical slow motion curve.

When the element disappears from the screen, the same asymmetric slowing curve is used, and the user can also slide back to the previous position. This link uses drawer type navigation controls.

The drawer navigation is hidden from the screen with the slow motion curve.

From these cases, we can see that many dynamic beginners do not know enough about sports rules. For example, the following kinetic effect, the element appears along the deceleration curve, and then disappears using the standard slowing curve. According to Material Design, new elements should last longer because they require more attention.

The appearance and disappearance of navigation menu

The Bessel curve function cubic-bezier () is used to describe a curve. Its name is preceded by Cubic because the description of each Bessel curve is based on four different parameters. The starting point (0, 0) of the curve and the position of the end point (1, 1) on the coordinate axis have been determined in advance.

To simplify your understanding of Bessel curves, we recommend two websites, easings. net and cubic-bezier. com, which contain lists of the most common curves that you can copy into your prototype tools. The second site provides you with parameters for different curves that you can check directly in Look at the way things move.

Curves and parameters of different types of cubic-bezier ()

———-By What is a dynamic UI?

Layout of interface dynamic effect

Like ballet choreography, animation needs to be choreographed, and its main purpose is to allow elements to switch from one state to the next, to make a natural transition, so that the user’s attention is naturally directed past.
There are two ways to arrange, one is equal interaction, the other is subordinate interaction.

Homogeneous interaction

Equal interaction means that all elements and objects follow a specific choreography rule.
In this example, all cards follow a single direction to guide the user’s attention, loading from top to bottom. On the contrary, without such clear rules to load, the user’s attention will be distracted, and the appearance of the elements will appear to be poorer.

The user’s attention should be guided by a flow direction.

As for the layout of tables, it is relatively complicated. Here, the user’s line of sight should be clear diagonal direction, so block by block order is a bad design. This one-by-one display, on the one hand, takes too long, on the other hand, makes the user feel that the elements are loaded in a zigzag way, which is not reasonable.

Loading along diagonal lines

———-By What is a dynamic UI?

Subordinate interaction

Subordinate interaction refers to the use of a central object as the subject to attract the user’s attention, while other elements subordinate to it to gradually present. Such animation design can create a stronger sense of order, so that the main content is easier to attract the attention of users.
In other designs, it’s hard for users to figure out which is the main one because attention is distracted. Therefore, if you want to set up more than one animation element, you should clearly define who is the main, who is the center, and try to render different sub-elements according to the subordinate relationship.

If there is only one central object, the movement of other objects is restricted by it, otherwise the user can not distinguish primary and secondary.

According to Material Design, when an element changes size disproportionately, it should move along an arc rather than a straight line, which helps to make it look more natural. The so-called “disproportionate” change refers to the element’s length and width changes are not scaled or changed in the same proportion, in other words, the speed of change is not the same. (for example, a square becomes a rectangle).

When the appearance of the object is disproportionately changed, the trajectory should be curved.

On the contrary, if the elements are scaled, they should move in a straight line, which is not only more convenient to operate, but also more consistent with the characteristics of uniform change. Take a look at the real case, you will find that the trajectory of the straight line will be more reasonable.

When proportionally changing in size, it should move along a straight line.

When the element is disproportionately enlarged, the motion trajectory is an arc, and there are two different forms of the arc trajectory. One is that the initial direction is perpendicular and the instantaneous direction of motion is horizontal at the end of the motion. The other is that the initial direction is horizontal and the instantaneous at the end of the motion is instantaneous. The direction of movement is vertical (Vertical out).
So how do we choose this direction? Simply, the direction of the element motion curve should be to align with the principal axis of the main direction of motion of the interface. For example, in the following dynamic effect, the entire interface is scrolled up and down, and the spindle is vertical, so when the card is clicked and expanded, it moves horizontally to the right first, and eventually ends in a vertical motion. The final direction of the motion, the tangent is vertical, and the spindle load is vertical. It’s right.

———-By What is a dynamic UI?



We have summarized so many rules and principles of kinetic motion that in a sense we continue our knowledge of the physical world, friction and acceleration persist in other ways in the virtual interface. Imitating the interface of the real world gives us a clearer understanding of the order of the interface, allowing us to understand and access the content of the interface more easily.
If the effect is designed in the right way, it should be insignificant and not distract the user. If that’s not the case, then you need to make the effect a little more subtle, really not even remove it. Dynamic performance should not be an obstacle to user control interface or distraction.
Of course, even if there are so many rules to follow, dynamic design is still an art, not a simple science, more testing and more exploration is always necessary.


Related reading:

How Can A Designer Return His Job In Order To Get A Raise?

The Threshold Of Framer X Will Be Higher.

Improving Efficiency But Not Known Stormy Sketch