时间线活动系统 是做什么的？
目的
时间线活动系统提供了一种设计按时间顺序排列的事件、历史记录或路线图的方法论。它确保用户可以跟踪进度、理解时间关系，并高效地浏览历史数据。该系统平衡了信息密度与空间节奏，确保“何时”与“何事”的叙述在所有视口中保持清晰。
使用场景
- 设计 SaaS 仪表盘的动态活动流（例如项目历史）。
- 构建产品路线图或发布说明。
- 组织公司历史或“关于我们”里程碑。
- 实现电商的订单追踪或发货历史。
- 管理多阶段流程可视化（例如申请状态）。
何时不使用
- 线性步骤进度： 对于用户必须实时完成的简单步骤序列，请使用
step-progress-system。 - 纯表格数据： 如果主要目标是按多个列进行排序和筛选（例如完整的财务审计日志），请使用
data-table-ui-system。 - 全局导航： 对于站点范围的结构，请使用
site-navigation-system。 - 简单的博客信息流： 当标准卡片在网格或列表中已足够，无需可视化的“时间线”或时间标记时。
输入项
- 事件清单： 事件、时间戳及其相关元数据的列表。
- 时间分辨率： 用户关心的是秒、天还是年？
- 事件类型： 事件的分类（例如信息、成功、警告、错误，或里程碑 vs 次要操作）。
- 空间限制： 时间线将出现在侧边栏、全页视图还是窄卡片中？
- 品牌 Token： 颜色、字体比例和间距 Token。
输出项
- 时间线结构规范： 定义“时间线”（垂直/水平线）、“节点”（标记）和“内容块”。
- 分组策略： 事件聚类的规则（例如“今天”、“昨天”、“2023 年 10 月”）。
- 状态与状态矩阵： 不同事件类型和交互状态的视觉处理方式。
- 响应式蓝图： 时间线如何从中性的交替布局适应到移动端的单列布局。
工作流程
1. 定义时间线方向和方向
确定时间的方向：
- 垂直（标准）： 最适合内容长度不一的长历史记录。
- 水平： 最适合高层次的路线图或短流程（当水平空间充裕时）。
建立“时间线”（连接事件的那条线），确保其具有一致的视觉权重和颜色（通常是中性柔和的色调）。
2. 建立事件节点和标记
设计每个事件的视觉锚点：
- 简单节点： 用点或小圆圈表示次要操作。
- 图标节点： 圆圈内放置图标以指示事件类型（例如“已完成”使用勾号）。
- 日期标记： 悬浮在节点旁边或上方的标签。
3. 应用空间节奏和分组
通过按时间段对事件进行分组来避免视觉混乱：
- 相对分组： “刚刚”、“2 小时前”。
- 绝对分组： “2023 年 10 月 23 日 星期一”、“2023 年 9 月”。
使用 fluid-spacing-system 保持事件之间一致的垂直间距。高优先级的里程碑应比次要活动项拥有更多空白区域。
4. 组织内容块
将 visual-hierarchy-system 应用于每个节点旁边的内容：
- 标题： 核心操作或事件名称。
- 元数据： 时间戳、操作者（用户头像/姓名）和类别。
- 正文/描述： 可选的详细信息或展开后的内容。
- 操作： 上下文相关的按钮（例如“查看详情”、“撤销”）。
5. 规划响应式适配
- 交替布局（Z 字型）： 在桌面上，事件在时间线两侧交替排列。在移动端，折叠为单列（时间线在左，内容在右）。
- 单侧布局： 移动端统一采用“时间线在左，内容在右”的布局，以最大化可读性。
决策规则
- “时间线”规则： 除非存在逻辑上的时间间隔或“加载更多”操作，否则该线不应断开。
- 分组阈值： 如果同一天内发生超过 5 个事件，则应将其归入单个日期标题下，以减少重复文本。
- “节点”层级： 对“里程碑”使用较大的节点或品牌颜色，对“活动”使用较小的中性节点。
- 时间戳位置： 对于垂直时间线，在桌面端将时间戳置于时间线左侧，在移动端则紧接在标题下方，以便最快扫描。
约束条件
- 无障碍访问： 时间线必须可作为语义列表 (
<ul>或<ol>) 导航。包含图标的节点必须具有aria-label或隐藏文本供屏幕阅读器使用。将时间戳包裹在<time datetime="...">元素中，以确保相对标签（“2 小时前”）保持机器可读。对于实时更新的动态流，将新条目添加在aria-live="polite"区域内（而不是整个列表），以便屏幕阅读器用户能听到新事件而不丢失其位置。 - 响应性： 时间线绝不能溢出视口。水平时间线必须在移动端切换为垂直或使用水平滚动。
- 视觉对比度： 时间线和节点必须与背景达到 3:1 的对比度。
常见失败模式
- 时间线断裂： 垂直线随意开始和停止，导致序列难以追踪。
- 信息过载： 每个事件包含过多正文，使时间线变成一面文字墙。
- 对齐不一致： 在同一时间线内混用居中对齐和左对齐文本，且没有清晰的逻辑。
- 移动端拥挤： 在移动端试图保持交替（左/右）布局，导致文本列变得极小。
验证标准
- 事件遵循清晰一致的 Chronological 顺序（升序或降序）。
- 视觉标记（节点）和连接线样式一致。
- 使用了时间分组（例如“今天”）来降低认知负荷。
- 已定义并实现响应式行为（例如折叠为单列）。
- 无障碍访问：时间线以语义列表标记，时间戳使用
<time datetime="...">。 - 实时动态流通过范围内
aria-live="polite"区域宣布新条目，且不干扰屏幕阅读器的焦点位置。 - 主要里程碑在视觉上与次要活动有所区分。