视觉层次结构是用户按重要性处理信息的顺序。在界面设计中，就像在任何其他形式的设计中一样，这个概念对于在视觉上发挥作用是必要的。通过正确使用层次结构，大脑可以对元素进行分组和优先排序，从而为它们赋予特定的顺序，这有助于理解你想要传达的内容和用户的成就感。

界面设计中的一个常见问题是过度使用分散在屏幕上的元素或组件，如果没有通过正确的层次结构放置这些元素或组件，就会导致导航混乱和更费力。对这些元素进行优先排序对于避免这个问题很重要。

普通用户倾向于“扫描”屏幕的全部内容。因此，亮点应该清楚地说明网站或应用程序的内容。

这种优先级排序不仅应视为审美问题，而且应视为用户体验的重要组成部分。许多包含的元素，尤其是在移动设备中，将与站点导航相关。虽然平面设计中的层次结构已经存在多年，但不断的交互因素被添加到 UI 设计中。用户与元素交互的事实使得设计直观的界面更加相关。

要创建正确的层次结构，必须考虑七种资源：

尺寸

元素越大，就越能引起人们的注意。人们首先看到较大的物体是事实，这包括文本和图像。使用大小层次结构背后的想法是提供一个焦点来开始视觉之旅。

如果从一个文本到另一个文本的跳转较小，比如从 32pt 到 24pt，那么在同时发送两条消息时，阅读顺序会变得更加困难。这可能不是一个大问题，但您应该记住，这可能会创建一个效率较低的层次结构。

重要元素太大也同样没有必要。造成不必要的不平衡最终可能会使设计的其余部分黯然失色，并导致其他信息在阅读中丢失。就像设计中的其他一切一样，平衡是关键。

颜色

明亮的颜色比柔和的色调更引人注目。颜色是一种强大的视觉资源，它的正确使用可以有效地分离屏幕中的元素，从而确定它们的优先级或优先级。在界面设计中，最强烈的颜色通常用于交互，因为用户需要采取行动或从系统接收反馈。

使用颜色创建层次结构的方法有以下三种：

色调：有些颜色比其他颜色更突出。色调可以为人类视觉造成多种类型的冲突，红色与绿色、蓝色与黄色或绿松石色与棕色。

饱和度：饱和色比灰色更突出。灰色和它们的比例总是倾向于被高饱和度的颜色降级，这甚至给用户更多的亲近感。在灰色背景上使用红色就是一个例子。

亮度：明亮的颜色比深色更突出，反之亦然。在深色背景上使用明亮的元素会创建一个直接的层次结构，这也适用于我们有白色背景和一些深色元素的情况。

重要的是要知道滥用颜色最终会使用户感到困惑，因为它会产生一种错觉，即构图中的一切都很重要。另一方面，等级制度的想法始于将自己定位在最相关的东西而不是不相关的东西上的想法。

接近

彼此靠近的元素比远离的元素吸引更多的注意力。在创建阅读顺序时，使用距离分组是一种非常可行的资源。人的视觉倾向于对元素进行分类，因此，进行这种聚合从根本上方便了用户的脑力劳动

因此，邻近性是设计中的对象分组以创建连接和关联。当事物更接近时，通常意味着它们必须相关。如果事情离得更远，那应该意味着它们可能没有关系。简而言之，邻近性创造了这些关系，并为信息带来了组织和层次结构。

结盟

任何与其他元素分开的元素都会引起注意。这是因为对齐在元素之间创造了秩序，这条规则的任何变化都会引起人类视觉的兴趣，因此会相当突出。

元素的对齐对于在界面设计中创建视觉连贯性非常重要，因为它可以为屏幕上的元素分配相关性，还可以建立特定元素的开始和结束，无论是交互性的还是信息性的。

人脑喜欢模式，这就是为什么许多最好的网站都是对称的。这让我们有机会打破这个规则，从战略上唤起用户对特定点的注意。用户将能够根据它们的对齐或未对齐来关联这些元素。

重复

重复的样式给人的印象是元素是相关的。这种类型的层次结构包括在界面中重复使用相同或相似的元素。重复还基于视觉模式提供了一些优势。如果重复某件事，那是因为它很重要。

在界面设计中，重复在整个体验中营造出一种统一感和一致性。例如，在这篇 Medium 文章中，字幕 (h2) 被标记为重复样式，使用粗体和更大的字体大小给用户一种基于重复的方向感和层次感。我们必须知道，人性会在熟悉中找到安慰。

负空间

元素周围的空间越大，它产生的注意力就越多。负空间是显示空白画布的区域，这不仅可以在同一元素周围找到，也可以在同一元素之间和内部找到。它不适合单一的颜色，而是采用背景的颜色来营造空间的错觉。

虽然有些设计师可能认为越多越好，但视觉感受却大不相同。具有大量封闭元素的设计会导致界面饱和，并且没有层次结构指示哪个元素更重要，从而导致用户感到困惑和不知所措。

这个想法是，元素越重要，它周围的负空间就越多。将一个元素与其他元素隔离开来不仅是创建层次结构的一种优雅资源，而且还可以为设计提供支持结构。也就是说，它创造了必要的空间，以便视图可以流畅的方式从一个元素传递到另一个元素，而没有视觉噪音。

质地

多变和复杂的纹理比平坦的纹理更能吸引注意力。墙壁的平坦表面将比人行道表面更突出。这是因为复杂性总是会比极简主义吸引更多的用户注意力。纹理的使用还结合了其他重要的设计元素，例如风格和氛围。

这种资源应该以剂量的方式使用，因为纹理的滥用最终会分散注意力而不是通知或可能导致不必要的 squeumorphism。纹理往往会与其他层次资源重叠，包括大小，因此在合并纹理元素之前，您必须考虑整个构图以及用户将在其设备屏幕上看到的所有内容。同样，平衡是关键。当设计没有清晰的视觉层次时，用户的导航将被迫进入其他形式的阅读，例如 F 和 Z 模式。作为设计师，我们可以加强这些模式或打破它们以找到更多动态的交流形式。在 UI 设计中，没有什么是审美的，视觉层次无疑是我们拥有的最好的武器之一，可以指导用户体验，重新推动设计标准，并提供通往界面目标的直接途径。