美文网首页
Axure:切换单选按扭,控制界面显示不同内容

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

作者: 杨杨_JK | 来源:发表于2018-02-01 13:34 被阅读0次

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

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

    首先理下思路:

    1、通过全局变量来控制

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

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

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

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

    新建全局变量

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

    增加动态面板,每个状态双击进去,分别画界面哦 最后的界面如上图

    3、单选按钮增加动作:

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

    单选按钮增加动作1

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

    单选按钮增加动作2

    4、动态面板增加动作:

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

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

    动态面板增加动作1 判断全局变量,显示对应动态面板

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

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ahrdzxtx.html