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

543 阅读6分钟

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的页面设置页面左对齐,从元件库拖动内联框架控添加到页面中

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

3、设置内联框架交互尺寸,调整内联框架控件的大小和位置,以适应页面布局
加载时-> 设置内联框架 尺寸 宽高自动适应窗口(浏览器)长度和宽度
宽:[[Window.width]]
高:[[Window.height]]

4、选中内联框架控件,然后在“属性”面板中设置其“框架目标”属性,可以选择跳转原型中的页面或者外部链接,这里我们选择链接外部链接并录入Axmax官网地址www.axmax.cn

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

Axure内联框架demo下载:
地址:axmax.lanzoue.com/iIisc0r60f3…
密码:504h

文本由AXMAX原创,如有任何疑问或想了解更多Axure设计,欢迎添加Axmax小助手进群交流

编辑于 2023-07-21 10:37

​赞同 4​​3 条评论​收藏

​分享

​ 举报

收起​

Axure RP 9 入门即精通(12)内联框架

知Liao

知Liao

非专业产品经理

内联框架是一种页面引用元件,它可以引用文件内部页面,也可以引用在线网页。

通过内联框架的右键菜单看一下这些主要的设置:

1、框架目标:框架在无交互载入时,默认显示的页面;

2、切换边框:是否显示边框;

3、滚动条:选择滚动方式,一般选择按需滚动;

设置内联框架的链接:

1、文件内部——页面:单选

2、外部链接——一个链接:注意:不是所有的网站都能在内联框架中打开,有些网站是由外链限制的,例如京东、天猫等。

下面我做个简单的示例来展示内联框架的应用方法:四个按钮,点击不同的按钮在内联框架中显示不同的内容;

预览时的大概效果如下图

内联框架的用法可以实现更加复杂的交互,后面我会专门有案例讲解。

更多内容搜索关注公众号、小程序、B站——知Liao

人人都是产品经理——Lilaceliao

原创声明:

本文内容全部由Lilaceliao原创,如需转载,请联系作者。

发布于 2022-05-10 17:30

​赞同 2​​添加评论​收藏

​分享

​ 举报

收起​

产品经理 | 从零开始学习Axure

cover

Serendipper:点击切换(选中/未选中)交互 2、内联框架的使用(嵌入视频,模仿b站) 内联框架的使用 热区中视频的切换 需要注意的就是: (1)内联框架隐藏边框且滚动条为从不滚动;(Axure9未选中内联框架...

阅读全文​

​赞同 9​​2 条评论2021-12-28

axure难学吗,有哪些快速学习的方法

cover

设计是门艺术Axure学习难吗?这个问题一直引起很多朋友的讨论,有的觉得难,有的觉得不难。当然,人不一样,每个人的学习方式也不一样,对学习难度的理解自然也不一样,这个问题自然没有定论

阅读全文​

​赞同​​添加评论2022-11-30

相关搜索

我会写html+css+js,想做产品经理,还有学习axure的必要吗?

DamyZ:你现在这个问法是工程师思维的。 做产品基本不需要学axure。axure比较难的功能包括:动态面板,内联框架和中继器。 如果axure...

阅读全文​

​赞同 2​​2 条评论2023-08-28

手把手教你用Axure,制作后台管理系统框架

cover

有点风度:需要原型的私信或者评论留言 先看看效果: 下面开始这期教程。 1、打开Axure Rp,新建文档。设置三页:登录页、系统框架页、内容页。如图示。 2、开始设计登录页。 1)双击"登录页"进行编辑...

阅读全文​

​赞同 58​​22 条评论2020-06-13

比较成熟的产品经理用Axure设计一张界面大概要多久(比如设计京东商城,设计出高保真界面大概花多长时间)?

苏坡懂:纯抄的话,一个高保真页面撑死了也不会超过1小时,况且你说的都是C端用户能看到的那点儿东西,所有的素材直接能从页面上扒下来…… 恶心的...

阅读全文​

​赞同 3​​3 条评论02-23

Axure9如何实现页面上下滑动效果_内联框架实现法

cover

最后的轻语:微信列表的内联框架 5.双击内联框架建立交互 回到刚才的页面,双击内联框架 然后弹出一个链接页面,我们就选择刚才那个新建的页面,微信列表的内联框架 这样内联框架就和我们的微信列表内联框架相关联了