人们通常不会阅读网页、应用程序、甚至一篇文章或文本中的每个单词。相反,他们通常扫描-因为他们在很多网站上的经验告诉他们扫描可以用更少的时间和精力交付几乎相同的价值(即信息量)。(回忆人们天生高效，为了实现目标，他们会尝试投入尽可能少的工作.)

页面的视觉组织方式在人们浏览内容的方式中起着重要作用。如果页面布局允许用户快速识别与其需求相关的基本信息，那么用户将节省大量精力，并能够快速完成其目标。但是，另一方面，如果布局没有强调重要信息，人们可能会错过它，最终可能会离开网站。

本文重点讨论当页面上的信息拆分为清晰的标题和副标题时出现的扫描模式。

定义:千层饼扫描模式主要是固定在页面的标题和副标题上，偶尔故意固定在(正文)文本之间。在眼球追踪热图或凝视图中，这种模式看起来大致像一组水平条纹和它们之间的空白，类似于一层蛋糕(蛋糕在一层，然后是糖霜，然后是蛋糕，等等)。

除了阅读每个(或几乎每个)单词外，layer-cake模式是迄今为止扫描页面最有效的方式:在大多数情况下，它确保用户能够找到他们所在的信息寻找(如果它出现在页面上)。

副标题是粗体，比正文更大。
凝视图显示了层饼扫描模式的一个例子:大多数固定在文章的副标题上。凝视图显示的是一名研究参与者在Techcrunch.com上阅读一篇文章时的眼球运动。他扫视着交通当局把事情做好副标题在视觉上与正文不同，请阅读下面的正文。然后他浏览了更多的副标题交通系统有创新成功所需要的东西——庞大的用户群和期望差距。描述性副标题使用户能够轻松跳过相关正文中不太有趣的内容。
眼球追踪热图在页面的副标题上覆盖黄色的“热度”。
从9名研究参与者身上获得的分层眼动热图显示，他们主要关注bacnyc.org上一个页面的副标题(和按钮)。
段落，标题，标题上的蓝点。
我们在2004年的一项研究中首次记录了分层蛋糕模式。在原始研究的这个例子中，一个对训练狗的一般主题(但不是页面的特定部分)感兴趣的用户扫描了www.dogbreedz.com上的副标题。副标题上方的间距和副标题文本的粗体使人们很容易从正文块中挑出副标题。

如何创建促进有效扫描的副标题

我们说层饼是最有效和高效的扫描模式之一。但只有在以下两种情况下，人们才有可能采用这种模式:(1)他们能够很容易地识别副标题，(2)副标题正确地概括了与它们相关的段落。让我们来看看设计师如何创建支持两个账号用户的副标题。

有效的副标题的视觉指导

副标题的视觉设计中有两个重要元素：

  1. 标记副标题，使其以一致、可预测的方式相对于正文的其余部分在视觉上突出
  2. 明确指出正文与副标题的对应关系

许多视觉文本效果可以用来突出副标题。例如：

  • 不同的颜色
  • 更大的大小
  • 不同的字体
  • 影响例如粗体、阴影或下划线(但只有当副标题也是超链接时才使用下划线)
  • 结合的效果:上述视觉处理的混合

注意不要让副标题比正文更亮或更大看起来像促销或广告而不是页面内容，从而导致用户忽略它们。

在www.chao.org上的一个页面上，副标题很容易被发现，因为它们使用了与正文不同的字体。正文文本以深灰色Arial-body字体显示，而副标题则以粗体、绿色和Nunito字体显示，比正文文本大。
www.wegmanns.com上的一个页面通过使用不同的字体来标识正文、副标题和三级副标题，使得副标题很容易识别。正文出现在Source-Sans-Pro中;副标题出现在Archivo-Narrow中，粗体，尺寸大得多;第三级副标题也出现在Archivo-Narrow中，但加粗，与正文文本大小相同。
www.edwardjones.com上的一个页面以一种比之前的例子更微妙的方式将副标题与正文区分开来，但仍然使副标题易于扫描和挑选。该网站的正文和副标题使用了相同的字体(ProximaNova)，但副标题是粗体的，而且比正文更大。这些视觉处理足以让副标题看起来与正文不同。

与视觉设计师和进行可用性测试迭代想法，得出一个呈现副标题的好方法。然后为你身边的所有文本创建一个视觉设计风格指南，特别是正文、副标题、页面标题和链接应该如何设计。

有效副标题的内容指南

就像IA反映了一个网站的信息结构mini-IA，由所有的页面标题和副标题组成，反映了页面的信息结构。副标题使浏览页面变得容易，就像全局导航使浏览站点变得容易一样。好的副标题可以帮助用户确定一个章节是否值得阅读，好的类别名称可以帮助用户理解他们应该在哪里导航来完成他们的任务。

内容作者和编辑需要通过以下方式向用户提供清晰的内容层次结构：

  • 对页面上的内容进行优先排序:组织文本所以这对读者来说是有意义的。
  • 简洁:删除多余的内容。
  • 组块:内容分解成块比如段落或列表。把相关内容放在一起。

