https://img.zcool.cn/community/013d49620b7c4411013e8cd08d89e7.jpg

为了确保设计能够尽可能有效地传达信息，你需要有策略地进行设计，而不是仅凭直觉去判断来做。

 

回想一下那些被遗忘的艺术概念，如色彩理论和构图。这些基础有助于构建我们称之为“设计工具箱”的东西。

视觉层次是关于使用设计工具箱中的资源——颜色、对比度、排版、间距和其他基本原则——来组织内容并确定优先级。好消息是，这比听起来容易得多，所以要发现设计的禅意，请遵循视觉层次指南。

https://img.zcool.cn/community/01242f620b7c4511013e8cd05a16ea.jpg

什么是视觉层次？

https://img.zcool.cn/community/01006d620b7c4511013f01cda8a871.jpg

视觉层次结构是人类处理页面信息的顺序。这是一个对元素进行优先级排序的系统，以便它们更易于理解。如果没有视觉层次或设计结构，受众可能会不知所措，结果无法被任何东西所吸引和关注。这就是为什么以人眼可以理解的方式组织元素是很重要的。

 

 

人类如何处理视觉信息

https://img.zcool.cn/community/0159ef620b7c4511013f01cd18beab.jpg

在阅读文字时，大多数国家的人通常是从上到下，从左到右阅读。当然，也有例外，但如果你现在读这篇文章，可以肯定的是，你不是从最底层开始的。

 

阅读视觉信息的工作原理与此类似，但略有不同，多亏了视线追踪，我们知道这是真的。下面是我们处理视觉信息的两种主要方式（或为模式）。

• F 模式

这在文字较多的设计中是最常见的。它遵循“ F”的形状，从左上方开始，水平移动到右上方。然后，受众浏览页面左侧，寻找简短的标题或副标题，然后快速浏览右边。

• Z模式

密度较小的设计遵循“ Z”形。 受众从左上角开始水平移动到右上角，然后将视线向下倾斜投向左下角，最后移到右下角。

根据你正在设计的内容，这些模式可以很好地指示应该将最重要的元素放置在何处。

建立视觉流

https://img.zcool.cn/community/017697620b7c4511013e8cd037b96c.jpg

在网页设计中，标识几乎总是在左上角。这已被证明可以提高品牌知名度并改善导航。在印刷中，标识通常位于页面底部，并带有号召性用语，告诉受众在翻页之前要做什么。

两者都基于视觉流的概念。作为设计师，你要控制整个流程，以一种能够吸引眼球的方式放置对象。

在设计时，问自己以下三个问题：

1.受众的眼睛最初会去哪里(焦点)?

2.眼睛会去的第二个地方是哪里？

3.受众的视线最终会落到哪里？

从流向的角度考虑设计是一个很好的练习。即使有三个以上的元素，对上面三个元素进行优先排序将指示其他元素应该放置的位置。建立一个视觉流，以避免人们的目光在设计上茫然跳跃。

如何在你的设计中使用视觉层次

https://img.zcool.cn/community/018547620b7c4511013e8cd066f868.jpg

视觉层次结构最重要的功能之一是帮助建立最重要的焦点，为受众提供一个切入点，开始浏览设计并向他们展示最重要的信息所在。

让我们来回顾可以强调设计元素的一些不同的方法，以创建具有焦点和流动的清晰视觉层次结构：

1.使用大小来增强（或减少）可见性

你听说过“吱吱作响的轮子会得到润滑油”这句话吧。换句话说，最大的设计元素受到关注。放大一个对象的大小（它的尺寸）和比例（它的大小与其他物体的关系)），是赋予它视觉重要性的最简单和最有效的方法之一。

在这里，艾琳·兰卡斯特的超大设计元素——包括书页外的排版和一张大照片——让传播的主题立刻清晰起来。

https://img.zcool.cn/community/01c45f620b7c4611013f01cd7bd497.jpg

另一方面，那些不那么重要或者你想要弱化的设计元素可以缩小尺寸，让它们不那么显眼，从而降低视觉层次。

与任何设计原则一样，平衡和适度是关键。你可以用特大的焦点实现压倒性设计，或者用太小的次要信息来影响可读性。

2.颜色和对比度：直接观看者的注意力

我们在视觉上被颜色所吸引，尤其是当它被战略性地用于突出重要信息或图像时。无论是在路边的交通标志上，还是挂在当地咖啡店的传单上，都很难错过鲜艳的色彩，如红色或黄色。

https://img.zcool.cn/community/012b3b620b7c4611013e8cd06b44f8.jpg

