展现形式 · 概念
Timeline:用时间顺序解释变化
判断 Timeline 时间线何时帮助理解事件与阶段变化,以及如何避免虚构节点、夸大日期精度、双侧跳读和只靠连线表达关系。
Timeline 按时间或阶段顺序组织事件,使访客理解“先发生什么、后来怎样变化”。只有时间关系对理解结论确实重要时才使用;带圆点和连线的普通列表不自动成为时间线。
适合与不适合
适合品牌历程、项目阶段、版本演进、订单进度或有明确先后关系的故事。不适合并列卖点、没有可信日期的叙事、需要多维比较的数据,或为了丰富页面而人为拆出的里程碑。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 明确表达事件之间的先后和跨度 | 容易为了视觉完整虚构或夸大节点 |
| 帮助读者理解变化过程 | 双侧交替布局会造成阅读顺序跳动 |
| 日期和事件可形成快速扫描锚点 | 事件过多时页面冗长且难定位 |
| 可容纳状态、媒体与相关证据 | 只靠连线、位置或颜色会丢失语义 |
内容与顺序要求
每个节点至少包含时间或阶段、事件和它为何重要。日期精度必须与证据一致,不把只知道年份的事实伪装成具体日期。按时间、倒序或阶段排序都可以,但应在标题或导语中说明;并行事件需要明确关系,不能只靠左右位置暗示。
响应式与无障碍
优先使用有序列表和清楚的标题结构,视觉线条只作辅助。DOM 顺序必须是正确叙事顺序;小屏退化为单侧纵向列表,不保留来回跳读。日期、状态或当前节点不能只靠颜色表达。
状态与退化
一项事件直接使用普通事实区块。大量节点按阶段分组、提供摘要或拆成独立历史页面。缺少日期时可使用明确阶段名称,但若连顺序都不能核验,就不应使用 Timeline。无 CSS 时保留完整的有序事件列表。
发布前检查
- 时间关系是否是理解内容的必要条件?
- 每个节点是否有可核验的事件依据?
- DOM 与视觉顺序是否完全一致?
- 小屏是否退化为清楚的单列?
- 删除连线和颜色后,先后与当前状态是否仍明确?