一旦这些事情都完成了，精炼副标题中使用的词，这样它们在浏览时最有信息。让你的小标题:

  • 描述性的全部的本节中的主题，以及只有该部分的主题:使用包含与副标题相关的所有正文的词语，这样用户就可以对该部分的所有内容有一个大致的了解。
  • 描述性的只有本节的主题是:是简洁的只描述出现在正文中与副标题相关的概念和单词。不要让副标题太宽泛，以至于它似乎包含了比正文更多的内容
  • 用一些最重要的词作为开头当前位置带有文字的信息让人们立即了解副标题的要点。
  • 可以理解的:使用清晰的语言，这样当用户浏览标题时，他们可以很快理解它的意思。

块和标签所有页面，不仅仅是文本:层蛋糕模式的衍生

有系统布局的页面易于浏览;而无序和不可预测的页面则不然。当布局由一个或多个文本列组成时(如上面的Edward Jones示例)，副标题允许用户快速确定哪个文本与哪个副标题相配。然而，当页面使用卡片或者其他不规则格式，使用the是很重要的格式塔邻近原理表示子标题或标签与正文或章节相匹配。

通过遵循与文本布局相同的原则，混合内容的页面仍然可以被扫描，具体如下:

  1. 确定喜欢的内容并将其放在一起。
  2. 视觉上区分内容块。这样做:
    1. 一种网格或其他图形系统，在每个块(如卡片、横幅)周围包括边框或彩色背景。
    2. 块之间适当数量的空间
  3. 适当的时候，给每个内容块标上清晰的副标题。

当页面以这种方式设计时，用户通常会扫描一系列的迷你层蛋糕模式，寻找表明内容部分内容的文本。

几年前，www.gateway.com的做法是正确的，它使用空白和灰色边框来包围文本的各个部分，并使用更大的大写文本作为副标题。
在www.nordstrom.com上购买凉鞋时，由于使用的间距，用户可以轻松地破译哪些文本和颜色样本与哪只鞋相关。鞋子上方的空间和下方的空间共同向用户传达，上面的文字与鞋子无关，但下面的文字与鞋子无关。这种布局支持快速扫描鞋子的价格，以及鞋子的颜色——这两项任务在电子商务中都很重要。
图像和相关文本之间的间距很小，而图像和非相关文本(分别在右侧和下方)之间的间距更大。这样就很容易分辨出哪个图像和文本是相关的。凝视图显示用户正在看一幅图像及其相关文本。他没有看图片和不相关的文字，也没有看文字和不相关的图片。
一个用户在阿拉伯语网站Super Kora上扫描了一个页面。图像和相关文本的分组方便了扫描，允许用户快速识别哪些内容与哪些图像相对应。具体来说，在截图的顶部，与图像相关的文本出现在它的左边。在页面的底部，与图像相关联的文本出现在它的下方。
当图像上方和下方的文本片段与该图像的距离相等时，用户就很难分辨哪些内容与该图像相关联。在《芝加哥论坛报》(the Chicago Tribune)网站上的凝视图中，用户先看图片(上)，再看下面的文字，然后再看文字下面不相关的文字，然后回溯到中间的文字和顶部的文字。回溯表明，用户需要注视几次，以决定文本与哪个图像相搭配。
“芝加哥论坛报”网站上的另一个页面提供了文字和视觉的混合。副标题让用户更容易决定哪个文本与哪个图像匹配。
虽然www.bacnyc.org页面上的Staff页面是按带有子标题的信息块组织的，但视觉实现使浏览变得困难。首先，副标题和标题下面的名字使用相同的字体(相同的字体、大小和粗体)。其次，内容块之间的间距是不规则的，使页面不可预测。在凝视图中，我们看到用户跳过页面顶部的副标题，但查看页面底部的大字体副标题——董事会、咨询委员会。用户只看了一些名字，而不看其他的，并以一种看似随机的方式跳过了大量内容。

层蛋糕模式与f模式

虽然我们同时发现了f型和层状蛋糕型，但是f模式不应该是两者中更臭名昭著的一个。与f模式不同，它通常不能有效地从文本中提取正确的信息，layer-cake模式可以引导用户到页面上的正确位置(前提是标题对下面的内容有意义并具有代表性)。一旦人们确定了感兴趣的部分，他们就可以仔细阅读。

F型

层饼图案

页面特征

突出的小文本列(如字幕、大块内容、子弹头、粗体、下划线)

标题和副标题标记良好的页面

效率

低

高的

用户行为

眼睛完全根据文本在列中的流动方式跳过文本部分。

眼睛会直接扫向标题，如果感兴趣或与目标相关，可能会阅读相关的正文。

影响

人们在不经意间错过了有意义的信息，并且不知道他们这样做了。

人们通过将注意力转移到相关页面部分并跳过不相关的部分来节省时间。
www.vogue.com上的一篇文章没有任何副标题，这使得它很难被浏览。以这种方式排版的文本通常以f模式扫描。

总结

分块内容，并在页面上分配清晰的、描述性的副标题，使其从其他文本和内容中脱颖而出，从而成倍地提高了内容的可用性，因为它们支持层饼扫描模式，而不是相对的f模式，通过允许用户快速识别与任务最相关的内容，提高用户的效率。

有关阅读和扫描的更多信息，请参阅我们的完整研究报告。”人们如何在网上阅读：眼球追踪证据”.