Axure进阶:你一定要学会的内联框架教程

Axure 中的内联框架(Inline Frame)是一种控件,可以在 Axure RP 中的页面中嵌入其他网页,并在当前页面中显示。通过使用内联框架,可以将不同网页的内容整合到同一个页面中,方便用户查看和操作。在 Axure RP 中,内联框架控件可以通过设置来源网址属性来指定要嵌入的网页地址,并可以自由调整其大小和位置以适应页面布局

Axure内联框架(Inline Frame)元件可以在页面中嵌入其他网页,通俗的理解,通过内联框架引用其他页面,可以是网页地址、Axure 页面、文件路径等。通过使用内联框架可以整合多个页面内容,方便用户查看和操作、嵌入外部页面、提高Axure原型设计交互性、可适应移动设备等。


Axure内联框架(Inline Frame)控件具有以下属性

  1. 框架目标(Target):设置axure内联框架目标页面
  2. 隐藏边框(Border):隐藏axure内联框架边框,默认开启
  3. 滚动条(Scrollbars):包含按需滚动、始终滚动、从不滚动,设置axure内联框架滚动条属性
  4. 预览图片:包含无预览图、视频、地图、自定义预览,设置axure内联框架预览效果

通过设置这些属性,可以自定义内联框架的样式和行为,从而实现更加灵活的页面布局和交互效果。



Axure内联框架(Inline Frame)的使用方法如下:

例:通过内联框架打开axmax官网

1、在 Axure的页面设置页面左对齐,从元件库拖动内联框架控添加到页面中

image.png

2、设置内联框架属性,隐藏边框、按需滚动、无预览图

image.png


3、设置内联框架交互尺寸,调整内联框架控件的大小和位置,以适应页面布局

加载时-> 设置内联框架 尺寸 宽高自动适应窗口(浏览器)长度和宽度
宽:[[Window.width]]
高:[[Window.height]]

image.png


4、选中内联框架控件,然后在“属性”面板中设置其“框架目标”属性,可以选择跳转原型中的页面或者外部链接

这里我们选择链接外部链接并录入Axmax官网地址http://www.axmax.cn

image.png


5、预览页面,在axure原型中点击预览即可查看加载时自适应浏览器宽高预览效果

image.png

image.png


Axure内联框架demo下载:

地址:https://axmax.lanzoue.com/iIisc0r60f3c
密码:504h



更多教程

Axure原型托管服务教程(已开放测试,无需邀请码)

Axmax产品设计图标库V1.4更新

Axure9下载安装及汉化包教程

Axure10下载安装及汉化包教程