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

ゝ一纸荒年。 2022-08-22 00:19 256阅读 0赞

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

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

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

![Center][]

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

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

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

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

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

![Center 1][]

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

![Center 2][]

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

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

![Center 2][]

#     第五步：设置点击切换 #

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

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

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

选中对应状态(购卡)

![Center 3][]

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

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

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

#     第七步：设置颜色渐变 #

![Center 4][]

![Center 5][]

#      第八步：设置其他组件内容 #

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

#       第九步：生成原型 #

![Center 6][]

![Center 7][]

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

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

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

[Center]: /images/20220724/f0639a50de9641aab01fbeb39ea36d86.png
[Center 1]: /images/20220724/efa22da155774aa3aafa425d77c38a1b.png
[Center 2]: /images/20220724/84ef2dc055e144768573a3a8457244ca.png
[Center 3]: /images/20220724/0c4022fd5ce74df0ac94d93722dc6427.png
[Center 4]: /images/20220724/f03e47145fe2455ca5ce9fdf5c34e817.png
[Center 5]: /images/20220724/318c50dc32234211a6e829da8eb2c7ca.png
[Center 6]: /images/20220724/317cbd3edf444f85b55054f83262b69d.png
[Center 7]: /images/20220724/ead07ee34a944ec8904937739889f1b8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js实现tab切换效果

ab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="app"> <ul class="tab-tilt...

古城微笑少年丶/ 2024年04月17日 13:51/ 0 赞/ 78 阅读

相关 Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一

骑猪看日落/ 2022年10月02日 10:51/ 0 赞/ 281 阅读

相关 Axure RP 基于动态面板实现轮播图

文章目录一、效果演示二、动态面板State 三、载入时交互四、向左拖动结束时交互五、向右拖动结束时交互一、效果演示废话不

浅浅的花香味﹌/ 2022年09月13日 15:25/ 0 赞/ 182 阅读

相关 Axure中元件的拖动效果-动图面板(九)

右击元件转化为【动态面板】 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeHlwaGZf5

忘是亡心i/ 2022年09月12日 04:44/ 0 赞/ 156 阅读

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

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

ゝ一纸荒年。/ 2022年08月22日 00:19/ 0 赞/ 257 阅读

相关 Axure RP制作tab选项卡

最近接触到到Axure RP，总结一下为初学者提供方便 Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP

以你之姓@/ 2022年08月22日 00:15/ 0 赞/ 231 阅读

相关 axure-使用动态面板控制组合图形活动 (一)

一、简单单一图形活动 1. 拖放一个图形，然后单击右键，选择“转换为动态面板” 2. OutLine:页面下出现动态面板，下面包括State1，State1中包括刚刚拖放的

爱被打了一巴掌/ 2022年08月21日 10:37/ 0 赞/ 245 阅读

相关 Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中，需要实现Tab选项卡切换的效果，但Axure中并没有类似于Tab控件的部件，所以可以用Axure中的动态面板(Dyn

àì夳堔傛蜴生んèń/ 2022年08月13日 19:45/ 0 赞/ 299 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 464 阅读

相关 tab切换效果

![20210203145157983.gif][] 该dome仅供参考: 免费项目dome包在文章最底部 html <view class="mg_bo

系统管理员/ 2021年07月25日 02:44/ 0 赞/ 534 阅读