我的开发知识比较缺乏，写这篇文章主要是为了帮助自己梳理和总结开发知识。为了保障此篇文章知识的准确性，我请教了周围的开发同事。如果大家发现哪些知识是有问题的，欢迎在评论中指出。下面是正文：

大家是否注意到，越来越多的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的兴趣部落。这些功能不用跟随版本迭代即可快速更新，且在不同系统中的体验都是相同的。

当然这样做也会有一些局限，也就是我们前面说的坑。下面我们将重点分析嵌在Native APP中的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的设计技巧来弱化这些缺陷，为用户带来更好的产品体验。

此篇文章帮助自己记录，也希望能提供给大家一些参考。

最后，欢迎大家关注我的微信公众号