As visual designers, our role is not only to meet the aesthetic needs of users, but also to convey brands, information and functions. In order to effectively convey information to users, we need to establish an information hierarchy instead of throwing it to users for their own understanding. What visual methods can achieve this, and whether there is a theoretical basis behind these methods is the theme of this paper. First look at the following two pictures. The left picture shows the effect of camera shooting, and the right picture shows the effect that human eyes see from time to time. We can find that the information obtained by human eyes is not completed at one time, and it is impossible to produce multiple focuses at the same time, so that attention can stay in more places. What designers need to consider is to let users obtain information through eyeballs in a certain order, so as to help the process of obtaining and understanding be efficient and natural. There are two main problems that this design method hopes to solve: 1, the efficiency of users' acquisition and understanding of information, and the establishment of a good information hierarchy, so that users can quickly acquire and understand useful and interesting information in a limited time and generate the next step; 2. Designers have conscious information priority, and understand which visual expressions can establish information hierarchy and the theoretical basis behind each method, not just by feeling. First, early understanding &; Before starting the design, the visual designer should not only know the background goal of the project itself, but also know some specific pages to help guide the later design, including page positioning, atmosphere creation, information priority, user core behavior and so on. 1. 1. Page positioning is the premise and core behavior to help give priority to page information. There are usually: who is the user, where the user comes from, that is, from what channel positioning page content, what is provided, and what page function is not provided. For example, when we design and buy a new home page, we interact with the users of the page to make sure that the core target user of the home page is the new home; The positioning of page content is the value point of the display field, and the data generated by users enables new homes to realize direct purchase and form brands; 1.2. Understanding the atmosphere that the page needs to create can help us to judge which elements can help us achieve our goals. The atmosphere can be the content itself, or it can be created by the design of visual elements. However, it must be noted that the atmosphere cannot be stronger than the content that users pay attention to. The atmosphere may include: New Year theme, promotion of low discount information, making users active, etc. The following is the official page of the big promotion activity, and the picture on the left continues the carnival atmosphere in the warm-up period. But at the beginning of the activity, the atmosphere is no longer the focus, and users are more concerned about the goods and discounts themselves. The picture on the right is the combination of adjusted atmosphere creation and category pictures, which solves the relationship between atmosphere and content well. 1.3, information priority 1) First-level information attracts users: Assuming that users will only stay on this page for 3-5 seconds, it is the core point of the page that attracts users to continue browsing, that is, the first-level information, which must be few and precise. 2) Design should emphasize secondary information to help them understand: with the attraction of primary information, users may stay for 3-5 minutes to further understand the content. At this time, the secondary information, that is, the essence of refining, is displayed to help users understand the information in the shortest time. 3) Learn more about the three levels of information: the first two types of information can basically help users get enough information. If users continue to stay longer to learn more, this kind of information will be more, and the visual level will fall behind in design, or different types of users will have different stages of behavior through interactive display and providing 1.4 entrance jump. We must make a judgment. For example, in the product details page, some users will check the user's comments, historical transactions and other contents before deciding to buy, but these viewing behaviors are ultimately to help users judge whether to buy this product, so the core behavior is the final-oriented purchase. With these, the large modules in the interactive output document will be given information priority and user behavior priority, as shown below. Before detailed design, vision needs to give priority to the specific content of each module, and make the following schematic diagram, and confirm with the interactive and business parties that these are important outputs to help the visual design process not deviate from the direction. Second, the establishment of information hierarchy visualization method mainly has the following elements. In actual design, in order to make the effect more important, many methods may be used at the same time to achieve better results: the size of the position is 2. 1 from the color of the content form, and the position is an element that will be considered at the beginning of the design. People always follow certain rules when they look at things. Following these rules in design can help users to see or understand things in front of them more easily and quickly. There are two rules related to location design elements: 1) When the eyes deviate from the visual center, when the deviation distance is equal, the human eye has the best observation of the upper left, followed by the upper right, lower left and lower right. Therefore, the left upper part and the middle upper part are called & lduo's best visual field &; rduo。 For example, important information such as logo, trade name, theme, etc. are generally placed in perfect angle. Of course, this division is also influenced by cultural factors. For example, the word Bo is written from right to left, and the best viewing angle is the upper right. The following picture is taken from the Art Course of Web Interface Design by Zhang Fan and Luo Qidong Gong. After split screen, users pay different attention to different positions: 2) The second rule is that the eyes move faster in the horizontal direction than in the vertical direction and are not easy to get tired. Generally, objects in the horizontal direction are seen first, and then objects in the vertical direction are seen. As shown in the figure below, the difference between left and right attention is smaller than the difference between upper and lower attention. If we want to reflect the parallel relationship, it will be more appropriate to arrange it left and right; However, if we want to widen the gap, we can only achieve it by location, and it is easier to achieve the goal by arranging it up and down. For example, as shown on the front page of Time Weekly, the big picture on the left is the focus news of the day, which is the first-class information on the information level. It is not only great in visual expression, but also in an advantageous area, maybe 98% users will pay attention to this area first; If the position of the design draft is adjusted as follows, if the focus news picture is the first priority information, although it is in the form of a big picture, it will occupy a large enough amount, but it will &; Amprduo, the latest headline of lduo, distracts a part of the line of sight, and only 60% users may see the right side first; If information has priority, it is necessary to widen the gap in visual performance, rather than approaching equality. 3) Users give priority to the upper part, and web design has the concept of the first screen. The information of the first screen is higher than that of the second and third screens that appear by the user dragging the scroll bar. Due to the different screen resolutions used by users, the height of above the fold will be different. According to our data, the current resolution height is the majority, so the design will be based on the height, and the average value displayed to the user above the fold is px. This data will be adjusted according to the resolution changes of future target users. We can use this value as the reference line of above the fold when designing. 2.2. Size After determining the location of the module, we will consider how much site to give this module, and the size will directly reflect the importance of the information. There is a case of sports poster design, involving football, golf, baseball and basketball. Basketball and football will be more important if they are designed according to actual size. In order to reflect the equality of sports, the size of the ball was adjusted in the design. The conclusion in Giles Colborne's "Simplicity First" can guide us to widen the gap by size: 1) The important elements should be larger, even if the proportion is out of balance, 2) We should find ways to show the gap; If the importance of an element is 2, let's set it as 4, or take the front page of Time magazine as an example. At present, the contrast between the left focus news pictures and the middle news pictures has widened the gap, which is convenient for users to pay attention to the first-level information first and is not easy to be disturbed by the surrounding areas; Comparing the two news photos, we can see that the gap is about 4 times; If the interface is adjusted as follows: after the focus news map is reduced by two times, it can be seen that the distinction between visual levels is not obvious. In addition to the influence of the element itself on the visual level, the degree of detail amplification of the element also plays a role. After the details are enlarged, the human eye will feel that the elements are clearer and closer to the eyes, and it is easy to notice them first. Of course, the premise is to ensure that the information can be understood. If the local details are enlarged but users can't understand what the information is, it won't attract users. The picture below is a model. Photos of models appear randomly on the homepage, including photos of face and bust. Photos with enlarged facial features ensure that users can understand that this is the model's image, so users will give priority to photos with enlarged details. 2.3. Enlarge the details of the elements mentioned above, and the eyes will feel closer to it and get priority attention. Although the medium of information presentation is plane, the three-dimensional effect can be reflected by visual means. In addition to size, there are other visual skills as follows: 1) Reduce the three-dimensional distance to achieve the effect of reducing the distance. The methods listed below are to make the information unclear and the eyes seem unable to focus. Contains fuzzy elements: after the graphics in the picture background are blurred, they are not on the same plane as the two action points and the icon on the right, and are farther away from the eyes. Users will not be disturbed by fuzzy background when identifying action points and roles. Reducing transparency will also play a role. When some background pictures are blurred, it is difficult to be perceived by the whole. Choosing to reduce the transparency can also increase the translucent layer at a distance. When there are more colors or elements in the interface, it may not be possible to widen the distance simply by reducing the transparency. The following figure highlights that when T-purchase is used, the other four modules have not obviously widened the gap after reducing the transparency due to their rich colors. By adding a layer of gray translucent layer, the modules other than T-purchase naturally retreat behind the line of sight. 2) Enlarging the three-dimensional distance and increasing the projection are the most commonly used visual techniques to make elements look different from other contents. Usually, pop-up boxes and floating layers will appear when the mouse moves over other information, so adding projection can help users focus on the module with projection without being disturbed by the following information. 3) Besides 3D, 2D distance also affects the visual level. According to the proximity law of gestalt psychology, parts with short distance or close to each other are easy to form a whole. The human eye is more likely to notice the information at a close distance first. In the use of visual techniques, the elements are close to the previous focus, and the visual level is high. As shown below, the first-level news focus map is close to the small picture on the right, and the line of sight is easy to move to the upper right corner; After adjusting the distance, although the small picture in the middle is more attractive than the text itself, the line of sight tends to move down first because the title below the focus picture is closer and forms a whole. 2.4. After determining the relationship between the position, size and distance of the module, we will continue to consider the form of content, including video, pictures, text, etc. Here we mainly talk about the graphics and words we often use; Compared with words, pictures play an important role in catching users' eyes, and also enable users to form an image memory in a short time. From the visual level, human eyes usually pay attention to pictures first, and then to words. However, this is not enough. More importantly, after grabbing the user's eye through the picture, we can guide our eyes to the next focus, which can be summarized as: 1) Directions guide some images in the picture to have obvious directionality, such as the direction of human eyes' gaze, the direction of gesture pointing, the direction of object movement, the direction of illumination and so on. These features will guide the eyes to move in the set direction, thus reaching the visual level. The picture below assumes that the person in the middle attracts people's attention first, which is the first level of information. Because the gaze direction of human eyes is to the right, the next target that users pay attention to will turn to&; Lduo encoder and amplifier. Rduo text is the second layer of information. The position of what we do in the upper left corner of the picture below is easy to be noticed at first, but when we are at&,the characters on the right occupy a lot of space and will also grab the line of sight. However, because there is no other information about the moving direction of the character, the picture does not give full play to the guiding role, and the user will not browse smoothly, although the adjusted effect is&; Lduo, what do we do? The location of rduo is not in the dominant area, but through the guidance of the picture direction, people's eyes naturally fall on the text information. 2) Symbol guidance In addition to pictures, some symbols are sequential and directional, which can also effectively guide the line of sight to browse according to symbols, including alphanumeric, alphabetical order, chronological order, arrows, etc. In the first three places in the picture below, although users are more accustomed to reading from left to right, their sight will also be affected due to the guidance of numbers, according to1>; 2>3. If you want to make this order more obvious, you can enlarge the picture size of 1 to widen the gap and combine various visual methods to achieve the effect. Timeline is also widely used in the interface, and human eyes will be affected by the time sequence, even breaking the conventional left-to-right browsing habit. As shown in the figure below, although the position of 2 is easier to guide users to browse first, the time axis has more obvious influence on the information. The average user will look at module 1 first, and then pay attention to module 2 from right to left according to time. 2.5. Color is an important factor that affects the user's first impression of the interface, and the application of color can also have an immediate effect on the visual level. To sum up, the difference of human eyes' attention to color is mainly the following two points: 1) Different shades of warm color first and then cold color. At present, there is no absolute order in their reflection on human eyes, but there are obvious differences between cold color and warm color, as shown in the following figure. Physiologically speaking, the adjustment of human lens is very accurate and sensitive to the change of distance. We can judge the distance of an object from us, but there is a certain limit, and there is no definite adjustment for the slight difference of wavelength. When the eyes observe colors with different wavelengths at the same distance, warm colors with longer wavelengths, such as red and orange, form internal images on the retina; Cool colors with shorter wavelengths, such as blue and purple, form profile images on the retina. So the warm color seems to be moving forward, and the cool color seems to be retreating. Hubspot, an American digital marketing company, once did an A/B test to test the difference of user click conversion caused by different colors. In the figure, the contents of the left and right test pages are exactly the same, the only difference is the color of the button. In the multi-person sample test, the click rate of the red scheme finally exceeds that of the green scheme 2 1%. Before the test, most researchers speculated that the green scheme would get a higher number of hits, because intuitively, green stands for pass and permission, while red is more inclined to warn and stop. This test reflects the influence of warm colors on users' attention and mobility to some extent. Of course, it doesn't mean to use warm colors in order to improve the click-through rate. The specific color style should be designed according to the product positioning. 2) In Gao Fancha before low contrast, besides the difference between cold and warm colors on eyes, color contrast is the most likely factor to cause attention difference. In order to survive in nature, the protective colors used by animals are related to contrast. For example, the owl in the picture is related to its living environment, and its coat color has evolved into a similar color, which plays a role in hiding and protecting; On the contrary, large color contrast is particularly easy to attract attention, such as the unique red in the yellow tulip below. The size and distance mentioned above are all visual means to reflect contrast, and the contrast in color can be achieved mainly by the following methods: tone contrast. In the figure below, the main color is blue, the blue action point is consistent with the overall color, and the layering is relatively weak, while the contrast between the green action point and the blue hue makes the layering higher but more colors. How to determine the contrast? We can look through the color ring, as shown in the figure below. The intensity of hue contrast depends on the distance on the color circle. The greater the distance, the stronger the contrast, and vice versa. Saturation contrast and lightness contrast are well understood, and both have controllable values. The greater the difference in saturation or brightness values between two colors, the greater the contrast, and vice versa. Look at specific examples: For example, in the navigation chart below, the current character icon has a high brightness, which forms a Gao Fancha with a low brightness black background, so it is easy to be watched first. The pie chart below shows a high percentage saturation, in contrast to the overall low saturation. Comparing the same hue through saturation can not only widen the gap to form a visual level, but also have an overall visual effect. Summarize the visual expression techniques mentioned above and form a table for everyone to remember as follows: Third, look at the visual flow of the page. After using visual expression technology to establish the information hierarchy, designers need to constantly examine whether the user's browsing order is really at 1 to 2-3 levels as we expected. , including browsing in large modules and modules, will form a visual flow on the page; Looking at the visual flow of the page can help us to judge whether the user browses the page smoothly and whether the browsing order is regular. If our design can't effectively guide users' sight and users' browsing tends to be random, it will be difficult to convey the information they want to express quickly. The following contents mainly introduce the typical visual stream and the characteristics of each type, including: linear visual stream-oriented visual stream-jumping visual stream-radioactive visual stream 1) linear visual stream-horizontal visual stream guides the user's visual stream from left to right or from right to left, which is the most suitable browsing method for users' visual habits and gives people a stable and credible feeling. For example, digg home page, whole page and single module are typical horizontal visual streams. After the user browses to the boundary from left to right, he looks back at the next line and continues reading from left to right. The best area for horizontal browsing will have a numerical value. For example, digg chooses a page with a width of about px and displays three items per line. After the user's screen resolution becomes larger, should these two values continue to increase, and to what extent, the human eye has the highest efficiency in obtaining information? I haven't found the corresponding theoretical or experimental support for this problem, so I'll check the information later. Vertical visual flow guides users to browse from top to bottom. Because the vertical movement of the eyes needs the constant focus of the pupils, the efficiency of scanning the page module vertically is not much different from that of horizontal browsing, but the efficiency of reading details will become lower, such as vertical text, which is more suitable for ancient poetry and prose that need to be read word by word; The following picture shows that the layout of the digg homepage of the original horizontal visual stream has been adjusted to become a vertical visual stream. In addition to the big picture, users will choose one of the three columns to browse vertically until they find a certain target information, and then browse the details horizontally. The vertical height limit of the web interface is smaller than that in the horizontal direction, because users are used to scrolling up and down to browse more information. When users are still determining the target information, vertical visual flow can help users get more information without scanning back. As shown in the following facebook calendar interface, when the timeline is arranged horizontally, due to the limited width, it is necessary to switch horizontally or scroll bar to view more dates: adjust the timeline direction to be vertical, and users can view all the dates of the current month more efficiently by scrolling up and down. Diagonal visual flow can create a sense of movement and speed, but it is difficult to recognize words because of the inclination of the angle. A large number of text information arrangements are not suitable for this visual process, and are often used as embellishments in design or in interfaces with less information, as shown in the following figure. There is also a small diagonal visual flow on the web interface to reflect the sense of movement. With the curved visual flow, the user's line of sight will form a personalized curve with a sense of rhythm and liveliness. This type of eye movement has a large range, and long-term use will cause visual fatigue, which is not suitable for large-scale use. Generally, it will be combined with graphics to make a curved visual flow, so that the user's line of sight stays in the image area for a period of time; As shown below, add a picture to the curve visual stream, let your eyes stay at the picture node and browse the content of this node, and then continue to browse along the curve. 2) The visualization process of guidance is shown in the following figure. The guided visual flow will design an inducing element to attract the user's attention, and then notice the target information through the inducing element; Common inducing elements can be divided into lines, images including people or things, arrow letters and other indicators. This kind of visual flow should grasp the primary and secondary relationship between the inducing elements and the target information, and the simple inducing elements should not be too strong, otherwise it will weaken the spread of the target information; If the inducing element can contain some target information, the effectiveness of information transmission can be increased. As shown in the figure below, the red liquid in the tube is moving, attracting the user to reach the content form mentioned above in the target message along its moving direction, and leading from the picture or symbol to the next visual focus. From the visual process, it is also guided. The following two examples are the local use of guided visual flow on the page. 3) Jumping visual flow jumps between prominent or interesting information, giving people the right to choose independently, but it can also be designed by adjusting the strength of elements. As mentioned above in the model interface, the photos of the model are all information of the same nature, and the user's browsing is random to some extent, but it also conveys the priority by zooming in and out the portrait. 4) The line of sight of radioactive visual flow starts from the middle of the page, which makes the elements in the middle have the strongest impact and the clearest information transmission, and then forms a visual movement that diverges to the middle. For example, many cars, the main map in the middle can best reflect the core of information, and then spread to the navigation above or other service entrances below through the main map. The above four types of visual flow are typical, but they do not represent all. We can also design more creative visual streams. No matter which path, whether users browse smoothly and whether information is delivered in place according to priority is our goal. To sum up: 1. In the early stage of the project, we need to understand the atmosphere and content positioning created by the page; Information comes first with interaction, the core behavior of users; Pre-preparation can help the visual design process not deviate from the direction. 2. Establish information hierarchy through visual expression methods such as location, size, distance, content form and color. 3. Pay attention to the visual flow of the page during the design process and at the last moment to see if users can browse smoothly. We consciously give priority to the information that users pay attention to and show it visually, which is a very important responsibility of the position of visual designer. I hope these methods can help us perform this duty better. I also like it very much and encourage you!