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博客

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

相关推荐
招风的黑耳16 小时前
Axure中继器高保真交互原型的核心元件
axure·中继器·交互案例
招风的黑耳2 天前
Axure制作可视化大屏动态滚动列表教程
axure·动态图表·滚动列表
招风的黑耳5 天前
Axure设计之内联框架切换页面、子页面间跳转问题
axure·页面跳转·内联框架
梓贤Vigo5 天前
【Axure高保真原型】输入框插入话题效果
交互·产品经理·axure·原型
招风的黑耳7 天前
智慧城市综合运营管理系统Axure原型
智慧城市·axure
梓贤Vigo18 天前
【Axure教程】增删改饼图
交互·产品经理·axure·原型·教程
梓贤Vigo19 天前
【Axure高保真原型】动态地图路线
交互·产品经理·axure·原型
梓贤Vigo19 天前
【Axure视频教程】手电筒效果
交互·产品经理·axure·原型·教程
招风的黑耳21 天前
Axure复选框组件的深度定制:实现自定义大小、颜色与全选功能
axure·axure元件
招风的黑耳21 天前
基于Axure的动态甘特图设计:实现任务增删改与时间拖拽交互
axure·甘特图