时间轴
Timeline
初级通用时间轴(Timeline)是按时间顺序排列事件的内容展示方式,通常把时间点、事件内容和先后关系放在一起。它帮你看清一件事如何发展,比如订单从创建、发货到签收的记录。
你可能会说:「我想把订单发生过的事按时间排出来,让用户一眼看出先后顺序和当前进展。」
动手看看订单配送时间轴
订单配送记录订单号 MS202506180328
已发货
订单已创建6月18日 09:12 · 已收到付款
包裹已发货6月18日 16:40 · 已离开杭州仓库
订单进度
切换下方订单进度,看记录如何依次增加;也可以悬停每条记录,或用 Tab 聚焦。沿着竖线从上往下读,就能看到订单的来龙去脉。
发货记录接在创建记录下面,原来的时间仍然保留。时间轴不只是告诉你当前状态,还告诉你它是怎么走到这一步的。
要点时间轴怎样让事件变得好读?
- 1
每个节点讲清一件事
一个节点通常包含时间和事件内容,也可以补充操作人或结果。比如后台显示“14:20,客服修改了收货地址”。这样你看到的不是一串日期,而是能串起来的过程。
- 2
顺序取决于阅读目的
订单详情里,你可能希望从下单读到签收;客服处理记录里,你可能更想先看最新回复。和 AI 说明按时间正序还是倒序,产出的界面才会符合使用场景。
- 3
区分已发生和待发生
有些时间轴只记录过去的事,有些还会展示预计送达等未来节点。因为预计时间可能变化,所以界面要让你分清“已经发生”和“预计发生”,避免把计划当成事实。
容易混淆的地方
时间轴侧重展示事件在什么时候、按什么顺序发生;步骤条侧重告诉你一个流程走到第几步,未必记录每一步的实际发生时间。审计日志也按时间记录事件,但它更关注可追溯的操作细节;给用户看的时间轴通常会筛选并解释这些记录。
什么时候用
适合用
- 做订单详情页时,展示下单、付款、发货和签收的时间,让用户知道包裹经历了什么。
- 做工单系统时,串起用户提问、客服回复和问题解决的记录,方便接手的人了解来龙去脉。
- 做 AI 工具的任务详情页时,展示任务创建、处理完成和人工确认等已发生的关键事件。
不适合用
- 用户只需要查看一批商品的名称和价格时,用列表或表格更方便比较,不需要安排成时间轴。
- 注册流程只想提示用户正在填写第几步,而且不记录事件时间时,用步骤条更贴切。
- 项目经理要比较多个任务的起止日期和并行关系时,用甘特图比事件时间轴更合适。
练一练选一个答案,看看解释
你在做售后详情页:用户想知道退款申请后发生了什么,也想看最新处理结果。哪种设计更贴合这个需求?
让 AI 帮你做复制给 AI Agent 直接用
请为售后详情页做一个时间轴,按时间倒序展示退款申请后的已发生事件。每个节点显示发生时间、事件名称和简短结果,最新事件放在顶部;预计处理时间与实际记录明确区分。请用示例数据展示审核退回后重新提交的情况。