UE设计中Web上内容扫描的层蛋糕模式

当标题和子标题在页面上直观地醒目并具有描述性时，用户将采用有效的扫描模式，使他们能够快速找到所需的信息。

人们通常不会阅读网页，应用程序甚至文章或文本段落中的每个单词。相反，他们经常进行扫描 -因为他们在许多网站上的经验告诉他们，扫描可以用更少的时间和精力来提供几乎相同的价值（即信息量）。（回想一下，人们天生就是有效率的，他们会尽最大努力完成目标。）

页面的可视化组织方式在人们扫描内容方面起着重要作用。如果页面布局允许用户快速识别与他们的需求相关的基本信息，则用户将节省大量精力，并且能够快速实现其目标。但是，另一方面，如果布局不强调重要信息，则人们可能会错过它，并最终离开站点。

本文重点介绍将页面上的信息分为清晰的标题和子标题时出现的一种扫描模式。

定义：层状蛋糕扫描模式由主要在页面标题和子标题上进行的固定构成，并在其间的（正文）文本上进行了偶然的固定。在眼动图或注视图上，此图案看起来像一组水平条纹和它们之间的空白，类似于一层蛋糕（先将蛋糕放在水平上，然后是糖霜，然后是蛋糕，依此类推）。

除了阅读每一个（或几乎所有的）一句话，千层饼模式是目前最有效的方式来扫描网页：大多数时候，它可以确保用户会发现他们的信息寻找（如果它存在于这页纸）。

标题：此凝视图显示了一个层状蛋糕扫描模式的示例：大多数注视都在文章的子标题上。凝视图显示了从研究参与者在Techcrunch.com上阅读文章时收集到的眼球运动。他向运输当局扫描，以   副标题在视觉上不同于正文的方式完成了工作，然后阅读了下面的文字。然后，他浏览了更多的子标题- 公交系统具有创新所需要的成功才能实现-内置的大规模用户群，并且存在期望差距。描述性副标题使用户可以轻松跳过相关正文中不那么有趣的内容。

标题：从9位研究参与者那里获得的分层蛋糕眼动图表明，他们主要盯着bacnyc.org页面上的小标题（和按钮）。

说明文字：我们在2004年的一项研究中首次记录了层状蛋糕的图案。在该原始研究的示例中，对狗训练的一般主题（而不是页面的特定部分）感兴趣的用户扫描了www上的小标题。 .dogbreedz.com。字幕上方的间距和字幕文本的粗体显示使选择正文文本块之间的子标题变得容易。

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

我们说过，夹层蛋糕是最有效的扫描模式之一。但是人们只有在以下情况下才能采用这种模式：（1）他们可以轻松识别子标题，并且（2）子标题正确地总结了与之相关的文本部分。让我们研究一下设计人员如何创建支持两个帐户上的用户的子标题。

有效小标题的视觉准则

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

1. 标记副标题，以便它们在视觉上以一致，可预测的方式相对于其余文本突出显示

2. 清楚指出哪个正文与哪个副标题一起使用

许多视觉文字效果可用于使子标题突出。例如：

• 不同的颜色

• 较大的尺寸

• 不同的字体

• 影响诸如加粗，阴影，或下划线（但使用强调仅当副标题也是一个超链接）

• 效果组合：以上视觉处理的混合

请注意，不要使副标题的亮度比正文文本明亮或大，以致它们看起来像促销或广告，而不是页面内容，从而使用户忽略它们。

标题：www.chao.org上的页面使子标题易于发现，因为它们以与正文文本不同的字体出现。正文在Arial正文字体中以深灰色显示，而副标题看起来比正文，粗体，绿色和Nunito字体大。

文字说明：与前面的示例相比，www.edwardjones.com上的页面以较细微的方式区分了副标题和正文，但仍使副标题易于扫描和挑选。该网站的正文和副标题都使用了相同的字体（ProximaNova），但是副标题是粗体且大于正文。这些视觉处理足以使小标题看起来与正文不同。

与视觉设计师合作并进行可用性测试，以迭代想法并获得呈现副标题的好方法。然后为您身边的所有文本创建一个视觉设计样式指南，特别解决正文文本，副标题，页面标题和链接应如何设置样式。

有效子标题的内容准则

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

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

• 确定页面内容的优先级和顺序：  组织文本，使读者觉得有意义。

• 简明扼要：删除多余的内容。

• 分块：将内容分成大块，如段落或列表。将相关内容放在一起。

