设计 101：为什么设计中的视觉层次很重要

我们每天看到的内容数量是惊人的。 所以我们依靠它的组织方式来理解它。 这就是为什么书籍有章节，电影有场景，播客有剧集以及设计中有视觉层次的原因。

视觉层次结构是关于你的内容的组织。 你可以用它来明确什么是最重要的，什么是最不重要的，以及介于两者之间的一切。 您的每个受众成员都可能以稍微不同的方式解读您的广告素材。 但是通过设计中的视觉层次，你可以给他们一些提示来引导他们。

是什么让这如此重要？ 那么观众的眼睛首先被吸引的内容将被认为是最重要的。 之后引起他们注意的元素将进行相应的排名。

在设计中定义视觉层次

根据 Nielsen Norman Group 的说法， “视觉层次控制着体验的传递。 如果您很难确定在页面上的哪个位置查看，则其布局很可能缺少清晰的视觉层次结构。”

换句话说，视觉层次涉及安排设计元素，以显示它们中的每一个相对于彼此的重要性。 设计师构建他们的设计，以便人们能够轻松阅读和理解正在传达的信息。

当元素以一种有凝聚力和逻辑性的方式布置时，设计师能够影响观众的看法。 既然我们已经向您介绍了设计中的视觉层次结构，让我们来看看如何实现它。

视觉层次的重要性

在最基本的层面上，视觉层次有助于引导读者浏览他们所看到的内容。 它告诉他们所提供的信息中最重要的部分。 它还向他们展示了如何将信息分解为部分和类别。 他们应该首先检查内容的哪些部分。

此规则同样适用于文本、视频、图像或任何其他形式的设计。 使信息易于理解，以您想要的方式呈现，是设计中视觉层次结构的最终目标。 它在您要呈现的各种内容之间建立关系。 并帮助您给观众留下特定的印象或信息。

当您提高可读性并在视觉上引导观众时，您试图传达的信息将得到加强。 如果不使用视觉层次结构，您在开发营销活动中的所有辛勤工作都可能付诸东流。 那么让我们来看看它是如何实现的。

在设计中创建视觉层次结构的方法

在您的每一项营销资产中，坚持设计原则至关重要。 它创造了出色的用户体验。 当涉及到设计中的视觉层次结构时，您需要牢记以下几点：

记住阅读模式

大多数人从上到下，从左到右阅读一页。 或者他们至少熟悉这个约定，即使他们也以其他方式消费内容。 这可能会使规划设计听起来像一个简单的过程。 但这里的设计师手头的任务实际上要复杂得多。

最近的研究表明，人们通常会浏览一个页面，然后决定它是否足够有趣以供他们阅读。 扫描模式与我们所知道的阅读模式不同。 它们通常采用以下两种形状之一：F 或 Z。因此，当您试图吸引观众的注意力时，重点关注这些区域非常重要。 让我们看看每种模式的全部内容：

F模式

有大量文字页面（想想博客和电子书）？ 那么 F 模式将是布置它们的最佳方式。 这是因为读者会快速向下浏览页面左侧，然后寻找他们感兴趣的关键字。 他们会在左对齐的标题或前几个主题句中查找这些内容。

如果他们发现有什么吸引他们的眼球，他们就会停下来继续往右边走。 生成的扫描模式看起来像 F（甚至是 E）。 想知道如何将其纳入您的设计中？ 只需要求最重要的信息保持一致。 使用短而粗的标题、项目符号和其他吸引眼球的标准也将有助于分解原本沉重的段落。

Z 模式

如果没有像上面这样的文本块，则 Z 模式将适用。 一个很好的例子是登陆页面设计和/或广告创意。 在这里，读者的眼睛自然会首先越过页面顶部。 他们知道这是最有可能获得重要信息的地方。

然后他们直奔对角线的对角。 他们在页面的最底部重复扫描。 大多数设计师都利用这一点。 他们通过将所有最重要的信息放在页面的最顶部和最底部来做到这一点。 然后他们将所有其他需要阅读的信息放在对角线的顶部和底部。

