纵向时间线（Vertical Timeline）是什么：效果预览与 AI 设计提示词

效果预览

2024.06第一个版本上线只有 12 个用户的周末项目。

2025.03获得天使轮开始全职投入。

2026.10用户突破 12,000团队扩张到 9 人，搬进新办公室。

适合用在哪

关于页里程碑、产品更新日志、招聘流程、项目复盘。

容易踩的坑

节点超过 8 个不分组，长列表让用户找不到关键里程碑。
移动端仍用左右交替布局，单侧内容被压到不足 140px 宽。
仅靠圆点颜色区分当前节点，色盲用户与读屏无法感知状态。

设计提示词 · Prompt

纵向时间线（Vertical Timeline）：左侧 2px 竖线轨道（或居中线、左右交替布局），每个节点是一枚 10-12px 圆点（空心描边，当前/最新节点实心 + 外圈光晕）。节点右侧：等宽字体日期（9-10px 灰）→ 事件标题（600 字重）→ 两行说明。滚动到节点时圆点逐个"点亮"（描边变实心）。节点 4-8 个，超过改用年份分组折叠。更新日志变体：节点圆点换成版本号徽章 + 最新版本加 NEW 标签。

Vertical Timeline: A 2px vertical track on the left (or a centered line with alternating left/right layout); each node is a 10-12px dot (hollow stroke; the current/latest node is solid + an outer glow). To the right of each node: a monospace date (9-10px gray) → event title (600 weight) → a two-line description. Dots "light up" one by one as you scroll to them (stroke becomes solid). 4-8 nodes; beyond that, collapse into year groups. Changelog variant: replace node dots with version badges + a NEW label on the latest version.

常见搭配

同一页面里经常和「纵向时间线」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

滚动入场揭示Scroll Reveal 眉题标签Eyebrow / Kicker 团队卡片Team Member Card 锚点滚动监听Scrollspy / Anchor Nav

演示 HTML 结构

<div class="s d-timeline">
  <div class="d-tl__item"><span class="d-tl__date">2024.06</span><b>第一个版本上线</b><span>只有 12 个用户的周末项目。</span></div>
  <div class="d-tl__item"><span class="d-tl__date">2025.03</span><b>获得天使轮</b><span>开始全职投入。</span></div>
  <div class="d-tl__item is-now"><span class="d-tl__date">2026.10</span><b>用户突破 12,000</b><span>团队扩张到 9 人，搬进新办公室。</span></div>
</div>