在上一篇中我用了四个中继器加两个函数做了一个轰轰烈烈的搜索功能,今天为了进一步完善我的商城原型,所以就打算做一个简简单单的筛选和排序功能。这个功能不仅在商城中会用到,随着产品的体量越来越大,包含的信息越来越多,为了帮助用户快捷找到目标信息,一个筛选和排序是必不可少的。
封面图
如果说【搜索】功能是精确地查找,那么筛选和排序就是为用户提供相关【可参考】的条件,帮助用户一步一步接近目标信息。
效果预览:
效果图
一、排序
下图是淘宝、京东、苏宁的商品列表页的排序,较为常规的排序条件有【按照价格排列】【按照评价】【按照销量】,可以看出这三种都是对用户的购买有帮助的排序条件
1、价格,对应不同用户的购买能力和商品需求
2、评价,对应已购买用户对使用商品的评价
3、销量、对应此商品的卖出数量
加入对应到一些UGC平台可能就是按【点赞数】【发布时间】【回复数】等
排序
无论是什么排序条件,都是需要对用户寻找目标信息有帮助,或者直接参照作用的。排序是针对该条件(关键字条件,筛选条件)下的所有商品。
二、筛选
筛选的条件多种多样,对于较大的商城系统而言,还会根据用户搜索的商品种类,提供不同的筛选条件:
例如:
左图一:搜索【女装】,会出现服装商品对应的【尺码】【品牌】【材质】等;
右图:搜索【手机】,会出现手机商品对应的【内存】【屏幕尺寸】等;
筛选
筛选条件是根据用户输入的关键字提炼出此类关键字对应的某一类商品,再综合这一类商品所涉及的参数字段。让用户可以选择对应的参数字段,来选择目标商品。
相对于排序而言,筛选是将满足筛选条件的商品展示出来,筛选和排序是可以共同存在的。
上一篇中说到【搜索】其实也是一种【筛选】,根据输入的字符,匹配(字符、语义)含有该字符的信息。
三、Axure实现筛选
1、绘制筛选页面
参考页面是淘宝的筛选页:
参照图
1)拖入两个矩形,黑色:320*568,颜色#71736E,透明度80,置于底层;白色:230*568,颜色#FFFFFF,透明度100。这就是筛选页的雏形了。
两个矩形
2)拖入相关原件
这里只做两个简单的筛选条件,价格区间和发货地选择。