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/