富有视觉层次的网站如何设计

当网站的UI元素被组织和结构化时，人们可以轻松使用应用程序或网站，并对产品感到满意。

为了清楚地为用户组织UI中的内容，设计人员应用了一种称为视觉层次结构的着名技术。今天的文章提供了对这种方法的本质和帮助正确组织内容的工具的一般见解。

什么是视觉层次？

视觉层次结构是应用于设计过程的核心技术之一。它最初基于格式塔心理学理论，该理论检查用户对元素的视觉感知，并展示人们如何将视觉元素统一为群体。

视觉层次结构致力于以这种方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它组织UI组件，以便大脑可以根据物理差异（如大小，颜色，对比度，风格等）区分对象。

UI元素的视觉呈现对产品的用户体验有很大影响。如果内容组件看起来像一团糟，人们无法在产品中导航或正确地与其进行交互。此外，非结构化副本内容的易读性较低，因此用户无法快速扫描，他们需要付出巨大努力来区分他们一直在寻找的数据。这种糟糕的用户体验可能会导致用户满意度降低，这意味着产品不会受到太多追捧。

排版层次结构

复制内容是任何UI设计的重要组成部分。这就是为什么视觉层次结构通常高度依赖于排版。专家们决定通过创建一个称为排版层次结构的独立视觉层次系统来强调复制演示的重要性。

该系统旨在以最佳方式组织复制内容以供用户感知。设计师修改和组合字体，以构建最有意义和最突出的复制元素之间的对比，这些复制元素应首先被注意到，而普通的文本信息。通过调整大小，颜色和族以及它们的对齐来修改字体。

排版层次结构包括复制内容的不同元素，这些元素是标题，子标题，正文副本，号召性用语，标题和其他一些元素。要构建有效的可视化层次结构，需要将所有元素分割为不同的级别。让我们看看它们是什么。

初级。它包括头条新闻中最大的类型。初级水平旨在为用户提供核心信息，并吸引人们对产品的关注。

中学水平。这是应该易于扫描的复制元素类型。它们通常涉及子标题和标题，可帮助用户快速浏览内容。

高等教育。正文和一些其他数据构建了第三级。设计师经常应用相对较小的类型仍然应该保持足够的可读性。

由于复制内容通常是UI中的主要信息源，因此设计人员需要逐步呈现数据。通过将复制元素分割成不同级别，设计人员可以帮助用户轻松地从一个副本转到另一个副本，并以正确的顺序感知信息。

还有一点需要注意的是，在为移动产品创建排版时，建议设计人员将层数保持在两个之内。问题是小型移动屏幕不能为三个级别提供足够的空间。这就是为什么辅助级别的元素（例如子标题）要求移动UI看起来干净的原因。

视觉层次工具

当设计师已经选择了所有内容组件时，就可以创建订单了。让我们找出有助于设计人员设置UI组件的有效视觉层次结构的内容。

尺寸

视觉材料转换最强大的工具之一是尺寸。根植于人类的思想，大事物比小事物更重要。这就是为什么用户的注意力首先会自动转移到大词或大图片上。
设计人员需要区分每个内容元素的重要性级别，并根据此数据将组件转换为大小。

颜色

在我们之前的文章中，我们已经提到颜色对用户的感知有很大影响，因为它可以作为视觉层次结构创建的有效工具。

颜色有自己的层次结构，由用户心灵的影响力来定义。有大胆的颜色，如红色，橙色和黑色，很容易引起注意。另一方面，有白色和奶油色等弱或柔软的颜色作为背景更好。

使用不同的颜色，设计师可以支持UI元素的轻微层次结构。例如，如果其他UI元素是在较柔和的调色板中创建的，那么粗体颜色的CTA按钮肯定是用户看到的第一件事。

对比

层次结构基于对比度本身。一个元素与另一个元素形成对比，用户可以看到内容元素之间的差异。可以通过视觉差异（包括尺寸，颜色和样式）创建对比度。仍然，建议保持对比度的平衡，以便一个对象不会完全掩盖其他对象。

负空间

在用户界面中可以有许多组件，并且使用户眼睛看起来需要为他们提供一些私人空间。负空间或空白区域是设计构图中元素之间的区域。一些设计师通常不会将白色空间视为设计的一个组成部分，专家们仍将其作为一种有用的工具，帮助构建合适的组合。元素之间的适量负空间将帮助用户注意并感知每个元素中的每一个。

接近

如上所述，视觉层次结构建立在格式塔原则之上，因此设计师非常关注UI元素的接近程度。由于人们倾向于将视觉元素统一到组中，因此需要将UI组件放置在这种方式，以便用户对其进行分类。如果某些元素放置在某个附近，用户会自动将它们视为一个组。设计人员可以使用邻近作为一种工具，有助于将内容划分为子类别。

重复

如果人们注意到某些元素看起来相似，他们可能会自动将它们统一到一个组中。这就是重复的方式。设计人员故意为不同的对象重复某些模式，以便用户可以统一它们。例如，在页面上具有大量正文副本的网站可以用另一种颜色突出显示最重要的句子。看到这种颜色的句子用户可以从一个关键点到另一个关键点。

视觉层次结构是有效信息架构的基础。当UI元素的结构和组织方式，人们喜欢使用产品，它将更有效地解决他们的问题。此外，强大的视觉层次结构改进了导航系统，因为人们可以更好地定位产品。请继续关注并准备好下一篇关于视觉层次结构的文章。