创建视觉层次：吸引注意力的艺术

已发表: 2017-03-15

“我应该把它扔掉还是阅读它？” 研究对象在检查一封直邮邮件时感到疑惑。他们从上到下评估这封信，并在 11 秒后做出决定。

在那段时间里，慕尼黑直销协会的实验者注意到受试者眼睛的一些特殊之处。他们不遵循线性路径，连续阅读每个单词，而是跳转到字母正文中的不同点。那么他们在看什么？

答案是在所谓的“视觉层次结构”的帮助下创建可转换的点击后登录页面的关键。要完全理解它，我们必须回到 1912 年的德国，在那里三位心理学家开始形成格式塔心理学的基础。

格式塔心理学和视觉等级的基础

一个多世纪以前，德国思想家沃尔夫冈·科勒、马克斯·韦特海默和库尔特·科夫卡开始研究人们如何看待世界。他们的名字和“格式塔心理学”理论可能看起来并不熟悉，但包含他们研究的信息将：

“整体不是其部分的总和” ——这意味着整体“在感知系统中独立存在，”拉斯·杜威博士说。

换句话说，这三个人提出，人类不会单独和平等地感知周围环境。相反，我们以特定的方式组织它们，以便将它们作为一个整体来理解。

“整体不同于部分之和”——拉斯·杜威博士

点击推文

以下图为例。你看到了什么？

您可能会注意到三个部分绘制的圆圈，但也会注意到中间没有的倒三角形。不完整的圆圈形成三角形的角，你的思想填满边缘。这被称为“虚幻的轮廓”，它正是 Koffka 所说的“整体不是其部分之和”的例证。这张图片中不仅仅是三个部分绘制的圆圈。这些圆圈放在一起，按原样放置，形成一个白色三角形。

从他们的研究中，这三个人创造了八项知觉组织法则——人类将一个群体的组成部分视为一个整体的方式。最重要的是人们在您的点击后登录页面上找到重要信息的方式。

相似法则

相似定律指出，相似的事物看起来好像是组合在一起的。在下图中，你看到了什么？

如果您说“36 个圆圈”或“6 行圆圈”或“6 列圆圈”，那么您属于少数。大多数人看到三排黑圈和三排白圈。由于其他每一行的颜色和形状都相似，因此它被视为整体中自己组的一部分。

同时，由于这种将相似事物归为一组的倾向，我们也会注意到与群体不同的事物。格式塔心理学家将这些差异称为“异常”。

在上图中，我们将所有相似的青苹果归为一组，其中红色的苹果异常突出。无论该异常在大小、颜色还是形状上不同，它都会引起我们的注意，因为它与该组的其他人不同。

这种对元素进行感知分组的过程可以解释慕尼黑直销协会的实验者在研究对象眼中注意到了什么。

什么是视觉层次？

来自 Tuts+ 的 Brandon Jones 说人们不是“机会均等的观察者”。我们不仅倾向于注意到群体之间的差异，而且还倾向于从这些差异中推断出重要性。例如，对这张图片中的圆圈进行排名：

在对它们一无所知的情况下，您可能对它们进行了如下排序：

那是因为最大的圆圈吸引了最多的注意力，然后是第二大圆圈，依此类推。现在让我们将类似的原则应用于页面上的单词。

这是最重要的一句话。这是最重要的一句话。这是最重要的一句话。 这是最重要的一句话。 这是最重要的一句话。这是最重要的一句话。

在那段摘录中，你的眼睛很可能被异常所吸引。您将未格式化的句子组合在一起，粗体字脱颖而出。当您引入大小差异时，会在其他地方引起注意。

这是最重要的一句话。
这是最重要的一句话。这是最重要的一句话。 这是最重要的一句话。 这是最重要的一句话。这是最重要的一句话。这是最重要的一句话。

这一次，在您注意到段落中的粗体字之前，您可能已经看到了它上方更大的粗体字。我们可以不断地用颜色和位置改变单词，使它们更加突出，但你明白了。 “不同”会吸引注意力，而注意力是您希望对点击后登录页面上最重要信息的关注。

通过设计上的差异，您可以战略性地将访问者的注意力吸引到对推动转化至关重要的营销信息上，例如您的价值主张、产品优势和号召性用语。这些吸引注意力的策略形成了“视觉层次结构”。

在该层次结构中，最重要的信息是访问者的目光首先落在页面上的位置，其次是第二重要的信息是他们的目光接下来会落在何处，依此类推。他们甚至没有意识到，他们根据差异在心理上将这些元素从重要到不需要。

网络上和网络下的阅读风格

现在让我们重新审视慕尼黑直销协会的实验，在该实验中，受试者在短短 11 秒内选择是扔垃圾还是阅读销售信函。由于设计差异，他们能够如此迅速地做出决定。

首先，他们的目光跳到了他们认为页面上最重要的信息上：标题和照片。接下来，标题、项目符号列表和短段落引起了人们的注意。如果有的话，长的、未格式化的副本最后被消化。

从那时起，许多研究证实了这些发现，最著名的是尼尔森诺曼集团的研究，该研究催生了“F 形模式”。在跟踪了数千个网页上 232 名受试者的注视后，该小组发现：

首先用户阅读页面顶部，创建“F”形的上方水平条。
然后，人们进一步向下阅读页面，阅读副标题以形成“F”的下方水平条。
最后，用户向下扫描左侧，形成“F”的垂直词干。

它看起来像这样：