考虑规模和规模

如果某件事响亮而清晰，您会更容易听到它，对吗？ 在设计中视觉层次的情况下没有听觉体积。 但是所使用的设计元素的大小和规模肯定有类似的效果。 元素越大，人们就越有可能看到它并关注它。 这就是为什么层次结构顶部的元素需要更大的原因。

不那么重要的元素可以缩放以显得更小，从而减少可见性和强调。 这将把它们推到重要性等级的较低水平。 这并不意味着布局中最重要的东西就必须是巨大的。 这就是为什么缩放很重要。 尺寸需要适度使用，相互关联。 而且还很有品位，因此它们不会带走设计的视觉吸引力。 看起来太大的元素会使设计的其余部分黯然失色。 太小的元素将完全丢失给读者。

使用颜色和对比度

在设计中实现视觉层次的另一种方法是使用颜色和对比度。 假设您的设计或网站页面都是黑白的。 如果你给一个特定的区域带来一点颜色，那将成为主要的焦点。 理想情况下，设计师应该用一些明亮的色彩流行来装饰设计中最重要的元素，以使它们与较浅的元素相比脱颖而出。

这就是为什么学生在教科书中强调的原因。 它可以帮助他们专注于关键点，而不是阅读大量文本。 同样，设计中较亮的颜色元素会在其他元素之前引起读者的注意。

如果你看到你的设计中有很多鲜艳的颜色，争夺注意力，一定要和你的设计师联系。 如果他们不清楚哪些信息需要在层次结构中更高，他们可能没有以最有效的方式使用对比来实现您的目标。

在设计中具有高对比度会将焦点集中在观众必须看到的特定元素上。 视觉层次中的对比色也会影响元素之间的感知距离。 暖色在深色背景上更加突出。 与相同背景上的冷色相比，它们看起来更接近读者。

相比之下，与暖色相比，冷色在较浅的背景上会显得更亮、更近。 然而，设计师应该只使用适量的颜色对比。 如果过度使用，设计中的所有内容都会显得很重要，读者将不知道该去哪里找。 他们甚至可能感到不知所措。 你知道这会导致什么——完全失去他们的注意力。 永远记住，视觉层次需要成为观众的指南。

玩弄空间和纹理

在设计中创建视觉层次结构的一种巧妙方法是在其中的元素之间留出足够的呼吸空间。 例如，如果 CTA 按钮周围留有足够的负空间，则会引起注意。

继续讨论纹理，当人们谈论设计中的纹理和视觉层次时，它具有非常具体的含义。 它是指设计中空间、细节甚至文字的整体安排或格局。

与尺寸和比例类似，纹理是一种有用的工具，可以将观众的注意力引导到设计的特定部分。 通过纹理深度和形状可以创建，使您的设计更具视觉吸引力。 但是你可以拥有太多的好东西。 纹理过多的设计最终会让人感到困惑、分散注意力，而且整体上难以理解。

使用不同的字体和排版层次结构

您使用的字体不应相互竞争以获得视觉或印刷层次结构。 重要的是要考虑不同字体的配对方式，以及任何给定字体的可用变体。

例如，Times New Roman 等字体由不同的字体组成，这些字体具有不同的粗细、样式和大小。 您的设计师在决定使用哪些选项时需要考虑设计中的视觉层次结构。

在一个好的设计中，相同字体的不同大小、样式和粗细可以组合使用，以使某些单词比其他单词更突出。 将太多不同的字体或字体组合在一起会使设计没有吸引力和忙碌，所以避免这样做。

通常更大更粗体意味着信息被解释为更重要。 与此同时，更小更薄的文本被认为不那么重要。 如果你只看杂志或报纸，很明显标题如何以粗体大字出现在顶部，而副标题紧随其后，最后是最小字体的副本。 这是一种基础级别的方法，可以包含在许多不同类型的设计中，无论设计的目的是什么。

