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

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

课程主题:中继器筛选专题

主要内容:时间条件筛选、多条件组合筛选、多个单一条件混合筛选

应用场景:各类数据表的多条件筛选均可使用

案例展示:

案例视频:

Axure中继器多条件筛选


正文内容:

Axure中继器条件筛选中有两个普遍的学习难点:

1、对于通过时间区间,来筛选中继器得到结果;

2、输入多个条件,来筛选中继器得到结果;在这种条件下,"我们认为的选择多个条件,把满足条件的结果,显示出来就可以了" ,但是Axure提供是两种选择:满足全部条件,筛选出结果;支持单一条件的搜索;可见我们认为的,和Axure的软件支持是不一样的;

我尝试过通过<情形>来应对这种问题,但是无法实现,可能是Axure的技术支持原因。

今天终于找到解决方案,下面进入具体的设计过程,在本文结尾再来总结整体解决方案。

一、建设整体页面布局及中继器,做好准备工作

图1

二、组合筛选、时间筛选区解决方案

Axure组合筛选的思考逻辑是:设置输入多个条件的元件文本与中继器里的内容比对,输出一致的内容作为筛选结果,这里Axure软件提供的支持是必须满足全部筛选条件,对于组合筛选唯一注意的就是移除其他筛选选项的√要去掉;

图2

图3

图4

图5

下面是时间筛选,这里需要注意的是我们选择Date.parse()函数来比对时间,往期课程有详细的教程,提示大家的是注意空格以及英文小括号,有时候写对了,这些细节没注意一样出不来结果。这条函数极容易写错,我敲到文中,大家可以复制粘贴:

\[Date.parse(Item.Ctime) \>= Date.parse(LVAR1.text) \&\& Date.parse(Item.Ctime) \<= Date.parse(LVAR2.text)\]

图6

以上是多条件筛选的解决方案,详细看看图里的交互就可以做出来。

三、任性筛选解决方案

在实际筛选场景下,用户不可能全部都输全,那么就会用到在筛选框里自己输内容,这就要求我们做人性化的设计,上文说了我打算通过情形来判断在各种条件下输出不同的筛选结果,但是axure不支持这种筛选。那么还需要实现这种设计,怎么办呢?

解决方案:通过输入区文本框的输入内容来判断用户输入的内容属于中继器中哪类的内容,然后我们在做筛选,为了实现这种目的,我们就需要用到失去焦点时和动态面板 ;根据判定的用户输入内容,显示不同的面板来做筛选,这样很好的区分开了不同条件对应的结果,与axure软件支持理念相符(要么你就满足全部条件,要么就做单一查询!):做多个单一查询。

图7

图8

图9

图10

按以上逻辑还可以设置很多条件,因为篇幅我只做了三个

做好了动态面板后,我们就可以制作输入框的交互

图11

图12

图13

图14

本课小结:本次课难点是时间条件的筛选和多个单一条件的分别筛选;组合筛选不难;时间条件筛选需要使用Date.parse()函数,搞不懂的直接粘贴文中我的表达式;多个单一条件筛选使用动态面板来作为分割使用,有效符合axure对于筛选的设计逻辑。


相关课程直通车:

Axure中继器时间筛选_axure筛选时间-CSDN博客

Axure中继器单选、多选和重置_axure重置按钮如何实现-CSDN博客

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

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

相关推荐
梓贤Vigo4 天前
【Axure高保真原型】地图路线和定位
交互·产品经理·axure·原型
招风的黑耳6 天前
Axure 高阶设计:打造“以假乱真”的多图片上传组件
javascript·图片上传·axure
孤蓬&听雨6 天前
Axure基于中继器实现的组件库(导航菜单、动态表格)
ui·axure·动态表格·中继器·导航菜单
梓贤Vigo6 天前
【Axure高保真原型】批量添加和删除图片
交互·产品经理·axure·原型·中继器
招风的黑耳9 天前
Axure 日期选择类组件设计:涵盖日期、时间及范围选择
axure·日期选择器·日期时间选择器·日期范围选择器
梓贤Vigo10 天前
【Axure视频教程】动态折线图
交互·产品经理·axure·原型·教程
招风的黑耳12 天前
Axure日期日历高保真动态交互原型
交互·axure
梓贤Vigo12 天前
【Axure高保真原型】中继器表格——自适应高度
交互·产品经理·axure·原型·中继器
梓贤Vigo14 天前
【Axure高保真原型】轮播条形图
交互·产品经理·axure·原型·中继器
招风的黑耳17 天前
Axure下拉菜单:从基础交互到高保真元件库应用
交互·axure