axure8.0快速入门新手教程：全选反选

作为一个后台产品经理，可能没有太多的UI、UE可设计的，但却对产品经理的逻辑思路非常考验。后台产品经理更多的是和数据打交道，他要对整个产品所使用的数据都非产熟悉，并为后台使用人员提供简单便捷的数据管理功能设计。接下来的四章都是关于后台原型设计的，这一章主要是教大家如何设计全选反选的交互功能。

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

首先，是三个80X30的黑框白底矩形充当按钮，文字和元件名称均分别为：“选择”、“取消”和“反选”。

然后，是一个1X5的表格充当表头，黑框灰底，从左到右文字分别为：空、“姓名”、“性别”、“年龄”和“电话”。

最后，是一个中继器，中继器里面放一个复选框和一个1X5的表格，复选框放在表格的第一格正中间，命名为“选择”，而表格每个格子的大小都跟表头一样，但都是黑框白底的，第二个格子开始，格子从左到右分别命名为“姓名”，“性别”，“年龄”和“电话”。

第二步：为“选择”、“取消”和“反选”矩形添加交互样式

三个矩形的交互样式中，“鼠标悬停”和“鼠标按下”的填充颜色均设置为灰色。

第三步：为“选择”、“取消”和“反选”矩形添加鼠标点击时用例

“选择”：鼠标点击时，设置“选择”状态为选中；

“取消”：鼠标点击时，设置“选择”状态为取消选中；

“反选”：鼠标点击时，设置“选择”状态为切换选中状态。

第四步：为中继器的数据库添加数据，如下图：

第五步：为中继器添加每项加载时用例

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

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

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

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

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

效果图：axure原型设计之全选反选

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

作者：维度

转载请注明出处：http://weidublog.com/index.php/2017/04/09/334/