但是，如果你将一个设计淹没在色彩斑斓彩虹般颜色中，这样的结果是，颜色可能对创建视觉层次结构产生不了任何影响。因此，请谨慎地、有目的地使用颜色是关键原则。

除此之外，在设计中，还可以有很多创造性的方法应用颜色和对比来引导观众的视线，包括:色温：颜色可以是冷色（如蓝色和绿色）、暖色（如红色、橙色和黄色）或中性色（如黑色、白色、灰色，有时还有棕色/米色）。混合色温——尤其是那些具有高对比度的色温——可以吸引很多视觉注意力。

这张剧院海报将生动的暖橙色与明亮的冷蓝色相结合，形成非常醒目的调色板，营造出视觉趣味并利用色温之间的对比。

https://img.zcool.cn/community/010199620b7c4611013f01cdef8eb4.jpg

保持一种色调，也可以帮助设计看起来更有视觉凝聚力。例如，传单和网站横幅采用相似的具有相似的色温，以追求视觉统一设计效果而不是强调重点。

https://img.zcool.cn/community/0115c9620b7c4711013f01cd4fa13f.jpg

颜色权重：一种颜色的明度或暗度被称为它的权重。就像温度一样，不同权重的颜色可以相互对比，产生戏剧性的效果，而相同值的颜色往往具有更相等的视觉权重。
在下面的设计中，展览海报设计的凸版在背景中采用了两种相似的浅色调。它与海军蓝形成鲜明对比，以强调标题艺术家。

https://img.zcool.cn/community/016b4a620b7c4811013e8cd0c29af9.jpg

饱和度：最纯净、最亮的颜色是 100% 饱和的。越接近灰色，饱和度越低。使用明亮或柔和的颜色（单独使用或一起使用）可以成为在设计中创建高对比度或低对比度位置的战略方法。

在这本书的封面设计中，强烈的红色突出了支持书名的视觉效果。它更突出，因为背景是褪色的中性色调。这件作品还具有色温（暖色和中性色）之间的对比。

https://img.zcool.cn/community/01f21f620b7c4911013f01cd6cf9d9.jpg

3.排版层次结构：从三个层次开始组织设计

对于任何涉及文本的设计（这是大多数设计），排版层次结构是视觉层次结构的一个组成部分，所以不能忽视。要了解排版层次结构的基本概念，只需想象一篇带有标题、副标题和正文的报纸或杂志文章。

https://img.zcool.cn/community/013e3e620b7c4911013f01cdba9acf.jpg

这个基本的、三个层次的方法可以应用于任何类型的设计，从创建自己的名片到网站。下面，分解其级别以及它们通常的用途:
• 第一级：一般来说，第一级排版将是最重要的内容。这应该是你设计中最直接可见的字体元素。• 第二级：第二级元素通常有助于将设计组织成部分或将相关信息组合在一起。它们不应该像一级类型那样突出，但应该清楚地将受众引向设计的不同部分，并帮助他们轻松地导航。• 第三级：对于文本密集的布局，第三级排版通常是设计的完整信息、目的或细节。它可以长也可以短——整篇文章、一个简短的注释、一个简短的描述——但这个级别主要关注的是它的高可读性，因为字体大小可能会有点小。

4.字体：仔细选择字体类别和样式

排版层次结构并不是排版时要考虑的唯一方面。字体本身的外观——类别（无衬线、衬线、脚本或装饰）和样式（粗体、斜体、小写字母等）——可以决定设计的成败。

把字体看作是人的个性类型。你知道，有些人是绚丽而张扬的，有些人是安静而有趣的，还有一些人是灵活且多变的，根据和谁在一起而有所适应。

适当地（以适合你的项目背景的方式）并战略性地利用这些字体特点来增强设计。虽然排版层次结构将组织设计，并使其易于导航，但风格选择有助于设计的整体情绪，并且是创造重点的自然方式。
例如，名片上包含了多种字体（衬线、无衬线和顶部的一些脚本），使用大小、颜色和粗体来帮助某些元素（例如他的姓名和电话号码）脱颖而出。

https://img.zcool.cn/community/0139c1620b7c4911013e8cd0ccc657.jpg

它之所以有效，是因为选择的字体相互补充。由于其清晰的层次结构，它们不会发生冲突，也不会争夺注意力。此外，大写文本有助于提高名片等较小尺寸设计的可视性。

封面采用了不同的字体，以形成对比。但字体却不相同，其中一个的手绘风格有意地与另一个的传统衬线设计相矛盾，在视觉上说明了书的标题，并创造了一个清晰的焦点。

