视觉层次结构可以成就或破坏您的设计。将您的消息发送给用户，或者让他们处于不知所措的状态，不知所措。要改善层次结构，您需要了解它的基础知识

什么是视觉层次？

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

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

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

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

视觉层次工具

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

1.尺寸

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

让我们以排版为例：

一旦你登陆这个页面，你就会得到一个关于你所处位置的快速介绍。产品的定义或标识。这同样适用于您在页面中使用的其他组件。

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

2.颜色

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

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

3.负空间

在一个非常不常见但必要的技术中使用的是添加负空间/空白。它隔离了主题，带来了更多的焦点。

4.键入重量

除了字体大小，字体重量也起着至关重要的作用。30px 的粗体字体会比普通字体吸引更多的注意力。在组件中结合粗体和常规带来更多对比度并定义内容的优先级

5.投影

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

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