axure8.0快速入门新手教程:排序分页

今天讲讲如何制作排序和分页的原型。

这篇文章是对后台原型的增删改查选显6个功能讲解的最后一篇文章了,其他三篇可以查看《axure8.0快速入门新手教程:全选反选》《axure8.0快速入门新手教程:添加删除》《axure8.0快速入门新手教程:修改查询》。这里的排序和分页主要是属于显示这一功能上的,当数据量特别多的时候,排序和分页甚至是不可或缺的,这里就讲讲如何制作排序和分页的原型。

第一步:拖拉摆放好相关控件

1、数据表格(表头):1行4列,灰底黑框的表格作为表头,从左到右每个格子的文字分别为:姓名、性别、年龄、电话,字体全部加粗,并且在年龄旁边放一个白色的倒三角形,命名为“三角形”;

2、数据表格(表身):一个中继器,中继器里面是一个1行4列,白底黑框的表格,从左到右4个格子分别命名为“姓名”、“性别”、“年龄”、“电话”。

3、分页:5个黑框白底的矩形,文字分别为:首页、1、2、3、末页。


第二步:为中继器设置数据库和交互用例

中继器中的数据库设置如下:

为中继器添加每项加载时用例

用例中设置“姓名”的文本对应中继器数据库的“name”列;

用例中设置“性别”的文本对应中继器数据库的“sex”列;

用例中设置“年龄”的文本对应中继器数据库的“age”列;

用例中设置“电话”的文本对应中继器数据库的“tel”列。


第三步:为年龄按钮设置鼠标单击时交互用例

1、为中继器添加排序,属性为age,排序类型为Number,顺序为切换,默认为升序。

2、相对旋转“三角形”180度,方向为顺时针,锚点为中心。


第四步:为5个分页按钮设置鼠标单击时用例

例如首页按钮,鼠标单击时设置中继器当前页面value值为1,而1页、2页、3页和末页四个按钮分别设置中继器当前页面value值为1、value值为2、value值为3和Last。

点击预览,然后“年龄按钮”或者“点击分页按钮”,就可以看到排序分页的效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之排序分页

更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

文/维度 转载请注明出处:http://weidublog.com/index.php/2017/04/12/410/

1条评论 添加新讨论

11月06日评论

为什么每一步都跟着做了,但是最后还是效果没实现呢,难受

回复
登录后参与讨论
Ctrl+Enter 发表