https://img.zcool.cn/community/015185620b7c4911013e8cd0773403.jpg

5.间距：让布局保持平衡、流畅和集中

一般而言，白色（或空白）空间和间距是最容易被忽视的设计原则之一。但它也是最重要的设计之一。

当你未能在布局中规划一些空白区域时——也许是为了包含尽可能多的信息——可能会以混乱、令人困惑的设计告终。这是因为空白对于分隔和组织设计中的元素，并帮助它看起来有序和平衡至关重要。

你可能以前见过：网站或传单设计中塞满了信息、文本和图像，你甚至不知道从哪里开始查看。所以，不要做那些让受众望而却步的设计，因为它不可能有良好的导航作用。

始终计划未使用的空间。这对于以下内容至关重要：

• 为受众的眼睛提供休息的场所和穿行设计的路径;

• 将布局划分为不同的部分（这一做法的另一方面是邻近性——减少空间，以便将相关项目更紧密地放在一起——也是良好间距的一个方面）。
以下编辑设计做到了以上两点，在布局的每个部分之间和周围留出大量空白，同时将相关项目组合在一起，其结果是一个干净和平衡的设计。

https://img.zcool.cn/community/019c2a620b7c4a11013f01cd101e76.jpg

• 隔离焦点

这种包装用白色空间围绕产品的品牌名称，以将您的注意力集中在那里，并使其在彩色图案背景下高度可见。

https://img.zcool.cn/community/01a122620b7c4a11013e8cd06b1131.jpg

6.构图：给出设计结构

你可以使用上面已经讨论过的一些技巧来引导受众浏览布局，但大多数设计都受益于整体结构或组织原则——这就是所谓的组合。

几个世纪以来，艺术家们一直依赖于构图技巧，其中许多技巧今天仍在使用。让我们看一些最常见的例子：

三分法：遵循三分法是创建动态构图的一种方式，在这种构图中，即焦点不在中心。
相反，此规则将布局划分为一个网格（三条等距的水平线和三条垂直线），并将焦点放置在其中一条线上，或者理想情况下，放置在两条线相交的四个点之一上。

https://img.zcool.cn/community/01fcb3620b7c4a11013e8cd04a7401.jpg

奇数法则：奇数法则通常也涉及到三分法。其背后的想法是，奇数个物体（也许焦点被其他两个物体包围——或者四个，如下所示），总是比偶数更有趣和赏心悦目。

https://img.zcool.cn/community/018e86620b7c4a11013f01cdbf506f.jpg

https://img.zcool.cn/community/016f53620b7c4a11013f01cd78b3d9.jpg

暗示指向：当指向重要信息并提供贯穿设计的明显路径时，这可能是一种非常有效的技巧。如何创造这种类型的指向？引导线。

引导线不必是实际的线（尽管它们可以是）。它们也可以是物体或形状、重复的设计元素、正负空间的相互作用，或任何其他能产生定向运动感的东西。

一些最常见的变体是水平的、垂直的和对角的引导线，以及 S曲线和z形状。 Z形格式利用了从左到右的阅读模式，是网站布局的流行基础。
在下面图形中，你可以看到一些暗示指向和引导线在起作用：

https://img.zcool.cn/community/01d778620b7c4b11013e8cd06856fa.jpg

https://img.zcool.cn/community/0135a0620b7c4b11013f01cd3078b7.jpg

如何测试视觉层次结构的有效性

希望本指南已经说明了在设计项目中建立一个清晰的视觉层次的重要性。
在这里介绍的许多技术都是很好的工具，可以加强设计的选择部分。然而，需要注意的是：过度强调是破坏视觉层次结构的最简单方法。
视觉重要性不能应用太多的设计元素，否则一切看起来都会变得不突出。当一切都很突出的时候，什么都不突出。层次结构的基本基础是，一些元素需要强调，而其他元素则需要弱化。

但是，如果你只是不确定视觉层次结构是否按你预期的方式工作，该怎么办？有一种简单的方法可以随时测试其有效性，无需特殊工具。这是值得信赖的“斜视测试”：

你只需从电脑屏幕前坐下来，眯着眼睛看你的设计，让所有细节变得模糊，你只看到大致的形状。这时看起来什么仍然突出？你希望受众首先看到的是什么？如果是这样，那么很好，如果不是，那么可能是时候回去尝试其他的了。

现在，你已经了解到创建有效的视觉层次结构一些工具和技术了，请好好利用它们。