请选择 进入手机版 | 继续访问电脑版

产品设计

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

[产品设计] Axure实例:做一个平平淡淡的筛选和排序功能

[复制链接]
sotti 发表于 2016-10-9 10:52:29
361 4

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

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

x

1475978283-6043-

Axure实例:做一个平平淡淡的筛选和排序功能-1-产品设计-淘宝,关键字,京东,服装,能力

  如果说【搜索】功能是精确地查找,那么筛选和排序就是为用户提供相关【可参考】的条件,帮助用户一步一步接近目标信息。
  效果预览:

1475978282-5561-

Axure实例:做一个平平淡淡的筛选和排序功能-2-产品设计-淘宝,关键字,京东,服装,能力

  一、排序
  下图是淘宝、京东、苏宁的商品列表页的排序,较为常规的排序条件有【按照价格排列】【按照评价】【按照销量】,可以看出这三种都是对用户的购买有帮助的排序条件
  1、价格,对应不同用户的购买能力和商品需求
  2、评价,对应已购买用户对使用商品的评价
  3、销量、对应此商品的卖出数量
  加入对应到一些UGC平台可能就是按【点赞数】【发布时间】【回复数】等

1475978283-4227-

Axure实例:做一个平平淡淡的筛选和排序功能-3-产品设计-淘宝,关键字,京东,服装,能力

  无论是什么排序条件,都是需要对用户寻找目标信息有帮助,或者直接参照作用的。排序是针对该条件(关键字条件,筛选条件)下的所有商品。
  二、筛选
  筛选的条件多种多样,对于较大的商城系统而言,还会根据用户搜索的商品种类,提供不同的筛选条件:
  例如:
  左图一:搜索【女装】,会出现服装商品对应的【尺码】【品牌】【材质】等;
  右图:搜索【手机】,会出现手机商品对应的【内存】【屏幕尺寸】等;

1475978285-6324-

Axure实例:做一个平平淡淡的筛选和排序功能-4-产品设计-淘宝,关键字,京东,服装,能力

  筛选条件是根据用户输入的关键字提炼出此类关键字对应的某一类商品,再综合这一类商品所涉及的参数字段。让用户可以选择对应的参数字段,来选择目标商品。
  相对于排序而言,筛选是将满足筛选条件的商品展示出来,筛选和排序是可以共同存在的。
  上一篇中说到【搜索】其实也是一种【筛选】,根据输入的字符,匹配(字符、语义)含有该字符的信息。
  三、Axure实现筛选
  1、绘制筛选页面
  参考页面是淘宝的筛选页:

1475978284-6798-

Axure实例:做一个平平淡淡的筛选和排序功能-5-产品设计-淘宝,关键字,京东,服装,能力

  1)拖入两个矩形,黑色:320*568,颜色#71736E,透明度80,置于底层;白色:230*568,颜色#FFFFFF,透明度100。这就是筛选页的雏形了。

1475978282-7146-

Axure实例:做一个平平淡淡的筛选和排序功能-6-产品设计-淘宝,关键字,京东,服装,能力

  2)拖入相关原件
  这里只做两个简单的筛选条件,价格区间和发货地选择。对应的命名是最低价(min),最高价(max),收货地址(address),下面的发货地选择是用了一个中继器(city-repeater)。

1475978284-2655-

Axure实例:做一个平平淡淡的筛选和排序功能-7-产品设计-淘宝,关键字,京东,服装,能力

  点击下方中继器内的文字(city-repeater),就将点击的城市名赋值到上方的发货地(address)内,如下图:

1475978287-4213-

Axure实例:做一个平平淡淡的筛选和排序功能-8-产品设计-淘宝,关键字,京东,服装,能力

  进入到中继器内,在矩形上方拖入一个等大的动态面板,为面板添加用例,如上图。
  完成之后效果图如下:

1475978286-7634-

Axure实例:做一个平平淡淡的筛选和排序功能-9-产品设计-淘宝,关键字,京东,服装,能力

  3)添加筛选
  先添加一个价格区间的筛选,点击【完成】时添加筛选:

