布局与交互

垂直时间线 Vertical Timeline

左侧竖线串起一列节点的布局,天然表达先后与发展

2024 · 立项
2025 · 上线
2026 · 盈利

**垂直时间线(Vertical Timeline)**是一条竖线串起一串节点:它把“先后顺序”编码进了布局本身——不需要任何说明,用户自动从上往下读。公司历程、版本更新日志、操作步骤、简历经历,全是它的主场。

什么时候用:About 页历程、Changelog、教程步骤、订单跟踪。节点超过 15 个时考虑折叠或分年。

对 AI 说清楚的三要素:① 竖线与节点的视觉(线 2px、节点 8~12px 圆点可带当前态光晕);② 每节点内容结构(时间 + 标题 + 描述);③ 可选动效(进入视口逐个亮起)。

复制即用的提示词片段

公司历程页采用垂直时间线(Vertical Timeline):左侧 2px 竖线贯穿,
节点为 10px 圆点带光晕(box-shadow 4px 同色半透明),
每节点右侧放时间与事件描述,进入视口时逐节点淡入。