一家工业设备制造企业完成了产品详情页改版。
页面包含完整的设备参数、适用工况、技术资料、企业能力介绍和采购咨询入口。设计团队统一了字体、图片比例、卡片样式和品牌色彩，开发团队也完成了响应式适配。
从内容清单来看，页面没有明显缺失。
但在实际使用中，采购工程师仍然可能忽略一项决定设备能否正常使用的限制条件。
原因并不复杂。
这项限制被安排在一个浅灰色说明框中，文字比正文小，位置远离主要参数表。与此同时，页面上的品牌口号、产品卖点和多个询盘按钮却采用了更大的字号、更醒目的颜色。
用户并不是没有看到这项信息所在的页面。
他没有识别出这项信息比其他内容更值得关注。
这就是视觉层级设计需要解决的问题。
第一篇《Layout as Information Architecture》说明，排版属于信息表达工程，需要同时保持内容逻辑、视觉呈现与 HTML 语义的一致性。
第二篇《Task-First Layout》进一步提出，页面结构应从用户需要完成的任务出发，并通过 Task-to-Layout Mapping 将任务转化为内容、模块和验收依据。
第三篇需要向前推进：
当页面已经具备正确的信息结构，设计系统应当如何分配用户的注意力，让重要内容在适当的时机被识别、理解和使用？
答案不是增加更多粗体、更大的字号或更多强调色，而是建立一套以用户任务和信息关系为基础的 Visual Hierarchy，即视觉层级设计体系。
一、Visual Hierarchy：视觉层级究竟在组织什么？
视觉层级是通过元素的大小、位置、对比度、间距、分组、形态及其他视觉特征，引导用户识别不同信息的重要性及相互关系的设计方法。
Nielsen Norman Group 在有关视觉层级的研究中，将其核心作用概括为：通过视觉特征引导用户按照重要程度关注界面元素。
这里需要区分三个概念。
Information Priority（信息优先级）回答哪些信息对于完成任务更加重要。
Visual Hierarchy（视觉层级）回答这些信息如何在页面中形成可识别的主次关系。
Attention Guidance（注意力引导）则关注用户在实际使用过程中可能先注意什么，以及怎样继续发现其他信息。
三者有关联，但不能互相替代。
例如，在工业设备产品页面中，一项使用限制可能属于最高优先级的信息。
它不一定需要采用整页最大的字体，但必须在用户作出相关技术判断时容易被发现。
如果这项限制仅仅出现在页脚附近，即使使用红色文字，也未必能够弥补其位置和上下文问题。
反过来，产品名称通常具有很高的视觉权重，因为它承担页面识别任务。
但产品名称的视觉权重较高，并不意味着它在所有业务判断中都比设备适用条件重要。
视觉层级应当表达信息关系，而不是简单按照商业宣传价值分配视觉空间。
视觉层级不是把页面所有内容排出绝对名次
真实页面存在多种信息关系。
有些内容需要被用户首先识别。
有些内容需要与相邻信息一起阅读。
还有些内容只在特定条件下才具有较高的重要性。
例如，技术参数、测试条件和适用限制应当作为一个相互关联的信息组被理解。
如果设计师单独放大参数数值，却将测试条件压缩成很小的注释，用户就可能误以为参数在所有情况下都成立。
因此，视觉层级不仅要解决“什么更醒目”，还必须解决“哪些内容属于同一个判断单元”。
二、为什么信息完整的页面，仍然可能产生理解障碍？
视觉层级失效通常不是因为缺少设计元素，而是因为视觉信号与信息价值不一致。
页面可能具有大量经过设计的组件，但这些组件释放出的信号存在冲突。
例如：
产品名称、品牌口号和活动宣传语使用近似的标题字号。
关键技术指标与普通营销数字采用同样的卡片样式。
适用限制和一般免责声明都使用浅灰色小字。
技术文件入口与企业新闻链接拥有相似的视觉形式。
多个 CTA 同时采用高对比度的主按钮样式。
用户面对这样的页面，需要额外判断哪些元素真正与当前任务有关。
页面越复杂，这种判断成本可能越高。
Nielsen Norman Group 对网页扫描行为的研究表明，用户并不总是逐字阅读。他们经常依赖标题、分组、显著文字和其他线索定位需要的信息。
但需要注意，所谓 F-shaped scanning 并不是所有网页都必须遵守的固定眼动规律。
用户的目标、内容组织和页面结构会改变其扫描方式。
缺少清晰结构的长文本更容易使用户采用效率较低的扫描方式，而具有明确标题层级的内容通常更容易支持按章节定位。
因此，不能将视觉层级设计简化为“把重要内容放在页面左上角”。
真正的原则是：
让用户能够依据当前任务识别相关内容，而不是要求用户阅读全部内容之后再自行判断重要性。
三、视觉层级应当支持三个连续的信息任务
网站设计可以把视觉层级的基本目标拆分为三个阶段：识别、定位与理解。
第一阶段：Identification——识别当前页面和信息对象
用户进入页面后，需要确认自己正在查看什么。
对于产品页，用户应该能够识别产品名称、设备类型和核心用途。
对于技术文章，用户应能够识别问题、讨论对象和内容范围。
对于分类页面，用户应能够确认当前分类是否包含自己寻找的产品或服务。
因此，页面主标题、主题摘要和必要的对象识别信息需要形成相对明确的视觉中心。
如果产品页面最大的文字是“全球领先的解决方案提供商”，而真正的产品名称只是较小的辅助文字，页面就可能存在识别层级错误。
第二阶段：Orientation——定位与任务相关的内容
确认页面主题之后，用户需要判断下一步从哪里获得信息。
例如，工业泵采购工程师可能准备查看性能范围、适用介质或型号比较。
这就要求页面的主要章节、导航及内容分组能够被快速识别。
如果所有章节标题都采用相同的弱对比度、相似的间距和密集的排列方式，用户很难形成页面结构的整体认识。
第三阶段：Comprehension——正确理解信息及其条件
找到信息之后，用户仍然需要理解信息的含义。
例如，设备性能参数是否对应特定测试条件？
不同型号的数据是否具有可比性？
某一项限制是否只适用于特定配置？
这时，视觉层级必须进一步表达信息之间的关系。
仅仅突出数值并不够。
页面需要同时呈现重要信息及影响其成立的必要上下文。
这三个阶段并不是严格固定的用户行为顺序，而是用于页面设计和验收的分析框架。
四、建立视觉层级的六个主要控制维度
从工程角度，可以将 Visual Hierarchy 拆分为六个主要变量。
| 维度 | 主要作用 | 常见失效问题 |
|---|---|---|
| Scale | 使用尺寸建立相对重要性 | 所有标题和卖点都很大，缺少主次 |
| Typography | 利用字体、字重和行高组织内容 | 正文、标签、标题之间区别不清 |
| Spacing | 通过距离表达关联与边界 | 标题与所属正文距离过大 |
| Contrast | 增强可辨识性并区分状态 | 重要说明对比度不足 |
| Grouping | 将相关信息组织成可识别单元 | 参数和适用条件被错误拆分 |
| Position & Flow | 安排信息出现的位置与阅读顺序 | 重要信息远离用户作出判断的位置 |
这些变量应当共同发挥作用。
例如，一个醒目的参数摘要卡片可以通过字号区分指标名称与数值，通过间距将单位和数值保持关联，通过边框与背景明确卡片范围。
但如果这个卡片将测试条件放在页面其他区域，仍然可能造成信息表达错误。
因此，视觉层级不能只检查单个组件是否美观。
还需要检查组件在整个任务链路中的位置，以及它是否保留必要的内容关系。
视觉强调需要有明确的使用条件
设计系统中的每一种高强度视觉样式，都应该具有明确用途。
例如，主标题样式用于识别当前页面的核心主题。
关键数据样式用于突出需要比较或判断的指标。
风险提示样式用于说明具有实际影响的使用限制。
主操作按钮用于承接当前任务的合理下一步。
如果企业宣传语、行业口号、产品优势和采购限制全部使用相同强度的强调样式，这套视觉系统就失去了区分能力。
强调应当是一种有限使用的信息表达资源。
它不必被规定为某个固定数量，但应通过组件规范防止无限增加。
五、Typography Scale：如何建立有效的字体层级？
字体设计是视觉层级的主要组成部分，但不应该只通过字号差异完成。
字体家族、字重、行高、段落宽度和标题间距都影响内容如何被识别。
对于专业知识型网站，建议首先建立稳定的字体角色，而不是为每个页面单独决定字体大小。
建立基于内容角色的字体体系
以下是一套适用于中文技术文章及企业内容页面的初始建议。
| 文本角色 | 建议初始字号 | 建议行高 | 主要用途 |
|---|---|---|---|
| 页面主标题 | 30–40px | 1.2–1.4 | 识别页面主题 |
| 主要章节标题 | 24–30px | 1.3–1.5 | 建立主要内容分区 |
| 次级章节标题 | 20–24px | 1.35–1.55 | 表达下级主题 |
| 正文 | 16–18px | 1.6–1.85 | 承载主要阅读内容 |
| 参数名称、表格及辅助文本 | 14–16px | 1.4–1.7 | 说明和数据呈现 |
| 来源、时间及补充说明 | 14–15px | 1.45–1.7 | 提供元数据和上下文 |
这些数值属于项目初始设计建议，不是 Google 排名要求，也不等于 WCAG 规定了所有正文必须使用某个固定字号。
实际字号需要结合字体特性、中文与英文比例、设备环境和用户测试调整。
对于较长的技术文章，正文通常不宜为了追求信息密度而持续缩小。
对于包含大量参数的工业设备页面，也不应该将所有参数内容都缩小到难以阅读的程度。
字号比例需要保持稳定
页面标题不应该在不同模板中失去角色一致性。
例如，同一个网站的技术文章页面主标题采用 38px，产品详情页主标题采用 24px，本身不一定错误。
如果两种模板具有不同的阅读场景，这种差异可以合理存在。
真正需要避免的是：同一类信息在不同页面中频繁改变视觉角色。
当用户已经学会通过某种样式识别章节标题或技术限制时，设计系统应该尽可能保留这种稳定性。
字重不是越高越好
粗体适合用于识别标题、关键术语、重要结论与需要强调的限定条件。
但如果整段文字都使用粗体，用户仍然无法在段落内部识别重点。
建议将正文中的粗体用于具体的信息单元，而不是整段宣传。
例如：
“设备适用于多种复杂工业环境。”
这样的强调无法提供明确的判断依据。
更有价值的表达是：
介质温度超过指定范围时，应重新确认材料和密封配置。
前者主要强化宣传印象。
后者直接关联实际决策条件。
这里的句子仅用于说明视觉表达方法，不构成任何具体设备的技术参数或适用承诺。
六、标题层级：为什么字号一致不等于语义正确？
网页视觉层级与 HTML 标题层级属于两个不同层面。
HTML 中的 h1、h2、h3 等元素表达文档结构。
CSS 决定这些元素以什么形式被呈现。
W3C WAI 的 Page Structure Tutorial 指出，标题用于表达页面内容组织关系，并能帮助辅助技术进行章节导航。
因此，标题样式不能脱离内容关系随意设置。
建立标题语义与视觉样式的对应关系
建议按照以下原则设计内容页面：
页面主标题负责识别该页面的核心对象。
主要章节标题负责划分内容主题。
子章节标题用于在所属章节下进一步组织信息。
普通标签、提示语和卡片名称应根据实际语义选择适当元素，不应仅因为需要大字号就使用标题元素。
例如，下面的结构具有清楚的文档关系：
<main>
<article>
<h1>Industrial Cooling Pump</h1>
<section aria-labelledby="specifications">
<h2 id="specifications">
Technical Specifications
</h2>
<h3>Operating Conditions</h3>
<p>Relevant operating requirements.</p>
<h3>Performance Information</h3>
<p>Performance data and necessary context.</p>
</section>
<section aria-labelledby="documents">
<h2 id="documents">Technical Documents</h2>
</section>
</article>
</main>实际 WordPress 文章中，主标题通常由主题模板输出。
因此，文章正文应当根据已有标题结构开始分节，避免编辑器内容重复输出页面标题。
但不能机械理解为“正文必须从某种固定标题级别开始”就一定符合语义要求。
关键在于最终页面的标题层级是否合理。
为什么主标题必须具有明确的视觉身份？
Google Search Central 在有关搜索结果标题链接的官方文档中指出，Google 可能使用页面的主要视觉标题、标题元素，以及其他具有较强视觉显著性的文本来生成标题链接。
官方还明确提到，当一个页面存在多个同样醒目的大型标题时，系统可能难以判断哪个才是主标题。
这使得主标题设计具有明确的技术意义。
例如，产品详情页应当避免将品牌宣传语和实际产品名称设计成两个相互竞争的主标题。
更合理的方式是将产品名称设置为主要识别对象，将品牌说明作为辅助信息呈现。
但必须注意：
这属于 Google 对标题链接生成的指导，不意味着放大 H1 字号就会提高搜索排名。
七、正文行宽与阅读节奏：为什么一行文字不能无限延长？
在大屏幕设计中，团队经常希望尽可能利用页面宽度。
但正文区域过宽，可能使读者在换行时难以定位下一行的起点。
web.dev 的响应式排版资料介绍了控制行长的排版原则。
其中常见的英文排版经验，例如单栏文本大约 45–75 个字符的行长范围，主要针对特定字形和排版条件，不应直接转化为中文网页必须遵守的绝对数字。
中文、英文、数字、技术符号和混合语言会产生不同的视觉宽度。
因此，中文网站应该通过实际字体和浏览器渲染测试确定行宽。
建议采用内容容器宽度，而不是页面宽度
对于中文长文，可以从约 42–46 个汉字宽度的正文容器开始测试。
这一设置只是初始工程建议。
当页面包含大型表格、技术图纸和复杂公式时，可以让相应组件采用更宽的容器，而不是为了容纳表格将所有正文同步拉宽。
例如，页面可以使用三种不同的宽度角色：
Reading Container： 主要用于连续正文阅读。
Content Container： 用于参数表格、案例信息和图文组合。
Wide Container： 用于确实需要较大展示面积的技术图纸或复杂比较。
这样既能保证正文阅读节奏，也不会限制必要的信息表达。
行高与段落间距共同决定阅读结构
行高过小，容易使连续文字显得密集。
行高过大，则可能使一个段落内部的文字失去凝聚力。
因此，行高需要与字体、段落长度和页面用途共同确定。
对于中文技术长文，可以将正文行高 1.7 左右作为初始测试值，然后根据字体实际表现调整。
但这里需要区分 WCAG 2.2 的 1.4.12 Text Spacing 成功准则。
该准则要求页面在用户覆盖特定文本间距设置时，不发生内容或功能丢失。
它并没有要求所有网站必须默认使用这些数值。
这一点很重要。
设计规范应当同时关注默认阅读体验和用户调整样式之后的可用性。
八、Spacing：为什么留白实际上在表达信息关系？
留白不只是视觉美观问题。
它可以表达两个元素属于同一个信息单元，或者两个元素属于不同主题。
Nielsen Norman Group 在有关 Gestalt Proximity Principle 的研究中指出，相互靠近的元素更容易被感知为同一组，而距离较大的元素更容易被理解为不同组。
这可以直接解释很多网站排版失效现象。
例如，一个章节标题与上一段正文之间只有 12px 的距离，却与其下方正文相隔 32px。
视觉上，读者可能将这个标题错误地理解为上一段内容的结尾，而不是下一节的开头。
同样，技术参数的单位与数值之间如果被过度拉开，用户可能无法快速确认两者对应关系。
建立“组内距离小于组间距离”的规则
建议在网站设计系统中形成稳定的空间关系。
同一组标签与输入框之间，保持较短间距。
同一组标题与对应正文之间，保持适当关联。
不同内容模块之间，使用明显更大的分隔距离。
这些规则比规定“所有卡片间距必须统一为 24px”更有意义。
因为实际页面中的信息关系可能不同。
使用间距阶梯统一设计系统
以下数值可以作为企业网站的初始 Spacing Tokens。
| 间距级别 | 建议值 | 主要用途 |
|---|---|---|
| Space 1 | 8px | 图标与标签、紧密关联信息 |
| Space 2 | 12px | 同一信息组内部 |
| Space 3 | 20px | 段落与小型组件之间 |
| Space 4 | 32px | 子章节与常规内容模块 |
| Space 5 | 48px | 主要章节之间 |
| Space 6 | 72px | 大型页面区域之间 |
这些不是强制间距。
它们用于为团队提供一套可复用的初始设计语言。
实际应用时，应根据字号、容器宽度、页面密度和响应式布局调整。
关键在于建立可预测的相对关系，而不是每次凭视觉直觉重新决定间距。
九、Contrast：为什么高对比度不等于有效视觉层级？
对比度既涉及信息区分，也涉及可访问性。
视觉层级设计需要利用明暗与颜色差异帮助用户识别标题、正文、交互组件和重要状态。
但是，不能将视觉效果与可访问性要求混为一谈。
WCAG 2.2 的对比度标准
对于以 WCAG 2.2 AA 为验收目标的页面，需要关注以下要求。
| 对象 | 对应标准 | 主要要求 |
|---|---|---|
| 常规文字 | 1.4.3 Contrast (Minimum)，AA | 文本与背景的对比度至少为 4.5:1 |
| 大字号文字 | 1.4.3 Contrast (Minimum)，AA | 满足标准定义的大字号文字，对比度至少为 3:1 |
| 重要界面组件 | 1.4.11 Non-text Contrast，AA | 识别组件及状态所必需的视觉信息，与相邻颜色对比度至少为 3:1 |
| 有信息意义的图形元素 | 1.4.11 Non-text Contrast，AA | 理解图形所必需的部分通常需要达到 3:1，适用相应例外 |
| 使用颜色表达信息 | 1.4.1 Use of Color，A | 颜色不能成为传递信息或区分状态的唯一视觉手段 |
这里需要注意，大字号文字并不是简单指 CSS 设置为 18px 或 20px。
WCAG 对大字号文字有具体定义，通常对应至少 18pt 的普通文字，或至少 14pt 的粗体文字。在常见的 CSS 像素换算中，分别约为 24px 和 18.67px，但实际判断仍需结合字体与规范中的条件。
同时，3:1 的非文字对比度要求并不意味着所有装饰性边框、分隔线和背景色都必须达到该数值。
它主要针对识别界面组件、组件状态和理解图形内容所必需的视觉信息。
如果一条浅灰色分隔线只是装饰，而信息结构已经通过其他方式清楚表达，该线条的判断就与承担必要信息功能的输入框边界不同。
设计规范应当理解这些边界，而不是把所有元素简单套入同一项规则。
为什么浅灰色辅助文字可能产生严重问题？
许多企业网站习惯使用浅灰色文字展示时间、来源、说明和限制条件。
这种设计容易形成一种隐含判断：颜色越浅，信息越不重要。
但实际内容并不总是如此。
例如，技术报告的测试日期、设备参数的适用条件和产品版本说明，在视觉上可能属于辅助信息，却是正确解释主要数据的必要上下文。
如果设计师仅根据“辅助文字”这一组件角色降低其对比度，就可能让用户忽略影响判断的重要条件。
因此，必须区分：
视觉权重较低，不代表信息可以难以辨认。
普通正文、辅助说明和来源文字可以通过字号、位置和分组建立主次，但仍应满足适用的可访问性要求。
为什么不能只依靠颜色表示状态？
假设某产品比较表使用绿色表示适用、红色表示不适用。
如果没有文字、符号或其他可辨识方式，部分用户可能无法正确理解状态。
更可靠的形式是同时使用文字说明，例如“符合已提供的条件”“需要进一步确认”“不适用”。
颜色可以帮助提高识别效率，但不能独立承担全部信息含义。
这种做法对技术页面尤其重要。
因为错误理解一个状态，可能造成比普通界面操作错误更大的业务影响。
十、Grouping：信息分组如何影响用户判断？
视觉分组是网站排版中容易被低估的设计能力。
很多页面有明确的标题、完整的内容和足够的留白，却仍然让用户难以建立信息之间的关系。
原因可能是内容被按照组件类型组织，而不是按照用户需要理解的关系组织。
例如，一台工业循环泵的产品页面将以下内容分别放置在不同区域：
技术参数表。
适用介质说明。
环境条件说明。
材料与密封配置。
运行限制。
这些模块单独看都可以正常使用。
但对于设备选型任务而言，它们共同决定一项核心判断：
设备是否适用于指定工况？
如果用户需要反复跳转多个区域才能完成判断，页面虽然拥有清晰的局部结构，却缺少有效的整体任务结构。
将信息分组建立在语义关系之上
建议在页面设计阶段区分三种关系。
第一种是归属关系。
例如，多个技术参数属于同一设备型号。
第二种是依赖关系。
例如，一项性能指标需要结合对应的测试条件解释。
第三种是比较关系。
例如，两个型号的流量、扬程、功率和材料配置需要在同一评价口径下比较。
这些关系不应该全部采用相同的视觉形式。
归属关系可以通过卡片、章节或容器表达。
依赖关系需要通过相邻说明、注释或明确关联表达。
比较关系更适合采用统一字段的比较表格。
卡片设计并不天然优于表格
企业网站常常采用卡片展示技术参数。
卡片可以帮助用户识别少量关键指标，尤其适合产品概览或移动端摘要。
但当用户需要同时比较大量型号及多项属性时，卡片可能增加视觉搜索成本。
例如，四种工业泵分别具有多项参数。
如果每种型号采用独立卡片，用户需要在卡片之间反复移动视线，寻找同名字段。
如果采用具有明确行列关系的表格，相同参数就可以直接对齐比较。
因此：
关键参数摘要可以使用卡片，系统性参数比较应优先评估表格。
这不是要求所有技术数据必须使用表格，而是要求组件类型与信息任务匹配。
不要让视觉容器切断必要的上下文
有些页面将关键技术数值放在高亮卡片中，把测试条件放在单独的“备注”模块中。
这种设计可能导致用户只记住数值，而没有同时理解其成立条件。
如果测试条件对参数含义具有决定作用，应当在信息结构上保持必要关联。
例如：
额定性能：参见技术规格表及对应测试条件。
这样的表达虽然没有提供额外数值，但明确说明了参数需要结合特定条件理解。
实际产品内容则应进一步提供真实、完整、可验证的条件信息。
十一、Position & Flow：信息位置为什么属于视觉层级的一部分？
视觉层级不仅由元素本身的样式决定，还受到页面位置与浏览路径影响。
同样一项内容，出现在不同位置，可能产生不同效果。
例如，设备适用限制出现在关键参数表旁边，用户在比较参数时更容易发现。
如果同样的限制被放在页面底部，与大量一般说明混合，就可能失去与技术判断的直接关系。
但需要避免一种机械规则：
把所有重要信息都放在页面顶部。
不同信息具有不同的使用时机。
设计信息顺序，需要同时满足三个条件
第一，任务必要性。
用户是否必须获得某项信息，才能继续完成当前任务？
第二，信息依赖性。
某项信息是否必须结合其他内容才能被正确解释？
第三，访问时机。
用户在什么阶段最可能需要这项信息？
例如，一篇讲解工业设备故障诊断的技术文章，可以先说明故障现象及适用范围，再介绍诊断逻辑，最后讨论处理方法。
如果某项处理操作存在安全前提，这些前提需要在相关操作之前清楚表达，而不能放在文章结尾作为附加说明。
对于采购类页面，技术适用性信息通常需要在最终提交询价之前被充分呈现。
对于术语解释文章，简明定义则可能适合出现在正文开头。
这些布局差异来自任务性质，而不是页面模板的美观要求。
首屏应该建立信息方向，而不是承担全部内容
首屏通常需要回答：
用户进入了什么页面？
当前页面解决什么问题？
下一步应该如何查找必要信息？
但不意味着所有重要内容都必须出现在首屏。
例如，工业设备产品页面可以在首屏显示产品身份、主要用途和关键参数入口。
更复杂的性能条件、型号比较和安装资料可以在后续章节展开。
只要用户能够识别这些信息的位置，并在需要时有效访问，就没有必要将页面压缩成一个超高密度的首屏。
十二、Attention Hierarchy：如何管理页面中的注意力竞争？
企业网站通常同时存在品牌宣传、产品信息、技术内容和转化入口。
这些内容都可能使用视觉强调。
但当多个区域争夺注意力时，用户可能难以识别真正重要的信息。
例如，一个产品详情页同时具有：
大幅 Hero Image。
醒目的品牌宣传语。
多个产品优势卡片。
悬浮询价按钮。
促销横幅。
下载按钮。
技术参数摘要。
如果这些元素全部使用强烈对比、动画或较大的视觉面积，页面就可能缺少稳定的注意力中心。
建立视觉强调的使用规则
建议将页面中的强调分为三个层次。
| 强调级别 | 建议用途 | 使用原则 |
|---|---|---|
| Primary Emphasis | 页面主题、当前主要任务的关键内容 | 应具有清楚、稳定的识别性 |
| Secondary Emphasis | 章节入口、重要支持信息、合理的下一步操作 | 与主要信息形成从属关系 |
| Contextual Emphasis | 限制条件、例外、术语、局部提示 | 根据具体上下文突出，不与所有内容竞争 |
这一分类属于本专栏的设计系统建议。
实际项目中，并不要求每种强调级别只使用某一种颜色或字号。
相反，应当根据元素角色采用多种相互协调的视觉线索。
例如，关键限制条件可以通过边框、背景、文字标题和相邻位置共同表达。
它不一定需要使用整页最强烈的红色。
动画不是默认的注意力优化手段
动画可以帮助用户感知状态变化、组件展开或者操作反馈。
但循环播放的装饰动画可能分散注意力。
如果页面持续存在多个运动元素，用户可能难以集中阅读技术内容。
因此，动画应当具有明确目的。
对于需要使用运动效果的页面，还应依据 WCAG 相关要求处理可暂停内容、闪烁风险及用户的减少动态效果偏好。
特别是视觉强调不能依赖动画来弥补原本不清楚的信息结构。
稳定的信息层级应该在动画停止之后仍然成立。
十三、Mobile Visual Hierarchy：移动端为什么不能只是缩小字号？
移动端排版的主要挑战并不是屏幕更小，而是信息关系需要在更有限的空间内保持清楚。
桌面端可以通过两列或多列结构表达不同信息组之间的关系。
但在移动端，原有布局通常需要重新排列。
如果只是将所有内容缩小，就可能造成文字难以辨认、按钮难以操作、表格失去可比性等问题。
因此，移动端视觉层级应当重新设计布局，而不是简单缩放桌面视觉稿。
移动端可以改变顺序，但不能破坏任务逻辑
例如，一个工业设备产品页在桌面端采用左侧产品图片、右侧参数摘要的布局。
移动端可以调整成先显示产品名称和必要摘要，再显示图片及进一步的技术资料。
这样的变化可能具有合理性。
但如果主要技术参数在移动端被直接隐藏或删除，用户的选型能力就可能受到影响。
Google 的 Mobile-first Indexing Best Practices 要求移动端保留与桌面端实质等价的主要内容，并允许通过折叠组件等方式调整展示形式。
同时，Google 不会为了加载主要内容而执行点击、滑动或输入等用户交互。因此，不能将关键内容设计为只有经过这些操作才从服务器获取，而又缺少可抓取的等价呈现方式。
移动端验收需要同时检查：
信息是否完整。
阅读顺序是否合理。
视觉分组是否保留。
交互组件是否仍然可用。
主要内容是否能够被正常渲染与访问。
WCAG 2.2 对缩放与重排的要求
WCAG 2.2 的 1.4.4 Resize Text（AA）要求文本可以在无辅助技术情况下放大至 200%，而不丢失内容或功能，适用规范中的例外。
1.4.10 Reflow（AA）则针对特定视口条件要求内容能够重排，通常不需要双向滚动，并保留适用例外。
例如，在 320 CSS px 宽度的垂直滚动视口下，需要检查常规正文和组件是否能够正常使用。
对于确实需要二维布局才能保留意义的复杂表格、图形等内容，标准存在相应例外。
这意味着不能简单要求所有技术表格在窄屏下取消横向滚动。
如果一张复杂参数比较表必须保留列之间的比较关系，可以在明确的滚动容器中允许表格横向滚动。
但正文内容本身不应因此产生整页不必要的水平溢出。
移动端更需要明确的信息分组
手机页面的纵向长度通常较大。
为了避免用户在滚动过程中失去方向，可以采用清楚的章节标题、适当的段落间距和必要的局部导航。
但不能因此让每个小段落都变成单独的卡片。
卡片数量过多也会增加页面高度与内容碎片化。
设计时需要平衡信息完整、视觉容器数量和主要任务的连续性。
十四、不同页面类型应该怎样建立视觉层级？
视觉层级不能脱离页面类型制定。
企业首页、产品详情页、技术文章和分类比较页的核心任务不同，需要不同的信息组织方式。
企业首页：优先建立业务识别与导航关系
企业首页通常需要让用户判断企业提供什么产品或服务，以及如何进入适合自己的内容区域。
因此，页面主标题、业务范围与分类导航应当具有清楚的层级。
企业资质、交付能力和品牌信息可以支持信任建立，但不应使主要业务入口难以发现。
对于业务类型复杂的企业，应优先评估清晰的产品和解决方案分类，而不是简单增加展示模块。
产品详情页：优先呈现技术判断信息
工业设备产品页应当支持用户确认设备身份、主要性能、适用条件和技术资料。
关键技术条件通常需要获得较高的视觉优先级。
但不能因为视觉突出而脱离必要的单位、前提或限制。
产品名称用于识别对象。
关键参数摘要支持初步筛选。
完整技术规格支持进一步判断。
适用范围与限制说明用于减少错误匹配。
技术资料和咨询入口支持下一步行动。
这些模块应具有明确的主次关系和关联方式。
分类与比较页：优先呈现差异
分类页的主要任务通常是帮助用户找到合适的产品组。
比较页则重点支持识别不同选项之间的差异。
因此，两者不应套用相同的卡片密度和信息结构。
分类页可以优先突出类别名称、代表性用途和导航。
比较页则需要突出统一参数、差异项、比较条件和相应解释。
技术文章页：优先维持阅读与证据关系
技术文章首先需要有明确的主题标题、简洁导语和合理章节结构。
正文应形成稳定的阅读节奏。
表格、代码、图片和引用资料应在有信息价值时使用，而不是为了增加页面视觉变化频繁插入。
如果文章讨论的是一个技术结论，相关证据和适用边界应与该结论保持必要联系。
例如，不能在文章开头放置醒目的性能结论，却将其测试条件放到读者难以定位的最后一节。
视觉层级应当同时支持阅读理解与事实核验。
十五、WordPress / GeneratePress 如何实现视觉层级规范？
对于使用 WordPress、GeneratePress 和 Gutenberg 的企业网站，视觉层级最好通过 Design Tokens、模板规则和可复用组件管理。
不应让每位编辑人员在每篇文章中分别手动修改标题字号、颜色和段落间距。
否则，随着内容数量增长，网站会逐步出现样式不一致、阅读节奏变化和组件含义混乱等问题。
第一层：定义全站 Design Tokens
建议至少定义字体家族和默认正文尺寸、页面标题及章节标题比例、主要正文容器宽度、内容区域及章节间距、文字与背景颜色，以及链接、按钮和焦点状态。
技术提示、限制条件及其他语义组件样式，也应进入设计系统。
这些设计变量可以通过 GeneratePress 的全局设置、子主题样式表或相应的设计系统管理。
第二层：建立正文排版基线
以下 CSS 是可用于 GeneratePress 网站进行初步测试的排版示例。
它不是完整生产配置，也不保证直接适合所有网站主题和页面模板。
建议先在测试环境验证，再部署到正式站点。
:root {
--vh-reading-width: 46rem;
--vh-text: #1f2937;
--vh-muted: #475569;
--vh-heading: #111827;
--vh-space-1: 0.5rem;
--vh-space-2: 0.75rem;
--vh-space-3: 1.25rem;
--vh-space-4: 2rem;
--vh-space-5: 3rem;
--vh-line-height: 1.75;
}
/* 文章主要阅读区域 */
.single-post .entry-content {
max-width: var(--vh-reading-width);
margin-inline: auto;
color: var(--vh-text);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
line-height: var(--vh-line-height);
overflow-wrap: break-word;
}
/* 页面主标题 */
.single-post .entry-title {
color: var(--vh-heading);
font-size: clamp(1.875rem, 1.35rem + 2vw, 2.5rem);
line-height: 1.3;
font-weight: 700;
}
/* 主要章节标题 */
.single-post .entry-content h2 {
color: var(--vh-heading);
font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
line-height: 1.4;
margin-block: var(--vh-space-5) var(--vh-space-3);
scroll-margin-top: 6rem;
}
/* 次级章节标题 */
.single-post .entry-content h3 {
color: var(--vh-heading);
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
line-height: 1.45;
margin-block: var(--vh-space-4) var(--vh-space-2);
}
/* 段落节奏 */
.single-post .entry-content p {
margin-block: 0 var(--vh-space-3);
}
/* 辅助信息 */
.single-post .entry-content .vh-meta {
color: var(--vh-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
/* 表格允许在必要时横向滚动 */
.single-post .entry-content .wp-block-table {
overflow-x: auto;
max-width: 100%;
}
/* 键盘操作焦点 */
.single-post .entry-content :focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 3px;
}
@media (max-width: 767px) {
.single-post .entry-content {
font-size: 1rem;
line-height: 1.7;
}
.single-post .entry-content h2 {
margin-block: 2.25rem 1rem;
}
}该示例主要解决三个问题。
首先，为标题和正文建立明确的视觉比例。
其次，通过相对稳定的章节间距表达信息边界。
最后，保留必要的移动端调整与键盘焦点提示。
需要特别注意，代码中的颜色、字号与间距只是初始设置。
部署时仍须结合实际背景、字体、组件状态和内容进行对比度与缩放检查。
此外，CSS 只能改变呈现方式，不能修复 WordPress 内容本身不合理的标题语义。
第三层：建立语义提示组件
某些内容需要在正文中获得特殊强调。
例如适用范围说明、使用限制、技术参数的测试条件、数据来源，以及版本和更新时间。
建议为这些信息建立具有明确内容角色的组件。
以技术限制说明为例：
<aside
class="vh-callout vh-callout--critical"
aria-labelledby="critical-note-title"
>
<h3 id="critical-note-title">
适用条件说明
</h3>
<p>
请依据实际工况与设备技术资料，
核实相关性能及使用限制。
</p>
</aside>该组件可以使用背景色、左侧边框、明确标题和适当间距建立识别性。
但应避免只使用红色背景表示风险，而不提供必要的文字说明。
第四层：让 ACF 字段决定内容意义
对于具有复杂技术信息的企业网站，可以通过 ACF 管理关键字段。
例如：
technical_limitations 记录实际使用限制。
test_conditions 记录参数测试条件。
document_version 记录文件版本。
data_source 记录数据来源。
页面模板再根据字段的实际含义调用对应组件。
这样可以避免编辑人员随意选择“黄色提醒框”或“红色提示框”，却没有明确内容分类。
但是，字段设计必须与真实业务含义一致。
如果一项限制尚未经过技术确认，系统不能仅因字段存在就自动生成确定性的技术结论。
十六、视觉层级与 Core Web Vitals 是否存在冲突？
视觉强调有时依赖大型图片、复杂字体、动画和额外组件。
这些设计会产生性能成本。
例如，大幅 Hero Image 可能影响 Largest Contentful Paint（LCP）。
字体资源加载可能改变文字布局，并在特定条件下增加布局偏移风险。
复杂动画和脚本组件可能影响交互响应。
但不能由此得出“应该取消所有图片和复杂组件”的结论。
正确的方法是评估视觉元素是否承担真实的信息任务，以及它们的技术成本是否合理。
大型视觉元素需要有明确用途
如果产品图片帮助用户识别设备结构或实际应用场景，就具有信息价值。
但如果同一页面连续使用多张仅承担装饰作用的大图，且延迟了主要信息加载，就需要评估其必要性。
对于首屏重要图片，应合理设置尺寸、使用适当格式，并避免错误的加载策略。
字体系统需要控制资源成本
网站可以使用自定义字体，但不应只关注字体风格。
需要考虑字体文件大小、加载方式、后备字体及布局稳定性。
对于包含大量中文字符的站点，字体资源策略尤其需要谨慎。
设计团队可以优先建立稳定、兼容的字体栈，并在确有品牌或阅读需求时再评估自定义字体。
动画应当与实际任务有关
交互反馈和状态变化动画可能具有明确用途。
但持续运动的装饰元素如果增加脚本负担、影响阅读或干扰用户操作，就应重新评估。
Core Web Vitals 反映部分真实页面体验，但不是判断视觉层级是否合理的直接指标。
一个拥有良好 LCP、INP 和 CLS 的页面，仍然可能存在错误的信息强调。
反过来，视觉结构清楚的页面也可能需要修复加载与交互性能问题。
视觉层级质量与技术性能需要分别测量，再共同纳入页面验收。
十七、如何建立 Visual Hierarchy 的质量验收标准？
视觉层级不能只由设计师凭个人审美判断。
建议把验收工作拆分为信息关系检查、视觉识别测试、可访问性测试和实际任务验证。
以下是本系列建议采用的 Visual Hierarchy Quality Standard（VHQS）内部检查矩阵。
| 编号 | 验收项目 | 检查重点 | 推荐方法 |
|---|---|---|---|
| VHQS-01 | 主标题识别 | 用户是否能够识别当前页面的主要对象 | 首屏观察、标题结构检查 |
| VHQS-02 | 任务一致性 | 视觉强调是否支持主要用户任务 | Task-to-Layout 映射核对 |
| VHQS-03 | 内容优先级 | 关键条件是否明显且容易查找 | 页面扫描和任务测试 |
| VHQS-04 | 字体层级 | 页面标题、章节、正文和辅助文本是否具有稳定角色 | Design Token 审核 |
| VHQS-05 | 间距关系 | 组内与组间距离是否合理 | 视觉结构审查 |
| VHQS-06 | 信息分组 | 相关数据、条件和证据是否保持关联 | 语义关系检查 |
| VHQS-07 | 文字对比度 | 是否满足目标 WCAG 等级的要求 | 对比度检测 |
| VHQS-08 | 非文字对比度 | 必要图形与控件状态是否能够辨识 | 可访问性检查 |
| VHQS-09 | 色彩独立性 | 重要状态是否不只依靠颜色表达 | 灰度与状态识别测试 |
| VHQS-10 | 阅读与焦点顺序 | DOM、视觉与键盘操作是否保持合理关系 | 键盘、屏幕阅读器测试 |
| VHQS-11 | 移动端重排 | 核心信息是否完整、结构是否合理 | 响应式测试 |
| VHQS-12 | 缩放适应 | 放大文字后是否存在遮挡或内容丢失 | 200% 放大与 Reflow 检查 |
| VHQS-13 | 组件一致性 | 相同信息角色是否使用稳定样式 | 跨页面组件审计 |
| VHQS-14 | 任务效果 | 用户是否能识别并正确使用关键内容 | 真实任务测试 |
| VHQS-15 | 技术性能 | 视觉元素是否产生明显性能问题 | LCP、INP、CLS 监测 |
VHQS 编号属于本系列设计的内部质量治理方法，不是 W3C、Google 或其他机构的官方标准。
P0：必须优先处理的问题
P0 主要指可能阻断任务完成、造成重要信息误判或违反项目要求的关键可访问性标准的问题。
例如，重要技术限制被错误弱化，造成用户容易误读。
移动端删除了关键技术参数。
正文因缩放被遮挡或截断。
必要表单组件无法通过键盘操作。
这些问题不应仅仅因为页面视觉美观就被接受。
P1：明显降低信息识别效率的问题
P1 可以包括：
标题层级混乱。
关键技术信息与其对应条件距离过远。
页面中多个不必要的高强度 CTA 争夺注意力。
复杂内容缺少合理分组。
重要信息虽然存在，但用户需要明显额外的查找操作才能发现。
这类问题通常不意味着内容完全不可用，但会提高任务成本。
P2：设计一致性与阅读效率改进
P2 主要针对未造成关键任务阻断的视觉优化事项。
例如，章节间距不完全一致，部分辅助模块的视觉分组仍可改善，某些组件的响应式细节有优化空间。
需要注意，不能只按照视觉影响面积确定优先级。
一条很短的技术限制文字，即使只占据页面很小区域，也可能比一整张装饰性图片更值得优先修复。
十八、怎样实际测试用户是否识别了重点？
视觉层级验收最好结合真实任务，而不是仅询问用户“页面是否好看”。
例如，可以给受试者一个明确的设备选型条件，让其在页面中判断某种设备是否适用。
随后记录：
用户首先查看哪个信息区域。
用户是否找到必要参数。
用户是否注意到相关限制。
用户是否正确解释参数的适用条件。
用户是否通过合理路径进入进一步的技术资料。
这些观察能够帮助团队判断视觉层级是否真正服务于任务。
使用信息定位时间
可以记录用户从进入页面到正确找到指定信息所需的时间。
例如，某任务要求找到指定设备型号的安装条件。
如果设计调整后，用户能够更快找到正确章节，并且错误判断没有增加，那么这种结果可以为改版价值提供证据。
但是，不能仅根据定位时间下降得出绝对结论。
如果页面通过删除必要信息缩短了阅读时间，也可能让用户更快得出不完整判断。
因此，定位时间必须与正确性共同评估。
使用任务判断正确率
对于具有明确判断标准的任务，可以统计正确完成比例。
Task Accuracy = 正确完成任务的有效测试次数 ÷ 有效测试总次数 × 100%
这里的成功标准需要在测试之前定义。
如果任务是判断设备是否适合某项工况，那么正确排除不适用型号，也应当视为成功。
不应把所有任务完成标准都替换成表单提交或点击行为。
使用视觉扫描测试
设计团队还可以采用短时页面观察测试。
在有限的观察时间后，询问用户：
当前页面主要介绍什么？
哪些信息看起来最重要？
如果需要查找某项技术条件，应该从哪里开始？
这类测试可以发现页面主标题不清、注意力竞争和分组关系薄弱等问题。
但短时观察并不能代替完整的任务测试。
用户在几秒内注意到某个模块，并不代表他已经正确理解了相关信息。
不应将热力图当作最终证据
热力图和滚动行为分析可以提供有价值的辅助信息。
但是，它们不能直接证明用户已经理解内容。
例如，某个区域获得大量点击，可能是用户感兴趣，也可能是交互设计不清楚，导致反复尝试。
某段内容获得较长停留，也可能是因为内容复杂或难以理解。
因此，应将热力图、滚动记录和行为事件作为补充证据，而不是独立的视觉层级质量结论。
十九、建立企业级视觉层级治理机制
当一个企业网站拥有大量文章、产品页、分类页和解决方案页面时，视觉层级不应依靠逐页人工修补。
需要将核心设计要求纳入统一的管理体系。
建立组件角色字典
每一种常用组件都应具有明确的语义和使用条件。
| 组件类型 | 信息角色 | 不建议的使用方式 |
|---|---|---|
| Page Title | 页面主题识别 | 同一页面反复使用多个竞争性的主标题 |
| Section Heading | 内容分区 | 仅为了扩大字体而使用标题元素 |
| Key Specification | 关键参数摘要 | 只展示数值，缺少单位和必要上下文 |
| Technical Limitation | 使用限制说明 | 放在难以识别的位置 |
| Evidence Note | 来源与证据 | 使用无法核验的笼统声明 |
| Primary CTA | 支持当前任务的下一步操作 | 在多个位置无差别重复 |
| Comparison Table | 同类项目比较 | 使用不统一的数据口径 |
| Related Content | 支持后续任务或扩展理解 | 插入大量与当前任务无关的链接 |
这些组件应当在设计稿、WordPress 模板和实际 HTML 页面之间保持对应。
建立 Design Token 版本管理
随着网站改版，字体比例、间距、颜色和组件样式可能发生变化。
建议对重要的设计系统变更建立版本记录。
例如，记录某次改版调整了正文行宽、章节间距、主标题比例和技术提示组件。
同时明确受影响的页面模板及需要重新验收的项目。
这样能够减少一种常见问题：
设计团队调整了全站 CSS，却没有意识到某些产品参数表或历史文章因此出现溢出、遮挡和阅读异常。
将视觉层级检查纳入发布前验收
对于企业网站的正式发布流程，可以建立三层检查。
第一层是自动化检查。
包括 HTML 基础结构、部分颜色对比度、页面溢出及常见可访问性问题。
第二层是模板与内容审查。
检查主标题、章节顺序、技术数据、限制条件、证据位置和组件使用是否合理。
第三层是任务验证。
重点检查高价值产品页、采购决策页和关键技术内容。
自动化检查不能完全识别信息的重要性，因此不能替代内容专业人员和真实用户的判断。
二十、视觉层级不等于 SEO 排名因素，也不是 GEO 引用捷径
最后，需要明确 Visual Hierarchy 的技术边界。
视觉层级与 SEO 确实存在联系，但这种联系不能被夸大。
Google 已经公开说明，页面的主要视觉标题和显著文本可能影响搜索结果标题链接的生成。
页面的移动端内容、标题一致性、可访问性相关技术和基础体验，也与网页的实际使用及搜索处理条件有关。
但这不能被延伸为：
字号越大，排名越高。
标题越多，AI 越容易引用。
段落越短，GEO 表现越好。
强调色越多，内容越容易被抽取。
这些都不是 Google 官方规定的通用排序规则。
对于 AI Overviews 和 AI Mode，Google 的相关文档仍然强调已有的搜索基础实践，并没有要求网站采用专门的视觉层级样式以取得展示资格。
因此，视觉层级设计的价值应该建立在能够验证的目标上。
帮助用户更快识别信息。
降低重要内容被忽略的风险。
保持事实、条件和证据之间的联系。
改善移动端与辅助技术环境中的可用性。
减少不同页面模板之间的视觉与语义不一致。
视觉层级是一项信息表达和用户体验工程，不应被包装成未经证实的搜索排名或 AI 引用机制。
结语：真正有效的视觉层级，是让重要的信息在正确的位置被理解
网站排版不是简单地将标题放大、将正文缩小，再使用留白和颜色让页面变得整齐。
一套成熟的视觉层级系统，需要让用户识别页面主题、定位相关内容，并在必要上下文中作出正确判断。
这一目标决定了 Visual Hierarchy 不能脱离前两篇建立的信息架构与用户任务体系。
第一篇解决：网站信息应该如何组织？
第二篇解决：页面应该支持用户完成什么任务？
第三篇进一步解决：
哪些信息应该获得怎样的视觉权重，以及如何让这些信息在适当的位置被识别和理解？
对于企业网站，尤其是具有复杂技术参数、产品型号、应用条件和采购决策信息的 B2B 网站，视觉层级不仅是美学问题。
它影响用户的信息查找效率，也可能影响重要条件是否被正确识别。
因此，企业应当把 Typography、Spacing、Contrast、Grouping、Position 与 Attention Hierarchy 纳入统一的设计系统，并通过真实用户任务进行验证。
本篇形成第三项基础规范：
视觉层级必须与信息优先级和用户任务保持一致；任何视觉强调都应具有明确的信息用途，任何重要条件都不应因为设计简洁而失去可发现性与可理解性。
这将成为后续建立网站字体系统、段落结构、标题规范、表格排版和页面模板的重要依据。
技术参考资料
以下资料用于核验本文关于视觉层级、可访问性、移动端内容一致性和 Google 搜索处理方式的技术论述。
文章中的字体比例、间距阶梯、组件角色和 VHQS 验收模型属于本系列提出的工程设计建议，不是 Google 或 W3C 发布的统一设计参数。
[1] W3C — Web Content Accessibility Guidelines (WCAG) 2.2
https://www.w3.org/TR/WCAG22/
[2] W3C — Understanding SC 1.4.3: Contrast (Minimum)
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
[3] W3C — Understanding SC 1.4.11: Non-text Contrast
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
[4] W3C — Understanding SC 1.4.1: Use of Color
https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
[5] W3C — Understanding SC 1.4.4: Resize Text
https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
[6] W3C — Understanding SC 1.4.10: Reflow
https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
[7] W3C — Understanding SC 1.4.12: Text Spacing
https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html
[8] W3C — Understanding SC 2.4.7: Focus Visible
https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
[9] W3C — Understanding SC 2.4.11: Focus Not Obscured (Minimum)
https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
[10] W3C WAI — Page Structure Tutorial
https://www.w3.org/WAI/tutorials/page-structure/
[11] Google Search Central — Influencing Title Links in Google Search
https://developers.google.com/search/docs/appearance/title-link
[12] Google Search Central — Mobile-first Indexing Best Practices
https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
[13] Google Search Central — AI Features and Your Website
https://developers.google.com/search/docs/appearance/ai-features
[14] web.dev — Web Vitals
https://web.dev/articles/vitals
下一篇预告
SEO / GEO 网站排版设计标准与规范细则（四）：Information Density——为什么内容越丰富，页面反而可能越难使用？
第四篇将在信息架构、用户任务和视觉层级三项基础上，进一步研究 Information Density（信息密度）与 Cognitive Load（认知负荷）的关系。
重点建立不同页面类型的信息密度标准，讨论长文阅读、技术参数、复杂表格、产品卡片、摘要与完整信息之间的平衡，并形成可以实际测试的页面信息密度验收方法。