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

2017年4月9日
6+
阅读:457

作为一个后台产品经理,可能没有太多的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/

4条评论

  • Garfield Bad 2017年8月23日在上午1:35

    Well done

  • Joann Hathaway 2017年8月21日在上午5:48

    I enjoy reading your articles

  • Pingback引用通告:

    Google

  • ameblo.jp 2017年5月17日在上午5:03

    Just desire to say your article is as astonishing.

    The clearness in your put up is just nice and i could assume you’re an expert on this subject.
    Fine together with your permission let me to snatch your feed
    to keep updated with drawing close post. Thanks a million and
    please continue the rewarding work.

发表评论

电子邮件地址不会被公开。 必填项已用*标注