不过，“F 形”这个名字有点误导。正如研究人员所解释的那样，互联网用户的阅读模式并不总是那么整洁：

显然，用户的扫描模式并不总是恰好由三部分组成。 有时用户会阅读内容的第三部分，使模式看起来更像 E 而不是 F。有时他们只会阅读一次，使模式看起来像一个倒 L（横杆在顶部） . 然而，通常，阅读模式大致类似于 F，尽管顶部和底部栏之间的距离有所不同。

无论是“F”、“L”、“E”还是“Z 形”模式（用于文本量较少的页面），其含义都是相同的：说英语的人从左到右阅读从上到下扫描内容的差异。标题、副标题、图像、粗体字、标题、列表——这些元素与标准的无格式文本不同。

看看下面的模拟页面：

它们不包含实际的单词，但您可能能够比左侧更好地组织正确的单词。右边的适合 F 型阅读风格，而左边的则没有将其内容组织成任何视觉层次结构。

我们从研究中已经知道，像左页那样的文本块很少被阅读。那么你如何确保你的呢？

设计时考虑到差异

CXL 的 Peep Laja 说，在开始创建视觉层次结构之前，您需要一个目标：

您应该根据您的业务目标对网站上的元素进行排名。 如果你没有一个具体的目标，你就无法知道该优先考虑什么。

他使用 Williams Sonoma 主页的屏幕截图来演示：

最引人注目的是一大块肉（让我想要它），其次是标题（说出它是什么）和号召性用语按钮（得到它！）。 第四位是标题下的一段文字，第五位是免运费横幅，最后是顶部导航。 这是视觉层次做得很好。

但是，在您的点击后登录页面上，不应该有导航菜单。因此，注意力会有所不同。让我们看一下来自 Simple Measured 的点击后登录页面：

你的目光首先落在哪里？下一个？最后的？如果我们不得不猜测，我们会说……

标题：“如何更快地做出社交营销决策。”
副标题：“学习如何节省时间并看起来像个专业人士。”
粗体文字：“在本指南中，您将学习如何……”
粗体文本下方的项目符号副本。
号召性用语：“提交”。

这是一个很好的视觉层次结构的例子，因为它按照与访问者最相关的顺序传达信息。首先，标题和副标题以面向利益的方式传达要约的 USP。潜在客户立即明白，他们将学习如何通过此页面上的优惠更快地做出社会决策。

之后，以典型的 F 模式向下扫描页面的左侧，访问者会注意到粗体文本将他们引导到项目符号列表，其中详细说明了通过声明要约可以获得什么。

最后，潜在客户再往下扫一点，然后扫过整个页面，在那里他们会看到号召性用语按钮，该按钮的颜色与页面上的其他元素不同，以引起注意。它让他们知道如何申请他们的报价。

在关注这三个元素之后，正文副本可能会被完整阅读，但可能不会——这就是为什么让你最重要的信息脱颖而出很重要的原因。按照这个顺序，你的视觉层次至少应该：

用标题吸引注意力，让访问者知道为什么他们应该阅读页面的其余部分。
用粗体字、带项目符号的文本和小段落简要说明您的报价的好处。
向他们展示如何通过号召性用语领取优惠。

那么你究竟是如何使用设计元素做到这一点的呢？您知道“不同”会吸引注意力，这反过来又传达了重要性——但是在创建视觉层次结构时应该使用哪些设计元素？

影响视觉层次的特征

根据自由设计师和作家史蒂文布拉德利的说法，可以操纵五个特征来在您的页面上形成视觉层次结构：

尺寸——正如你所期望的，更大的元素承载更多的重量
颜色 — 原因尚不完全清楚，但有些颜色被认为比其他颜色更重。红色似乎最重，而黄色似乎最轻。
密度——在一个给定的空间中装入更多的元素，赋予该空间更多的权重
值 - 较暗的对象将比较亮的对象具有更大的权重
空白 - 正空间比负空间或空白更重要

您在点击后登录页面上使用这些元素的程度将影响访问者的视线。以下是如何使用它们来创建您的视觉层次结构：

大小：您的标题应该是页面上最大的文字。如果你有一个，副标题应该是第二大的。如果您的页面很长，那么您用来分隔内容的副标题应该比这小，最小的应该是未格式化的正文副本。

颜色：此元素对您的号召性用语最重要。配色方案在引导访问者使用按钮方面起着重要作用。这里的关键是对比。请注意，在 Simple Measured 点击后登录页面上，橙色仅在主要为蓝色和白色的页面上出现一次。这使得 CTA 按钮对访问者来说非常明显。

密度：再次查看 Williams-Sonoma 页面。标题和号召性用语都覆盖在特色图片上。通过将所有这些元素打包到如此小的空间中，设计师比上面的菜单或横幅更关注它。

价值：粗体字比无格式字更受关注。介绍产品优势的标题、副标题和正文应该比页面上的其余文本更有价值。

留白：回想一下慕尼黑直销协会的研究结果——最吸引眼球的地方之一是小段落。将您的文本“分块”成最多由三个句子组成的部分不仅可以使其更引人注目，而且更易于阅读和保留。

阅读您最重要的信息

视觉层次结构可帮助访问者优先考虑您的点击后登录页面上的信息。通过创建以下内容来让您的访问者进行转换：

在标题中强调您的 USP
在正文中传达您的报价的好处
让潜在客户知道如何使用您的 CTA 按钮申领您的报价

快速轻松地开始设计您的视觉层次结构，立即注册 Instapage Enterprise 演示。