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.

图片

picture

在上面的图片中，我们可以看到按钮上的高对比度颜色是引人注目的元素。通过明确告诉用户应该去哪里，我们可以为他们提供更愉悦的体验，并增加所需流程中的转化率。此外，设计师还通过使用不同类型的对比来突出显示视觉层次结构，以展示特殊字体处理的重要性。

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?

图片

picture

如果您注意到“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

使用不超过3种字体大小：小号、中号和大号。这三种大小提供了足够的多样性，适用于标题、子标题和正文文本等不同层次的内容。在网页设计中，正文通常使用14到16像素的字体大小，副标题采用18到22像素的字体大小，标题则使用32像素的字体大小来突出显示。这样设计可以让信息层次更清晰、易于阅读和理解。

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.建立清晰的结构：视觉层次结构可以帮助设计元素按照其重要性和相关性进行组织，从而使用户能够更轻松地理解设计。

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.提高可读性：通过使用不同的字体大小、颜色和布局，可以突出显示文本或其他元素，从而增强可读性。

2. Improving readability: By using different font sizes, colors, and layouts, text or other elements can be highlighted, thereby enhancing readability.

3.引导用户的注意力：视觉层次结构可以引导用户的注意力，从而突出显示重要的信息或操作。

3. Guide users' attention: The visual hierarchy can guide users' attention, highlighting the most important information or operations.

4.强调重要细节：通过突出显示某些元素，可以强调其重要性或相关性。

4. Emphasize important details: By highlighting certain elements, their importance or relevance can be emphasized.

5.帮助用户浏览信息：视觉层次结构可以帮助用户更轻松地浏览和消化信息，从而使其更易于理解和使用。

5. Help users browse information: Visual hierarchy can help users browse and digest information more easily, making it easier to understand and use.

以上就是济南网站建设小编为您讲解的问题内容了，您对此有怎样的疑惑或者需求就来我们网站http://www.jnzyjz.cn做咨询吧！

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!