How does a dynamic design attract your attention from four dimensions?

Dynamic design is booming, but there are many students worry about not to control it, it is easy to steal, Baidu today's students from this angle of attention to the students to chat, dynamic performance from which four dimensions to attract users attention, for these several dimensions, the designer how to use good dynamic design, a good article, Do not forget the little friends of AI.

In recent years, with the driving effect of iOS and Android on dynamic design, most products have become more and more important for dynamic design, from App Guide page to action feedback, from official website to hover effect, dynamic design seems to be the standard of a successful product. But the effect is not the more gorgeous the better, too gorgeous dynamic for our design goals may be counterproductive, users may only focus on the action itself, and no energy or time to pay attention to the dynamic effect of the message, and how to grasp this degree, this article will be in the following aspects.

　　one. What attracts users ' attention?

From the moment you see a page, if the display area is the same, the user's attention will be drawn in a particular order: Dynamic > Color > Shape.

In simple terms, when a user opens an interface, the attention is first drawn to the dynamic object, and when the dynamic is stationary or a very regular dynamic, the focus shifts to the color-contrast-strong part and finally the shape. This process is the instinctive reaction of human beings in the process of evolution, which is basically applicable to all users. At the same time a very important and easily overlooked principle: the user's attention is limited, and less. It is likely that after the user notices a period of activity, attention and patience have been exhausted, unable to see other content is anxious to go to the next interface. Therefore, for the dynamic effect such a very strong tool, must be used in the hope that the user's attention to the part.

Want to attract the attention of the user? Simple text can also play the effect Yo: experience sharing! Ultra-practical Text processing skills

　　Second, the core dimension of action to attract attention

A dynamic effect on the user's attention to attract a strong, can be divided into two core dimensions, dynamic performance of the display area and duration. The larger the display area, the longer the duration of the dynamic effect (including the single dynamic and composite dynamic effects), the more the user's attention can be attracted and sustained. The two core dimensions are formed into a two-dimensional graph, and the four quadrants can represent four different kinds of dynamic effects:

　　1. The relative area is big, the dynamic effect lasts for a long time

This kind of dynamic effect many applications in the introduction page of the app or the official Website product introduction page, seeks to pass the dynamic effect to impact the vision, leaves the user the deep impression. Because most of the footage is dynamic, the rest of the static is likely to be overlooked. For example, most pages have a dynamic effect in the graph, and the text part is still, if the information is to be able to express in words, then it will not work. Users can only remember "dazzle", as to what to express the basic do not understand. So this kind of dynamic effect in use, should pay attention to whether will affect the page information transmission.

Reebok fall/winter ' lookbook page, the entire page has a long time dynamic effect, the user's attention to the basic stay in the page of the characters on the action. While the product display part, although also has the dynamic guidance, but the user's attention is wanting to see all the scene, does not have the extra attention to the page product. However, such a page arrangement is common and reasonable in traditional corporate web pages. Because the core purpose of this page is branding, let users feel reebook is a cool sport brand, there is no hope that the product link in the page can bring how much sales. And most Internet products such pages also need to address the function of the elaboration, so be careful to design.

　　2. The relative area is big, the duration is short

Dynamic display area is large, time is relatively short, is the hope that users focus on the dynamic part of the moment, this kind of dynamic efficiency designers are more familiar with the switch between the interface. A large range of short time dynamic effect is difficult to see, so this kind of dynamic effect is more to show the spatial relationship between the interface. It is noteworthy that, because users will not automatically focus on the dynamic part, so the upcoming interface should be dynamic, so that attention will be smooth convergence to the interface after, otherwise there will be "attention jump."

In the above interface, the side bar expansion process will appear "attention jump." After clicking on the sidebar button, the user's attention will focus on the entire interface to the right, and then with the end of the animation, attention to return to the underlying dark interface, resulting in the flow of visual fluid.

　　3. relatively small area, the length of the dynamic effect

Such dynamic effects can be described as "light", usually to compare "light" guidance, feedback, and hints. The core is not want to interrupt the main flow, but also a slight attract attention, emotional design is also the most suitable for this play.

Amazon client clicks on the search, the menu button will move to the right, the return button to enter. The effect here is a little bit of a hint of "back", without grabbing the user's attention to the search.

The effect of loading in shine is that a villain is constantly swimming. Google search app, if you switch to the horizontal screen and then switch back, the logo will look like you are crooked. These small dynamic effects have been very good for the emotion of the product.

　　4. The relative area is small, the dynamic effect lasts for a long time

A small area for a long time dynamic effect to attract users attention, which means that the dynamic effect is very important in itself, it is worth the user to maintain attention, this kind of basic and the user is concerned about the function directly related.

Yahoo weather in the windmill rotation, the Music time dynamic button, are embodied in the product function or state, such dynamic effect although has been continuously attracted attention, but due to the small size, so it will not be used for other functions caused too much interference. The display area of the dynamic effect will need to be considered very carefully.

　　Third, summary

Dynamic effect is one of the most eye-catching tools, the correct use will be in the dialogue with the user to play a good guide. But also because of its strong, so must comb good design goal, do not let it become interference, after all, the user's attention and time are becoming less and more, we have to do is more reasonable use of dynamic effect to convey our message.