闽台鸽网_台鸽_信鸽_鸽子家园

Axure教程:用Axure做一个轰轰烈烈的搜索功能

闽台鸽网 2021-02-19 16:49 闽台鸽网 120
在产品的体量越来越大的趋势下,一个搜索功能似乎已经是产品功能列表里的标配了。大的搜索引擎,如google、百度

此案例主要实现以下内容:

1、根据搜索框的关键词,‘筛选’包含该关键字的商品,跳转商品列表页
2、搜索时显示‘搜索提示’,可以点击搜索提示直接跳转该提示词的商品列表页
3、在搜索页记录‘搜索历史’,在搜索列表页可以删除对应的‘搜索历史’
4、热搜词的记录和跳转;

效果演示如下:

搜索


一、搜索是什么?
电商商城里的搜索功能本质上是筛选,不同的筛选其实就是不同字段的查询。例如,选择价格区间,其实就是“price”这个字段增加一个上下区间范围的条件,再将满足条件的展示出来。而搜索也是字符之间的匹配,将满足【已输入】的【字符串】和商城内所有商品的商品名称【goodsName】进行匹配,然后将满足条件的展现出来。

搜索的作用就是让用户可以精确(包括模糊)地找到所想的商品。

下图是氧气和淘宝的搜索结果界面(一般也是【商品列表页】)。

商品范围搜索

二、范围搜索
除了搜索的条件外,还有搜索的范围。随着商城的体量越来越大,搜索不仅仅是局限于商品的搜索,还有店铺、用户、文章、活动等。

下图为聚美优品和蘑菇街的搜索界面,将搜索范围的选项放置在搜索框上方:

new_page_1

古典一些的就像淘宝wap,需要点击搜索范围。

默默

而淘宝wap端还是需要点击“宝贝”来选择搜索范围。

小结:搜索本是一个复杂的过程,能让用户点击,滑动等手势完成就尽量不要使用输入。在搜索范围的分类较少时(如聚美和蘑菇街),可在搜索框上方或下放添加选项卡,这样可以比淘宝wap少一次点击,而且对于搜索的分类展现得更为充分。当搜索范围较多时,可以参考淘宝,在搜索框下放设置横向滑动的模块,供用户选择。

三、中继器+动态面板+函数实现搜索

之前写了中继器的一些简单用法,这次做一点复杂的功能吧。其实我工作中也不常用到中继器,快速原型绘制呗。但是,用不用和你会不会,是两码事。

OK,废话不多说,看此文需要有一些Axure和中继器的基础知识,重要的不是做出了一个效果,而是通过一段思考来完善产品里的需求。(之前的文章链接会放到文末。)

两个页面,用了六个中继器。所以我说这是轰轰烈烈的搜索。╮(╯_╰)╭

建议点开上方的原型链接,对应着看。

搜索

1、点击搜索框跳转

关于页面的命名:

商品列表页:GoodsTable

搜索页:Seach

商品列表页的搜索框:seachText-goodslistpage

搜索页的搜索框:SeachText-seachpage

搜索提示:prompt-repeater(输入文本时,下面弹出的列表项,因为是中继器,所以用了repeater)

搜索历史:seachHistory(记录搜素历史)

21

解释:1、在点击商品列表页的搜索框时,设置页面跳转到搜索页(设置sight为Search)

2、进入搜索页时隐藏搜索提示(搜索提示只有输入文本时才提示)

2、搜索页的样式设置

E87D.tmp

这是搜索页的样式,【搜索发现】和【历史搜索】分别是两个动态面板套着中继器。

1)搜索发现(请自动忽略图中文字….)

微信截图_20160929213453

这是中继器的基础用法,熟练一点的话比一个一个copy要快。而且装逼能装圆一点。这个是固定不动的项,需要修改的话,可以直接在中继器的数据集里修改。

热搜词(搜索发现)是计算商城内的所有被搜词,然后显示出来。减少用户手动输入小号的时间,提醒用户当下流行的元素。

2)历史搜索

16DF.tmp

历史搜索的字段赋值和之前的一样,这里为了展示,默认添加了“男装”和“女装”。

热门标签

ICP备案号: 闽ICP备07501955号-11
闽台鸽网版权所有
返回顶部