多语言展示
当前在线:1788今日阅读:103今日分享:49

原型设计:[2]如何实现TAB切换时按钮变换样式

前言:软件界面原型是交互设计师与需求工程师,产品经理,研发工程师沟通最直观的工具。一个完整的,优秀的界面原型能够帮助设计师,软件工程师等更好的了解产品需求,从而最大限度的实现预期的功能。 AXURE原型设计工具能够实现很多复杂的交互效果,比如TAB标签的动态切换、定位页面锚点、全选效果,登陆框效果、图片轮播等等,由于AXURE入门比较简单,而且互联网上有很多基础教程,在这里,我主要写一些在日常工作中使用AXURE设计产品原型经常用到又有一些设计复杂度的,结合我的使用经历,介绍给大家 继续上一节介绍:如何实现TAB切换时按钮跟着变换样式?
工具/原料
1

 AXURE RP  6.5 版本

2

 一个已经利用按钮和动态面板实现TAB切换效果的原型(或者就是需要切换的一组按钮)

方法/步骤
1

今天的设计目标:当鼠标移动到TAB标签按钮时,按钮样式发生改变(红底白色加粗字体),当点击按钮切换显示内容后,按钮样式发生改变(黄底黑色加粗字体)最终显示如下:

2

编辑鼠标移入按钮时的样式选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑悬停样式,在弹出的“设置悬停样式”对话框中选择填充色,字体颜色,加粗等效果,勾选对话框底部的“预览”功能,能够预览设置完时候的样式(需要设置成什么样式可根据自己的设计)

3

使用格式刷批量设置样式设置完一个按钮,还有另外两个按钮需要设置,这时候可以利用格式刷,类似于word中格式刷的功能,能够将部件的样式批量进行设置(注意:不能利用格式刷复制部件的操作和大小)。

4

设置按钮点击后(被选中)的样式选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑选中样式,在弹出的对话框中设置第二种样式(黄底黑色加粗字体),如下图:

5

生成原型预览在预览中我们发现,当鼠标滑过这三个按钮时,按钮变换样式,但是点击某一个按钮进行内容切换时,却没有显示选中的样式,如何让按钮点击后改变样式呢?

6

设置按钮点击后改变样式选中第一个按钮“作业批阅结果”,然后再右侧事件编辑栏中选中“onclick(点击时)用例1”进行编辑(注意:前面已经添加了一个事件,点击时显示对应的内容),在弹出的对话框中选择“设置部件为选中状态“,在右侧选择按钮”作业批阅结果“后确定,如下图

7

完成步骤6后预览效果,此时部件点击后变换了样式(如下图1),不过当再点击第二个按钮时却不能取消掉上一个被选中的样式(如下图2),怎么办呢?

8

指定按钮组选中本次TAB切换中的三个按钮,右键>>编辑按钮形状>>指定按钮组,在弹出的对话框中输入按钮组名称,例如“查看作业按钮组“,如下图:

9

完结,预览本小结最终效果

10

本节建议这个例子用到了一个部件的操作涉及到另一个部件的属性的相关功能,因此建议大家养成对部件命名的好习惯,不然在后面做复杂交互设计的时候,会很头疼,比如,在一堆没有名字的部件列表中你找不到目标了……

注意事项

一般按钮停留和选中样式是一致的,这样能给用户一种一致性的感觉,本节为了体现区别,用了红色和黄色两种效果

推荐信息