页面叙事节奏：从 Hero 到 CTA 的注意力旅程编排

本文是设计系统系列的第六篇。前五篇分别讨论了 Token 架构、风格光谱、动效系统、设计语言迁移和组件级微交互——都是"局部"层面的精化。本文则聚焦"全局"层面：一个页面从顶部到底部的叙事节奏如何编排。不是"每个 section 怎么设计"，而是"section 之间如何形成注意力旅程"。当用户从 Hero 滚动到 CTA，他们经历的不是一个信息列表，而是一段有节奏的视觉叙事。

一、为什么页面需要"叙事节奏"

大多数前端开发者的页面设计流程是这样的：确定需要哪些 section → 每个 section 填充内容 → 每个 section 独立美化。结果是：每个 section 单独看都不错，但串在一起却感觉"平"——没有起伏，没有节奏，用户滚动到底部时已经失去了注意力。

问题出在哪里？ 出在缺少"节奏编排"这一步。

音乐有节奏——强拍和弱拍的交替让旋律有起伏。电影有节奏——紧张和舒缓的交替让叙事有张力。页面也需要节奏——信息密度的高低交替和视觉权重的轻重变化让用户的注意力有起伏，而不是从头到尾保持同一强度。

1.1 注意力的波浪模型

用户在页面上的注意力不是恒定的，而是呈波浪形：

注意力
  ↑
  │  ╱╲         ╱╲              ╱╲
  │ ╱  ╲       ╱  ╲            ╱  ╲
  │╱    ╲_____╱    ╲__________╱    ╲___
  └────────────────────────────────────→ 滚动位置
   Hero  Dashboard  Metrics  CTA  Footer

• Hero：注意力高峰——用户刚进入页面，注意力最集中
• Dashboard：注意力回落——用户开始消化具体信息，注意力从"感知"转向"理解"
• Metrics：注意力再次上升——数据卡片激发好奇心，注意力从"理解"转向"探索"
• CTA：注意力最终高峰——行动召唤激发决策冲动，注意力从"探索"转向"行动"
• Footer：注意力消散——用户已经做出决策（行动或离开），注意力自然下降

节奏编排的目标：让注意力的波浪自然起伏，而非强迫用户从头到尾保持同一强度。强迫持续高强度的注意力会导致疲劳——用户会在 Dashboard 或 Metrics 阶段就放弃滚动。

1.2 节奏编排的三个维度

页面叙事节奏由三个维度构成：

1. 信息密度节奏——section 之间的信息量高低交替
2. 视觉权重节奏——section 之间的视觉冲击力轻重交替
3. 入场时序节奏——section 之间的入场动画延迟序列

下面逐维度拆解。

二、信息密度节奏

2.1 密度的量化

信息密度不是主观感受，可以粗略量化：

节奏曲线：中 → 高 → 中 → 低

这个曲线是合理的——Hero 用中等密度建立第一印象（不过载），Dashboard 用高密度提供具体信息（满足求知欲），Metrics 回到中等密度（避免疲劳），CTA 用低密度简化决策（减少干扰）。

反面案例：如果每个 section 都是高密度（中→高→高→高），用户会在第二个 section 就感到疲劳。如果每个 section 都是低密度（低→低→低→低），页面会感觉"空洞"——用户滚动半天没看到足够的信息。

2.2 Hero 的密度控制

Hero 区域的信息密度必须克制。本次项目中，Hero 包含：

1. 胶囊 eyebrow 标签（1行）
2. 大标题（2行）
3. 描述文字（2行）
4. 两个 CTA 按钮（1行）
5. 三段统计摘要（1行）

总共约 7 行信息——这是 Hero 的密度上限。超过 7 行，Hero 就从"第一印象"变成了"信息列表"，失去了建立情感连接的作用。

