Axure的动态面板制作tab切换效果

       最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下!

    结合注册窗体我们来实践一下

    第一步:拖动一个动态面板组件到页面编辑区域,并设置其大小为400*360

    第二步:给动态面板添加2个状态:购卡、充值

       1、  单击右键     编辑动态面板     管理面板状态

       2、  直接双击动态面板,即可弹出管理动态面板状态【常用、简单、方便】

       3、  点击加号按钮,可以不断的添加状态

       4、  点击第二个红色的框,可以编辑该动态面板的所有状态

    第三步:拖动一个矩形组件,并设置其坐标为0:0  大小400*360

    第四步:在拖动二个矩形组件,设置第一个坐标0:0  第二个坐标:200:0    大小都是 200*30

                并分别在矩形组件上编辑文字:购卡、充值

    第五步:设置点击切换

         选中购卡组件,双击【单击时】弹出用例编辑器,

         选中【设置动态面板状态为指定状态】

         选中购卡(前面给组件已经命名了)

         选中对应状态(购卡)


         按照同样方式,设置充值到对应的动态面板状态

    第六步:复制该动态面板的矩形组件到充值状态

         做好上面的步骤,我们生成原型,就可以实现tab标签的切换效果,不过并不能很真切的看出切换的变化,下面我们在做一些东西,让他在切换之后,有所变化

    第七步:设置颜色渐变

 


 

     第八步:设置其他组件内容

         拖动一些组件到页面编辑区域,并对其文字进行编辑

      第九步:生成原型

 

         该案例主要掌握动态面板制作的tab切换效果,其他如组件的对其啊,大小设置啊,布局啊,不在本次教程的考虑范围之内,其他内容,大家可以凭借自己的想法去做,做的多了,就会形成一套自己制作原型的步骤和方法。

其实在实际制作tab标签切换,如果tab页面过多,我自己都不是按照上述方法一步步走流程的,主要快速简单的去做。不过初学者还是按照流程来。

         以上就是对用axure的动态面板制作tab切换效果的介绍,希望对您有所帮助。

     

    

    

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值