Axure教程：高等搜刮

在原型中，搜刮是一个稀有的交互计划。但不少同砚由于武艺不熟习就没有做对应的交互后果。这篇文章，作者分享了计划搜刮功效的整个流程，信赖看完你也能做一个很牛逼的交互。

高等搜刮可以经过使用准确的紧张词或短语，协助用户找到特定的内容。尤其在面临多量搜刮后果时，经过过滤条件变小范围，可以节流时间。他允许用户使用多个条件举行组合（比如条件婚配、含糊搜刮、区间挑选等）来精准获取干系内容。

今天我们就来学习，怎样在Axure里使用交互，完成高等搜刮的后果，此中包含：

一、后果展现

1、切换搜刮办法——点击右上角搜刮笔墨可以切换高等搜刮或快速搜刮

2、多条件联动搜刮——包含输入框含糊搜刮、下拉列表选项搜刮、数字区间挑选、单选按钮组搜刮

3、中继器表格——表格内容是用中继器制造的，使用时维护中继器表格内容即可

原型地点：
https://hrioua.axshare.com/#g=1&p=高等搜刮案例

二、制造教程

1、质料准备

搜刮栏我们要做两个页面，快速搜刮和高等搜刮两个页面，分散放在同一个动态面板的两个形态里。

1.1 快速搜刮

寻常快速搜刮是搜刮常用的信息，比如工号、姓名、职位，以是我们可以在快速搜刮页面，可以经过输入框、文本标签、矩形、下拉列表、按钮来制造，如下图所示摆放

1.2 高等搜刮

高等搜刮的话搜刮的条件会愈加过细，可以精准的找到必要的数据，以是会在快速搜刮的基本上，在增长一些搜刮办法、比如区间搜刮、单选按钮组搜刮等。用到的元件包含输入框、文本标签、矩形、下拉列表、按钮、单选按钮等，如下图所示摆放

完成之后我们将它放在同一个动态面板的两个形态页里，后续会经过交互来切换。

1.3表格内容

表格我们分为表头和表格内容

表头的话我们用多个矩形摆放而成，每个矩形对应一列，如下图所示

表格内容我们用中继器来制造，在中继器里相反增长和表头一样多的矩形，每个对应一列，宽度和对应的表头矩形一律，如下图所示摆放

假如必要移入对应行变色的后果，可以设置鼠标悬停样式，将他们组合在一同，然后勾选允许触发组合内交互样式。

中继器表格我们增长对应的列数，案例中是11列，Column1~11，每列关于中继器里1-11的矩形

假如是Axure10的话，我们点击表格里的毗连元件，选择对应的矩形，就可以将表格内容设置到矩形上，假如是Axure8或9，就要在中继器每项加载时，用设置文本的交互，将对应列的值设置到对应的矩形上

2、交互制造

2.1 快速搜刮和高等搜刮之间的切换

鼠标单击右上角快速搜刮的笔墨时，就代表先切换到快速搜刮里，以是我们用设置面板形态的交互，将动态面板设置到高等搜刮的页面；

同理鼠标单击右上角高等搜刮的笔墨时，就代表先切换到高等搜刮里，以是我们用设置面板形态的交互，将动态面板设置到高等搜刮的页面；

在设置完页面之后，由于快速搜刮和高等搜刮里有三个条件是一样的，分散是工号、姓名和职位，以是我们要把之前输入了的值传到另一个页面，输入框里的值我们用设置文本的交互就可以设置了，下拉列表的值，我们要经过设置列表选中项的交互，将值传到另一个页面的下拉列表里

2.2 搜刮按钮的交互

鼠标单击搜刮按钮时，我们应该依据填写的内容对中继器表格举行挑选

2.2.1 输入框含糊搜刮

像员工号、姓名这种，我们可以用含糊搜刮，比如搜刮张，可以找到一切包含张的名字。这里我们必要用indexof函数，这个函数可以查察目标笔墨里对否含有指定的文本，假如有后果就大于-1，不然就即是-1

2.2.2下拉列表挑选

像员工岗亭这种，有仅限的选择值的，我们就可以用下拉列表挑选，挑选条件是下拉列表的选项笔墨即是对应列里的笔墨。这里必要注意的是，下拉列表寻常有一个选项是提示笔墨，比如请选择，我们在挑选之前，要把这种情况剔除，我们可以加一个条件，假如选项笔墨不是默许笔墨，才实行挑选的交互。

2.2.3 单选按钮组挑选

单选按钮组挑选也很简便，我们在单选按钮选中时，用设置文本的交互，将选中的值用文本纪录下去，然后用挑选的交互，条件是目标行对应列的值，即是纪录的文本值

2.2.4 区间挑选

寻常像年事、工龄这种，我们会用区间挑选的办法，挑选的条件是目标行对应列的值要大于左侧输入框的值，并且小于右侧输入框的值。

这里必要注意的是，假如输入框文本为空，那他就默以为0，如此假如只输入了左侧最小值是40，那他搜刮的条件就是40到0，如此分明是不合错误的，以是在输入框丢失核心时，我们要推断他对否为空，假如为空，就在纪录文本里设置一个无穷大的值，比如99999999；假如不为空，就纪录输入框里填写的值。挑选时不是对输入框举行挑选，是对纪录的笔墨举行挑选，如此就可以制止这个成绩了

2.2.5 团结挑选

由于各个挑选条件的干系是并的干系，以是我们一次添加挑选事变就可以了，必要注意的一点是，在挑选开头的时分，我们要先用移出挑选的交互，移除全部挑选，然后才开头新的挑选

如此我们就可以完成搜刮了，必要注意的是，在快速搜刮页面，只对前方三个条件举行挑选，高等搜刮页面，才是对全部条件举行挑选。

2.2.6 重置

鼠标单击重置按钮时，我们要将表格和搜刮条件恢复原状，假如是输入框，我们用设置文本的交互，将他设置为空就可以了；假如是纪录笔墨，我们也是用设置文本的交互，将他设置为默许值，比如最大值是设置为99999；假如是下拉列表，就用设置列表选项的交互，将他设置为默许选项；假如是单选按钮，我们就用取消选中的交互将他们取消。最初用触发的交互，触发搜刮按钮鼠标单击时，相当于触发了移出挑选，表格就主动规复到未挑选之前的形态。

如此我们就完成高等搜刮的原型模板了，后续使用也很便利，表格数据只必要在中继器表格里填写，预览后即可主动天生对应的后果。

那以上就是本期教程的全部内容，感兴致的同砚们可以入手试试哦，感激您的阅读，我们下期见。

本文由 @AI产物人 原创公布于各位都是产物司理，未经允许，克制转载

题图来自 Unsplash，基于 CC0 协议

该文看法仅代表作者本人，各位都是产物司理平台仅提供信息存储空间办事。