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\] [原文阅读](https://mp.weixin.qq.com/s/8RvcTh-fvwHYedNUrt-RoQ) 我是Just,这里是「设计师工作日常」,求点赞求关注!!!

相关推荐
橙子199110168 小时前
UI 绘制相关
ui
Math_teacher_fan9 小时前
Flutter 跨平台开发实战:鸿蒙与音乐律动艺术(六)、Lissajous 利萨茹曲线:频率耦合的轨迹艺术
flutter·ui·数学建模·华为·harmonyos·鸿蒙系统
jiejiejiejie_14 小时前
Flutter for OpenHarmony 萌系 UI 实战合集:骨架屏 + 引导页一站式指南
flutter·ui·华为
Ulyanov14 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》 开发环境搭建与工具链极简主义 —— 拒绝臃肿,构建工业级基座
开发语言·python·qt·ui·架构·系统仿真
Ulyanov15 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》:QML 声明式语法与霓虹按钮 —— 当 Python 遇见现代美学
开发语言·python·ui·qml·系统仿真·雷达电子对抗仿真
lpfasd12318 小时前
Playwright 网页自动化交互:滑块安全校验优雅处理方案
运维·自动化·交互
薛定猫AI20 小时前
【深度解析】Open Code Skills 工作流:用知识图谱、Spec 驱动与 UI 设计系统提升 AI Coding Agent 生产力
人工智能·ui·知识图谱
ZC跨境爬虫20 小时前
跟着 MDN 学 HTML day_7:(进阶文本语义标签全覆盖)
前端·javascript·css·ui·html
ZC跨境爬虫20 小时前
跟着 MDN 学 HTML day_6:(HTML文本语义标签全解+lang属性)
前端·ui·html·edge浏览器
Ulyanov21 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》:实时时钟与数据驱动 UI —— 从“事件回调”到“状态绑定”的范式跃迁
开发语言·python·qt·ui·架构·交互