Axure:切换单选按扭,控制界面显示不同内容

平时工作,在设计新功能时,才会用Axure画下原型,用Axure主要也是画界面,再就是加链接跳转,其他功能一般用得较少,属初级应用者。

前天遇到一个界面,希望通过单选按钮切换,界面显示不同的输入项,很常见的一种交互,但没用Axure做过,于是百度了几篇看了下,发现都讲得很复杂,竟然没看明白,最后自己摸索下,简单就实现了,于是决定记录下来,说不定有同学搜索到我这篇,可以参考下,呵呵!

首先理下思路:

1、通过全局变量来控制

2、单选按钮切换时,修改对应的全局变量

3、对应的全局变量下,显示动态面板不同的状态

其实就这么简单,截图说明如下(Axure8.0):

1、在菜单——项目——全局变量中,新建一个变量,并给了第一个单选按钮对应的默认值

Axure:切换单选按扭,控制界面显示不同内容_第1张图片
新建全局变量

2、画界面:示意如图,3个单选按钮,增加含对应3个状态的动态面板:

Axure:切换单选按扭,控制界面显示不同内容_第2张图片
增加动态面板,每个状态双击进去,分别画界面哦
Axure:切换单选按扭,控制界面显示不同内容_第3张图片
最后的界面如上图

3、单选按钮增加动作:

在3个单选按钮选中时,分别增加动作:将全局变量的值,改为对应的单选按钮的值(我这里是将全局变量的值与单选按钮元件的文字名称是一致的,修改变量值时也可以人工指定)

Axure:切换单选按扭,控制界面显示不同内容_第4张图片
单选按钮增加动作1

单选按钮切换时,还要显示对应动态面板的状态。这里用了先隐藏,再显示的方式,这样就达到有刷新的效果(重要:如果没有这一步,动态面板就不会动态的去切换显示)。

Axure:切换单选按扭,控制界面显示不同内容_第5张图片
单选按钮增加动作2

4、动态面板增加动作:

动态面板的显示,就要根据全局变量的值来判断了:

当全局变量为A时,就显示动态面板,并且动态面板对应选择A相应的状态

Axure:切换单选按扭,控制界面显示不同内容_第6张图片
动态面板增加动作1
Axure:切换单选按扭,控制界面显示不同内容_第7张图片
判断全局变量,显示对应动态面板

完成以上步骤,预览,搞定!

思路清晰了,就不觉得难了,通过这个例子,我想遇到更复杂的这类交互,自己摸索几下就应该可以做出来了!

你可能感兴趣的:(Axure:切换单选按扭,控制界面显示不同内容)