如何快速将axure生成原型文件的原型放到手机上演示

来源：蜘蛛抓取(WebSpider) 时间：2017-03-18 03:20 标签： 原型设计工具 axure
本帖子已过去太久远了，不再提供回复功能。人人都是产品经理
之前 2 篇文章讲了《》和《》，这一篇讲解如何设置 Axure 来生成可以在手机上完美查看的 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 无需了解这些知识。至于如何把原型放到手机上面查看，我们下次再讲。相关阅读# 专栏作家 #浪子，公众号 langzisay，善用 Axure 写 PRD，人人都是产品经理专栏作家。本文原创发布于人人都是产品经理。未经许可，禁止转载。
相关标签：
原网页已经由 ZAKER 转码排版
互联网新闻8小时前
36氪4小时前
亿欧网2小时前
猎云网3小时前
电商行业5小时前
亿欧网5小时前
猎云网5小时前
亿欧网4小时前
动点科技4小时前
亿欧网5小时前
36氪6小时前
36氪6小时前
动点科技6小时前
砍柴网5小时前
猎云网5小时前用 Axure 制作的 app 原型生成后放到手机上，如何演示效果最佳？ - 知乎1188被浏览234775分享邀请回答0添加评论分享收藏感谢收起上传时间：
主要演示了用Axure制作移动端互联网产品常用的技巧,手机滑动解锁,左右、上下滑动效果,模糊查找搜索,点击输入弹出键盘,开关按钮等的交互实现!
56官方微信
扫一扫发现精彩

我要回帖

更多关于 原型设计工具 axure 的文章

 

随机推荐