真人街机捕鱼

Your Position: Home > News > Taoyuan Website

Eight design methods to guide users' visual focus in web page production

Date: 2016-12-1 9:33:35 Popularity: label:
share to:
In the design, you can use some directional design elements such as: color characters, action, and white space to let users' eyes follow the guidance of page elements to complete the attention and absorption of information. In this article today, I will share several methods and techniques for guiding vision, and let's collect them together.

1. The shape of the point of sight is not all round, or some kind of concrete element.

For example: the size contrast that appears in the entire page, then small elements can be called points. Large elements can also be called dots. It is a relative term. In fact, when a little bit appears on the page, it can quickly attract users' attention. When a little more appears, the user's attention at this moment is distracted. When encountering points of different sizes at the same time, the user will focus on the larger point first, and then the smaller point.



Top left 1: The line of sight will first focus on the bright red strawberry on the right. The two reasons are because the color contrast is because the area contrast points are relative here. You can think of the elements that appear as a whole. But first there will be a focus to attract the attention of users;
Top left 2: point-of-focus design, centered position allows users to focus directly on the center of the content;
Bottom left 3: The point here is even the highlight in the page. It is the cyclist who rushed out of the picture on the right side. This performance breaks the stability of the picture, making users pay attention to the characters who break the picture first, and also reflects the nature and adventure of outdoor riding;
Bottom left 4: The concentrated design of dots, the circle in the middle is the dot, and the cutlery on the two sides is the line, which is a typical centered composition;

In practical applications, it can be divided into:
The element that catches the eye the first time. The points in the picture have obvious contrast in size, color, and shape.
Bright points mean that the shape or details of the points in the picture are different from other elements and become the main vision in the picture.


Left: Mainly hand-drawn black and white lines, using the primary colors of food to form the visual points of the picture, to guide users to jump through browsing;
Right Figure 1: Centered point design, where vision will focus. The large area of white space makes the picture very clean. There are no other elements that interfere with the sight except the main product. Mainly in 3 kinds of special scenes, recommend different products to users;

When you are designing
1 、 The contrast of the picture elements is not obvious, when the overall vision is very average:
You can adjust the size or color of the design elements according to the design needs and the purpose of the activity, so that the points to be highlighted are more prominent.
2 、 When there are too many texts in the layout, users don't know what to look first?
At this time, you can try to process the glyphs, colors, etc. of the main copy to make the user's eyes have a focus. Or you can try to adjust the level of the text to make the highlight stand out and the weakening weaken.
2. There are many action designs for characters.
Direction of action.
This kind of pointing can be reflected in various poses posed by the model, and the pointing of the specified content can be completed by adjusting the direction, position, and typesetting of the model elements. When doing some design with the model as the main element, you can make good use of the model's every move.


Practical applications:
For example, in the performance of some sports activities: dynamic, vitality is the main entry point for this type of demand. In the selection of character movements, try to find some models with large and exaggerated movements to complete the basic appeal of "moving".


Left: In the action of the model character's arms movement, the position of the left hand holding the ball is placed on the text, and the color of the text is white, which makes the user pay attention to that part of the content for the first time. Among them, the position shown on the right hand has an action of helping the ground, and this action is also cleverly combined with the recommended product, so that the user's vision can be browsed down and focused.
Right picture 2: On the first screen, the model's action in the image has a hint of "show", showing the user his 8 pack abs (hee hee). The second is the fist pointing displayed by the character, which also brings the user's visual focus closer to the text on the left side of the screen. On the second screen, the direction shown by the model's eyes pointed to the content on the right.
When you are designing
1 、 When choosing a blockbuster model, you must first consider whether the model's actions should be combined with the needs of copywriting and composition when using the model as the main visual element. Then select or shoot action material suitable for the purpose of the activity with pointing;
2 、 When using model materials, make full use of the model's movements, expressions, and visual directions of eyes, and arrange the appropriate vending content to the correct position according to the browsing track.
3, the role of eyes, implies that the specific content pointed by the model, it has a clear direction.
When you look at me, when I look at you, when you look at it, as people's attention moves, the focus of people's attention will also be adjusted accordingly.


In practical applications:
When you look at things with different eyes, in fact, your eyes have a purpose-oriented role. People will follow the direction of your eyes as you point them. It will hint the user's eyes, follow the direction of the model or element, and focus on the specified information. This is a way to use the eyes of a model to attract the attention of users.


