webview与原生页面

一、如何判断

安卓：可通过打开开发者选项－显示布局边界来判断。原生：无；webview:有边界。

iOS：如果应用本身带缓存的，断网打开，加载页面。原生：有内容；webview:空白页面。

二、web应用性

webview有进度条：h5。加载慢，不等发版能更新，开发快。

webview无进度条：hybrid。加载快，需要等发版能更新，开发快。兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。可以用react native 或weex。

三、Web App、Hybrid App、Native App 纵向对比

1. Web APP

优点：（1）开发成本低；（2）更新快；（3）更新无需通知用户，不需要手动升级；（4）能够跨多个平台和终端。

缺点：：（1）临时性的入口；（2）无法获取系统级别的通知，提醒，动效等等；（3）用户留存率低；（4）设计受限制诸多。

2. Hybrid App

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。更新快，类似原生，但仍有许多不稳定性。

3. Native App

优点：（1）打造完美的用户体验；（2）性能稳定；（3）操作速度快，上手流畅；（4）访问本地资源（通讯录，相册）；（5）设计出色的动效，转场；（6）拥有系统级别的贴心通知或提醒；（7）用户留存率高。

缺点：（1）分发成本高（不同平台有不同的开发语言和界面适配）（2）维护成本高（3）更新缓慢。

四、小结

综述所述，在设计Web APP时，应当遵循以下几点：

1. 简化：简化不重要的动画/动效；简化复杂的图形文字样式。

2. 少用：少用手势；避免与浏览器手势冲突；少用弹窗。

3. 减少：减少页面内容；减少控件数量；减少页面跳转次数，尽量在当前页面显示。

4. 增强：增强Loading时的趣味性；增强页面主次关系；增强控件复用性。