axure9.0 实现后台左右布局的内联框架实操案例

在 Axure 9.0 中实现后台管理系统的“左右布局内联框架”核心思路是在一个主页面中通过点击左侧菜单控制右侧内联框架加载不同的子页面。下面这个案例你可以一步步跟着操作。️ 第一步创建页面结构一个完整的后台原型至少需要以下页面主框架页 (index)这是承载整个布局的页面。内容子页面 (page1,page2,page3...)这些是点击左侧菜单后在右侧内联框架中展示的具体内容页面。️ 第二步搭建主框架页 (index) 的左右布局1页面布局在index页面中用矩形等基础元件搭建出“左侧菜单区”和“右侧内容区”的框架。左侧菜单区宽度建议200px左右用于放置菜单按钮。右侧内容区剩余的区域用于放置内联框架。2放置内联框架从左侧“元件库”中将“内联框架”Inline Frame拖拽到右侧内容区。调整其大小使其填满右侧区域。隐藏边框选中内联框架在右键菜单中选择“隐藏边框”。滚动条设置根据需要在“交互”面板中设置内联框架的滚动条为“按需滚动”或“从不滚动”。 第三步添加交互让菜单与内容联动这是最关键的一步目标是点击左侧菜单右侧内容随之切换。1准备子页面在项目“页面”面板中创建好page1,page2,page3等子页面并填充一些内容以便区分。2设置菜单按钮交互以“菜单一”按钮为例选中左侧的“菜单一”按钮。在右侧“交互”面板中为“鼠标单击时”事件添加用例。在用例编辑器中选择“框架中打开链接”动作。在配置中将“目标”指定为画布上的“内联框架”元件。将“链接到”设置为对应的子页面例如page1。3复制交互用同样的方法为其他菜单按钮如“菜单二”设置交互将它们分别链接到对应的子页面如page2。 第四步预览与测试完成以上步骤后点击预览。一个具备左右布局和基本页面切换功能的后台原型框架就完成了。