当前位置:主页 -> 新闻中心 > 行业资讯


来源:http://www.jnzyjz.cn/ 发布时间:2023-09-21

Visual hierarchy refers to the orderly arrangement of design elements and how the audience's eyes capture them based on their importance. Visual hierarchy can be used to prioritize design elements and influence what you want users to see first. To establish an effective visual hierarchy, the following principles can be followed:
01 对比度/颜色
01 Contrast/Color
Colors can be used to highlight the importance of elements in a design. Usually, brighter colors are more likely to attract users' attention, while darker colors are easily overlooked. Therefore, visual designers typically use color and contrast to establish a visual hierarchy.
In fact, what creates a hierarchy is not the actual color of the element, but the contrast between the element and its surrounding background or other elements. This means that if an element forms a strong contrast with its surrounding background, it will become more prominent and become an important element in the visual hierarchy.
In the above image, we can see that the high contrast color on the button is the most eye-catching element. By clearly telling users where to go, we can provide them with a more enjoyable experience and increase the conversion rate in the required process. In addition, designers also highlight the visual hierarchy by using different types of comparisons to demonstrate the importance of special font handling.
For example, italicized words are usually more important than non italicized words, and similarly, underlined words are also more prominent than non underlined words. These subtle differences can be used to convey different messages and priorities to users.
02 规模/尺寸
02 Scale/Size
Using proportions to create a visual hierarchy is an intuitive way. Usually, larger elements are more likely to attract users' attention than smaller elements. A typical example can be demonstrated through the following brief test: What element did you first notice? What element did you notice next? What element did you notice last?
如果您注意到“drift”这个词,那么您的目光就落在了正确的位置。接下来,您应该注意到“Project Overview”这个短语。后,当您注意到“time is money”这个短语时,就完成了后一个元素的观察。
If you first notice the word 'drive', then your gaze is in the right place. Next, you should pay attention to the phrase 'Project Overview'. Finally, when you notice the phrase 'time is money', you have completed the observation of the last element.
03 使用字体大小时的佳做法
03 Best Practices for Using Font Size
Use no more than three font sizes: small, medium, and large. These three sizes provide sufficient diversity and are suitable for different levels of content such as titles, subheadings, and body text. In web design, the main text usually uses a font size of 14 to 16 pixels, subtitles use a font size of 18 to 22 pixels, and titles use a font size of 32 pixels to highlight. This design can make the information hierarchy clearer, easier to read and understand.
04 使重要的元素大
04 Maximize the most important elements
By designing the most important elements to their maximum, their importance can be highlighted. At the same time, make the secondary elements smaller. In order to strengthen the hierarchical structure, the maximum number of elements should be limited to two, so that they can stand out.
05 视觉层次的重要性
The Importance of 05 Visual Levels
Visual hierarchy plays a crucial role in design, helping users understand and interact. It increases the usability and ease of use of the design by:
1. Establish a clear structure: Visual hierarchy can help design elements be organized according to their importance and relevance, making it easier for users to understand the design.
2. Improving readability: By using different font sizes, colors, and layouts, text or other elements can be highlighted, thereby enhancing readability.
3. Guide users' attention: The visual hierarchy can guide users' attention, highlighting the most important information or operations.
4. Emphasize important details: By highlighting certain elements, their importance or relevance can be emphasized.
5. Help users browse information: Visual hierarchy can help users browse and digest information more easily, making it easier to understand and use.
The above is the question content explained by the website construction editor of Jinan for you. If you have any doubts or needs about this, please come to our website http://www.jnzyjz.cn Do consulting!