视觉层次结构可以成就或破坏您的设计。将消息发送给用户或让他们处于压倒性状态，让他们迷失在要采取的操作上。要改善层次结构，您需要了解它的基础知识

什么是视觉层次结构？

视觉层次结构有助于将用户的眼睛引导到他们需要知道的信息上，并相应地采取行动。加快决策制定并转化更多预期结果。

对格式塔设计原则的简要了解将为用户如何一起感知元素并与之相关提供坚实的基础。

那么，是什么创建了视觉层次结构？

我会说对比。由大小，颜色，类型，样式创建的对比度。基本上，UI元素的物理差异。让我们详细介绍一下

视觉层次结构工具

在UI元素中创造物理差异的工具，以建立我们内容的优先级

1. 尺寸

尺寸可能是最常用和最重要的工具之一。作为人类，我们在心理上认为较大的物体比较小的物体具有更高的重要性，因此我们的眼睛会更快地指向大文字，图片或任何视觉效果。

让我们以排版为例：

一旦您登陆此页面，您就可以快速了解您所在的位置。产品的定义或标识。这同样适用于您在页面中使用的其他组件。

你的眼睛知道在哪里看，这是层次结构101。

2. 颜色

应用此工具创建层次结构需要基本了解色彩心理学。

使用一些高对比度的颜色，您可以创建层次结构。将此颜色与较浅颜色的背景一起使用，反之亦然，即使您保持较小的文本大小，也会添加颜色工具。

例如，这里的“应用于驱动器”按钮由于颜色而迅速吸引注意力。此页面的整个色调（包括图像）已饱和，因此弹出CTA颜色

3. 负空间

在一种非常不常见但必要的技术中，使用是添加负空格/空格。它隔离了主题，使它更加集中。

在下面的屏幕截图中，整个第一折都有空白，中间有一个简短的介绍。它赋予信息力量并减少认知负荷

4. 类型重量

除了类型大小，类型重量也很重要。30px 的粗体字体会比常规字体更吸引注意力。在组件中组合粗体和常规会带来更多的对比度并定义内容的优先级

5. 投影

这是我一路走来学到的东西。在包含多个数据点的拥挤页面中，我们如何使用阴影来聚焦卡片组件。添加更宽的阴影可提供更大的深度，并在 z 轴上提供更隆起的视觉提示

现在，您设计了所有内容，使用所需的工具来建立层次结构，以及如何测试自己的设计。一种方法是让你的眼睛休息2-3分钟，休息一下，然后回来，但在看到它们时眯起眼睛。

我个人最喜欢的另一种方法是将图层模糊添加到具有 li'l 不透明度的白色矩形中。把它放在你的设计上，瞧，较暗的图案是用户将看到的图案。现在，判断你的设计是否是你打算做的。