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

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

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

首先理下思路:

1、通过全局变量来控制

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

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

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

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

新建全局变量

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

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

3、单选按钮增加动作:

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

单选按钮增加动作1

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

单选按钮增加动作2

4、动态面板增加动作:

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,244评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 16,558评论 4 61
  • 如果我的昨天和今天并没有什么不同,那么我活着的意义又是什么?
    似水流年_b0d2阅读 117评论 0 0
  • 很多事情 总是开始的很美好, 结束的很难堪… 总是会忘了到底是因何而起的口角 结束的…并不是彼此偃旗息鼓的妥协 却...
    小雅_b46d阅读 351评论 1 0
  • 〇、引言 从小语文成绩就不好,每次做阅读理解题,总是抓不住重点;每次写作文,老师的评语都是没有结构、像流水账...
    柒柒小酱阅读 871评论 2 6

友情链接更多精彩内容