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://niubipm.cn，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。

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

更多原型案例：http://niubipm.cn

作者：牛B产品经理

转载请注明出处：http://niubipm.cn/a/chanpinsheji/Axure/2018/0505/181.html