统计摘要的密度权衡：Hero 底部的三段统计摘要（今日任务/已完成/完成率）是一个密度增量——它让 Hero 从纯叙事变成了叙事+数据。这个增量的价值在于：用户在 Hero 阶段就能获取核心数据，不需要滚动到 Dashboard 才知道"今天有多少任务"。但代价是 Hero 的信息密度从"低"变成了"中"。

决策：这个代价是值得的。因为效率工具的用户期望在第一屏就看到数据，而不是先读一段品牌叙事再找数据。统计摘要让 Hero 同时承担了"情感连接"和"数据概览"两个角色。

2.3 CTA 的密度极简

CTA 区域的信息密度必须最低。本次项目中，CTA 包含：

1. 标题（1行）
2. 描述（1行）
3. 两个按钮（1行）

总共 3 行信息——这是 CTA 的理想密度。CTA 的目的是"促进行动"，不是"提供信息"。任何额外的信息都会分散用户的注意力，降低转化率。

CTA 卡片的视觉处理：CTA 使用了大圆角（--r-xl: 20px）+ 中等阴影（--shadow-md）+ 顶部渐变条，让它成为页面上视觉权重最重的单个元素——但信息密度最低。这种"视觉重+信息轻"的组合是 CTA 的核心策略：用视觉冲击力吸引用户的注意力，用极简的信息让决策变得容易。

三、视觉权重节奏

3.1 视觉权重的构成

每个 section 的视觉权重由以下因素构成：

• 背景色：白色（轻）vs 浅灰（重）——浅灰让 section 感觉"沉下去"
• 阴影：无阴影（轻）vs 有阴影（重）——阴影让元素"浮起来"
• 字号：小字（轻）vs 大字（重）——大字占据更多视觉空间
• 装饰元素：无装饰（轻）vs 光晕/渐变（重）——装饰增加视觉复杂度

3.2 本次项目的权重编排

Section     背景色     阴影      字号      装饰      总权重
Hero        白色       无        最大      双光晕    重
Dashboard   浅灰       卡片阴影  中等      无        中
Metrics     白色       卡片阴影  中等      无        中
CTA         浅灰       卡片阴影  大        渐变条    重
Footer      浅灰       无        小        无        轻

节奏曲线：重 → 中 → 中 → 重 → 轻

这个曲线形成了"双峰"结构——Hero 和 CTA 是两个视觉高峰，Dashboard 和 Metrics 是中间的平缓区，Footer 是尾声。

为什么是双峰而非单峰？ 因为页面有两个"决策点"：

1. Hero 的决策点：“我要不要继续看这个页面？”——如果 Hero 的视觉权重不够重，用户会直接离开
2. CTA 的决策点：“我要不要采取行动？”——如果 CTA 的视觉权重不够重，用户会看完信息但不行动

两个高峰之间需要平缓区——如果从 Hero 到 CTA 全程都是高视觉权重，用户会在中间区域感到视觉疲劳，反而不太可能滚动到 CTA。

3.3 背景色交替的策略

本次项目使用了白色和浅灰的交替：

Hero        → 白色（var(--surface)）
Dashboard   → 浅灰（var(--surface-2)）
Metrics     → 白色（var(--surface)）
CTA         → 浅灰（var(--surface-2)）
Footer      → 浅灰（var(--surface-2)）

交替的规律：白 → 灰 → 白 → 灰 → 灰

前三个 section 严格交替（白→灰→白），创造了清晰的视觉分隔——用户每滚动一个 section，背景色的变化就告诉他们"进入了新区域"。

但 CTA 和 Footer 都是浅灰——这是故意的。CTA 卡片本身是白色（浮在浅灰背景上），所以 CTA section 的浅灰背景实际上是在为 CTA 卡片提供"衬托"。Footer 的浅灰则与 CTA 的浅灰连续，让 Footer 自然地"延续"CTA 的视觉语境，而非创建一个新的视觉区域。

如果 CTA 用白色背景会怎样？ CTA 卡片也是白色——白色 section 上的白色卡片会"消失"，卡片失去了"浮起来"的效果。所以 CTA section 必须用浅灰背景，让白色卡片有衬托。

