产品设计

    今日:22| 主题:15680
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 用Axure做一个轰轰烈烈的搜索功能

[复制链接]
壹切全部崩塌 发表于 2016-9-30 13:47:39
299 11

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在产品的体量越来越大的趋势下,一个搜索功能似乎已经是产品功能列表里的标配了。大的搜索引起,如google、百度;小的搜索,如字符串的匹配,word里的ctrl+F等。一个小小的搜索功能,可以带给我们怎样的思考呢?
本文承接之前的Axure中继器教程,继续用理论+Axure原型。探索产品背后的逻辑。
此案例主要实现以下内容:
1、根据搜索框的关键词,‘筛选’包含该关键字的商品,跳转商品列表页
2、搜索时显示‘搜索提示’,可以点击搜索提示直接跳转该提示词的商品列表页
3、在搜索页记录‘搜索历史’,在搜索列表页可以删除对应的‘搜索历史’
4、热搜词的记录和跳转;
  先看一下效果: 原型地址
  效果演示如下:
用Axure做一个轰轰烈烈的搜索功能-1 (google,搜索历史,百度,关键词,关键字)

  一、搜索是什么?
电商商城里的搜索功能本质上是筛选,不同的筛选其实就是不同字段的查询。例如,选择价格区间,其实就是“price”这个字段增加一个上下区间范围的条件,再将满足条件的展示出来。而搜索也是字符之间的匹配,将满足【已输入】的【字符串】和商城内所有商品的商品名称【goodsName】进行匹配,然后将满足条件的展现出来。
搜索的作用就是让用户可以精确(包括模糊)地找到所想的商品。
  下图是氧气和淘宝的搜索结果界面(一般也是【商品列表页】)。

用Axure做一个轰轰烈烈的搜索功能-2 (google,搜索历史,百度,关键词,关键字)

二、范围搜索
除了搜索的条件外,还有搜索的范围。随着商城的体量越来越大,搜索不仅仅是局限于商品的搜索,还有店铺、用户、文章、活动等。
  下图为聚美优品和蘑菇街的搜索界面,将搜索范围的选项放置在搜索框上方:
友荐云推荐




上一篇:Favourite UX research tools from the UX Mastery community
下一篇:译文|卡片式设计或许没你想象中那么美好
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

刘怡枚 发表于 2016-10-1 13:24:03
不明觉厉,先回再看!
回复 支持 反对

使用道具 举报

李竺君 发表于 2016-10-1 22:44:44
生前何必久睡,死后自会长眠……
回复 支持 反对

使用道具 举报

董磊 发表于 2016-10-4 03:19:23
为了三千积分!
回复 支持 反对

使用道具 举报

cvzco 发表于 2016-10-7 23:49:05
我竟然看完了,谢谢
回复 支持 反对

使用道具 举报

请发送对方 发表于 2016-10-8 03:16:16
沙发不是你想抢,想抢就能抢!
回复 支持 反对

使用道具 举报

abymm 发表于 2016-11-1 09:17:20
1v1飘过
回复 支持 反对

使用道具 举报

南白 发表于 2016-11-12 06:06:06
现在很痛苦,等过阵子回头看看,会发现其实那都不算事。
回复 支持 反对

使用道具 举报

ced2wang 发表于 2016-11-15 08:46:40
锄禾日当午,发帖真辛苦。
回复 支持 反对

使用道具 举报

耶耶耶 发表于 2016-11-18 06:07:23
为保住菊花,这个一定得回复!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表