首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

用Axure动态面板制作Tab来切换

更新时间:2023-12-04

大力断狗

ui

2079

Axure RP是一款快速原型设计工具,能让产品人员快速、高效的创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。很多行业的人都会用到这款软件,不过对于新收小伙伴来说,刚学习的时候对一些功能不是很了解,有的小伙伴想知道怎么用Axure动态面板制作Tab来切换,下面就为大家带来这个问题的具体操作步骤。

我们可以通过动态面板设置不同页面的内容,有n个tab就设置n个状态; 拖动矩形作为按钮,设置矩形选中的状态; 设置tab按钮的点击事件,设置动态面板的状态切换。

详细的步骤

1、 拖动一个矩形做tab,这里我想做一个女装-男装-童装三个tab切换,先拖动一个矩形,把矩形命名为女装(形状命名习惯要养成),ps:先拖一个矩形就好,方便设置完交互再来一波复制。

用Axure动态面板制作Tab来切换

2、拖动其动态面板,给动态面板添加状态,做几个tab页并添加几种状态.我这里设置了女装、男装、童装三种状态.(动态面板命名为服装品类tab).每种状态下放置对应的页面内容,这里以文字示意。

用Axure动态面板制作Tab来切换

3、给tab按钮设置一些交互.选中女装按钮,点击交互下的编辑按钮,然后进入交互编辑器。

用Axure动态面板制作Tab来切换

在编辑器中,添加事件,然后单击时,添加两个动作:

设置面板的状态,目标【服装品类tab】到state【女装】; 设置选中,目标【当前元件】,设置【值】,到达【真】. 第一步操作是为了链接tab按钮和动态面板的状态,表示单击女装按钮进入动态面板的女装页面;

第二步操作表示单击操作时,该元件状态为选中,注意这一步非常的重要,只有这样我们设置元件【选中】时的【交互样式】才能实现,比如单击女装时女装按钮高亮显示。

用Axure动态面板制作Tab来切换

4、单击形状属性旁的显示全部,给女装按钮设置选项组(名称可自定义,我这设置服装tab组),设置选项组才能达成单选目的。

用Axure动态面板制作Tab来切换

用Axure动态面板制作Tab来切换

5、设置按钮的交互样式.这里可以设置悬停、选中、禁用等状态的交互样式.我这里设置选中时的样式为背景填充黄色.与第3步的单击操作设置选中结合,最终形成了单击按钮时黄色高亮的交互。

用Axure动态面板制作Tab来切换

6、复制女装按钮两次,修改每个按钮对应交互信息,形状名称改为男装/童装,单击时面板状态到男装/童装。

用Axure动态面板制作Tab来切换

7、最后一步,设置按钮女装的默认状态是选中,表示打开时默认选中女装tab。

用Axure动态面板制作Tab来切换

最终的效果

预览一下就大功告成.tab切换也有其他做法,但是动态面板更容易被理解,大家可以试一下。

用Axure动态面板制作Tab来切换



以上就是用Axure动态面板制作Tab来切换的操作方法了,是不是很简单呢?小伙伴们可以跟着上面的教程做一做哦。

上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • 剪映和PR的短视频剪辑技巧

    剪映和PR的短视频剪辑技巧

    3小时22分钟26秒

  • AI动画设计课-Stable Diffusion

    AI动画设计课-Stable Diffusion

    1小时32分钟15秒

  • 网游手绘武器制作课

    网游手绘武器制作课

    3小时55分钟44秒

  • 游戏道具造型表现课

    游戏道具造型表现课

    3小时51分钟28秒

  • 砸掉培训机构饭碗的AE系统课

    砸掉培训机构饭碗的AE系统课

    19分钟20秒

  • ComfyUI插件推荐与使用技巧

    ComfyUI插件推荐与使用技巧

    1小时13分钟5秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答