Axure 动态面板初使用-实现简单的tab切换页面效果

使用工具版本

Axure 9

实现的效果

步骤过程

1、打开Axure 9,默认进入一个空白页,首先从元件库拉一个动态面板到页面中,位置肯定是C位咯~

2、将面板尺寸调整一下,设置成你喜欢的数字,比如我就喜欢800×600

3、然后给动态面板起个名字,随便起一个你容易识别的名字就可以,我这里就叫tab面板吧~

4、尺寸、名称设置好后,双击页面中的面板,进入面板编辑模式

5、从元件库拉3个按钮到面板内,用作tab点击按钮,放好对应的位置,文字分别改成A、B、C

6、再从元件库拉一个矩形到里面,并调整适合的尺寸大小

7、在矩形上面放一些内容,这里我拉了一段文本放在上面,调整一下字号、行距

8、然后我们将此面板状态命名为tabA,到这里就做好了tab切换的默认初始页面了。

9、下面我们复制tabA状态,点击复制按钮

10、点击复制按钮两次,并命名为tabB和tabC

11、选择tabB,进入tabB状态面板进入编辑,调整按钮及页面内容

12、tabB编辑好后,再进入tabC进行编辑调整

13、这3个面板状态编辑好之后,我们下面给这3个tab按钮要加上交互效果。我们先回到tabA状态,选中B按钮,然后在交互面板中点击新交互按钮

14、然后选择鼠标单击 时

15、再选择设置面板状态

16、再选择tab面板,就是我们之前创建的动态面板

17、接着我们将面板状态设置到tabB

18、点击确定按钮,保存好

19、然后给C按钮,重复上面13-18的步骤,区别在于我们要把面板状态设置到tabC。

20、同样的,我们在面板状态tabB给A按钮、C按钮设置交互效果

21、再在面板状态tabC给A按钮、B按钮设置交互效果

22、3个面板状态都设置完成后,点击关闭按钮,关闭面板编辑

23、然后按F5或者点击预览按钮,到浏览器中就可以看到我们做出来的效果了。

以上就是本次关于 Axure 动态面板的初级使用教程,希望对你有一些帮助。


1 原文阅读

我是Just,这里是「设计师工作日常」,求点赞求关注!!!

相关推荐
byte轻骑兵11 小时前
【HIDS】规范精讲[2]:一枚 Report 的诞生——HID 服务端特征全解剖
网络协议·人机交互·低功耗蓝牙·蓝牙协议·hogp
特立独行的猫a12 小时前
AI时代的应用开发神器:cj-tauri 已支持鸿蒙 PC,第一次的踩坑记录
ui·harmonyos·tauri·仓颉·鸿蒙pc·cj-tauri
2501_9307077815 小时前
使用C#代码在 PDF 文档中创建交互操作
pdf·c#·交互
Caroline5161 天前
GPT Image 2.5 + DeepSeek V4.1 Flash-1017:从游戏 UI 设计到 3D 项目生成
gpt·游戏·ui·ai 编程·gpt image 2.5
布莱克6052 天前
QtWidgets 与 QML:两大 UI 开发框架的全面对比
开发语言·c++·qt·ui·架构
几何心凉2 天前
端到端具身交互智能正式上线:让 AI 通过屏幕和机器人,真正走进现实世界
前端·人工智能·实时互动·机器人·交互
n87653 天前
Playwright Java WEB UI 自动化实现框架与逻辑
java·前端·ui
一木 之林3 天前
微信小程序开发全攻略·文章版|05 路由·交互·网络与音乐播放器实战
网络·微信小程序·小程序·交互
Cx330❀3 天前
深入浅出 Qt 绘图机制:从 QPainter 到四大图像类解析
开发语言·qt·ui·性能优化·图形渲染