AxureRP教程–使用单选框复选框

AxureRP提供了一系列常用的组件,其中也包括了单选框和复选框,应该来说这两个组件是经常会用到的,涉及选择项的时候,就会想是要做单选控制还是多选控制。常见的用法不做过多解释,这里介绍一下AxureRP里是如何来设置实现一些单选框和复选框的较为复杂的交互效果的。

AxureRP提供的单选框默认是以个体为单位,也即在摆放多个单选框的时候,每个选项都是可以被选中的,这其实也就失去了单选的实际意思,不过在保真度要求不高的情况下其实影响也不大,毕竟原型只是配合演示解说,并不能取代解说。不过其实AxureRP提供了将单选项分组的功能,而且设置非常简单,这样就可以实现一组单选里面只能选择其中一个的功能。

添加几个单选框组件,然后将所有单选框全都选中之后点右键—-编辑单选框—分配单选组,会有一个弹出框提示,输入一个组名字即可,这样就完成了单选组的分配,非常简单,可查看演示例子。

复选框组件就不存在这个问题了,因为本身就是多选的属性,但复选项目多了之后就会有一个问题,那就是用户需要点很多次,这就需要有一个全选的方便功能,可能很多项目里面只有一两项是不需要的,这就需要有一个反选的功能,这样能使操作便捷性提高,提升用户体验。

全选的实现原理比较简单,一种是直接将全部复选框直接指定为选中状态,不过这样实现全部选中是可以的,同时要有全部取消功能的话就不行了,因此另一种方法就是用一个变量来标示当前所有复选框的状态,以此来区分是全部选中还是全部取消选中。反选的稍微麻烦点,需要判断当前每个复选框的状态,如果已选中则置为未选中,如果未选中则置为选中状态。

首先添加两个按钮全选和反选,四个复选框并命名为1、2、3、4。全选的OnClick事件需借用一个变量来判断当前是要执行全部选中,还是执行全部取消,这里使用默认变量OnloadVariable。当变量OnloadVariable等于空时,让复选框1、2、3、4全部选中,并将OnloadVariable的值赋为1。当OnloadVariable等于1时,让复选框1、2、3、4全部取消,并将OnloadVariable的值再置为空。反选的OnClick事件则要判断每个复选框的选择状态,需要注意的是,这里的条件不都是连贯条件,所以需要改为IF…ELSE IF这样的组合。

基本上单选框和复选框的应用就是这样,因为应用的比较普遍了,所以功能上大家都很熟知,当然这里还可以与其他的组件配合使用,来实现更多的交互效果,下面介绍一个红绿灯的效果,这个在设计中很少遇到,但可以转换,比如例子里是红绿灯的切换,实际可以是提示信息切换,选项不同显示不同页面的效果。

首先添加三个单选框分别命名为红灯、黄灯、绿灯,并将这三个单选框分配为一个单选组,再添加一个动态面板用来做提示信息,不同的选项控制不能的面板状态,其中红灯和绿灯的时候还需要有倒计时效果,设置比较简单,用到了OnPageLoad事件来完成整个交互效果。

演示示例在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–使用单选框复选框”5 条评论

iitfkclsfci | 2012-01-31 04:05 |
commenter

单选按钮组的设置终于知道了

回家 | 2012-05-8 13:59 |
commenter

❓ 全选和反选的实验不成功,我用的是axure6.0版本

commenter

这个和版本没有关系的,你检查一下交互事件那里的设置,特别是IF 和IF else的区别

Aries | 2013-05-4 18:11 |
commenter

请问onpageload事件在哪可以设置,为什么看不到呢