3.4 双光晕的空间深度

Hero 区域使用了两个径向光晕：

.hero-glow-tr {
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.05) 0%, transparent 70%);
}
.hero-glow-bl {
  bottom: -30%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.03) 0%, transparent 70%);
}

为什么需要两个光晕？ 单光晕（只有右上角）会让 Hero 的视觉重量偏向一侧——右上角有光晕，左下角没有，页面感觉"失衡"。双光晕在右上角和左下角各放一个，形成对角线平衡——视觉重量均匀分布。

透明度的差异：右上角光晕 5%，左下角光晕 3%。不是相同透明度——因为右上角光晕更大（600px），如果也是 3% 就太淡了；左下角光晕更小（500px），如果也是 5% 就太浓了。透明度与尺寸的反比关系确保两个光晕的"视觉总量"大致相等。

光晕的语义：径向光晕不是装饰——它暗示了"空间深度"。光晕模拟了环境光在空间中的散射，让 Hero 区域感觉不是一个"平面"，而是一个有深度的"空间"。这种深度感让 Hero 的视觉权重自然增加，无需依赖重阴影或大色块。

四、入场时序节奏

4.1 延迟序列的设计

四个 section 的入场动画使用递增延迟：

.hero        { transition-delay: 0s; }
.dashboard   { transition-delay: 0.15s; }
.metrics     { transition-delay: 0.3s; }
.cta-section { transition-delay: 0.45s; }

间隔 0.15s 的选择：

• 如果间隔太短（0.05s），四个 section 几乎同时出现——用户感知不到"依次入场"的节奏
• 如果间隔太长（0.3s），最后一个 section 要等 0.9s 才入场——用户已经滚动过去了
• 0.15s 是甜蜜点——足以感知"依次出现"，不至于让后面的 section 等待太久

但这个延迟序列有一个前提：它假设用户在 Hero 入场后不会立即滚动。如果用户在 Hero 入场的瞬间就开始滚动，Dashboard 的入场延迟（0.15s）可能已经过期——Dashboard 会在用户滚动到它之前就完成了入场动画，用户看不到动画过程。

解决方案：IntersectionObserver 的 threshold: 0.08 确保每个 section 在进入视口 8% 时才触发入场动画——即使用户快速滚动，每个 section 的入场动画也是在它即将可见时才开始，而非在页面加载时就全部触发。

4.2 入场位移与交互位移的区分

入场动画使用 20px 位移：

.hero, .dashboard, .metrics, .cta-section {
  transform: translateY(20px);
}

交互动画（hover）使用 2px 位移：

.dash-card:hover { transform: translateY(-2px); }

为什么差距是 10 倍？ 因为入场和交互的感知语境不同：

• 入场：用户第一次看到元素——需要明确感知"正在出现"。20px 的位移让用户看到运动轨迹，知道"这个元素正在进入"。
• 交互：用户已经看到了元素——只需要感知"它响应了我的操作"。2px 的位移足以让用户感知到"微微抬起"，但不至于让元素"跳起来"。

核心原则：入场位移是"叙事性"的（引导注意力），交互位移是"反馈性"的（确认操作）。叙事性位移需要大，反馈性位移需要小。

4.3 count-up 动画的时序

Hero 统计区的三个数字使用 count-up 动画，分别用不同的时长：

countUp(store.tasks.length, 800, (v) => (animatedTaskCount.value = v));
countUp(store.doneTasks.length, 1000, (v) => (animatedDoneCount.value = v));
countUp(store.completionRate, 1200, (v) => (animatedRate.value = v));

三个数字依次完成：800ms → 1000ms → 1200ms

这不是同时完成——第一个数字（今日任务 5）最先到位，第二个数字（已完成 2）稍后到位，第三个数字（完成率 40%）最后到位。

