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切换效果的介绍,希望对您有所帮助。

     

    

    

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • html怎么使表格居中,html怎么使表格居中[通俗易懂]

    html怎么使表格居中,html怎么使表格居中[通俗易懂]回答:HTML中两个表格间的距离调整有两种适合微调的办法:1.设置第一个tbale的margin-bottom属性。例如:表示table表格底部保持100px间距。2.设置第二个tbale的margin-top属性。例如:表示table表格顶部保持100px间距。扩展知识margin属性可以单独改变元素(元素可以是表格或者DIV)的上,下,左,右边距。也可以一次改变所有的属性。margin属性…

    2022年9月19日
  • 视频识别的基础概念[通俗易懂]

    视频识别的基础概念[通俗易懂]视频识别一、视频识别几大问题2、常见的解决方案iDTTwo-StreamTSNC3DTDDRNNRPAN一、视频识别几大问题未修剪视频分类(UntrimmedVideoClassification):通过对输入的长视频进行全局分析,然后软分类到多个类别修剪视频识别(TrimmedActionRecognition):给出一段只包含一个动作的修剪视频,要求给视频分类时序行为提名(TemporalActionProposal):从长视频中找出可能含有动作的视频段时序行为定位(Tempor

    2022年4月29日
  • spring框架常用的注解_springmvc中注解的作用

    spring框架常用的注解_springmvc中注解的作用一、Spring常用注解Spring常用注解(绝对经典)二、Jpa1、@Entity,@Table(name=””)表明这是一个实体类,一般用于jpa,这两个注解一块使用,但是如果表名和实体类名相同的话,@Table可以省略。2、@MappedSuperClass基于代码复用和模型分离的思想,在项目开发中使用jpa的@MappedSuperClass注解,将实体类的多个属性分别封装到不同的非实体类中。例如,数据库表中都需要id来表示编号,id是这些映射实体类的通用属性,交给jpa统

    2022年10月22日
  • sudoers修改_sudoers配置使用

    sudoers修改_sudoers配置使用sudo是linux下常用的允许普通用户使用超级用户权限的工具,允许系统管理员让普通用户执行一些或者全部的root命令,如halt,reboot,su等等。这样不仅减少了root用户的登陆和管理时间,同样也提高了安全性。Sudo不是对shell的一个代替,它是面向每个命令的。它的特性主要有这样几点:§sudo能够限制用户只在某台主机上运行某些命令。§sudo提供了丰富的日志,详细地记录了每个…

    2022年6月20日
  • Cocos2d-x 水果忍者划痕效果

    Cocos2d-x 水果忍者划痕效果

    2021年11月14日
  • 良心推荐JVM性能调优工具

    良心推荐JVM性能调优工具良心推荐JVM性能调优工具该工具源于几年前关注的一个阿里大佬专做jvm性能调优,现在已经创业开发出社区版的在线性能调优!我觉得很香就推荐给大家!工具地址https://console.perfma.com/下面简单介绍社区版三个产品XXFox-Java虚拟机参数分析参数查询:查询指定JVM参数的官方定义、使用方法、默认值、专家建议参数检查:对JVM参数的用法,赋值及组合进行正确性与合理性检查参数变迁:给出JVM参数在不同配置环境下推荐取值或替代参数参数优化:全面诊断JVM参数,给出综

    2022年5月18日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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