线性、不可逆、按时间推进的事件序列：订单履约、审批流、项目阶段、就医流程、账号成长轨迹——用户最关心「现在到哪步、下一步是什么」。
界面与交互 · 内容与数据展示
时间线Timeline
按时间排序展示事件节点，并用形状+文字双通道标状态、当前指针与异常恢复的视图；顺序、当前态与异常原因都长在节点物件上。
订单履约时间线：节点状态、当前指针与快照都长在物件上
亲手展开节点、切单侧/交替排版、切正序/倒序、注入并解决异常，再点「生成履约快照」——节点形状、当前指针、异常原因与快照卡都即时变，不只靠底部说明。
第 0 步：这是订单 #1024 的履约时间线，5 个节点按时间排序，当前指针指向「派送中」。点节点展开详情；切「单侧/交替」改排版；切「正序/倒序」改顺序；点「注入异常」让派送中变 ✕+AA红并给原因，再点「解决异常」恢复；最后点「生成履约快照」把当前状态固化成快照卡。
订单履约#1024
当前 · 派送中- ✓
- ✓
- ✓
- 快递员已取件，预计今天 18:00 前送达。
排版
排序
对照：5 个节点按时间正序排列，当前指针指向「派送中」（半填圆 + 脉冲环）。原因：时间线把事件按顺序排，每个节点用形状+文字说清状态，当前态有独立指针，不靠颜色独撑。下一步：点节点展开详情；切「交替/单侧」看排版；切「正序/倒序」看顺序；点「注入异常」让派送中变 ✕ 并给出原因。
面板教会的知识点
把刚才在订单上看到的现象命名为六条规则。
- 形状+文字双通道标状态：实心圆=已完成、半填圆=进行中、空心环=待办、✕=异常；每个节点同时带「已完成/进行中·当前/待处理/异常」文字。颜色只加强，不独撑含义。
- 当前节点有独立指针：当前节点带
aria-current="step"、半填圆 + 脉冲环，并常驻在头部读数里；不靠品牌色高亮独撑。 - 异常给原因+恢复路径：注入异常后节点变 ✕、AA 红描边、状态文字变「异常」、原因长在节点上；点「解决异常」回到半填圆——异常是可恢复的，不是死路。
- 排版可单侧或交替：单侧排版紧凑扫读，交替排版给每个节点的详情更多横向空间；窄屏自动回落为单侧，不挤爆。
- 顺序显式可逆：用
<ol>表达先后，正序从过去到未来、倒序把最新置顶；顺序由结构决定，不靠视觉推断。 - 状态可固化为快照：「生成履约快照」把当前节点、异常状态与 ETA 固化成一张可分享的快照卡，结果长在快照物件上，不只是页脚文案。
什么时候用时间线
从「事件是否按时间线性推进」判断，而不是看内容多不多。
并行或分支流程（→ 流程图）、循环周期（→ 日历）、层级归属（→ tree）、独立内容切换（→ tabs）、并行记录比较（→ table）。
怎么用：从节点到窄屏的最短路径
一次到位的检查顺序。
- 定节点与时间：用
<ol>表达先后，每个节点带<time>时间戳；只放真正按时间推进的事件。 - 给状态形状：实心圆/半填圆/空心环/✕ 四态，每态配文字标签；异常用 AA 红，其余走 ink/灰阶，颜色只加强。
- 标当前节点：当前节点用
aria-current="step"+ 视觉指针（半填 + 脉冲），并在头部读数里复述一次。 - 异常给恢复：异常节点写明原因与下一步（留卡/重约/联系），提供「解决异常」回到原状态的路径，不要只变红。
- 给键盘与深链：节点是可聚焦 button，Tab 到达、Enter/Space 展开；深链定位到当前节点，刷新仍能回到同一步。
- 选排版与窄屏：节点多且只扫读用单侧；详情长用交替；窄屏统一回落为单侧，不强迫横向滚动。
同一订单履约：正例与反例
只改一处关键判断——状态、当前指针与异常是否都长在物件上。
5 节点按时间正序，实心/半填/空心三种形状配文字标状态；当前指针指向派送中（半填+脉冲）；注入异常变 ✕+AA红+原因；解决异常恢复；节点可点展开；键盘可达；生成快照固化当前状态。
用户一眼知道到哪步、有无异常、下一步怎么办。只画一条彩色线连圆点，已完成/进行中全靠颜色；异常只是变红不说原因；没有当前指针；节点不可点展开；窄屏挤成一团；读屏读不出当前步。
用户只能猜现在到哪、为什么卡住，色弱完全读不出状态。快速自测
物流页的派送节点突然变红，用户分不清是「已送达」还是「出问题了」。最直接的改进是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。