所谓的APP原型适配手机,是指用手机浏打开原型页面的时候,横竖都刚好撑满屏幕。
当然如果页面比较长,高度超过一屏是没问题的。

如果你的原型是你手机屏幕的逻辑分辨率

比如你的原型是375×667,手机是iPhone6/6s/7,那在手机上查看的时候无需缩放,默认撑满屏幕。

如果你的原型是360×640,而手机是Android的小米4、小米note、华为p7、p8光彩6、7这些主流机型,也是一样的。

html适应手机善用Axure写PRD若何生成适配手机的原型 SQL

如果你的原型不是你手机屏幕的逻辑分辨率

比如你的原型是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无需理解这些知识。

至于如何把原型放得手机上面查看,我们下次再讲。