时间轴Timeline

你可能会说

物流到哪一步了，按时间排出来，让用户看得明白。

时间轴是按时间顺序展示一组事件、状态或记录的数据组件物流记录可依次显示“已下单、已发货、运输中”。需统一最新事件放在上方或下方，并用文字说明状态，不能只靠颜色和圆点。
包裹已签收07-20 14:32
运输中07-19 09:15
已下单07-18 20:02

什么时候用

  • 物流 / 订单进度：已下单 → 已发货 → 已签收
    已签收 · 今天 14:32
    运输中 · 昨天 09:15
    已下单 · 前天 20:02
  • 审批 / 操作记录：谁在什么时候做了什么
    oil-oil 通过了审批
    林小hu 提交了审批
    创建了审批单
  • 更新日志：版本记录按时间排开
    v2.4 新增暗色模式
    v2.3 修复 12 个问题
    v2.2 上线协作功能
  • 节点有成败状态时，用文字或图标说明结果，颜色只作辅助
    部署成功
    构建中…
    测试失败

什么时候不用

  • 需要用户依次完成的任务应使用 步骤条 Steps，而不是时间轴
    1填写信息2确认订单3完成支付
  • 时间顺序不重要的普通消息应使用 列表 List
    今天开周会
    中午一起吃饭
    和时间先后无关，普通列表就行
  • 内容没有时间先后，不适合使用时间轴
    功能 A
    功能 B
    功能 C
  • 节点包含大段图文时，平铺为 卡片 Card 通常更易阅读
    版本发布公告
    节点内容太重，用卡片平铺
组成结构 · Anatomy
包裹已签收07-20 14:32
轴线 + 一串节点的容器
辅助标记节点位置和状态，具体结果仍由文字或图标说明
这一步发生了什么
具体到分钟更好
常见变体 · Variants
基础竖排Vertical
已发货07-19 09:15
已下单07-18 20:02
默认款，事件多就竖着往下排
带状态Status
部署成功
构建中…
测试失败
节点用文字说明结果，并以颜色辅助区分
水平式Horizontal
立项03-01
设计04-10
开发进行中
上线待定
节点少、横向空间够，看整体进度
典型使用场景
物流跟踪
运单 SF1024888运输中
运输中 · 深圳南山转运中心今天 09:15
已揽收 · 杭州余杭网点昨天 20:02
已下单昨天 18:40
审批流转记录
请假审批 · 3 天年假已通过
oil-oil 审批通过07-21 10:24 · 同意
阿麦 审批通过07-20 16:08 · 同意
林小hu 提交申请07-20 09:30
版本更新日志
更新日志
v2.4.0 最新2026-07-18 · 新增暗色模式、组件搜索
v2.3.22026-06-30 · 修复 12 个已知问题
v2.3.02026-06-12 · 上线团队协作功能
项目里程碑
新版官网 · 里程碑开发中
立项
03-01
设计
04-10
开发
进行中
上线
待定