【Axure教程】快速搜索和高级搜索

梓贤Vigo

于 2025-03-27 09:30:45 发布

阅读量950

点赞数 13

文章标签： Axure 交互产品经理原型教程

本文链接：https://blog.youkuaiyun.com/mushe93/article/details/146548506

版权

快速搜索与高级搜索是针对不同使用场景设计的检索方式。

快速搜索聚焦于高频使用场景，支持通过工号、姓名、职位等核心字段进行即时查询，用户只需输入单一关键词即可一键直达目标信息，大幅提升日常高频检索效率，特别适用于快速定位已知特征明确的个体。

高级搜索则提供精细化筛选能力，覆盖部门、年龄、工龄、学历、籍贯、特长、绩效评级、性别等十余个维度，支持多条件组合筛选与精确范围设定（如年龄区间、工龄年限等），既能满足人力资源盘点、人才库筛选等复杂需求，也可通过交叉条件快速缩小目标群体范围。

两者形成互补：高频需求用快捷入口，深度分析用组合筛选，共同构建高效精准的信息检索体系。

今天教大家制作快速搜索和高级搜索效果的原型模版，效果包括：

【原型效果】

点击高级搜索和快速搜索可以切换筛选条件；

模糊搜索——可以搜索工号、姓名、籍贯、特长

数字区间筛选——可以对年龄和工龄进行区间筛选

下拉列表筛选——可以对职位、部门、学历进行下拉列表筛选

单选按钮组筛选——可以对性别、评级进行筛选

上面多种搜索条件可同时对表格进行筛选，具体效果可以打开下方原型地址体验

【原型预览含下载地址】

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=高级搜索案例

【制作教程】

1、材料准备

1.1快速搜索

主要元件包括文本标签、输入框、下拉列表、按钮，如下图所示摆放

1.2高级搜索

主要元件包括文本标签、输入框、下拉列表、按钮、单选按钮组，如下图所示摆放

将快速搜索和高级搜索的内容分别放置在同一个动态面板的两个状态页里。

1.3表格

表头用矩形制作，表格内容我们用中继器制作，如下图所示摆放

在中继器表格里填写对应的数据，如果是Axure10或以上的版本，点击连接元件，选择中继器里对应的矩形即可将数据设置到对应元件上；如果是Axure8或9，就要在中继器每项加载时，用设置文本的交互，将数据设置到对应的元件上。

2、交互制作

2.1快速搜索和高级搜索的切换

鼠标单击高级搜索按钮时，就是要切换到高级搜索的页面，所以我们用设置面板状态的交互，将动态民办设置到高级搜索的页面，因为高级搜索的内容比快速搜索多，所以我们选择推动下方的元件。

考虑到在用户可能会在快速搜索页里填写了工号、姓名、或者选择职位信息，所以我们要用交互将这些信息传递到高级搜索页面里对应的元件里，其中工号和姓名用的是文本框，我们用设置文本的交互，将值传递过去就可以列；职位里面用的是下拉列表，所以要用设置下拉列表选项的交互将值传递过去。

鼠标单击快速搜索按钮时，也是一样道理，也是设置面板页面和将相同条件选项的值传递过来。

2.2筛选

鼠标点击搜索按钮时，我们根据不同的条件进行筛选。

模糊搜索

案例中是工号、姓名、籍贯、特长，我们对他们所在的输入框里的内容进行模糊搜索，这里会用到indexof函数，这个函数可以判断某个字符在指定文本中的位置，例如1在123中是在第0位，2在123中是在第1位，4在123中不存在，就会回显数字-1，所以我们只需要用筛选事件对对应列进行筛选，筛选条件是>-1，这样就可以找到对应的数据了。

数字区间搜索

案例中是年龄和工龄，我们筛选的条件是左侧输入框的值≤表格对应的的值≤右侧输入框的值，但是这里需要考虑到一个情况，就是例如我年龄左侧填写了25，右侧为空，那应该要搜索的是25以上的职工，所以在我们需要记录左右侧输入框的值，如果左侧输入框的值为空，我们可以记录一个最小值例如-999999，如果右侧输入框为空就记录一个很大的值例如999999，如果输入框有填写数字，就记录对应的数字，这样就可以根据上面的条件进行筛选了。

下拉列表筛选

案例中是职位、部门和学历，筛选条件是下拉列表的值==对应列的值，这里我们也需要考虑一种情况，就是下拉列表还没有选择，就是还是默认选项，案例中是请选择的情况，所以我们执行筛选的条件是，下拉列表的选项≠请选择（默认选项）

单选按钮组筛选

案例中是性别和评级，这里需要注意的是，在选项选中时，我们要记录选中项的文字，然后对他进行模糊搜索，这里有同学可能会问，为什么不用等于，例如选择了性别男，就对筛选性别列等于男的数据？这里是因为，我们还考虑到用户没有选择，那这时记录文字就是空值，如果用等于，就会查找性别列为空的数据，那显然不合适。所以我们用模糊筛选，如果记录值为空，这样，所以数据里都是包含空值的，所以就可以显示所有的数据。