1475978289-5654-

Axure实例:做一个平平淡淡的筛选和排序功能-10-产品设计-淘宝,关键字,京东,服装,能力

  设置一个价格区间,为商品列表页(list-repeater)添加一个筛选条件:
  [[(Item.price>LVAR1)&&(Item.price)]]即价格必需大于min,小于max,&&是并且的意思。
  效果图如下:(为了方便浏览,所以在同一页展示)

1475978287-3103-

Axure实例:做一个平平淡淡的筛选和排序功能-11-产品设计-淘宝,关键字,京东,服装,能力

  发货地的筛选条件与此相似:[[Item.ship==LVAR1]]
  注意:筛选条件可以并存,所以记得取消勾选“移除其他筛选条件”
  2)将筛选页移入之前的原型中
  将上一步绘制好的筛选页放入动态面板中,命名为filter。

1475978288-9914-

Axure实例:做一个平平淡淡的筛选和排序功能-12-产品设计-淘宝,关键字,京东,服装,能力

  所以完善几个交互的用例:
  1、点击商品列表的【筛选】时,移动右侧的filter,到坐标(0,0);2、点击filter面板内左侧的灰色地带时,移动filter,到坐标(320,0);3、点击【重置】时,取消所有筛选,并移动filter,到坐标(320,0);4、点击【完成】时,添加筛选,并并移动filter,到坐标(320,0);
  到这一步,这个简单的筛选功能就完成了。
  2、排序功能
  1、原件准备
  排序功能主要用到axure自带的原件中的【下拉列表框】

1475978288-7167-

Axure实例:做一个平平淡淡的筛选和排序功能-13-产品设计-淘宝,关键字,京东,服装,能力

  拖入一个,命名为sort,为它添加几个常用的排序规则:

1475978289-5995-

Axure实例:做一个平平淡淡的筛选和排序功能-14-产品设计-淘宝,关键字,京东,服装,能力

  2、添加排序
  先为他添加一个筛选条件,1234,四步:

1475978290-3639-

Axure实例:做一个平平淡淡的筛选和排序功能-15-产品设计-淘宝,关键字,京东,服装,能力

  再为它添加一个排序:为商品列表(list-repeat)添加一个排序,属性时price(价格),排序是数字(number),顺序是升序。

1475978291-8739-

Axure实例:做一个平平淡淡的筛选和排序功能-16-产品设计-淘宝,关键字,京东,服装,能力

  然后还有价格降序,销量增序,与此相同,不赘述。
  就像这样:
  要注意一点就是axure并不识别个十百千万这样的汉字数字,所以按销量排序时需要将1.6万修改为16000,才能在排序中起作用。

1475978291-7046-

Axure实例:做一个平平淡淡的筛选和排序功能-17-产品设计-淘宝,关键字,京东,服装,能力

  排序
  OK,距离我的超保真商城原型又进了一步,原型地址:http://yx.pmdaniu.com/1759/1602/ec74f67cc466c063714aeb3f14424a2a/start.html#g=1&p=完整版
                                        本文链接: http://www.yixieshi.com/59705.html (转载请保留)
                                                                        来源:产品100作者:七光年



上一篇:智商高的人缺少人情味?他们可能只是不想浪费时间
下一篇:谈谈iMessage应用商店:信息框里的小世界
廖文君 发表于 2016-10-9 11:37:48
心里只有你一个频道,最可恨的是还没有广告。
回复 支持 反对

使用道具 举报

623941689 发表于 2016-10-12 10:56:51
不要和我比懒,我懒得和你比.
回复 支持 反对

使用道具 举报

Jroin 发表于 2016-10-27 13:34:54
喜欢的摇,不喜欢的滚。
回复 支持 反对

使用道具 举报

淘宝 发表于 2016-11-18 12:59:13
sotti就是我的榜样哦
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

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

返回顶部 返回列表