如何使用Axure画H5自适应原型

【背景】以前做的H5原型要么只能在PC上打开看，要么在手机上打开后就是各种凌乱（没有自适应），无法让开发或UI体会到真实的效果。但是又不想掏钱买其它工具，只对AXURE熟悉，所以经过研究写了此文章。

一. 先来说说H5吧

其实跟开发类似，要用Axure的页面自适应功能，让页面根据屏幕尺寸自动适配合适的大小，操作方法如下：

1.打开Axure-->项目-->自适应视图

 

2.在“自适应视图”窗口，配置三种尺寸：

 

web高分辨率——是指PC端的尺寸，建议宽用1200，高不限；

iphone7P——是用来适应与iphone7Plus同等尺寸的手机，建议宽高为414*736；其中的条件是指小于等于iphone7P的尺寸时，采用414*736的原型尺寸

iphone6——是用来适应与iphone6同等尺寸的手机，建议宽高为375*667；其中条件的意思同上，与iphone7P是求交的关系；

具体原型尺寸与屏幕尺寸的对应关系可以参考下表：

 

3.设置完成后，打开需要自适应的页面，在右侧属性面板勾选上自适应：

 

4.勾选完成后，会发现页面上面出现三种尺寸

 

分别对应2中设置的三种自适应尺寸

这里的三种尺寸可以自由切换，设置不同的布局，如下图：

 

聪明的小伙伴这时肯定就意识到了，这里所谓的自适应就是根据屏幕大小选择不同的尺寸来显示。

5.分别在PC或手机上打开此页面，就会显示不同的布局了

【补充知识】

1.做完上面5步的同学可能会发现，页面在微信里或浏览器里总是会动来动去，与真实的体验不一样，这里可以打开html页面设置-->移动设备：禁止页面垂直滚动，这时页面就会死死的固定在可视范围内，体验与打开真正的H5页面一样

操作步骤：

 

 

 

2.H5页面一般都会在一个容器里打开，如微信里，这时页面设计时就应该把状态栏+导航栏的尺寸删掉，iphone6和7P的状态栏+导航栏尺寸=64PX，所以H5页面内容尽量包含在减去64PX的区域内，如下图除去红色区域（如图左），在手上上打开蓝色区域就刚好出现（如图右）

 

【再PS下】以上方法，在一些特殊的手机上，肯定不能保证100%完全自适应的。如果真真切切想做更真实的移动端原型，就直接用现在有名的移动端原型设计工具吧，比如墨刀，但是需要收费。由于小编一直在用axure，而且感觉axure的功能强大很多，更重要的是不想掏钱，所以费时费劲研究了下以上方法

二. 再来说说APP吧

借助以上同样的方法也可以做出可在手机上打开的APP原型，需要在手机上下载个Axure Share，将原型发布到Axure的服务器上，然后登录在个人中心打开相应的项目即可（但速度会比较慢，但可以离线）。这样页面上就没有上面的导航条了，此时【补充知识】2中，只需减去20PX就行（状态栏），不用减去64PX：