知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. 产品设计
  3. 正文

Axure教程:获取页面尺寸、内联框架自适应大小

2020年11月17日 331点热度 1人点赞 0条评论

编辑导语:如何使用Axure去获取页面尺寸,并且使内联框架自适应大小呢?本文作者通过实际操作,进行了记录总结,希望看后对你有所帮助。

今天要演示的东西其实很简单,一两分钟就能做完,主要是用来弥补Axure IDE提供的交互功能中的不足,导致一些想法没办法很好地实现。

其实国外有大神(De Jongh)做了一个能在Axure发布框架内跑起来的Javascript拓展,这是地址:http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。

一部分是Axure基于jQuery的函数,还有一部分是他补充的扩展函数,扩展函数看起来很不错,解决了很多问题;但是安装实在是麻烦,特别是如果面向不熟悉代码的设计师(流程设计师、视觉设计师等)简直是天书。

为此,结合我们常用的一些功能或函数,我梳理了一些不需要拓展库就能实现的,做成例子分享给大家。

今天,我们做一个iframe内联框架根据加载页面的尺寸自适应变化大小。Axure自带的页面属性是很简单的,只有一个pageName,完全不够用!如图:

通常我们做页面的时候,还会用到页面的尺寸。比如自定义视觉的滚动条、通过iframe(内联框架)做的页面切换等等,如果没有页面尺寸,会导致无法实现自适应等操作,所以今天来解决它。

这是演示地址,可能因为网络的原因,导致页面载入时间过长,高度值读取失败,请刷新一下:https://fa35br.axshare.com/#id=5cgvid&p=home。

01 准备测试素材

我们先准备3个页面1个全局变量:1个是带菜单的主页面,2个演示用内容页,还有1个全局的变量。

交互流程与原理:

按钮点击触发,被加载的子页面在载入的时候,获取自己的页面高度,然后写入到全局变量,按钮动作延时改变iframe的尺寸。

02 制作页面

1. Home:主页面

主页面内我放置了2个按钮,1个iframe:2个按钮(矩形),没有命名要求;1个iframe,iframe的元件ID命名为“loadPageFrame”,设置为隐藏边框、从不滚动。

2. page1、page2 :内容页面

这两个页面随便找些文字,或者画一些测试的图形,尽可能把页面高度拉长,以便等会测试的时候体现出区别。

03 交互与代码

1. home,菜单按钮

主页面当中按钮主要是触发iframe载入目标页面,然后延迟500ms(可根据需求调整,150ms基本也ok),根据全局变量“size”改变iframe的尺寸。

给菜单按钮添加交互,交互的次序不要错:要先把iframe缩小到10高度,然后打开链接,延迟后再设定尺寸。

2. page 1、page 2内容页

内容页可任意制作,只需要在页面中添加页面的交互,作为载入时获取本页面的高度:

代码如下:javascript:void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));

04 扩展应用

采用延时触发,是因为跨页面的元件是无法直接交互的(IDE当中获取不到目标指针),所以只能通过跨页面的全局变量来实现。基本上延迟200ms左右是不被察觉的,当然考虑到终端的运行能力,可以适当延长。

示例代码中的626w是随意设置的iframe宽度,也可根据变量修改。[[size]]就是全局变量size,可以在IDE当中直接引用。

为了方便大家以后搜索,我用到的函数列举一下:

  • $axure.setGlobalVariables[name,value]:赋值axure的全局变量,可以跨页面使用,无法通过代码创建,需要在Axure的IDE当中先定义变量;
  • document.documentElement.scrollHeight:页面内容高度,一个很常规的HTML对象属性,只是在Axure IDE当中没有被暴露,可写在JS代码里。

当能获取页面尺寸,并通过全局变量修改iframe尺寸以做到自适应以后,我们就可以不再依赖“Axure母版”这个有限的玩法了,菜单框架页面做好,其他的内容页面可以随意做,并且多人协作时不再出现已放置在页面中的母版同步时效的问题。

