切换·Esc 返回

时间轴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
1时间轴Timeline轴线 + 一串节点的容器
2节点圆点Dot颜色表状态:成功 / 进行中 / 等待
3节点内容Content这一步发生了什么
4时间戳Timestamp具体到分钟更好
常见变体 · 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
开发
进行中
上线
待定