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