Hero 设计系统 是做什么的？
目的
Hero 设计系统提供了一种设计网页最关键空间区域——介绍区——的方法论。虽然“Growth”类别中的 hero-section-optimization 专注于信息和转化，但本设计系统专注于 Hero 的视觉解剖、空间构成和分层。它确保内容和视觉和谐一致，以建立品牌权威、维持视觉层次，并引导视线朝向所有设备类型上的主要行动点。
使用场景
- 设计首页和着陆页的主要入口点。
- 为深层次的产品或服务页面创建“子 Hero”介绍区。
- 在多页面网站上建立一致的介绍模式。
- 管理文本、图像和交互元素的复杂分层。
- 设计适合沉浸式、媒体密集型介绍的响应式适配方案。
何时不应使用
- 全局站点导航： 使用
site-navigation-system处理持久性头部。 - 页面级路径引导： 使用
page-header-system处理实用功能丰富的介绍区（例如仪表盘或设置页面），这些区域优先考虑元数据而非影响力。 - 内容文章： 当重点是简单的标题和署名行时，使用标准排版或
page-header-system。 - 模态框或覆盖层： 使用
overlay-and-dialog-system处理临时界面层。
输入
- 内容优先级： 标题 (H1)、副标题和主要行动号召按钮。
- 视觉资产： 摄影作品、插图、视频或抽象图案。
- 布局模式： 是“分栏”、“居中”还是“全出血”布局？
- 流体间距系统： 用于一致的边距、内边距和垂直节奏。
- 品牌调色板： 用于背景处理和覆盖层可读性。
输出
- Hero 结构规范： 内容区域（介绍区、核心区、行动区、视觉区）的定义。
- 布局蓝图： 对齐方式（左对齐 vs. 居中）及与媒体关系相关的规则。
- 视觉分层策略： 文本覆盖层、遮罩层和深度的规则。
- 响应式转换图： Hero 如何从横向视口适应到纵向视口。
工作流
1. 选择布局模式
根据内容与媒体的关系选择模式：
- 分栏 (50/50)： 文本在一边，视觉元素在另一边。最适合清晰度和技术型产品。
- 居中堆叠： 所有内容居中，通常带有背景图片或视频。最适合有力、高影响力的声明。
- 内嵌内容： 内容放置在覆盖全出血背景的限定框内。最适合高级或编辑类风格。
- 偏移覆盖层： 文本部分重叠于视觉元素之上以创造深度感。
2. 定义空间层次（解剖结构）
对 Hero 区域应用 visual-hierarchy-system：
- 介绍/眉标（可选）： H1 上方用于提供上下文的小标签或标记。
- 标题 (H1)： 页面上最大的文本元素。
- 副标题： 提供细节的支持性文本（最多 2-3 行）。
- 行动区： 主要（以及可选的次要）行动号召按钮。
- 锚点（视觉）： 支撑叙事的焦点。
3. 建立分层与可读性
如果使用背景媒体，确保文本清晰可读：
- 遮罩层与渐变： 应用
imagery-and-media-system中的“可读性层”，确保 4.5:1 的对比度。 - 模糊处理： 使用 backdrop-filter 柔化文本后的繁忙背景。
- 深度： 使用阴影或细微偏移来区分内容“平面”和背景“平面”。
4. 应用垂直节奏和间距
使用 fluid-spacing-system 定义“呼吸空间”：
- 顶部/底部内边距： 确保 Hero 有足够的垂直高度（桌面端通常为 60vh 到 90vh）。
- 内部间距： 在 H1、副标题和行动号召按钮之间使用一致的间距（通常是
--space-m到--space-xl）。
5. 规划响应式转折点
规划布局如何在较小屏幕上转换：
- 堆叠： 分栏布局通常堆叠，视觉元素放在顶部（提供上下文）或底部（优先显示 H1）。
- 比例切换： 背景图片应从横屏（16:9）切换为正方形或竖屏（1:1 或 4:5）以保持焦点。
- 文本缩放： 使用
fluid-typography-system确保 H1 优雅缩放。
决策规则
- 单一 H1 规则： Hero 必须包含页面唯一的 H1。
- 清晰优先于复杂： 如果视觉资产使文本阅读稍有困难，则优先选择更简单的背景或更厚的遮罩层。
- “拇指”区域： 在移动端，确保行动号召按钮位于屏幕底部 2/3 区域，便于单手操作。
- 视觉权重： H1 和主要行动号召按钮应是 Hero 中视觉上最突出的两个元素。
- 焦点对齐： 在分栏布局中，图像中的“主体”应朝向内容，而非背离内容。
约束条件
- 无障碍： 图像上的文本必须满足 WCAG AA（4.5:1）对比度。标题必须使用语义化的
<h1>标签。如果 Hero 包含自动播放的背景视频或动画，必须提供可见的暂停控件（WCAG 2.2.2）并尊重prefers-reduced-motion。 - 响应式： Hero 绝不能导致水平溢出。布局应是流式的，而非固定高度，以适应不同的文本长度。避免在移动端锁定
100vh，这会导致动态浏览器 chrome 行为异常——推荐使用100dvh或带有流体内边距的最小高度。 - 性能： 背景视频应静音，并有“海报”图片作为慢速连接时的后备方案。
常见失败模式
- “对比度失败”： 在没有遮罩层的情况下，将白色文本放置在繁忙或明亮的图像上，导致标题无法阅读。
- 行动点被埋没： 将行动号召按钮放置得太低，导致在较小的笔记本电脑上被“折叠线以下”截断。
- 媒体过载： 使用过于分散注意力的背景视频，使用户无法阅读价值主张。
- “移动端挤压”： 在移动端强制使用桌面分栏布局，导致文本极小和图像拥挤。
验证标准
- Hero 包含一个清晰且最为突出的 H1 文本元素。
- 主要行动号召按钮在视觉上醒目，并遵循
interactive-state-system。 - 文本覆盖层满足 WCAG AA 对比度要求（4.5:1）。
- 空间布局（例如分栏、居中）与品牌目标一致。
- 垂直间距（内边距/间距）使用来自流体间距系统的标记。
- 布局在移动端视口下保持功能性和可读性。
- 在响应式堆叠过程中，图像中的焦点得以保留。
- 自动播放的视频/动画具有暂停控件，并遵循
prefers-reduced-motion。