平面设计与视觉元素息息相关，使用您的设计技能和知识来确保您的作品易于理解且美观，这一点很重要。
一种方法是遵循视觉层次结构的规则。视觉层次结构可确保您的设计为 Web 或移动设备上的真实用户创建流畅的用户界面。
设计趋势来来去去，但设计和用户体验的基础是永恒的。
本文将讨论视觉层次结构，提供一些使用它的设计技巧，并提供一些设计示例和其他资源供您查看。
什么是视觉层次结构？
视觉层次结构是按照单个元素在设计或艺术作品中的重要性排列它们的原则。
遵循这一关键原则，设计师组织视觉组件和元素，以确保观众可以轻松理解其含义。
如果正确完成，视觉层次结构将影响用户如何感知和理解您的工作和设计元素，并指导他们采取特定行动。
格式塔原则是围绕人类对视觉元素的感知的设计原则。这些原理剖析了人眼如何对物体进行分组、查看模式和简化图像。
设计人员在创建广告、网站和数字界面时应了解并使用这些原则。
根据格式塔心理学，视觉层次在观众的视野中创造了模式，使某些元素在人眼中脱颖而出。这就是暗示或创建重要性的视觉层次结构的原因。
现在，让我们谈谈为什么视觉层次对设计师很重要。
为什么视觉层次很重要
既然您知道了 Visual Hierarchy 是什么，那么设计师为什么应该在他们的工作中了解并利用这一原则可能就变得很清楚了。
平面设计一直是一门数字艺术，但最近整个行业变得更加“在线”，这意味着平面设计经常通过网站、社交媒体或广告在线查看和分发。
在为互联网创建图形设计时，用户体验是一个需要牢记的关键因素。与广告牌或印刷作品不同，在线设计通常在功能上用于引导用户浏览网站，诱使他们点击购买按钮，并鼓励他们点击其他链接。
这是一个很好的例子，说明了典型的眼睛如何根据视觉层次定律穿过着陆页或网页。
设计中的用户体验是用户与产品（例如网站页面或应用程序）交互的整体体验，尤其是在使用功能方面。
客户与用户界面交互和体验的方式极大地改变了他们对品牌或产品的看法。
这意味着移动设计和网站设计需要高度优化，最好的方法之一就是使用视觉层次结构的基本原则。
因此，让我们深入了解视觉层次结构的本质，并详细讨论每个原则以及它们与平面设计工作的关系。
视觉层次结构的基本原则
视觉层次原则与平面设计的基本原则非常相似。
本质上，您希望您的设计在美学上令人愉悦。基本的设计原则要求谨慎使用颜色、间距、对比度和图案。
我们为本文选择的视觉层次结构的基本原则是相似的，但有一些细微差别。当然，还有更多影响视觉层次的原则，但如果这是您第一次深入研究视觉层次概念，这些应该是一个很好的起点。
当您接受一件艺术品、文字或视觉设计时，人眼会立即创建一个层次结构。某些个别元素会吸引你，作为设计师，控制你的作品如何被感知是至关重要的。
让我们从我们的第一个原则开始：颜色。
颜色
颜色是设计的主要组成部分之一。品牌使用颜色和符号来使他们的产品易于识别和令人难忘。
想想著名的麦当劳拱门或星巴克的美人鱼形象。这些是某些标志如何在我们的集体记忆中根深蒂固的例子。
视觉层次中的颜色决定了设计中眼睛立即吸引的区域。
颜色的变化通常是最好的，但不要过度选择颜色。
过多的对比色或鲜艳的颜色可能会让人不知所措，并造成混乱的设计体验。但是太多柔和的颜色可能会阻止设计在视觉上脱颖而出。
考虑色彩理论并使用互补色组合也很重要。
在视觉层次中，暖色通常位于设计的最前沿，而冷色则位于背景中。
但是，如果您将设计放在浅色背景上，则这种效果会相反。混合色温并使用冷色和暖色创建设计可以创造设计深度。
知道了这一点，就很容易理解颜色选择如何极大地影响人眼对您的设计的看法。
图案
有趣的事实：每个人都有自己用来吸收信息和内容的观看模式。
两种最常见的观看模式是 Z 模式和 F 模式。
Z型：
- 眼睛沿着像 Z 一样的路径，从左上到右，然后下到左边，再到右边
- 最适用于内容不重的设计
- 帮助观众快速浏览元素
F型：
- 眼睛跟随一个像 F 一样的路径，从左上到右上，然后从左到右向下到下一条线，并沿着水平线重复
- 最适合内容繁重的设计
- 帮助观众浏览图片和标题
作为设计师，最重要的是要知道内容丰富的页面在 F 模式设计中最好，而内容较少的页面在 Z 模式设计中阅读效果最好。
这两种设计模式都有一个目的，并利用了眼睛在阅读信息时遵循的自然模式。遵循这些模式并充分利用它们将帮助您的观众更好地了解您的内容和意图。
对比
使用对比色和符号是强调信息和吸引对设计特定部分的注意的最佳方式。
使用深色背景或浅色背景来强调设计中的信息是一种以简单而有效的方式利用视觉层次结构的好方法。
这种视觉层次的元素在如何感知设计方面起着至关重要的作用，并且与颜色密切相关。对比度通常是使用颜色来强调的。
您想要强调的任何突出元素都应该采用大胆的颜色或被柔和的颜色包围，以使其脱颖而出。
间距
位置，位置，位置。
就像在住房市场中一样，位置对您的设计至关重要。您在作品中放置物品的位置和方式将极大地决定您的作品的构造方式。
白色空间可用于创建强调一件事的极简设计。这个空白空间可以成为对比设计中醒目的中央图像的好方法。
您也可以走另一条路，使用许多不同的对象来创建极简主义的设计。如果做得正确，这些设计会引人注目且有趣。
在设计中对齐文本的方式也会对内容的整体外观产生重大影响。以下是一些示例。
正如您在下面看到的，对象的大小和位置可以使它们看起来更大更重要或更小更微妙。
排列对象、将它们组织成一个形状或让它们零散分布也很重要。
如何在平面设计中使用视觉层次结构
现在我们已经介绍了什么是视觉层次结构，让我们来看看一些完美显示视觉关系和视觉组织的设计示例。
设计师一直在使用视觉层次的基础知识，例如空白和有目的地柔和的颜色与视觉上引人注目的对象配对。
以下是视觉层次结构如何在多种图形设计形式中发挥作用的一些示例：排版、信息图表、网页设计、广告和印刷材料。
排版
排版是设计的一个关键元素，可能很难掌握。
字体类型、大小写、大小、重点和位置都会极大地影响查看者阅读文本的方式。
通常在广告或网页设计中，文本对您的观众来说是最重要的内容，因此确保您正确理解这一点很重要。
此示例展示了如何创造性地放置文本以强调概念和单词并将其组合在一起，并确保首先阅读重要单词并易于理解。
您希望观众能够快速了解您在传达什么，即使他们只看了几秒钟您的设计。
信息图表
信息图表是显示和组织事实和信息的好方法。
创建一个混合了文字和符号的设计，使信息更容易消化和有趣。
但你必须小心。您不想过度简化并假设您的观众会理解某些特定的符号。
而且由于您使用的单词较少，因此您需要尽一切努力使您的事实在页面上脱颖而出。这是一个很好的例子，说明如何做到这一点。
您可以看到，在第一次迭代中，所有符号都是单色的，这并不能帮助观众立即理解所说的内容。
在第二个示例中，其中一个符号的颜色要浅得多，从而形成立即吸引您眼球的对比度和重点。
这就是您只需稍微调整颜色即可创建有效设计以改善用户体验的方法。
网页设计
在网页设计中，用户界面就是一切。
如果您网站的访问者无法轻松找到自己的路，他们将立即离开并且不太可能回来。
这就是我们讨论的许多视觉层次结构原则发挥作用的地方。对比度、间距和图案可以使访问者轻松（或难以）浏览网站。
这是一个简单登录页面上的好坏视觉层次结构示例。
通过强调重要元素并创建清晰的用户旅程，您更有可能引导用户购买产品、阅读您的内容或注册服务。
广告
广告无处不在。但只有少数人脱颖而出并留下印象。
要制作对观众产生影响的广告，您可以使用视觉层次结构来确保立即吸引他们的注意力并保持足够长的时间来传达您的信息。
使用我们上面讨论的所有元素，您可以确保您的广告脱颖而出，并且易于消化和理解。
这是一个很好的例子，说明间距、颜色和对比度如何影响您的设计被感知的方式。
印刷材料
视觉层次不仅适用于数字图像。印刷材料也需要它。
海报、名片和杂志等印刷材料都使用视觉层次的基本规则来吸引和告知观众。
有了这些资源和您对视觉层次结构的了解，您一定会创造出一些令人惊叹且视觉上美观的设计。
来源：Ben Barnhart, Vectornator.
