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

本文介绍了如何使用Axure实现H5页面自适应,通过设置不同尺寸的自适应视图,确保在PC和不同尺寸手机上的展示效果。同时,文章提及了在H5页面中处理滚动和状态栏的问题,以及如何利用相同方法制作APP原型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值