初学者的视觉层次结构

视觉层次结构是按特定顺序组织对象以引起对预期区域的注意。

通常用于 UX 设计，视觉层次结构为读者提供了更轻松的导航时间，并有助于将他们的注意力引导到您想要的位置。

使用不当或缺乏视觉层次可能会使网站访问者感到困惑和迷失。

视觉层次在海报和广告中很普遍，以帮助将注意力集中在预期的元素上。

该博客将为初学者提供视觉层次结构的基础知识。

视觉层次分解

将视觉层次分解成更简单的块有助于解释设计师如何处理设计概念。

三是视觉层次结构中的三个主要角色，其中两个密切相关。

尺寸

更改对象的大小可以帮助吸引对它们的注意或远离它们。

为您希望表达的最重要的信息保留最大的尺寸是很重要的。 使用太多类似大小的元素会消除这种效果，因为没有什么比这更突出了。

缩放大小对于显示它与其他对象的比较至关重要。 创建平衡感有助于缩放以强调最大对象与较小对象的比较。

如果您有不重要的信息，则将其保存在较小的尺寸将使其不碍事，并将其留在用户最后看到的地方。

颜色和对比度

较亮的颜色比其他颜色更能吸引注意力。 当您将明亮的颜色与较暗的背景相结合时，这种效果会增加。 结果使您的信息更多地弹出并轻松吸引注意力。

颜色和对比度是视觉层次的两部分，但它们完美地结合在一起以吸引注意力。

使用此方法的一种方法是通过使用华丽的颜色突出显示文本来更改文本的颜色； 它会在任何其他沉闷的彩色文本之前引起注意。

对比度越大，注意力越强。 添加剧烈的颜色差异（例如带有亮红色字体的深色背景）会吸引用户的注意力，并使其成为他们在任何图像或网页上注意到的第一件事。

在创建引人注目的对比色时，最好将它们保持在最低限度。 太多对比鲜明的物体会让读者感到困惑，并产生不受欢迎和令人反感的效果。

另一种使用颜色的方法是选择相似的调色板来创建特定对象之间的关联。

最好只为页面上最必要的元素保留此策略，因为这是您希望首先引导所有注意力的地方。

好的用户体验设计包括大量的对比，大多数美学使用强烈的对比来创造令人惊叹的作品。

F & Z 模式

当主要通过文本提供信息时，有两种主要模式最能充分利用我们处理视觉信息的方式。

这些模式适用于大多数语言，但适用于英语，因为单词是从左到右和从上到下阅读的。

F模式

F 图案是包含大量文本的设计的完美选择。 该设计遵循以它命名的字母，从左上角开始向右移动。

之后，查看者会向下扫描书脊以查找副标题或标题。

该图案交替命名为 E 图案，尽管 F 图案更具标志性。

要使用 F 模式，您需要将所有重要信息放在左侧的小标题中以吸引注意力。

这种设计非常适合消除与阅读大段段落文本相关的无聊感。

用户可以扫描标题以发现任何引人注目的标题或要点，因为它们有助于吸引注意力。

Z 模式

虽然 F 模式适用于文本较多的网站，但 Z 模式是不同的。

Z 模式非常适合没有多段文字的网站或广告。

该设计首先将最高优先级的信息放在左上角，然后将重要性级联到右上角、左下角和右下角。

用户将轻松导航 Z 模式，因为它是一种易于理解的常用设计。

左上角通常是为标志保留的，因为它将是人们首先注意到的。 右上角是用户看到公司徽标后的号召性用语。 在这种情况下，号召性用语通常是注册提示。

设计的中间通常包括一个图像来填充空白部分。

左下角和右下角包括您要向访问者展示的所有预期文本或信息。

了解排版

排版层次结构易于理解，适用于任何涉及大量文本的设计，这是绝大多数。 它可以分为三个部分，顺序是标题、副标题，最后是您的文本。

您的标题包含基本信息，在您的设计中处于最高位置，并且是最明显的内容。

您的副标题可以对所有文本进行排序，并为混乱的段落提供顺序。 始终保持小标题小于标题，因为它们不应该优先竞争。

副标题为用户提供了直接导航以查找特定信息。

你的最后一块是你的文本，通常涉及段落。 字体大小应该很小但保持可读性。 前两节旨在为用户提供更轻松的时间来浏览密集的文本。

间距的重要性

对于包含最少信息的网站，在重要信息周围留出大量空间会引起人们对所有空间所在的中心的关注。

这个概念也应该适用于你所有的其他设计，添加太多信息会给你带来不愉快的用户体验。

用空间包围内容提供了简单易懂的用户体验设计。

塞满太多信息并在区域周围留下很小的空间会让你的设计感到不知所措，让人们感到困惑。 当用户感到困惑时，他们总是有机会离开您的网站，一定要只描绘重要信息。

使用对齐

对齐您的设计很重要，因为随机放置文本会创建一个忙碌的图像来查看。

F-pattern 和 Z-pattern 设计都体现了对齐的使用。 F-pattern 设计使用左对齐，而 Z-pattern 设计使用左右对齐以及中心对齐。

以文字为焦点进行视觉设计时，最好向左对齐。

对于具有简单化焦点的严格视觉设计，将所有元素对齐到中心往往会创造出有吸引力的设计。

使用网格

在构建设计时，网格是帮助创建过程的常用方法。 三分法则的使用能够为您的设计增加平衡。

要使用三分法则，请在您的设计中添加一个网格，并让它位于两条水平和垂直线上。 结果提供了一种赏心悦目的设计。

靠近中心的物体会引起注意，而远离中心的物体会最后引起注意。

接近和关系

当元素更接近时，您的读者会认为它们是相关的。

这可以帮助您组织大量信息，并使您的观众更容易理解。

将图像与文本分组意味着它们都是相关的，读者会将两者联系在一起。 让图像和文本相距很远会让读者认为这两个元素不相关并且彼此无关。

字体和视觉层次

使用为重要信息保留的较大字体更改字体大小将有助于将注意力集中在它们上。

对于海报，名称应该是较大的字体之一，而地址等项目应该用小字体书写。

从字体大小开始，使用不同类型的字体将有助于引导用户注意力。 为标题、副标题和信息文本使用不同的字体。 这种设计方法将有助于使您的作品具有吸引和保持读者注意力所需的流行感。

视觉层次提示

在开始创建设计之前，记下一些笔记可以帮助组织您的设计，甚至可以帮助您创建更美观的设计。

记下您需要优先考虑的最重要信息，以及您将使用哪些方法来做到这一点。

此外，尝试想象读者的旅程并尝试改进用户体验设计，并删除任何杂乱的细节。

一个好的用户体验设计的投资回报率总是值得额外的工作，所以不要低估它的重要性。

包起来

视觉层次是关于规定你希望读者注意的顺序； 您希望首先看到重要信息，然后是其他所有信息。

对比的使用可以创造出流行的颜色，并成为读者在设计中首先注意到的。

了解您希望读者首先看到哪些信息将使您能够使用视觉层次结构的所有元素为他人提供良好的用户体验设计。