Axure怎么制作多条件分类搜索框原型?

如题所述

当我们使用搜索时,我们经常会遇到一个类别搜索框。它们应该如何制作?今天,将教您如何在Axure中创建一个高保真分类搜索框,感兴趣的小伙伴就一起来学习操作吧~谁说鱼与熊掌不可兼得?选择,Axure理论+实操双向提升~精选多套系统全面Axure自学视频课,综合教学,适合新手0基础入门到进阶,感兴趣有需要都不要错过~

Axure制作多条件分类搜索框原型方法:

一、什么是分类搜索框?首先和大家简单的介绍一下什么是分类搜索框,就是可以按照不同分类来进行搜索,最简单的例子就是百度搜索,例如我想搜索皮卡丘,我可以按照不同的类别搜索皮卡丘相关的图片、视频、贴吧、产品、资讯等等。

下面,我们主要学习如果制作分类外联搜索的原型,后续也可以多条件搜索表格、卡片、产品的内容。

二、材料准备

输入框*1——隐藏边框;

搜索图标*1——放大镜的图标,用于美化原型,相当于搜索按钮;

矩形外框*1——设置为圆角,作用是美化原型;

中继器*1——制作下拉的内容,取消勾选隔离选项组效果,默认隐藏;内部表格第一列填入分类选项,案例中的选项为网页、资讯、视频、图片、知道、文库、贴吧、采购;你们也可以根据实际的分类来制作;

中继器内部矩形*1——设置成取消边框,移入的交互样式将文字设为蓝色,选中样式将文字设为白色,填充颜色设为蓝色,设置为单选组;

文字文本——用来回显选择了那个分类,案例中默认是搜索网页;

下箭头——用于美化原型,

所有材料准备好之后摆放:

三、交互制作1.文字文本和下箭头组合鼠标单击时事件显示选项中继器,这里勾选至于顶层,因为如果不勾选的话,演示的时候容易被其他元件挡住,一般像弹窗、弹出列表都要勾选;还需要设置灯箱效果,背景色为透明,设置之后鼠标单击其他地方就可以将选项中继器隐藏。

2.中继器载入时事件中继器载入时,设置中继器内部的矩形的文本等于中继器第一列的值,这个是默认事件,即新建中继器时如果你没有改动的话自动会出现。

3.中继器内部矩形鼠标单击时事件1)设置选中状态

首先要设置当前元件为选中状态,选中后因为在材料准备的时候设置了交互样式选中时变蓝色,就可以清晰的看到选中那个选项。

2)设置文字

我们需要将选中的值回显的文本标签,所以我们将回显文字的文本标签的文本值设为当前选项的值(this.text)。

3)隐藏选项中继器

鼠标单击选择选项之后,隐藏中继器。

4)设置文本焦点

最后,将文本的焦点设置到输入框内,这里用户可以快速的继续输入搜索内容。

4.搜索按钮鼠标单击时事件这里需要分条件,首先是判断输入框的值是否为空,如果为空,则搜索内容为空,则不进行搜索,所以这是我们把焦点设置在输入框内,方便用户直接输入搜索。

如果输入内容不为空,那么我们就按照回显的文字文本进行搜索。

如果回显文字=网页,我们就打开对应网页的地址。这里教大家一个外联的简单的方法,例如我们想在百度上搜索网页皮卡丘,那么我们会得到搜索出来的网址,我们把网址内部的皮卡丘转换成变量LVAR1,然后再将变量设为输入框的内容,这样就可以实现搜索输入的内容的。

我们用以上的方法设置每一个分类条件打开的对应地址页面即可,这样我们就完成了多条件分类搜索框原型的制作的。

最后我们补充一下课外的知识,多条件搜索不仅仅能用于外联的搜索,也可以搜索表格内容,我们可以将表格每一列的标题例如年龄、学历等作为分类的条件,然后搜索时,将原来的打开页面变成对中继器表格的添加筛选事件即可。

以上所述就是“Axure怎么制作多条件分类搜索框原型?”的相关内容分享了,希望能够帮助到你!如果你还想要学习更多的Axure技巧,点击Axure相关文章,或者直接跟着我们的专业讲师开始Axure自学视频课学习体验~专业系统视频教程学习,学习收获总会比你零零散散图文学习来得更快速、更有效率~

温馨提示:答案为网友推荐,仅供参考
相似回答