为什么依次而非同时？ 如果三个数字同时从 0 递增到目标值，用户看到的是"三个数字一起跳动"——视觉上很热闹，但信息传递效率低。依次完成让用户的注意力自然地从一个数字移到下一个：先看到"5 条任务"，再看到"2 条已完成"，最后看到"40% 完成率"——这是一个叙事序列，每个数字为下一个数字提供了上下文。

缓动函数的选择：count-up 使用 1 - Math.pow(1 - progress, 3)（cubic ease-out）——动画前半段快速递增，后半段缓慢收尾。这让数字"快速冲向目标然后精确停止"，而非"匀速递增"。快速启动让用户立即感知到"数字在变化"，缓慢收尾让用户有时间读取最终值。

五、section 之间的过渡策略

5.1 硬分隔 vs 软分隔

section 之间的分隔有两种策略：

• 硬分隔：使用明显的视觉边界（粗线、大间距、色块对比）
• 软分隔：使用微妙的视觉暗示（细线、小间距、背景色渐变）

本次项目的分隔策略：

为什么用软分隔？ 因为硬分隔（如粗线或大色块对比）会打断用户的滚动流畅感——每到一个硬分隔，用户会下意识地"停顿"，感觉"这一段结束了"。软分隔让用户在滚动时自然地感知到"进入了新区域"，但不会产生停顿感。

CTA → Footer 的无分隔：CTA 和 Footer 都是浅灰背景，中间没有背景色变化。这是故意的——CTA 是页面的"尾声"，Footer 是尾声的"延续"。如果在这里加硬分隔，会让 Footer 感觉像是一个"独立的区域"，而非"CTA 的自然延伸"。

5.2 CTA 卡片的过渡角色

CTA 卡片在页面节奏中扮演了一个特殊的角色——它既是 Metrics section 的"收尾"，又是 Footer 的"过渡"。

.cta-card {
  background: var(--surface);       /* 白色卡片 */
  border-radius: var(--r-xl);       /* 20px 大圆角 */
  box-shadow: var(--shadow-md);     /* 中等阴影 */
}
.cta-section {
  background: var(--surface-2);     /* 浅灰背景 */
}

CTA 卡片是浅灰背景上的白色卡片——它的视觉处理与 Dashboard 卡片完全一致（白卡+阴影+圆角），但尺寸更大（padding: 48px 40px）、圆角更大（--r-xl vs --r-l）、阴影更深（--shadow-md vs --shadow-sm）。

为什么 CTA 卡片比 Dashboard 卡片更大？ 因为 CTA 是页面最后的"视觉高峰"——它需要在用户注意力开始下降时重新抓住注意力。更大的尺寸 + 更深的阴影 + 更大的圆角，让 CTA 卡片成为页面上视觉权重最重的单个元素。

顶部渐变条的作用：

.cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

CTA 卡片顶部的 4px Apple 蓝渐变条是一个"视觉锚点"——当用户从 Metrics 滚动到 CTA 时，最先进入视口的就是这条蓝色渐变线。它在卡片内容完全可见之前就抓住了用户的注意力，引导他们继续滚动查看卡片内容。

六、响应式节奏的调整

6.1 移动端的节奏简化

在移动端，页面节奏需要简化——因为屏幕空间有限，不能维持桌面端的多 section 节奏：

@media (max-width: 640px) {
  .hero { padding: 64px 0 48px; }       /* Hero 留白减少 */
  .hero h1 { font-size: 2rem; }          /* 标题缩小 */
  .desc { font-size: 15px; }             /* 描述缩小 */
  .hero-stats { flex-wrap: wrap; }       /* 统计摘要换行 */
  .hero-stat-divider { display: none; }  /* 分隔线隐藏 */
  .cta-card {
    flex-direction: column;              /* CTA 改为纵向 */
    padding: 28px 20px;                  /* CTA 内边距减少 */
  }
}

移动端的节奏变化：

