东方锐智—让教育更美好

当前位置:锐智首页 > 技术博文-HTML5 > 正文
了解H5页面设计局限
时间:2017-06-17 11:24:42 来源:东方锐智 作者:东方锐智

一、H5和Native有什么不同

Native APP

Native APP 指的是原生程序,依托于操作系统,有很强的交互性,是一个完整的 APP ,可拓展性强,需要用户下载安装使用。

优点:

·         性能稳定、操作速度快,上手流畅

·         可以直接访问本地资源,比如通讯录

·         可以实现很多设计出色的动效

·         拥有系统级别的贴心通知或提醒,用户体验好

缺点:

·         开发成本高:不同平台有不同的开发语言和界面适配,例如iOS、Android。

·         维护成本高:例如一款 APP 已更新至 V5 版本,但仍有用户在使用 V2, V3, V4 版本,需要更多的开发人员维护之前的版本

·         更新缓慢:根据不同平台,提交–审核–上线 等等不同的流程,需要经过的流程较复杂,且iOS和Android相比,审核更复杂,时间也更长。

H5

H5页面是采用 Html5 语言写出的 APP,也叫Web APP,不需要下载安装。是生存在浏览器中的应用,需要通过浏览器和系统进行交互,因此更加受限于网速和硬件。但随着网速的不断提高,硬件的不断提升,H5在速度、稳定性、流畅度方面终将和Native的体验越来越拉近。 

优点:

·         开发成本低:H5可以跨多个平台和终端,方便快速迭代

·         维护成本低:H5不需要用户手动升级即可更新,没有维护老版本的成本

·         更新快:不需要经过复杂的上线流程即可更新,方便前期产品的不断试错

 缺点:

·         受限于网络和硬件、很多动效即使可以在H5上实现,效果也不好,且由于硬件和系统劣势,Android的效果更差。

·         临时性的入口、无法获取系统级别的通知,提醒,动效等等

·         设计上受限制诸多, 用户体验较差 

现在使用H5的APP分为两类:一类是纯H5制作的,另一类是嵌在原生页面的H5。

由于H5的诸多缺陷,纯H5制作的APP比较少,但有一个用户量极大的APP是纯用H5制作的,就是铁路12306,页面都是用H5写的。

而更多的APP选择将某些H5功能嵌在Native APP中,例如QQ的兴趣部落。这些功能不用跟随版本迭代即可快速更新,且在不同系统中的体验都是相同的。


二、如何判断哪些页面是H5

如何快速的判断一个APP页面是原生的还是H5页面呢?

1、看网页跳转情况

    APP和H5页面相比,跳转速度更快。网络环境一致的情况下,APP的直接在本地加载,而H5页面加载是需要调取服务器的,所以H5页面跳转更费力,不稳定感会强一些。

例如唯品会的首页就是Native页面,而唯品花页面是由H5写的,所以进入唯品花页面的时候,加载时间会稍微长一些。

2、看断网的情况

把手机的网络断掉,然后打开页面,可以正常显示、或者可以显示一部分的是Native页面,显示404或错误页面的是H5页面。这是由于Native页面一般都会在本地进行缓存,而H5页面一般是在打开页面的时候去重新拉数据。

当然也有例外情况,比如QQ的兴趣部落在断网的情况下,页面依旧是可以加载出来的。这是由于兴趣部落的开发团队制作了离线包,将原来要请求服务器的H5页面的资源打包在本地,这样就能在本地预加载了,不用在线上拉取,节省了很多时间,体验上也和Native非常接近。

3、看APP顶部导航栏是否会有关闭的操作

如果APP顶部导航栏当中出现了关闭按钮,那么当前的页面肯定的H5,原生的不会出现(除非设计开发者故意弄的)

美团的、大众点评的APP、微信APP当加载H5过多的时候,左上角会出现“关闭”。

4、判断页面 下拉刷新的时候(前提是要有下拉刷新的功能)

一般情况下,如果界面没有明显刷新现象的是原生的,如果有明显刷新现象,比如页面闪一下或者白屏一下的是H5页面(IOS和Android)。比如微信里的H5页面,和淘宝里的蚂蚁花呗页面刷新时都明显的白屏一下,但也就不到0.5秒的瞬间,微信我截图扑捉了很多次都没成功,但淘宝的蚂蚁花呗成功截到了白屏的瞬间,大家可以去自己感受一下。

在体验的时候发现iOS版的QQ的兴趣部落在下拉刷新时和Native的体验一模一样,大家可以去试试。只能说腾讯的攻城狮们将H5页面的用户体验最大限度接近Native,开发能力很强。 

以上提供的这些方法也都是有局限性的,如果APP有足够的开发资源来对H5页面进行优化,其实是可以做到和Native的体验非常接近的,能让你几乎无法分辨。


三、在设计中H5有哪些局限

1、键盘

如下图所示,支付宝中Native的键盘和浮层可以做成一体的,而唯品会H5页面的浮层和系统键盘是分离的,这并不是开发能力的问题,而是H5页面调的是浏览器的键盘,局限性是本身就存在的。如果H5页面想获得更好的体验,需要自己开发键盘,但开发键盘可不是那么容易的事情,也不是短期能够完成的。

2、容易误操作的关闭按钮

微信的公众号中可以嵌入第三方的H5页面,为了能让用户在层级较深的第三方页面可以快速返回微信主页面,导航栏会有返回和关闭两个选项。但这不一定适合所有H5页面,有些H5页面,比如京东的修改支付密码流程都是用H5写的,步骤比较多且每一步都很关键,如果用户误点击了关闭,整个修改密码的流程就前功尽弃了。

那为什么京东没有将这个关闭按钮去掉呢?这个我专门请教了开发童鞋,得到的答案是:如果Native那里可以给H5接口去修改导航栏,肯定是可以去掉的。但如果Native在写基础框架的时候用的是开源代码,代码中的Native bar这里都是有关闭按钮的,且没有接口可以去掉,那就没办法了。这属于基础架构问题,牵一发而动全身。

因此大家在设计交互流程时,如果需要去掉关闭按钮,需要和开发进行确认原因,看是否有合适的解决办法。 

3、高亮的native bar

常见的弹窗操作是:当出现弹窗时,为了让用户专注弹窗操作,底层会出现蒙版且不可操作。

但H5页面中的蒙版无法覆盖Native bar,因此Native bar和弹窗一样高亮且可操作,打扰用户操作,容易转移用户注意力。

在这个问题上,白色Native bar尤其突出,而其他颜色的要好一些。如下图QQ的Native bar是蓝色,因此当QQ的H5页面出现弹窗时,Native bar并不是特别突出。

因此建议H5页面如果Native bar是白色的,则H5弹窗的颜色就不要再做白色了,颜色和设计都可以更加突出。如果Nativebar本身是蓝色、红色等比较亮的颜色,那么H5弹窗就可以做白色

4、数据获取速度慢

进入H5页面时,如果需要获取的数据太多,而用户的网络情况又不佳,就会造成页面刷不出来或者接口返回结果滞后。比如唯品会H5页面的短信验证,如果在调出弹窗的同时自动发送验证码,给页面的压力是比较大的,因此这个页面需要点击“获取验证码”才能触发短信验证码发送。

更优的解决方法是:打开弹窗时,默认自动发送短信验证码,但是“获取验证码”button呈loading状态,给页面缓冲时间,也给用户加载预期。


学员感言
【13期嵌入式-江信程】
申请免费试听
姓名:
手机:
Q Q: