人们通常不会阅读网页、应用程序、甚至文章或文本中的每一个单词，相反，他们通常扫描-因为他们在很多网站上的经验告诉他们扫描可以用更少的时间和精力提供几乎相同的价值（即信息量）。（回忆人们自然有效，并试图投入实现目标的最少工作.)

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

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

释义字体分层蛋糕扫描模式由主要在页面标题和副标题上的固定组成，故意偶尔在（Body）文本上的修复。在眼镜热爱或凝视图中，这种图案看起来大致像一套水平条纹和它们之间的空格，类似于层蛋糕（在水平上有蛋糕，然后磨砂，然后蛋糕等）。

除了阅读每一个（或几乎每一个）单词外，分层蛋糕模式是目前为止扫描页面最有效的方式：在大多数情况下，它确保用户能够找到他们想要的信息寻找（如果页面上存在）。

副标题是粗体且大于正文的文本。
该凝视图显示了层蛋糕扫描模式的示例：大多数固定在物品子标题上。凝视图显示了从研究参与者收集的眼部运动，同时他正在阅读TechCrunch.com上的文章。他扫描了过境当局把事情办妥了副标题从正文文本视觉上显示并阅读下面的文本。然后他扫描了更多的副标题 -公交系统具备创新成功所需的条件——具有大规模的内置用户群，并且存在预期差距。描述性副标题使用户能够轻松跳过相关正文中不太有趣的内容。
眼睛跟踪热图将黄色的“热度”覆盖在页面的副标题上。
从9名研究参与者身上获取的一张分层蛋糕眼动热图显示，他们主要关注bacnyc.org上页面的副标题（和按钮）。
段落、标题、标题上的蓝点。
我们在2004年的一项研究中首次记录了分层蛋糕模式。在该原始研究的本例中，用户对狗训练的一般主题感兴趣（但不在页面的特定部分）扫描www.dogbreedz.com上的副标题。副标题上方的间距和副标题文本的粗体使得在正文文本块之间很容易找到副标题。

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

我们说层饼是最有效的扫描模式之一。但人们只有在（1）能够轻松识别副标题和（2）副标题正确概括与之相关的文本部分时，才能采用这种模式。让我们看看设计师如何创建支持两个帐户用户的副标题。

有效副标题的视觉指南

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

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

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

  • 不同颜色
  • 更大的大小
  • 不同的字体
  • 影响例如加粗、阴影或下划线（但仅当副标题也是超链接时才使用下划线）
  • 综合效应：上述视觉处理的混合

小心不要使副标题比正文更亮或更大，以致于它们看起来很可笑看起来像促销或广告而不是页面内容，并导致用户忽略它们。

www.chao.org上的一个页面使副标题易于发现，因为它们出现在不同的字体上，而不是用于身体文本的字体。身体文本以深色灰色颜色出现在arial-body字体中，而副标题似乎大于身体文本，粗体，绿色和nunito字体。
www.wegmanns.com上的一个页面通过对正文、副标题和三级副标题使用不同的字体，使副标题易于识别。正文文本出现在源代码Sans-Pro中；副标题出现在Archivo-nerrow中，粗体大得多；三级副标题也出现在Archivo-nerrow中，但粗体大小与正文相同文本
www.edwardjones.com上的一个页面以一种比前面的例子更微妙的方式区分了副标题和正文，但仍然使副标题易于扫描和挑选。该网站的正文和副标题使用了相同的字体（ProximaNova），但副标题粗体且比正文大。这些视觉处理足以使副标题看起来与正文不同。

与视觉设计师一起使用进行可用性测试迭代思想并推导出赋予副标题的好方法。然后为您的所有文本创建一个可视化设计样式指南，尤其是如何样式的身体文本，副标题，页面和链接。

有效副标题的内容指南

就像这一样IA反映网站的信息结构迷你IA，由所有页网标题和子标题组成，反映了页面的信息结构。副标题可以轻松以相同的方式浏览页面，其中全局导航使其轻松浏览网站。良好的副标题帮助用户确定一节是否值得读取，并且良好的类别名称有助于人们了解他们应该导航以完成任务。

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

  • 对页面上的内容进行优先级排序和排序：组织文本所以这对读者来说是有意义的。
  • 简明扼要：删除多余的内容。
  • 分块：将内容分成大块，如段落或列表。将相关内容放在一起。

完成这些工作后，对副标题中使用的词语进行细化，以便在扫描时提供最多信息。把你的副标题改成：

  • 描述的全部的本节中的主题，以及只有本节中的主题：使用包含与子标题关联的所有正文文本的单词，因此用户可以了解该节中可用的一切。
  • 描述的只有本节中的主题包括：是简明的并且只描述正文中出现的与副标题相关的概念和词语。不要把副标题写得太宽，以至于它似乎包含了正文中的内容
  • 用一些最重要的词来引导当前位置带有文字的信息让人们立即了解副标题的要点。
  • 可以理解：使用清晰的语言，以便用户在扫描标题时能够快速理解其含义。

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

系统布局的页面易于扫描;无序和不可预测的页面不是。当布局由一个或多个文本列组成时（如在上面的Edward Jones示例中），副标题允许用户快速确定哪个文本与哪个子标题一起使用。但是，页面使用时牌或其他一些不规则的格式，使用它很重要格式塔邻近原理表示子标题或标签与正文或章节相匹配。

通过遵循与文本布局相同的原则，仍然可以对混合内容的页面进行扫描：

  1. 确定内容并将其放在一起。
  2. 从视觉上区分内容块。使用以下方法执行此操作：
    1. 网格或其他图形系统，包括各块周围的边界或彩色背景（例如，卡，横幅）
    2. 块之间的适当数量的空间
  3. 适当时，用清晰的副标题标记每个内容块。

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

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

层蛋糕图案与F模式

虽然我们在同一时间发现了F模式和层蛋糕样式F型不可胜的是这两个人的臭名昭着。与F模式不同，这通常在从文本中提取正确的信息时，层蛋糕模式可以将用户引导到页面上的正确位置（规定标题是有意义的并且代表下面的内容）。一旦人们确定了一个兴趣点，他们就可以仔细阅读。

F型

层饼图案

页面特征

包含少量突出文本的文本列（例如字幕、内容块、项目符号、粗体、下划线）

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

效率

低的

高的

用户行为

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

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

影响

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

人们通过将注意力转移到相关页面部分并跳过不相关的部分来节省时间。
关于www.vogue.com的文章没有任何副标题，这使得难以扫描。以这种方式规定的文本通常以F模式扫描。

总结

对内容进行分块并指定清晰、描述性的副标题，这些副标题与页面上的其他文本和内容不同，可以成倍地提高内容的可用性，因为它们支持层饼扫描模式，而层饼扫描模式与相对的F-模式不同，它允许用户快速识别需要的内容，从而提高用户的效率与他们的任务无关。

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