Axure设计之内联框架切换页面、子页面间跳转问题

在Axure中,你可以通过以下步骤实现主页面中的内联框架在点击按钮时切换页面内容,从A页面切换到B页面。(误区:子页面之间切换不要设置"框架中打开链接"然后选"父级框架"这个交互)

主框架页面(左侧导航展示所有页面菜单):

子页面切换主框架内联框架页面链接:

实现跳转效果:

其实,子页面要控制主框架切换菜单(也就是切换内联框架的链接)只需在子页面交互中设置打开链接,然后选择页面。

一起来看下案例的详细介绍吧!

步骤概述

  1. 设置内联框架:在主页面的内联框架中加载A页面。
  2. 创建按钮交互:在A页面中创建一个按钮,并设置其点击事件来改变内联框架的页面内容。

详细步骤

1. 设置主页面和内联框架
  • 创建主页面
    • 打开Axure,创建一个新的页面作为主页面。
  • 添加内联框架
    • 从元件库中拖动一个内联框架(Inline Frame)到主页面的画布上。
    • 调整内联框架的大小和位置。
  • 设置内联框架的初始页面
    • 右键点击内联框架,选择"链接到URL或文件"。
    • 在弹出的对话框中,选择"链接到Axure页面",然后选择A页面。
2. 在A页面中创建按钮并设置交互
  • 创建A页面
    • 创建一个新的页面作为A页面。
  • 在A页面中添加按钮
    • 从元件库中拖动一个按钮到A页面的画布上。
    • 设置按钮的文本和样式,例如"切换到B页面"。
  • 设置按钮的点击交互
    • 右键点击按钮,选择"交互"选项卡。
    • 点击"新建交互",选择"单击时"(OnClick)。
    • 在动作中选择"链接到URL或文件"。
    • 在弹出的对话框中,选择"链接到Axure页面",然后选择B页面。
3. 创建B页面
  • 创建B页面
    • 创建一个新的页面作为B页面。
    • 在B页面中设计你需要的内容。
4. 测试交互效果
  • 预览主页面
    • 点击Axure的预览按钮,查看主页面的效果。
    • 点击内联框架中的按钮,确认内联框架的内容是否切换为B页面。

注意事项

  • 页面链接:确保在设置内联框架和按钮的链接时,选择了正确的Axure页面。
  • 命名规范:为页面和按钮设置清晰的命名,以便于管理和调试。
  • 交互逻辑:如果交互逻辑复杂,可以使用Axure的注释功能,帮助理解交互流程。

通过以上步骤,你可以在Axure中实现主页面内联框架在点击按钮时切换页面内容的功能。

--- --- 往期推荐 --- ---

EQL UI元件库:Axure设计师的高效利器-CSDN博客

Axure大屏可视化模板:赋能多领域,开启数据展示新篇章_axre-CSDN博客

2小时完成1天工作量?有了这款Axure移动端元件库,设计如此简单-CSDN博客

CRM企业客户关系管理系统产品原型方案-CSDN博客

Axhub Charts:Axure原型设计的动态数据可视化元件库-CSDN博客

相关推荐
spencer_tseng12 小时前
Terminal Single Sign-on
axure
colin52101 天前
Axure 本地预览时加载慢的问题分析和处理方法
axure·谷歌字体样式·网页加载慢
colin52102 天前
AxureRP11实例-手机号提交验证交互功能JH110002
axure·axurerp11·手机号验证
colin52103 天前
AxurePR11实例-验证码倒计时交互功能JH110001
交互·axure·验证码产品交互
Autumn_ing5 天前
2026国内外主流设计工具大对比:Axure、墨刀、Figma、Pixso
ui·aigc·axure·figma·墨刀
okra-5 天前
Axure RP 10 进阶指南:从全局变量到JavaScript语法,打造高效原型设计!
javascript·axure·photoshop
梓贤Vigo6 天前
【Axure高保真原型】卡片和表格间切换
交互·产品经理·axure·原型·中继器
梓贤Vigo7 天前
【Axure教程】拖动分组
交互·产品经理·axure·原型·教程
zzzb1234569 天前
【教程】Axure RP 9 超详细安装指南:从下载、汉化到授权配置(避坑必看)
axure
默默无闻 静静学习10 天前
Axure基础界面介绍及小技巧
axure