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博客