作为用户界面设计师、产品设计师或 UX 设计师，视觉层次结构在视觉设计过程中起着关键作用。

视觉层次结构会影响用户在完成产品任务时与产品交互的方式以及他们的整个体验。

究竟什么是视觉层次结构？

视觉层次结构是指如何对设计元素进行排序，以及眼睛如何根据其重要性级别捕获这些设计元素。

视觉层次结构用于对设计元素进行排名，并影响您希望用户查看它们的顺序。

视觉层次结构使用以下原则执行：

对比度/颜色

颜色可用于赋予设计中元素的重要性。

当然，较亮的颜色比较暗的颜色更有可能引起用户的注意。

在设计中使用对比度和颜色来显示视觉层次结构是视觉设计师的常见做法。

创建层次结构的不是元素的实际颜色，而是元素与它出现的背景或它出现的其他元素之间的对比度。

在上图中，您会注意到按钮上的主要高对比度颜色是最重要的号召性用语。

通过帮助用户了解您希望他们去哪里，您可以为他们提供更愉快的体验，并提高所需流程中的转化率。

此外，斜体字比非斜体词更重要。

这同样适用于带下划线和无下划线的单词。

规模/尺寸

使用比例来显示视觉层次结构很容易理解。

大元素往往比小元素更快地吸引用户。

一个典型的例子可以通过借助图片所示的设计进行下面的简短测验来展示：

您首先注意到的是什么元素？

你注意到第二个元素是什么？

您注意到的最后一个元素是什么？

如果您首先注意到“漂移”一词，那么您走在正确的轨道上。

前者应该引起您注意的下一行是短语“项目概述”。

之后，“时间就是金钱”引起了你的注意，然后是最后一个元素。

使用缩放时的最佳做法：

使用不超过 3 种尺寸 - 小号、中号和大号。

三种大小提供了足够的多样性 - 考虑标题，子标题和正文副本的类型大小 - 但仍然保持层次结构关系的定义和清晰。

在网页设计中，正文副本的大小范围为 14px 到 16px，副标题的大小范围为 18px 到 22px，标题的大小可能高达 32px。

把最重要的元素做大。

通过使其最大化来强调设计中最重要的方面。同样，使不太重要的元素更小。

将大元素的数量限制为最多 2 个，以便它们脱颖而出并加强层次结构。

视觉层次结构的重要性

在设计中，视觉层次结构在指示用户如何与设计交互方面起着非常重要的作用。

视觉层次结构对于以下角色很重要：

a.为您的设计添加结构

b.创建设计的可视化组织

c. 创建方向并指导用户

d. 强调设计的重要细节

e.帮助查看者轻松导航和消化信息

在设计过程开始之前，确定哪些元素比其他元素更重要，然后应用这些原则来实现层次结构顺序。

点击UI设计公司，查看更多内容

UI界面设计公司,UI设计公司排名,武汉UI设计公司,人机交互设计公司,UI外包公司