对应的命名是最低价(min),最高价(max),收货地址(address),下面的发货地选择是用了一个中继器(city-repeater)。
小原件
点击下方中继器内的文字(city-repeater),就将点击的城市名赋值到上方的发货地(address)内,如下图:
添加用例
进入到中继器内,在矩形上方拖入一个等大的动态面板,为面板添加用例,如上图。
完成之后效果图如下:
地址选择效果
3)添加筛选
先添加一个价格区间的筛选,点击【完成】时添加筛选:
价格区间
设置一个价格区间,为商品列表页(list-repeater)添加一个筛选条件:
[[(Item.price>LVAR1)&&Item.price即价格必需大于min,小于max,&&是并且的意思。
效果图如下:(为了方便浏览,所以在同一页展示)
发货地的筛选条件与此相似:[[Item.ship==LVAR1]]
注意:筛选条件可以并存,所以记得取消勾选“移除其他筛选条件”
2)将筛选页移入之前的原型中
将上一步绘制好的筛选页放入动态面板中,命名为filter。
所以完善几个交互的用例:
1、点击商品列表的【筛选】时,移动右侧的filter,到坐标(0,0);
2、点击filter面板内左侧的灰色地带时,移动filter,到坐标(320,0);
3、点击【重置】时,取消所有筛选,并移动filter,到坐标(320,0);
4、点击【完成】时,添加筛选,并并移动filter,到坐标(320,0);
到这一步,这个简单的筛选功能就完成了。
2、排序功能
1、原件准备
排序功能主要用到axure自带的原件中的【下拉列表框】
下拉列表框
拖入一个,命名为sort,为它添加几个常用的排序规则:
2、添加排序
先为他添加一个筛选条件,1234,四步:
添加排序条件
再为它添加一个排序:为商品列表(list-repeat)添加一个排序,属性时price(价格),排序是数字(number),顺序是升序。
添加排序
然后还有价格降序,销量增序,与此相同,不赘述。
就像这样:
要注意一点就是axure并不识别个十百千万这样