并且使用浏览器本身的页面滚动条,要比iframe的滚动条要美观很多。

今天的文章比较干,或者说比较枯燥,本来还有一个很长的文章想要写的,虽然例子已经做好,主要是解决了Axure的IDE里面怎么通过JS代码准确定位到元件,以获得更多的自由度去封装应用。

考虑到内容更干所以还在酝酿怎么措辞,会尽快发布。

回到做这个系列的初衷,还是为了让懂代码的同事能预先用JS与原生IDE组合的方式,把一些组件预先根据团队的视觉交互规范封装好,以便不懂代码的同事可以方便并快速的使用来搭建交互原型。

关注我,下周会放出包括之前文章相关的源文件。

 

作者:ELement;公众号:ElementChen

本文由 @ELement 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!

标签: 暂无
最后更新:2020年11月17日

小虾米

同理心,洞察力!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
我在椰树直播间,花了三分钱 东方甄选走红这一年 京东自营开始踩刹车 “单车刺客”6.5元一小时!共享单车平台还是赚不到钱,你被刺了吗? 政务CRM-CRM在政务行业的应用现状 Temu的砍一刀,迷倒了美国人 社交媒体围攻BOSS直聘 组件应用 | 个人主页头部,应该如何设计? 远程技术团队,操作回顾会怎么开? 我在网上卖“土”,年入5000万 增长模型:产品增长的通用思维框架 “大人”,榜单时代变了 汽水音乐一周年:“抖音BGM播放器”的起与落 一个方法论,搞懂支付的一切 密码强度计有哪些局限性? 618回归“价格战”:京东淘宝进入存量竞争,小红书、视频号深入电商直播 兴趣电商未来会超过货架电商吗? 直播带货再难造神:天涯重启失败,7天只卖了36万 鏖战13年后,线上超市的肉搏还在继续 最佳的阅读一行是多少字最合适?
被集市收割、被买家嫌弃,“摆摊后浪”有点惨蓝领用工招聘平台的数字化建设思路干货分享:WMS系统—PDA的应用iOS 17,能否守住「iOS神话」?系统功能设计:网络加速器系统产品需求设计电商扫盲第一讲:GMV的底层逻辑打造一个基于本地社区的闲置交易平台,你看好吗?东南亚出海洞察:去东南亚为直播电商开荒,没有超头主播,货品供给不足……定金+尾款模式背后的套路天涯老用户的自救,让我明白情怀是最不值钱的东西抖音上线酒店日历房,其他平台会慌吗?从需求到设计开发,产品质量问题如何分析靠咱们看腻的电视剧,爱奇艺和腾讯在东南亚成了顶流如何让你的“对内B端产品”看起来有价值?设计走查知多少产品思考:视觉冲击!以图片展示金额,“省钱卡”这样玩就对了多多买菜为什么比美团买菜要便宜?都在骂网暴,为什么网暴一直没有停过韩国漂流记:明星在面前,咖啡在手里,中国互联网公司在广告墙自动驾驶风口退潮的深层逻辑
罗永浩去淘宝直播了,李佳琦嘛时候上抖音卖卖货啊? 元宇宙,小荷才露尖尖角 6个技巧让你的设计俘获用户的心 如何设计B端地图?收下这份超详细总结! 网文二十五年:星火燎原 探店这个行当还行不行? 如果大型媒体都消失了,天会不会塌下来? 移动端的引导(二)——引导的常见需求类型 nice向左,得物向右 万字长文揭秘美国四大科技巨头错综复杂的真实关系 以领星 ERP 为例,分析亚马逊 ERP-产品模块 大宗商品交易网站的另一个方向 产业互联网,全真互联网的“催化剂” 新消费品牌的终局推演 男人钓鱼就像女生抽盲盒,万元装备烧起来 如何理解目标导向设计原则? 设计的辩证统一性 Axure教程:小白如何1分钟搞定垂直滑动? 需求到底是什么?终于有人讲明白了! 疫情下的科技内卷:租房被卷进“网购”时代

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang