视觉层级如何帮助访客理解页面

赋予每个级别不同的角色

标题、摘要、标签和正文需要与其含义相匹配的可见差异。如果每一行都又大又粗，那么页面就会有视觉噪音而不是层次结构。

列出真实页面中的文本角色，并确认每个角色都有一种可重用的处理方式。

首先对页面上的信息进行排名，然后分配视觉权重。主要问题、基本解释和主要行动通常需要比支持标签或装饰更加突出。仅有尺寸是不够的：位置、间距、对比度和分组一起发挥作用。以灰度或模糊缩略图形式查看页面，以查看预期的顺序是否在不阅读每个单词的情况下仍然可见。

使用间距来显示关系

邻近性告诉访问者哪个标签属于哪个段落、图像或动作。每个元素之间的相等间隙可以使单独的部分看起来像一个块。

使用实际内容长度检查部分边界、卡片内和按钮周围的垂直节奏。

间距显示哪些项目属于一起。标题放置在比上一节更靠近下一段的位置更容易解释，而各处相同的间隙会使页面变得扁平。使用小间距比例并将其一致地应用于部分、内容组和控件。在移动设备上，回顾一下环绕如何改变这些关系；较长的翻译标题可能需要调整空间，同时又不失去与下面内容的联系。

控制重点

颜色和大小应指出页面的优先级，而不会使次要信息消失。高对比度装饰标签可以与其支持的服务名称或价格竞争。

快速查看页面并记下注意到的前三个元素；将该订单与预期行程进行比较。

排版需要角色之间有足够的对比，但每个句子都不需要新的风格。定义页面标题、章节标题、正文、标签和元数据的级别。检查长篇文章、定价说明和表格说明以及主页。如果读者必须依靠颜色来区分标题和标签，请加强尺寸、粗细或间距，以便层次结构能够适应不同的屏幕和辅助功能设置。

在移动设备上重新测试层次结构

响应式布局会改变宽度、换行符和元素顺序，因此桌面重点可能无法生存。如果源顺序错误，侧面板可能会成为主要内容之前的一个长块。

行动应该根据重要性进行竞争。主要联系按钮、次要信息链接和内嵌文章参考不应全部使用相同的处理方式。在决策区域内保留一项主导行动，并使用较安静的链路来支持路线。使用真实目标和错误状态测试页面。当访问者可以浏览、理解和采取行动而无需反复返回顶部来找出重要的事情时，层次结构就成功了。