1. Hero 留白减少（96px → 64px）：移动端屏幕小，留白太多会让 Hero 占满整个屏幕，用户看不到后续内容
2. 统计摘要换行：三个统计项从横排变为换行排列，分隔线隐藏——因为移动端宽度不够横排三个统计项
3. CTA 改为纵向：标题和按钮从横排变为纵排——移动端没有足够的空间让 CTA 卡片保持横向布局

核心原则：移动端的节奏不是桌面端的"压缩版"，而是"简化版"——减少 section 内的信息密度，而非缩小 section 的尺寸。用户在移动端的注意力周期更短，每个 section 需要更快地传达核心信息。

6.2 平板端的节奏过渡

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }      /* Dashboard 改单列 */
  .metrics-grid { grid-template-columns: repeat(2, 1fr); } /* Metrics 改双列 */
  .hero { padding: 64px 0 48px; }                  /* Hero 留白减少 */
  .cta-card { padding: 32px 24px; }                /* CTA 内边距减少 */
}

平板端是桌面端和移动端之间的过渡——Dashboard 从双列变单列，Metrics 从四列变双列，但整体节奏结构保持不变（Hero → Dashboard → Metrics → CTA → Footer）。

关键决策：平板端不隐藏任何 section 或元素——只是调整布局密度。因为平板的屏幕尺寸足够展示所有内容，只是需要更紧凑的排列。

七、节奏编排的验证方法

7.1 滚动速度测试

验证页面节奏的最简单方法：用中等速度从顶部滚动到底部，观察自己在每个 section 的"停留意愿"。

• 如果在某个 section 想停下来仔细看——这个 section 的节奏是"高峰"
• 如果在某个 section 自然地加速滚动——这个 section 的节奏是"平缓区"
• 如果在某个 section 想停下来但不知道看什么——这个 section 的信息密度太低
• 如果在某个 section 想加速但被太多信息阻挡——这个 section 的信息密度太高

理想的节奏感知：Hero（想停下来看）→ Dashboard（自然减速，开始读信息）→ Metrics（想停下来看数据）→ CTA（想停下来做决策）→ Footer（自然加速，准备离开）

7.2 截图灰度测试

将页面截图转为灰度模式，观察各 section 的明暗交替：

• Hero（白色背景）→ 亮
• Dashboard（浅灰背景）→ 暗
• Metrics（白色背景）→ 亮
• CTA（浅灰背景）→ 暗
• Footer（浅灰背景）→ 暗

理想的灰度模式：亮 → 暗 → 亮 → 暗 → 暗——形成清晰的明暗交替节奏。如果灰度模式下所有 section 看起来都是同一个亮度，说明背景色缺乏交替，页面会感觉"平"。

7.3 入场动画序列测试

在浏览器中禁用缓存，硬刷新页面，观察四个 section 的入场顺序：

1. Hero 应该最先入场（0s 延迟）
2. Dashboard 应在 Hero 后 0.15s 入场
3. Metrics 应在 Dashboard 后 0.15s 入场
4. CTA 应在 Metrics 后 0.15s 入场

如果所有 section 同时入场，说明延迟序列没有生效。如果 section 入场顺序混乱（如 Metrics 先于 Dashboard），说明 IntersectionObserver 的 threshold 设置有问题。

八、总结：节奏编排的核心原则

最终洞察：页面不是 section 的堆叠，而是注意力的旅程。好的页面节奏让用户在旅程中自然地经历"感知→理解→探索→行动"四个阶段，每个阶段的视觉处理为下一个阶段铺垫。当节奏编排正确时，用户不会觉得"这个页面设计得好"，他们会觉得"这个页面用起来很舒服"——而"舒服"正是节奏编排的终极目标。

本文是设计系统系列的第六篇。系列文章：1. 从 Token 到主题 · 2. 从装饰到功能 · 3. 动效系统工程 · 4. 设计语言迁移实践 · 5. 组件级微交互设计 · 6. 页面叙事节奏