【移动元件库】8.时间轴

时间轴是按照时间先后顺序直观呈现业务运行全流程的展示组件,核心构成要素通常包含时间标识、业务节点标题与业务节点详情描述。

1️⃣组件效果

元件库提供的时间轴分为文字时间轴和图文时间轴两大类别,每一类均包含默认、高亮、完整日期、完整时间四种预设样式,可适配不同的设计场景需求。

🔹文字时间轴

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

🔹图文时间轴

图文时间轴与文字时间轴的核心差异在于时间轴中央配置的节点图标,可借助图标可视化的表意属性,更直观清晰地传递业务节点的属性与含义,降低信息理解成本。

2️⃣使用方法

  1. 依次点击元件库菜单中的【元件库->展示组件->时间轴】,从中筛选符合需求的时间轴组件,直接拖拽至原型画布即可完成初始导入。
  1. 时间轴的所有节点内容均支持自定义调整,以下以信息维度最丰富的完整时间版图文时间轴为例,详细说明节点内容的修改操作流程。

上图为图文时间轴组件内置的中继器表格界面,只需修改该表格内的对应字段内容,即可快速生成适配业务需求的自定义时间轴。

字段 说明
Order 排序顺序。中继器按照倒序排列,即最大的 Order 数值排在第一行,所以我们需要把最新的节点数据写在表格最后。
Date 日期。
Time 时间。
Title 节点标题。
Description 节点说明。
Icon 节点默认图标,通常为浅色图标。
SelectedIcon 节点高亮图标,通常为主题色图标。

3️⃣制作方法

🔹制作思路

时间轴在形态上可拆解为多个独立的业务节点单元,所有单元按照时间先后顺序有序拼接,即可构成完整的时间轴组件。

在Axure工具中,中继器具备高效批量生成同结构相似元素的能力,因此可借助中继器的该特性,快速生成时间轴组件内的全部业务节点。

🔹组件结构

时间轴组件的整体架构十分简洁,仅需配置一个中继器即可实现全部核心功能。

时间轴中继器

  • 日期:对应中继器表格中的Date字段,用于展示节点所属的日期信息。

  • 时间:对应中继器表格中的Time字段,用于展示节点发生的具体时间点。

  • 节点图标:对应中继器表格中的Icon与SelectedIcon字段,分别为节点默认状态与选中状态的展示图标。

  • 描述:对应中继器表格中的Description字段,用于补充说明节点的详细业务信息。

  • 标题:对应中继器表格中的Title字段,用于提炼节点的核心业务内容。

  • 轴:该元素不存储于中继器表格中,为串联各个业务节点的虚线线段,实现时间流向的视觉引导。

🔹交互逻辑

时间轴中继器加载交互事件

**第一步:**从中继器表格中加载各元素的对应值,包含文本类内容(文字、数字)与图片类内容(默认图标、选中状态图标)。

**第二步:**隐藏末尾节点的"轴"元素。

由于中继器生成业务节点时会全量复制节点内的所有元素,当生成最后一个节点时,该节点自带的"轴"会无意义地延伸在整个组件末尾,破坏视觉完整性,因此需要单独隐藏最后一个节点的"轴"元素。

**第三步:**高亮首个业务节点(可选)。

若需要突出显示最新的业务节点,可借助组件的选中样式属性,将首个业务节点的元素设置为主题色高亮状态;若所有业务节点需保持统一展示样式,可直接跳过该步骤。

除上述三个核心步骤外,我们额外配置了中继器的倒序排序规则,以适配用户填写表格的常规操作逻辑------多数用户习惯将最新数据添加在表格末尾。若你习惯将最新数据放在表格首行,可直接删除该排序设置。

4️⃣要点总结

🔹 中继器可高效批量生成同结构的业务节点,需注意隐藏最后一个节点的"轴"元素,避免出现视觉冗余。

🔹 若需高亮中继器内的首行元素,可通过`Item.isFirst`参数配合组件选中样式实现,在组件加载时自动将首行元素设置为选中状态即可。

相关推荐
领麦微红外20 小时前
和面机智能化测温新选择 红外传感器实现非接触直测面团
人工智能·产品经理·智能硬件
Autumn_ing21 小时前
AI Agent工作台能做什么?一个产研任务从资料到交付怎么走
ai·agent·产品经理·墨刀·ai agent·prd·墨刀ai客户端
老张聊数据集成2 天前
2026 年中小企业项目管理软件怎么选:零代码搭建 vs 成品工具
产品经理·产品·创业
河北清兮网络科技2 天前
广告联盟 APP 介绍:搭建属于自己的流量变现平台
小程序·app·产品经理·短剧app·广告联盟
传人2 天前
从 PPT 到可交互原型:用 AI 做小程序原型的实践 | 深度实践版
产品经理·ai编程
我命由我123452 天前
动火作业极简理解
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·学习方法
Tim0072 天前
Obsidian×DeepSeek 实战 04|带库上下文的写作副驾:Smart Composer × DeepSeek
产品经理
Tim0072 天前
Obsidian×DeepSeek 实战 03|选中即润色:Text Generator 一键改周报 / 会议纪要
产品经理
我命由我123452 天前
准入类与水平类职业资格
笔记·学习·职场和发展·产品运营·求职招聘·职场发展·产品经理