Axure RP 9 教程—中继器实现筛选和排序

Axure RP 9 教程—中继器实现筛选和排序

特别提醒

考虑到网上Axure RP 9 教程极少的情况,今后文章名称统一改为Axure RP 9 教程,一来明确公众号的定位,二来提高搜索的精准度。
本次教程是对Axure中继器的深化学习,之前发布过通过中继器实现模块排序的功能,本次教程是利用中继器实现筛选和新增。

效果图

  1. 根据所选项筛选出符合条件的角色,例如选择性别女,筛选出性别为女的角色。
  2. 添加一个新的角色,输入角色的字段信息,将角色添加进中继器的数据集内。

实现逻辑

首先,介绍一下中继器,简单说,中继器是一个数据集,里面可以导入数据和图像,新增行、删除行、进行排序和筛选数据,中继器通常更多的出现在高级交互中。《Axure教程—中继器实现模块排序》(文章在历史教程中可见)一文中,讲述了中继器的排序功能,可以根据我们选择的字段对模块进行排序。本期讲的是利用中继器实现筛选功能和增加新数据的功能。筛选功能和排序功能类似,都是设置数据集,实现筛选或者排序。新增功能相对来说复杂一丢丢,但本质上其实就是将所输入的数据赋值到中继器中即可。

好,那么接下来从教程中学习到底如何实现上述功能。

原型回顾

本次教程是在之前中继器教程的基础上做了优化,因此,我们先来回顾一下原型,回忆一波中继器内字段名称。下图是中继器内数据的字段名称:
1
OK!接下来开始讲筛选和新增!

操作步骤—筛选

我们以选择性别为例讲述操作步骤。Step one.创建一个Droplist,命名为“Droplist 性别”,为Droplist添加四个选项,分别为 性别、女、男、未知。“性别”代表初始默认状态,“未知”代表奇奇怪怪的角色性别,男和女就不多做解释。Step two.

为Droplist 性别 设置交互,选项改变时,如果选中项为男,为中继器新增过滤器,规则为[[item.Sex==’女’]],这样,在选中性别为女时,中继器就会自动筛选出性别为女的角色。需要注意的是,item.Sex代表的是中继器中数据集列名,’女’代表的是变量。这样,就实现了选中性别为女时筛选出对应的角色。

Step three.

接下来,继续设置if选中项为男,新增过滤器,if选中项为未知,新增过滤器…

Step four.

最后,if选中项为性别,移除中继器的过滤器。

ok,附上交互设置截图:

jiaohu
Step five.接下来以同样的方式设置其他的中继器数据集列的筛选即可。

操作步骤—新增

Step one.我们先明确添加角色时需要的字段,包括:名称、性别、位置、评分、攻击距离、攻击力、防御力;明确他们的输入类型,名称项为文本,性别和位置为可选项,评分、攻击距离、攻击力和防御力输入类型为Number。Step two.制作一个新增角色选框,在里面添加所需要输入的字段输入框或下拉列表,取好名称,将他们打组方便管理(这里我命名方式为“添加XX”,XX为输入字段的名称,如输入姓名的文本框命名为“添加名称”)。增加btn添加和btn取消用于控制是否添加角色,ok,准备工作就绪,接下来就是设置如何新增了。

Step three.

为添加按钮增加交互,鼠标单击时,为中继器新增行,点击新增行,在弹出的数据集中设置函数,本案例中,名称列,即Name列设置为A,同时为A设置局部变量为“元件文字=添加名称”;同样,Sex列,即性别列,设置为B,B的局部变量为“元件文字=添加性别”;这样,将所需的7个字段一一对应设置,这样,就实现了新增一行数据的功能。交互如下图:

321
3211
32111
Step four.添加一些用于完善的交互,在点击添加之后,隐藏新增模块,同时让所有输入框和下拉列表框都设置为默认值,这样,我们就可以重复多次添加角色了。

总结

本次的教程中并不包含太多的交互逻辑,实现方法其实也就是考验对中继器的熟悉程度。好,最后附上下载链接:
https://pan.baidu.com/s/11sQZ6l8-Iy5PP6bUIUqVOA
提取码:
无(点击阅读原文可直接下载哦)
2018122501521129

长按识别关注公众号,一起向梦想出发

本文来自 王得宇AIPM 投稿,不代表 PmTemple 立场,如若转载,请注明出处:

。如有涉及侵权行为,请发送相关证明材料至邮箱admin@pmtemple.com
(3)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
复盘|这是独立负责项目的阶段性总结
上一篇 2018年12月18日 下午10:08
Axure RP 9 教程—基本功能介绍1
下一篇 2018年12月26日 上午1:00

相关推荐

发表回复

登录后才能评论

评论列表(6条)

  • 快门研究者
    快门研究者 2026年4月14日 上午3:14

    作为经常需要设计旅行APP界面的摄影师,这个Axure RP 9的中继器教程太实用啦!筛选功能让我想起如何快速筛选出最美的旅行照片😍 等不及要试试新增功能来设计我的作品集模板了!

  • 沙漏潮流
    沙漏潮流 2026年4月10日 下午4:09

    这个中继器功能也太有范儿了吧!筛选和新增功能就像时尚圈的”季前筛选”和”新品发布”,精准定位才能打造爆款单品。Axure RP 9的交互设计简直像时尚趋势预测,总能精准捕捉用户需求。教程名称调整也很时尚,提高搜索精准度就像找到自己的风格标签~

  • 旋律实践派
    旋律实践派 2026年4月6日 上午1:59

    技术教程如乐谱,每一步都精准而富有韵律。当数据筛选如同寻找合适的音符组合,创造出和谐的产品旋律。教程的条理清晰,让Axure从冰冷工具变成了创作的伙伴,就像一首好歌,简单却有深意。

  • 富思记录员
    富思记录员 2026年3月27日 上午2:19

    中继器功能确实是Axure的核心竞争力,掌握筛选排序功能的产品经理原型效率提升40%。这类技能在招聘市场上溢价明显,ROI远超普通UI培训。

  • 二次观察者
    二次观察者 2026年3月25日 下午7:19

    哇!这个中继器筛选功能简直是游戏里的NPC系统啊!🎮 可以根据条件筛选角色,不就是我们游戏里设置不同阵营/种族的基础吗?新增功能就像添加新角色卡,太适合做游戏角色管理系统啦!Axure真是太神奇了~(✧ω✧)

  • 二次漫游者
    二次漫游者 2026年3月22日 下午4:39

    哇!中继器的筛选功能简直像游戏里的NPC系统!作为游戏策划,这种动态数据管理太有用了,可以轻松实现角色筛选、装备筛选功能了!新增功能就像添加新角色到数据库,太实用了!💕

微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部