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

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

大家好,又见面了,我是你们的朋友全栈君。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    第五步:设置点击切换

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

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

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

         选中对应状态(购卡)

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


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

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

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

    第七步:设置颜色渐变

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

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


 

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

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

      第九步:生成原型

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

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

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

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

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

     

    

    

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145082.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • django权限管理例子_如何获得自定义房间权限

    django权限管理例子_如何获得自定义房间权限前言上一篇我们分析了认证的源码,一个请求认证通过以后,第二步就是查看权限了,drf默认是允许所有用户访问权限源码分析源码入口:APIView.py文件下的initial方法下的check_per

  • Java教程,全套Java基础视频教程「建议收藏」

    Java教程,全套Java基础视频教程「建议收藏」深知广大爱好Java的人学习是多么困难,没视频没资源,上网花钱还老被骗。为此我呕心沥血整理了这套Java教程,不管你是不懂电脑的小白,还是已经步入开发的大牛,这套路线路你都值得拥有,小白看上面的视频可以成功学会Java并且顺利工作,大神看了上面的资源肯定会谆谆乐道,教程的宗旨就是分享,专业,便利,让喜爱Java的人,都能平等的学习。首先建立好开发环境非常重要,工欲善其事,必先利其器。做任何开发…

  • 【C语言】getchar 函数的正确使用

    【C语言】getchar 函数的正确使用目录一、getchar函数二、缓冲区1、什么是缓冲区2、为什么要存在缓冲区3、缓冲区的类型4、缓冲区的刷新三、getchar函数的正确使用1、getchar的换行问题2、getchar与scanf的混合使用一、getchar函数从上面的介绍来看,我们要正确使用getchar函数,首先得了解什么是缓冲区。二、缓冲区1、什么是缓冲区缓冲区又称为缓存,它是内存空间的一部分。也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区。

    2022年10月19日
  • 在类中,调用这个类时,用$this->video_model是不是比每次调用这个类时D(‘Video’)效率更高呢…

    在类中,调用这个类时,用$this->video_model是不是比每次调用这个类时D(‘Video’)效率更高呢…

  • 银河麒麟v10 centos_银河麒麟创建root用户

    银河麒麟v10 centos_银河麒麟创建root用户由于现在很多软件安装时都需要安装一系列的依赖,出于安全考虑服务器又不一定都能够连接外网。故需要本地配置yum源,当前也可以配置外网yum源(前提是要能够访问外网)

  • matlab怎么保存图片_如何保存matlab文件

    matlab怎么保存图片_如何保存matlab文件matlab中保存图片的方法一、一种是出来图形窗口后手动保存(这儿又可以分两种):1直接从菜单保存,有fig,eps,jpeg,gif,png,bmp等格式。2edit——〉copyfigure,再粘贴到其他程序。二、另一种是用命令直接保存(这里也有两种):1用saveas命令保存图片。saveas的三个参数:(1)图形句柄,如果图形窗口标题栏是“Figure3”,则句柄就是3….

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号