完成这些操作后，请细化副标题中使用的词，以便在扫描时提供最多的信息。制作副标题：

• 描述本节中的所有主题，并且仅描述本节中的主题：使用包含与小标题关联的所有正文的单词，以便用户了解本节中可用的所有内容。

• 描述的只是在部分的主题：要简洁，只描述了出现在与副标题相关的正文概念和词语。不要使副标题太宽泛以至于它似乎包含的内容超过了正文中的内容

• 以一些最重要的单词开头：带有信息的单词会立即给人们提供副标题的重点。

• 可以理解：使用清晰的语言，以便用户在扫描标题时可以快速理解其含义。

块化并标记所有页面，而不仅是文本：层蛋糕图案的衍生物

具有系统布局的页面易于扫描；不是无序和不可预测的页面。当布局由一个或多个文本列组成时（如上述爱德华·琼斯的示例），子标题使用户可以快速确定哪些文本与哪个子标题一起。但是，当页面使用卡片或其他不规则格式时，使用格式塔邻近性原则来告知哪个副标题或标签与正文文本或节内容一起使用很重要。

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

1. 确定喜欢的内容并将其放在一起。

2. 在视觉上区分内容块。为此，请执行以下操作：

1. 网格或其他图形系统，包括每个块（例如，卡片，横幅）周围的边框或彩色背景

2. 块之间适当的空间

   3.在适当的时候，用清晰的子标题标记每个内容块。

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

标题：几年前，www.gateway.com正确地做到了这一点，使用空格和灰色边框将文本部分和较大的全大写文本包围起来作为副标题。

标题：在www.nordstrom.com上购买凉鞋，由于使用了间距，用户可以轻松地识别出哪些文本和颜色色板与哪只鞋相关。鞋上方的空间和下方的空间共同作用，向用户传达上方的文字与鞋子无关，而下方的文字与用户相关。这样的布局支持快速扫描鞋子的价格以及鞋子的颜色，这都是电子商务中的重要任务。

图像与其关联的文本之间几乎没有间距，图像与未关联的文本（分别在右侧和下方）之间的间距更大。 这样可以轻松分辨出哪些图像和文本相关。 凝视图显示用户正在查看图像及其关联的文本。 他没有看图像和无关的文本，也不看文本和无关的图像。

说明文字：一位用户浏览了阿拉伯语站点Super Kora上的页面。图像和相关文本的分组有助于扫描，从而使用户可以快速识别哪些内容与哪个图像一起出现。具体来说，在屏幕截图的顶部，与图像关联的文本显示在其左侧。在页面的底部，与图像关联的文本显示在其下方。

标题：当图像上方和下方的文本片段看起来与该图像等距时，用户很难分辨出哪些内容与该图像相关联。在《芝加哥论坛报》网站页面上的注视图中，用户查看了一个图像（顶部），下面的文本，然后是该文本下方的不相关图像，然后回溯到中间的图像和顶部的图像。回溯表明用户需要固定几次以确定文本使用的图像。

“芝加哥论坛报”网站上的另一个页面提供了文字和视觉效果的混合。子标题使用户可以更轻松地确定哪个文本与哪个图像一起显示。

标题：虽然www.bacnyc.org页面上的Staff页面是由带有副标题的信息块组成的，但可视化的实现使扫描变得困难。首先，副标题及其下的名称以相同的字体出现（相同的字体，大小和粗体）。其次，内容块之间的间距是不规则的，使页面无法预测。在凝视图中，我们看到用户跳过了页面顶部的子标题，而是看了页面底部的大字体子标题（咨询委员会董事会）。用户看了一些名字，却没有看其他名字，并以看似随机的方式跳过了大块内容。

图层蛋糕图案与F模式

虽然我们同时发现了F模式和分层蛋糕模式，但F模式在两者中更臭名昭著是不应该的。与通常无法从文本中提取正确信息的F模式不同，分层蛋糕模式可以将用户引导到页面上的正确位置（前提是标题有意义并且可以代表下面的内容）。人们识别出感兴趣的部分后，便可以仔细阅读。

标题：www.vogue.com上的一篇文章没有任何小标题，因此很难扫描。通常以F模式扫描以这种方式布置的文本。

摘要

分块内容并分配清晰的，描述性的副标题，使其与页面上其他文本和内容脱颖而出，因为它们支持层蛋糕扫描模式，从而成倍地提高了内容的可用性，与相对的F模式不同，它通过以下方式提高了用户的效率使他们能够快速识别与其任务最相关的内容。