新增功能页面,用H5还是原生?

浏览量:28 次

新上功能页面,到底要用H5还是原生呢?

公司最近遇到了两个项目,在选择H5还是原生上面纠结了好一阵,用原生话,老版本无法兼容;用H5话,功能及页面过于粗糙,开发出来效果无法满足需求。

在这种情况下,产品该如何决策,某个功能用H5还是原生来实现呢?

本文通过对H5和原生异同点梳理,希望能够对以后产品决策提供帮助。分为以下三部分:

如何区分一个页面是H5还是原生 H5和原生可实现功能列举 如何确定一个项目用H5和原生

5种方法区分页面是H5还是原生

1.看断网情况

把手机网络断掉,再点开页面。

可以正常显示页面内容或是有网络诊断引导就是原生; 显示404或错误页面是H5页面。

2.看加载方式

新打开一个页面,看导航栏下面是否有一条加载线。

如果没有,就是原生。 如有,这个页面就是H5页面;比如微信里面打开我们H5页面常见有个绿色 加载线条。

3.看下拉刷新情况

前提是APP有下拉刷新,此时下拉页面:

如果没有明显页面变化,或是有动态下拉刷新loading图,是原生; 如果页面闪了一下,或是显示该网页由XXX提供,是H5页面。

注:有APP并没有下拉刷新,此时即使用H5,下拉也没有任何反应。

4.看复制文章提示

如果页面有大段文字,长按页面后:

如果出现文字选择、粘贴功能,是H5; 长按无反应,或是出现APP独有复制按钮,是原生。

注:有些原生APP自身也开发了复制粘贴功能,有H5css屏蔽了复制选择功能等等。此种判断依据误差较大。

5.看布局边界(限安卓)

可以在设置中打开【开发者选项】中显示布局边界。

在页面元素很多情况下布局是一整块,是h5; 布局密密麻麻是原生。

有什么是H5或是原生独有功能

随着前端技术发展,H5可以实现功能及效果已经越来越接近原生APP。

但仍然有些技术壁垒由于平台性能等无法攻克,下表列出了H5和原生能实现常见功能及推荐,在遇到面临包括此种功能需求时,可以直接据此判断用何种技术来实现。

【H5及原生可实现功能列表】

如何确定一个项目是否要用H5

总结上方H5和原生优缺点后,可以得出以下方便产品快速决策结论:

如果项目核心需求中,包含富文本、动画、大量格式,且无其他需求(如电商商品图文详情、文章咨询等)——使用H5,可以更好更快地实现功能。 如果项目核心需求中,需要调起本机硬件功能、离线操作(如电商评价页面需要上传图片)。——必须使用原生,H5无法实现。(随着H5技术发展,已经可以逐渐实现调取相册、相机功能,其他功能相信也会陆续实现。但短期内,原生实现调起底层硬件成本和体验都要大幅度占优。) 如果项目需要较高用户体验(如游戏或是模型操作),且项目时间较宽裕 ——使用原生,流畅性和体验更好。 如果项目需要大量前后台数据交互,且需要保持稳定(如电商购物车、订单页面)。——使用原生,原生API更加稳定,对于弱网状态兼容也更好。 如果项目处在初期试错阶段,不确定是否要长期运营,或是暂时活动页面。——使用H5,成本低,开发周期短;可以保证用户更新及时性,且无新老版本兼容问题(原生APP一定要发版才能实现新功能,且旧版本用户不升级就无法体验)。

另:

在多篇他人文章中都提到过,H5和原生各有长短,单独html APP或是原生 APP均有所局限,所以现在常态互联网APP均采取Hybrid形式,即部分功能原生,部分功能H5。

最后附上一个小贴士:

Hybrid APP(H5内嵌APP页面),建议头部使用原生,名称读取H5document title,常驻back按钮。这样在加载过程中,用户体验较好。且如果网速差,也可以快速返回,不浪费用户流量及时间。

参考资料:

http://www.jianshu.com/p/00ff5664e000(作者:小圣)

http://www.uisdc.com/web-hybrid-native-app(作者:cyRotel  )

 

作者:徐家小翼,公众号:poemmanager,PM圈萌新一只,求带飞求指导~~

本文由 @徐家小翼 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自PEXELS,基于CC0协议

 
®关于本站文章™ | 若非注明原创,默认 均为网友分享文章,如有侵权,请联系我们™
㊣ 本文永久链接: 新增功能页面,用H5还是原生?