layer框架介绍（Layer-Cake模式的设计）

人们通常不会阅读网页，应用程序甚至文章或文本段落中的每个单词。相反，他们经常进行浏览 -因为他们在许多网站上的经验告诉他们，浏览可以用更少的时间和精力来提供几乎相同的价值（即信息量）。

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

内容浏览Layer-Cake模式：Layer-Cake浏览模式主要由页面标题和副标题上固定的内容组成，中间的（正文）文本上偶尔会有刻意的固定内容。在眼动图或凝视图中，此图案看起来像一组水平条纹和它们之间的空白，类似于层蛋糕（先将蛋糕放在水平面上，然后是糖霜，然后是蛋糕，依此类推）

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

有效的内容浏览是为了帮助用户能快速的获取目标信息，在内容展示时：

1. 设置标题或者对于重点信息进行标记，能让用户轻松的识别。
2. 标题能正确的总结与之相关的文本部分。
3. 有效的查看标题所对应的文本内容（标题是对哪部分文本的总结）。
4. 段落和段落之间增加间距，每个标题和所对应的内容之间增加间距。
5. 同类型标题的颜色统一，在视觉呈现上一致，方便用户能快速识别标题。

如下图展示的正文页内容，左侧是当前web网页文本信息，右侧是对当前文本信息进行重点标记，左右两图对比后不难发现，右边的信息用户更容易发现重点。

在设计标题和重要信息提示时，通过视觉文字效果可以使得标题突出：

• 标题的颜色和文本区分。
• 使用较大的字体。
• 使用不同的字体。
• 使用加粗、阴影、下划线（当使用下划线时强调标题也是一个超链接）。
• 增加图标，以上所有效果混合。

在使用的时候，也需要注意，不要使内容标题比正文大的离谱，或者颜色的差异过大，导致用户错把标题当成促销或者广告，从而忽略该部分。同时也需要注意正文文本，副标题，页面标题和链接应如何设计区分。

www.edwardjones.com上的页面以较细微的方式区分了标题和正文，但仍使副标题易于浏览和查看。正文和标题使用相同的字体（ProximaNova），但标题为粗体且比正文大。这些视觉处理足以使小标题看起来与正文不同。

由正文和标题组成的内容展示也反映了页面的信息结构。标题使浏览文本页面变得容易，而全局导航使浏览站点变得容易。好的标题可以帮助用户确定某个部分是否值得阅读，好的分类名称可以帮助人们理解应该导航到哪里以完成任务。

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

• 确定页面内容的优先级和顺序：组织文本，使读者觉得有意义。
• 简明扼要：删除多余的内容。
• 分块：将内容分成大块，如段落或列表。将相关内容放在一起。

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

• 描述本节中的所有主题，并且仅描述本节中的主题：使用包含与标题相关的所有正文，以便用户了解本节中可用的所有内容。
• 描述的只是部分的主题：要简洁，只描述了出现在与标题相关的正文概念和词语。不要使标题太宽泛以至于它似乎包含的内容超过了正文中的内容
• 以一些最重要的词语开头：带有信息的词会立即给人们提供标题的重点。
• 可以理解：使用清晰的语言，以便用户在浏览标题时可以快速理解其含义。

了解用户浏览网页的方式，我们知道具有系统布局的页面易于浏览；无序和不可预测的页面则不易浏览。当布局包含一个或多个文本列时，标题允许用户快速确定哪个文本与哪个标题一起使用。然而，当页面使用卡片或其他不规则格式时，重要的是使用格式塔接近原则来表示哪些标题或标签与哪些正文或一起使用。

混合内容的页面仍然可以按照与文本布局相同的原则进行浏览。明确地：

1、确定喜欢的内容并放在一起。

2、视觉上区分内容块。使用以下命令执行此操作：

• 一种网格或其它图形系统，包括每个块周围的边框或彩色背景（如卡片、横幅）。
• 确保每个模块块之间适当的间距。

3、适当时，用清晰的标题标记每个内容块。

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

当图像上方和下方的文本片段看起来与该图像的距离相等时，用户很难判断哪些内容与图像相关。在《芝加哥论坛报》网站一页的凝视图中，用户先看一张图片（上图），然后看下面的文字，再看下面不相关的图片，然后回溯到中间的文字和上面的图片。回溯表明，用户需要修正几次，以决定与哪个图像的文本。

与F模式（通常在从文本中提取正确信息时不是很有效）不同，Layer-Cake模式可以引导用户找到页面上的正确位置（前提是标题有意义并且代表下面的内容）。一旦人们确定了感兴趣的部分，他们就可以仔细阅读。

www.vogue.com时尚网没有任何副标题，这使得浏览很困难。以这种方式排列的文本通常以F模式浏览。

分块内容和指定清晰的、描述性的标题，这些标题从页面上的其他文本和内容中脱颖而出，从而成倍地提高了内容的可用性，因为它们支持Layer-Cake浏览模式，而层饼Layer-Cake浏览模式不同于其相对的F模式，通过允许用户快速识别与其任务最相关的内容，提高用户的效率。