这是一个快速细分：

• 01 级排版将是页面上最重要的。 此内容通常由标题组成，并且必须是客户首先看到的内容。
• 02 级排版也需要突出显示，但没有 01 级那么多。 这些将有助于将设计组织成具有相关正确信息的组。 它还有助于分解文本并为阅读它的人提供某种方向的提示。
• 03 级排版是正文的组成部分。 它应该仍然清晰易读，但也将是使用的字体中最小和最轻的。

当你在设计中有这些不同的层次时，向读者展示什么是重要的就变得更容易了，而不必如此“当面”。

注意平衡和对齐

设计中的任何对象都带有一定的重量，就像它们在物理世界中一样。 这在设计中称为视觉重量。 一个元素相对于设计中其他元素的对齐可以显着改变其视觉重量。

例如，如果对象向左对齐，那将首先引起用户的注意。 设计中的其余元素（乍一看）将融合在一起。 设计中的这种视觉重量也需要有适当的平衡。

大小、形状和对比的巧妙运用可以暗示平衡。 它可以通过对称、平等甚至不对称来实现。 把不对称想象成镜像的鲜明对比。 您不会看到反射，而是会看到均匀分布元素的东西。

考虑您的设计风格

您设计的风格或美学将帮助您强化主题并吸引用户。 样式实际上可以包括从排版到颜色甚至间距的所有内容。 如今，一些最流行的设计风格是有机的、扁平的、极简的、拟物化的、插图的或复古的。

使您的内容更加突出的另一个好方法是将设计风格与内容风格相匹配。 如果需要融入的内容很少，那么接下来的设计也可以按照极简主义的主题来做。

打破网格

登陆页面布局是根据网格模式设计的，网格模式是在设计上放置垂直和水平线时创建的。 在一个如此成熟和结构化的系统中，只有一种方法可以建立层次结构——打破网格。 现在我们的意思不是完全摧毁它。 但是以曲线或对角线排列的文本肯定会在放置在网格中的所有其他文本中脱颖而出。 因此，尤其要将此策略用于头条新闻。

玩作曲

当有结构来创建视觉层次结构时，设计会更好。 这就是所谓的设计中的组合。 几个世纪以来，艺术家们依赖于许多不同的构图技术，其中许多至今仍在使用。

• 三分法是创建动态构图的好方法，其中焦点不必总是放在中心。 Instad，这条规则说你可以将网格布局分成三个等距的部分，并将四个焦点放在线条相交的地方。

• 赔率规则表明，奇数个元素比偶数个元素对人眼来说更有趣。 想想两侧被另外两个物品包围的焦点。 请看下面使用 3 个主题的示例。

确保设计中视觉层次结构的最佳实践

最后，这里是一些你应该记住的东西的快速浏览，作为设计中视觉层次的最佳实践。 使用这些技术将有助于为您的观众创造更好的体验：

• 在移动 UX 设计的情况下，小屏幕上的用户需要能够立即看到元素，并且他们应该能够轻松地浏览内容。
• 选择字体和字样时要小心。 精细的草书字体可能适用于某些行业，例如婚礼策划。 但是带有某些效果的装饰性文字可能会分散注意力，还会降低可读性。
• 知道用户的优先级是什么。 您希望能够使用按重要性排序的信息来指导用户。 如果强调设计中的所有内容，则会适得其反。 您还需要知道需要分配相同重要性级别的元素。
• 永远记住您希望通过每个设计实现的最终目标，并确保您清楚地向您的设计师阐明这一点。

视觉层次是给设计带来秩序的方式

如您所见，您可以通过多种方式将视觉层次结构整合到设计中。 通过这样做，您可以清楚地传达您的信息。 如果做得好，这将使设计保持平衡，并显得专业。 它将获得对最重要的内容的适当关注。 这可能需要一些试验，尤其是使用一些非常规的方法来实现这一点。 但请坚持下去，因为总有一种方法可以使用视觉层次来使设计更具影响力和技巧。