基于Axure的动态甘特图设计:实现任务增删改与时间拖拽交互

甘特图作为项目管理核心工具,其动态交互能力直接关系到团队协作效率。本文以Axure RP 9为载体,通过中继器(Repeater)与动态面板(Dynamic Panel)的深度结合,设计一款支持任务名称动态编辑、时间轴拖拽调整、进度实时计算的甘特图原型,满足多任务并行管理场景需求。

一、核心功能架构设计

1. 数据模型构建

采用中继器作为数据容器,预设以下字段:

  • 任务名称(Text):支持双击编辑

  • 开始时间(Start):数值化时间戳

  • 结束时间(End):数值化时间戳

  • 完成进度(Progress):0-100%数值

  • 依赖关系(Dependency):任务ID数组

通过中继器数据集实现动态绑定,例如设置任务A的依赖关系为任务B的ID,即可自动触发前置任务校验逻辑。

2. 交互组件矩阵

组件类型 核心功能 交互事件
中继器条目 任务卡片渲染 每项加载时绑定数据字段
动态面板 拖拽容器 拖动开始/移动/结束事件
矩形条形图 进度可视化 宽度动态计算((结束-开始)*时间轴比例)
输入框+按钮 任务增删改 添加行/删除行/更新行交互
里程碑标记 关键节点标注 条件显示(进度=100%时触发)

二、关键交互实现方案

1. 动态任务管理

添加任务
  1. 点击"新增任务"按钮弹出模态框

  2. 输入名称、选择时间范围后,通过中继器"添加行"动作插入数据

删除任务
  1. 每行设置删除按钮

  2. 触发中继器"删除行"动作,通过[[This]]引用当前行

  3. 联动删除依赖该任务的其他任务

修改任务

  1. 支持表格行内编辑,任务名称修改

  2. 支持条形图任意拖动,调节时间进度,任务开始结束位置

甘特图是项目管理工具,以条形图横向展示任务时间轴,纵轴列任务清单,条块长度代表时长,通过颜色或进度标识完成状态。它能清晰规划任务起止、依赖关系及资源分配,适用于项目规划、协调分工与进度监控。

设计浏览:【演示】【持续更新】高保真动态项目管理图表集原型 - AxureShop产品原型网

--- --- 往期推荐 --- ---

Axure大屏可视化模板:赋能多领域,开启数据展示新篇章_axre-CSDN博客

ElementUI3.0元件库+通用后台模板的高效融合

2小时完成1天工作量?有了这款Axure移动端元件库,设计如此简单-CSDN博客

CRM企业客户关系管理系统产品原型方案-CSDN博客

Axhub Charts:Axure原型设计的动态数据可视化元件库-CSDN博客

相关推荐
招风的黑耳2 天前
Axure文件上传高保真交互原型:实现Web端真实上传体验
交互·axure·文件上传
梓贤Vigo2 天前
【Axure高保真原型】区间缩放柱状图
交互·产品经理·axure·原型·中继器
招风的黑耳2 天前
66Web端最强中继器表格元件库来了!55页高保真交互案例,Axure 9/10/11通用
交互·axure·原型·表格·中继器
Axure组件3 天前
Axure: 平滑折线图
交互·axure·ux
梓贤Vigo3 天前
【Axure高保真原型】表格增删改查(含下拉列表)
交互·产品经理·axure·原型
招风的黑耳4 天前
Axure科技感可视化原型案例:赋能设计与研发的宝藏资源
信息可视化·axure·可视化大屏·ai科技感
千码君20169 天前
Axure:如何将SVG转换为形状
ui·axure
alf_cee9 天前
Axure RP 9的安装
ui·axure·photoshop
pythonqiang913 天前
Axure下载安装教程(附安装包)Axure RP 11 超详细下载安装教程
其他·ui·axure·photoshop
千码君201613 天前
Axure:有个特别实用的功能
axure