Axure:切换单选按扭,控制界面显示不同内容
2018-02-01 本文已影响0人
杨杨_JK
平时工作,在设计新功能时,才会用Axure画下原型,用Axure主要也是画界面,再就是加链接跳转,其他功能一般用得较少,属初级应用者。
前天遇到一个界面,希望通过单选按钮切换,界面显示不同的输入项,很常见的一种交互,但没用Axure做过,于是百度了几篇看了下,发现都讲得很复杂,竟然没看明白,最后自己摸索下,简单就实现了,于是决定记录下来,说不定有同学搜索到我这篇,可以参考下,呵呵!
首先理下思路:
1、通过全局变量来控制
2、单选按钮切换时,修改对应的全局变量
3、对应的全局变量下,显示动态面板不同的状态
其实就这么简单,截图说明如下(Axure8.0):
1、在菜单——项目——全局变量中,新建一个变量,并给了第一个单选按钮对应的默认值
新建全局变量2、画界面:示意如图,3个单选按钮,增加含对应3个状态的动态面板:
增加动态面板,每个状态双击进去,分别画界面哦 最后的界面如上图3、单选按钮增加动作:
在3个单选按钮选中时,分别增加动作:将全局变量的值,改为对应的单选按钮的值(我这里是将全局变量的值与单选按钮元件的文字名称是一致的,修改变量值时也可以人工指定)
单选按钮增加动作1单选按钮切换时,还要显示对应动态面板的状态。这里用了先隐藏,再显示的方式,这样就达到有刷新的效果(重要:如果没有这一步,动态面板就不会动态的去切换显示)。
单选按钮增加动作24、动态面板增加动作:
动态面板的显示,就要根据全局变量的值来判断了:
当全局变量为A时,就显示动态面板,并且动态面板对应选择A相应的状态
动态面板增加动作1 判断全局变量,显示对应动态面板完成以上步骤,预览,搞定!
思路清晰了,就不觉得难了,通过这个例子,我想遇到更复杂的这类交互,自己摸索几下就应该可以做出来了!