Left 1: The character ’s upward gaze guides the user to focus on the person ’s upper body first, and then follow the character ’s gaze upward to focus on the four pieces of information at the top of the character.
Left picture 2: The front, upward, and right eyes of the character guide the user's eyes to the corresponding information.
When you are designing
1 、 Follow the direction of the model's face and the direction of his eyes to arrange important and secondary information to the corresponding positions. This would imply that the user's eyeball is looking in the direction shown.
2 、 Don't ignore the expression of the model, it is actually very important. Imagine that when you want to express an innocent and childlike picture, the model you choose has a stiff expression and a dull look, as if you owe 500 salaries, does it seem silly?
3, up, down, left and middle, front and back and sides!
Direction, used to indicate a certain position.
Arrows, straight lines, and oblique lines all have clear directionality. They are good elements to guide users' eyes. Not only does it have a clear directionality, but it can also divide the picture and hierarchically space the information.
In some scenarios, the elements that indicate the most directions are the arrows of various directions. It is a design element that prompts the user and implies action.


In practical applications:
If you want to point out the content you want to pay attention to, the best way is to use the direction of the line and arrow elements.


Left: Lines have clear directionality and rhythm. The straight line has the characteristics of male, it is strong and relatively stable. The curve has a soft and smooth impression;
Left: Vertical line with clear upward and downward pointing effect.
When you are designing
1 、 In the design needs of fashion and clothing, the flexible use of small and short-line elements can help you strengthen the level of text, modify the details of the picture, and remind the place of emphasis. Different lines have different visual sensations. For example: the thick line gives a man a powerful impression; the curve gives a soft and elegant feeling;
2 、 When using lines, dashes, and arrow elements, be sure to add them for the purpose of clear pointing. Don't add for the sake of adding.
4. A little red in Wanliu Cong, induced to focus and highlight a little red in Wanliu Cong, reflecting the directivity of color from this sentence.
Its advantage is to let the subject stand out from the interference of thousands of elements directly, and immediately grasp the user's vision.


Upper left 1: The red content slowly torn up by the character becomes the first focus of the user's attention, and the expressionless character creates a strange and horrible feeling to the picture.
Upper left 2: Kobe's Lakers Yellow became the visual focus first, guiding users to pay attention to their classic blue button action.
Bottom left 3: The use of red lines prompts the user to continue to browse downwards. The scattered short red lines are placed freely and disorderly on the main content of the page, so that the user's visual focus is focused on the content indicated by these lines.
Bottom left 4: The contrast of red and black makes the red on the left side of the character more obvious.

In practical applications, it can be divided into two situations:

Induction When faced with large format text, elements, and image information, human eyes need guidance, and color is one of the most straightforward forms.
Through the rational use of color, the most important information is emphasized to maximize the contrast of color. If the direction of the color is coupled with the direction of the element and the direction of the action, the color direction will be even more impactful.


Picture 1: Left: It is a typical green and red match. The overall color of the green color makes the red bottle at the bottom of the page stand out. After the user finishes reading from the top-down browsing habits, his eyes are fixed on this red element.
Picture 2 on the left: Bright and contrasting color patches are placed on the left and right sides of the screen, respectively, allowing the user's eyes to follow these color patches to activate the picture and enrich the overall effect.
The above example shows that the effect of color induction is similar to the finishing touch in the color scheme. Put the content you want to highlight in contrasting colors and mutual colors.

Gathering When there are more than two colors on the screen, the user's eyes will first focus on the prominent colors with high contrast and large area, then look for another color, and then browse all.


The above example shows that the core function of color aggregation is to highlight, contrast, and focus the content you want to highlight, so that the user's attention stays here and reads the information you want to convey to them.
When you are designing
1 、 This focusing method is more effective when using complementary colors with strong contrast to highlight the main content;
2 、 If there are many colors in the screen, you can use the area of the colors to classify all the information that appears on the page into important levels.
5. The blank design is more blank, the area next to the protagonist is large, the common force artifact, highlights the necessary tricks of the protagonist.
If the above-mentioned methods are designed for addition, then blank space is actually designed for subtraction. When there is a lot of white space around the protagonist element, the human eye will first find the design element without any obstacles from the complex environment of the entire page.


