
时间轴是按照时间先后顺序直观呈现业务运行全流程的展示组件,核心构成要素通常包含时间标识、业务节点标题与业务节点详情描述。
1️⃣组件效果
元件库提供的时间轴分为文字时间轴和图文时间轴两大类别,每一类均包含默认、高亮、完整日期、完整时间四种预设样式,可适配不同的设计场景需求。
🔹文字时间轴

四种样式的信息承载量依次递增,涵盖的元素逐步丰富,可根据实际设计诉求灵活选择适配版本。
🔹图文时间轴

图文时间轴与文字时间轴的核心差异在于时间轴中央配置的节点图标,可借助图标可视化的表意属性,更直观清晰地传递业务节点的属性与含义,降低信息理解成本。
2️⃣使用方法
- 依次点击元件库菜单中的【元件库->展示组件->时间轴】,从中筛选符合需求的时间轴组件,直接拖拽至原型画布即可完成初始导入。

- 时间轴的所有节点内容均支持自定义调整,以下以信息维度最丰富的完整时间版图文时间轴为例,详细说明节点内容的修改操作流程。

上图为图文时间轴组件内置的中继器表格界面,只需修改该表格内的对应字段内容,即可快速生成适配业务需求的自定义时间轴。
| 字段 | 说明 |
|---|---|
| Order | 排序顺序。中继器按照倒序排列,即最大的 Order 数值排在第一行,所以我们需要把最新的节点数据写在表格最后。 |
| Date | 日期。 |
| Time | 时间。 |
| Title | 节点标题。 |
| Description | 节点说明。 |
| Icon | 节点默认图标,通常为浅色图标。 |
| SelectedIcon | 节点高亮图标,通常为主题色图标。 |
3️⃣制作方法
🔹制作思路
时间轴在形态上可拆解为多个独立的业务节点单元,所有单元按照时间先后顺序有序拼接,即可构成完整的时间轴组件。
在Axure工具中,中继器具备高效批量生成同结构相似元素的能力,因此可借助中继器的该特性,快速生成时间轴组件内的全部业务节点。
🔹组件结构
时间轴组件的整体架构十分简洁,仅需配置一个中继器即可实现全部核心功能。
时间轴中继器

-
日期:对应中继器表格中的Date字段,用于展示节点所属的日期信息。
-
时间:对应中继器表格中的Time字段,用于展示节点发生的具体时间点。
-
节点图标:对应中继器表格中的Icon与SelectedIcon字段,分别为节点默认状态与选中状态的展示图标。
-
描述:对应中继器表格中的Description字段,用于补充说明节点的详细业务信息。
-
标题:对应中继器表格中的Title字段,用于提炼节点的核心业务内容。
-
轴:该元素不存储于中继器表格中,为串联各个业务节点的虚线线段,实现时间流向的视觉引导。
🔹交互逻辑
时间轴中继器加载交互事件

**第一步:**从中继器表格中加载各元素的对应值,包含文本类内容(文字、数字)与图片类内容(默认图标、选中状态图标)。
**第二步:**隐藏末尾节点的"轴"元素。
由于中继器生成业务节点时会全量复制节点内的所有元素,当生成最后一个节点时,该节点自带的"轴"会无意义地延伸在整个组件末尾,破坏视觉完整性,因此需要单独隐藏最后一个节点的"轴"元素。
**第三步:**高亮首个业务节点(可选)。
若需要突出显示最新的业务节点,可借助组件的选中样式属性,将首个业务节点的元素设置为主题色高亮状态;若所有业务节点需保持统一展示样式,可直接跳过该步骤。
除上述三个核心步骤外,我们额外配置了中继器的倒序排序规则,以适配用户填写表格的常规操作逻辑------多数用户习惯将最新数据添加在表格末尾。若你习惯将最新数据放在表格首行,可直接删除该排序设置。
4️⃣要点总结
🔹 中继器可高效批量生成同结构的业务节点,需注意隐藏最后一个节点的"轴"元素,避免出现视觉冗余。
🔹 若需高亮中继器内的首行元素,可通过`Item.isFirst`参数配合组件选中样式实现,在组件加载时自动将首行元素设置为选中状态即可。