整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导语：如何使用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。
我们先准备3个页面1个全局变量：1个是带菜单的主页面，2个演示用内容页，还有1个全局的变量。
交互流程与原理：
按钮点击触发，被加载的子页面在载入的时候，获取自己的页面高度，然后写入到全局变量，按钮动作延时改变iframe的尺寸。
主页面内我放置了2个按钮，1个iframe：2个按钮（矩形），没有命名要求；1个iframe，iframe的元件ID命名为“loadPageFrame”，设置为隐藏边框、从不滚动。
这两个页面随便找些文字，或者画一些测试的图形，尽可能把页面高度拉长，以便等会测试的时候体现出区别。
主页面当中按钮主要是触发iframe载入目标页面，然后延迟500ms（可根据需求调整，150ms基本也ok），根据全局变量“size”改变iframe的尺寸。
给菜单按钮添加交互，交互的次序不要错：要先把iframe缩小到10高度，然后打开链接，延迟后再设定尺寸。
内容页可任意制作，只需要在页面中添加页面的交互，作为载入时获取本页面的高度：
代码如下：javascript：void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));
采用延时触发，是因为跨页面的元件是无法直接交互的（IDE当中获取不到目标指针），所以只能通过跨页面的全局变量来实现。基本上延迟200ms左右是不被察觉的，当然考虑到终端的运行能力，可以适当延长。
示例代码中的626w是随意设置的iframe宽度，也可根据变量修改。[[size]]就是全局变量size，可以在IDE当中直接引用。
为了方便大家以后搜索，我用到的函数列举一下：
当能获取页面尺寸，并通过全局变量修改iframe尺寸以做到自适应以后，我们就可以不再依赖“Axure母版”这个有限的玩法了，菜单框架页面做好，其他的内容页面可以随意做，并且多人协作时不再出现已放置在页面中的母版同步时效的问题。
并且使用浏览器本身的页面滚动条，要比iframe的滚动条要美观很多。
今天的文章比较干，或者说比较枯燥，本来还有一个很长的文章想要写的，虽然例子已经做好，主要是解决了Axure的IDE里面怎么通过JS代码准确定位到元件，以获得更多的自由度去封装应用。
考虑到内容更干所以还在酝酿怎么措辞，会尽快发布。
回到做这个系列的初衷，还是为了让懂代码的同事能预先用JS与原生IDE组合的方式，把一些组件预先根据团队的视觉交互规范封装好，以便不懂代码的同事可以方便并快速的使用来搭建交互原型。
关注我，下周会放出包括之前文章相关的源文件。
作者：ELement；公众号：ElementChen
本文由 @ELement 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
文将介绍如何制作Axure高保真数据可视化原型，供大家参考和学习。
高保真数据可视化原型设计，称得上是Axure高阶水平。
数据可视化在原型设计中是一个重要的分支，但是对于Axure使用者具有一定要求。清晰的数据可视化原型可以减少与需求方和研发工程师等的沟通成本，且可具象。
Axure本身具有高级交互的能力，结合数据可视化的方式，以低成本的方式，达到预期的演示的效果，本文介绍如何制作Axure高保真数据可视化原型。
在Axure操作界面中，拖入一个Inline Frame（中文：内联框架）。
Axure本身可生成HTML页面，本质上而言，只要带有实例图的为HTML文件，并可正常访问即可。至于HTML是以何种方式制作生成，不做限制。
点击进入图后，所示页面如下图。左侧为折线图效果对应的代码，右侧是折线图的效果。可以在左侧修改代码，运行后可在右侧查看修改后的效果（此处不做赘述）。
点击页面右下角的“Download”按钮，下载折线图的HTML页面。
使用任意一种代码编辑器（笔者喜欢用komodo），打开html页面，修改html页面代码中自带的api。如果发现运行后html报错api过期时，需要自行创建api，将其进行替换。
创建一个新的文件夹（本文命名其为：axure and excharts），文件夹的位置没有要求。将下载的HTML页面，放置在文件夹中。
双击拖入Axure操作界面的内联框架（Inline Frame），选择“link to an external url or file”（选择一个外部的urd或文件），输入HTML页面所在的位置及名称（如本文：D:\Desktop\axure and echarts\line-simple.html），如下图所示：
点击生成html页面按钮：
将生成html文件的目录，更改为上文创建的文件夹。如下图：
点击确认后，“axure and echarts”文件夹中会存在axure生成的html页面和html页面。同时，会自动打开一个html页面，可查看效果，如下图：
这样，我们就通过一个简单的例子，在Axure中实现了数据可视化效果。
笔者在本文中分享的是实现的方法，但是实际应用过程中，通过一款数据可视化产品的视角去实操，会让你有意想不到的效果，特别是在Axure颜色、布局、交互等能力的加持下。
作者：鱼日，公众号：issnail
本文由 @鱼日 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
前2篇文章讲了《为什么375×667是移动端原型设计的最佳分辨率如何设置手机APP原型尺寸
所谓的APP原型适配手机，是指用手机浏打开原型页面的时候，横竖都刚好撑满屏幕。当然如果页面比较长，高度超过一屏是没问题的。
比如你的原型是375×667，手机是iPhone6/6s/7，那在手机上查看的时候无需缩放，默认撑满屏幕。
如果你的原型是360×640，而手机是Android的小米4、小米note、华为p7、p8荣耀6、7这些主流机型，也是一样的。
比如你的原型是375×667,而你的手机是华为p8，1080×1920。理论上来说无法完美适配APP中所有的页面。但是除了有下导航的页面一般都没问题。
你需要在Axure生成HTML的时候设置一下手机上如何展示原型。
请勾选包含视口标签。浏览器显示网页，默认是按照网页自身分辨率来展示的。勾选了此项之后，里面的区域按照下方规则来处理展示。
宽，使用默认的device-width即可。
高，一般不需要填，因为是根据宽度来决定的。
最小缩放倍数和最大缩放倍数，一般不需要填。
允许用户缩放，一般填写no。
具体规则是原型页面的横向分辨率x初始缩放倍数xDPR参数=手机屏幕的横向分辨率。得出这个值填到上图中的对应位置。
而这里的DPR参数(devicePixelRatio)，代表的是设备像素和CSS像素的比例，下方的chrome网页调试中也揭示了这一点。
所以上面的华为p8应该设置为0.96，你可以根据机型去百度搜索对应的DPR参数是多少。
通过chrome-视图-开发者-开发者工具，切换到你想看的手机尺寸。同时也可以用这个工具去了解在其他机型上面的效果，以方面了解是不是需要单独适配。
当然safari的菜单栏-开发-响应者模式也可以。
请用手机浏览器打开该网页，请用手机浏览器打开该网页，最好生成到桌面查看效果。比如我设计的原型。
建议竖向减掉20px，因为Axure默认不显示顶部状态栏。
建议你们下次设计APP原型的时候按照通用分辨率375×667来设置，次选方法是按照自己手机的逻辑分辨率来定尺寸。。
如果想明白为什么要这样设置，可以去搜索viewport和逻辑分辨率等概念。当然就使用而言，PM无需了解这些知识。
至于如何把原型放到手机上面查看，我们下次再讲。
*请认真填写需求信息，我们会在24小时内与您取得联系。
