EN
展现形式 · 概念

Timeline:用时间顺序解释变化

判断 Timeline 时间线何时帮助理解事件与阶段变化,以及如何避免虚构节点、夸大日期精度、双侧跳读和只靠连线表达关系。

Timeline 按时间或阶段顺序组织事件,使访客理解“先发生什么、后来怎样变化”。只有时间关系对理解结论确实重要时才使用;带圆点和连线的普通列表不自动成为时间线。

适合与不适合

适合品牌历程、项目阶段、版本演进、订单进度或有明确先后关系的故事。不适合并列卖点、没有可信日期的叙事、需要多维比较的数据,或为了丰富页面而人为拆出的里程碑。

优点与缺点

优点缺点
明确表达事件之间的先后和跨度容易为了视觉完整虚构或夸大节点
帮助读者理解变化过程双侧交替布局会造成阅读顺序跳动
日期和事件可形成快速扫描锚点事件过多时页面冗长且难定位
可容纳状态、媒体与相关证据只靠连线、位置或颜色会丢失语义

内容与顺序要求

每个节点至少包含时间或阶段、事件和它为何重要。日期精度必须与证据一致,不把只知道年份的事实伪装成具体日期。按时间、倒序或阶段排序都可以,但应在标题或导语中说明;并行事件需要明确关系,不能只靠左右位置暗示。

响应式与无障碍

优先使用有序列表和清楚的标题结构,视觉线条只作辅助。DOM 顺序必须是正确叙事顺序;小屏退化为单侧纵向列表,不保留来回跳读。日期、状态或当前节点不能只靠颜色表达。

状态与退化

一项事件直接使用普通事实区块。大量节点按阶段分组、提供摘要或拆成独立历史页面。缺少日期时可使用明确阶段名称,但若连顺序都不能核验,就不应使用 Timeline。无 CSS 时保留完整的有序事件列表。

发布前检查

  • 时间关系是否是理解内容的必要条件?
  • 每个节点是否有可核验的事件依据?
  • DOM 与视觉顺序是否完全一致?
  • 小屏是否退化为清楚的单列?
  • 删除连线和颜色后,先后与当前状态是否仍明确?