Axure疑难杂症:完美解决中继器数据互通、增删改查(玩转中继器)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:中继器数据互通、增删改查

主要内容:解决对中继器的读取、赋值、调用交互的高级数据互通设计

应用场景:台账高保真设计可复用多种场景

案例展示:

案例视频:

智慧运输管理平台-车辆管理


正文内容:

中大型项目中,100%会有的重要的内容是什么?数据台账!因此对于台账的设计不仅是产品设计的重要内容,也是客户看中的部分;内涵包括台账的字段、界面、交互、演示等内容;这个文章借用运输平台车辆管理模块的案例进行讲解和演示。

主要内容包括:筛选、新增、编辑、删除、查看五个内容。

要实现以上内容,一个很重要的思考便是要让数据流通起来,数据互通,才可以实现结果达成。而本文采用的基础元件便是文本框、动态面板、中继器,相互之间读取、赋值来完成。

另一个重要内容,便是缓存,因为Axure大部分逻辑是交互时直接赋值,而在复杂交互中,很难实现赋值,所以我引入缓存理念,由动态面板来承载缓存,简单交互采用直接赋值,复杂交互采用读值给动态面板,然后动态面板在给中继器,回调是一样的逻辑,中继器给动态面板,动态面板给文本框。

以下是各个部分详细交互:

1、筛选

筛选的逻辑:由查询按钮来触发,单击时-中继器添加筛选-查询条件文本与中继器列相符时-显示查询结果;详细交互下图

图1

2、新增

当新增一条数据时,需要有一个录入界面,我们制作一个动态面板;为什么用动态面板呢,因为其他操作也要使用;

图2

新增数据的基本逻辑:点击新增按钮时,显示新增页面-将页面的数值选择添加行-赋值给中继器;

图3

图4

3、编辑

编辑有点麻烦,应用场景是:当用户选中了一行数据要编辑,这时候就要弹出编辑页面,而且是选中行的,修改后对原数据进行修改。我们下面来分解这个过程:

用户选中一行数据,是哪行?我们使用复选框来定位

编辑页面在哪?我们新建一个动态面板

编辑页面的数据怎么来?由编辑按钮触发选中行的数据到编辑页

修改后数据怎么推给中继器?由修改页面的完成按钮完成数据的推送

下面四张图分别对应以上的逻辑:

图5

图6

图7

图8

4、删除

图9

5、查看

图10

图11

本课小结:中继器增删改查,重点在于理解数据互通的逻辑和过程,利用文本框、动态面板、中继器相互配合完成整体的交互过程。再次说一下缓存动态面板的意义,假设没有缓存动态面板的话,当用户点击标记行后,然后点击编辑,Axure判断不了要编辑什么数据,因为标记行实际已经结束了,也就是说,只有在标记的同时,数据是存在的(在点击复选框的那一瞬间,所以我们在这时候就要拿到数据,建一个动态面板先缓存起来),当点修改按钮时,这时候是一个新的开始(新的交互又开始了,不会记录之前的动作和数据)。


相关课程直通车:

Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)-CSDN博客

Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
小马哥编程5 小时前
【产品经理从0到1】原型及Axure介绍
产品经理·axure·photoshop
PM大明同学1 天前
Axure PR 9 中继器 标签
ui·交互·产品经理·axure
梓贤Vigo2 天前
【Axure教程】表格嵌套卡片
交互·产品经理·axure·原型·教程
小马哥编程2 天前
【产品经理从0到1】Axure介绍
产品经理·axure
招风的黑耳4 天前
高保真动态项目管理图表集
流程图·axure·甘特图·关系图谱·项目管理图表
招风的黑耳5 天前
移动端动态滑动拨盘选择器【Axure元件库】
axure·拨盘选择器·滑动选择器
梓贤Vigo5 天前
【Axure视频教程】不透明度函数
交互·产品经理·axure·原型·教程
PMEcho5 天前
墨刀上线高级交互功能,能否超越Axure?
产品经理·axure·交互设计·墨刀·原型设计·高级交互
全宇宙最最帅气的哆啦A梦小怪兽10 天前
【Axure绘制原型】图片切割、交互动效、热区、动态面板、元件显示隐藏、表单元件、表格、内联框架
产品经理·axure
招风的黑耳11 天前
可拖动的关系图谱原型案例
知识图谱·axure·中继器·动态交互·关系图谱