In practical applications:
White space is a concise design method that leaves the main character, blank, layered and compelling. The "white" of white space does not refer to the color of "white", but the blank "white". White space refers to the state where there are no extra elements in a certain area and the surrounding area is in a large area.


Left picture 1: The product is a special topic with only a few information pages, and a large area of white space around the product makes the form and details of the product more focused. At the same time, the treatment of leaving blank also enhances the brand's sense of quality and temperament.
Right picture 2: The entire page is very blank. Except for some flat design elements, most of the main screen appears in the form of "white".
When you are designing
1. Effective blanking can enhance the compellingness of the picture and make the protagonist to be more prominent;
2. Dare to leave blank: A large amount of blank will make the page have a sense of space, and will not be disgusted by the dense content of the page.
3. Use the most streamlined elements: Do not add unnecessary design elements, bring visual interference to users, retain only the core and necessary key elements, and describe the key elements in detail.
6, one two three four five six seven, 7654321
Numbers point, order points.
Most people have this experience. When they see the number 1, they have to look for the number 2. In some requirements, when it is necessary to use vision to draw the user's eyes, the number is used as the header, so that the user's eyes jump reasonably in the page.


In practical applications:
The use of digital elements often appears in catalog pages, development history, or product display.


Left 1: Rooney's kicking action and direction just point to the content area on the right, and the header represented by the number instructs the user to read one by one or scattered reading.
Right Figure 1: The role of the number is to instruct the user to continue reading downwards, a strong fire contrast between yellow and black.
Left picture 2: The large area of white space around the product makes the protagonist noticed first. The white heading number on the right serves the purpose of highlighting product discounts.
When you are designing
1. When doing fashion matching needs, you can use numbers to guide the order of products;
2. When using numbers as elements, control the size and font of the numbers as a whole. The numbers must not be allowed to affect the main content. Of course, if numbers are the mainstay, it is necessary to make the numbers as visual as possible.
7, too much movement seems to be noisy, quiet too dead appears to be stuffy, that is, the stillness and movement of the picture.
Dynamic elements are more appealing to users in the overall static page. Of course, this includes gifs on the page and dynamic performance of visual elements.


In practical applications:
The performance of the action can be performed by the action of the character, the product, and the gif. However, it is best not to move more than 3 or more elements on the same screen page in the screen, because each movement will cause people to make visual noise. If you move too much, it will inevitably distract users. Weaken the main content.


When you are designing
1 、 Instantly make the element dynamic: add motion blur to the element; add flying elements to the picture such as: confetti, red envelopes, slanted lines, etc.
2 The dynamic page can also use the more popular h5, parallax scrolling and other technologies to make different elements in the page appear according to the user's mouse scroll;
8. There are many ideas for copywriting design. The theme has a connotative copywriting. The writing pen is used to guide users to create a sense of screen.


The picture above is the restaurant name I took on the way to work. The good name is really memorable.
In practical applications:
In comparison, although the text is not as solid as color and less obvious as the action of characters, it is the most accessible form to people's hearts.


The detailed methods of the above two cases will be included in my new book. Remember to buy Kazakhstan then.
Picture 1 on the left: Like a local confession, the designer has completely found the entry point between copywriting and the image. Combining with the expression of cartoons, the drawn image vividly reflects the "luxury" of some local tyrants.
Right picture 1: 50% off the ceiling without leaving any effort. Through the divergence of the copywriting, the designer drew a machine that was igniting, as if to explode the feeling of the audience.
When you are designing
1 、 Good copywriting often associates with some elementary, color, and style keywords. Such good copywriting often has a higher degree of fit with the image.
2) The visual design of copywriting often resonates with users through concrete and abstract expressions of the meaning of the copywriting.
The above 8 points are my eight methods for guiding visual elements:
To sum up, there must be a visual point to guide your eyes.
There are many action designs for the characters.
Up, down, left, and middle, front and back and sides.
There will be a little red in the willow bushes, which will induce focus and highlight.
The blank design is more blank, and the area next to the protagonist is large.
One two three four five six seven, 7654321.
It seems too noisy if it moves too much, and it feels stuffy when it is too dead.
There are many ideas for copywriting design, and the theme has connotation.
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information