【背景】以前做的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: