章节组成系统 是做什么的？
目的
章节组成系统提供了一种设计页面“中间区域”的方法论——即位于全局页眉和页脚之间的一系列章节。虽然原子组件（如卡片、按钮）存在于章节内部，但该系统专注于这些章节之间的空间节奏、布局模式与过渡效果。它确保内容逻辑分组，通过布局变化减少视觉疲劳，并引导用户遵循连贯的叙事或任务流程。
使用场景
- 设计包含多个功能和优势章节的长篇落地页。
- 构建需要技术规格、社交证明和使用指南的产品详情页。
- 将“关于我们”或“工作原理”页面组织成易于理解的内容块。
- 在多页面网站中建立一致的“页面主体”节奏。
- 管理垂直间距和背景切换，以指示主题或优先级的变化。
何时不应使用
- 单章节视图： 整个体验仅存在于首屏或单个视口内（例如，简单的登录页面或启动屏幕）。
- 全局导航/页脚： 应使用
site-navigation-system或site-footer-system处理持久性的站点框架。 - 微交互： 对于章节内单个元素的行为，应使用
interactive-state-system。 - 纯数据展示： 内容是连续统一项目的流（例如，大型数据表或无限滚动流）。
输入
- 内容序列： 页面章节的优先级列表（来自信息架构）。
- 章节优先级： 哪些章节是“高影响力”（基于优势）与“辅助性”（技术规格/社交证明）。
- 品牌调色板： 用于定义背景交替模式。
- 流畅间距系统： 用于一致的垂直外边距和章节内边距。
- 响应式栅格系统： 用于定义最大内容宽度和列的行为。
输出
- 章节序列图： 一张蓝图，显示每个章节的顺序和布局模式。
- 过渡策略： 针对背景切换（例如，浅色 -> 深色 -> 浅色）和垂直间距的已定义规则。
- 布局蓝图： 针对常见章节模式（之字形、栅格、50/50 分屏）的带注释线框图。
- 响应式堆叠规则： 复杂章节布局在移动端如何折叠。
工作流程
1. 映射叙事流程
根据用户意图，将内容安排成逻辑序列。一个常见的落地页流程包括：
- 认知： 首屏 / 问题陈述。
- 教育： 工作原理 / 核心功能。
- 验证： 社交证明 / 案例研究。
- 细节： 次要功能 / 定价 / FAQ。
- 转化： 最终行动号召（CTA）。
2. 选择章节布局模式
通过交替使用以下布局模式来避免重复：
- 分屏模式（50/50）： 内容在一侧，视觉元素在另一侧。最适合高影响力的优势展示。
- 之字形模式： 交替使用“分屏”模式（例如，先视觉左，然后视觉右）。最适合讲述故事和减少滚动时的视觉疲劳。
- 功能栅格模式： 3 或 4 列卡片/图标。最适合次要功能或服务。
- 居中堆叠模式： 所有内容在垂直和水平方向都居中。最适合简洁有力的声明或最终的 CTA。
3. 设计过渡系统
使用视觉线索来提示主题变化：
- 背景交替： 切换白色、浅灰色或品牌色来“分桶”章节。使用
color-mix()从单个品牌色 token 派生着色背景（例如，color-mix(in oklch, var(--brand) 6%, white)），而不是为每个章节手动选择单独的灰色/色调，这样当品牌色变化时调色板能保持一致。 - 垂直间距： 使用一致的顶部/底部内边距（来自
fluid-spacing-system），理想情况下使用clamp()函数，使章节内边距在移动端和桌面端之间平滑缩放，而不会在断点处产生跳跃。 - 分隔线： 使用细微的线条或角度 SVG 过渡，营造更现代或动态的感觉。
4. 建立内容“断点”
引入“分隔章节”以防止用户滚动过快：
- 引言/推荐语： 大字号居中章节。
- 全幅图片： 提供心理重置的沉浸式视觉元素。
- 数据/影响力： 包含大号数字的高对比度区块。
5. 定义响应式堆叠
规划章节如何折叠：
- 自然堆叠： 分屏布局通常上下堆叠，视觉元素在上方或下方（通常在上方以提供上下文）。
- 之字形反转： 确保在之字形布局中，“媒体”不会在移动端形成连续堆叠（例如，文本-媒体-媒体-文本）。调整顺序使其保持一致（例如，媒体-文本-媒体-文本）。
决策规则
- “疲劳”规则： 永远不要让三个连续章节使用相同的布局模式。在分屏、栅格和居中布局之间轮换。
- “视觉锚点”规则： 每个高影响力章节都应有视觉锚点（图片、视频或图标）来支持文本。
- 对比度聚焦： 为最重要的信息或最终的 CTA 使用深色背景章节，以与页面其他部分形成高对比度。
- 文本宽度约束： 限制文本块的宽度（通常为 max-width: 60ch），以确保可读性，即使章节容器本身更宽。
约束条件
- 无障碍性： 背景颜色切换必须保持 WCAG AA 级对比度比率，适用于该章节内的所有文本。
- 标题层级： 每个主要章节应以遵循逻辑文档大纲的
<h2-h6>开头。 - 响应性： 章节内边距应在移动端按比例缩小（例如，桌面端的
--space-3xl在移动端变为--space-xl）；优先使用clamp()表达式而非离散断点覆盖。 - 间距一致性： 章节之间的间距应保持一致，除非主题变化需要更大的“断点”。
常见失败模式
- “文字墙”： 章节包含过多文本，没有视觉断点或副标题。
- 模式重复： 连续 5 个章节都使用相同的 50/50 分屏布局，使页面显得单调乏味。
- “移动端三明治”： 在之字形布局中，未能调整移动端的堆叠顺序，导致两个图像或两个文本块直接上下紧贴。
- 缺乏空白： 章节挤在一起，没有足够的垂直内边距，使内容感觉局促。
- 对齐不一致： 在同一序列中混用居中标题和左对齐标题，而没有明确的逻辑。
验证标准
- 页面布局至少交替使用两种不同的模式（例如，分屏和栅格）。
- 使用章节过渡（背景切换）来分组相关内容。
- 同类章节类型的垂直间距（内边距）一致。
- 所有章节遵循正确的标题层级（
h2用于主要章节）。 - 之字形布局的移动端堆叠顺序已明确定义。
- 文本密集型章节保持可读的行长（max-width: 60-80ch）。
- 带背景颜色的章节的对比度比率符合 WCAG AA 标准。