我的开发知识比较缺乏,写这篇文章主要是为了帮助自己梳理和总结开发知识。为了保障此篇文章知识的准确性,我请教了周围的开发同事。如果大家发现哪些知识是有问题的,欢迎在评论中指出。下面是正文:
大家是否注意到,越来越多的APP开始使用H5页面来进行开发。例如京东的账户与安全页面、QQ的兴趣部落、唯品会的唯品花页面、以及最近的热点-微信小程序...
最近我的工作中也有越来越多的H5需求,这些H5需要和Native来回跳转,在设计上也有许多局限,为了能在以后的设计中少踩雷,我们从以下3个方面来分析一下H5:
1、H5和Native有什么不同
2 、如何判断哪些页面是H5
3、在设计中H5有哪些局限
一、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页面。
二、如何判断哪些页面是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状态,给页面缓冲时间,也给用户加载预期。
以上是我在设计H5页面时经常遇到的一些问题,可能还有其他问题是我没有遇到的,欢迎大家在评论中描述自己遇到的问题,我也将持续补充在文章中
最后总结一下:
H5的优势是显而易见的,随着微信小程序的推出,H5的应用将更加广泛。但H5的天然缺陷也是无法避免的,我们可以运用交互、UI的设计技巧来弱化这些缺陷,为用户带来更好的产品体验。
此篇文章帮助自己记录,也希望能提供给大家一些参考
来源:UI中国