移动Web、Hybrid与Native App的差异

1. Web APP

Web App 指采用 Html5 语言写出的 App ，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。

优点：

开发成本低，

更新快，

更新无需通知用户，不需要手动升级

能够跨多个平台和终端。

缺点：

临时性的入口

无法获取系统级别的通知，提醒，动效等等

用户留存率低

设计受限制诸多

体验较差

2. Hybrid App

Hybrid APP 指的是半原生半 Web 的混合类 App 。需要下载安装，看上去类似 Native App ，但只有很少的 UI Web View ，访问的内容是 Web 。

例如 Store 里的新闻类 APP ，视频类 APP 普遍采取的是 Native 的框架， Web 的内容。

Hybrid App 极力去打造类似于 Native App 的体验，但仍受限于技术，网速，等等很多因素。尚不完美。

3. Native App

Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的 App ，可拓展性强。需要用户下载安装使用。

优点：

打造完美的用户体验

性能稳定

操作速度快，上手流畅

访问本地资源（通讯录，相册）

设计出色的动效，转场，

拥有系统级别的贴心通知或提醒

用户留存率高

缺点：

（ 1 ）分发成本高（不同平台有不同的开发语言和界面适配）

（ 2 ）维护成本高（例如一款 App 已更新至 V5 版本，但仍有用户在使用 V2 ， V3 ， V4 版本，需要更多的开发人员维护之前的版本）

（ 3 ）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂

相比 Native App ， Web App 体验中受限于个因素：网络环境，渲染性能，平台特性，受限于浏览器，系统限制。

1. 网络环境，渲染性能

Web APP 对网络环境的依赖性较大，因为 Web APP 中的 H5 页面，当用户使用时，去服务器请求显示页面。如果此时用户恰巧遇到网速慢，网络不稳定等其他环境时，用户请求页面的效率大打折扣，在用户使 用中会出现不流畅，断断续续的不良感受。同时， H5 技术自身渲染性能较弱：对复杂的图形样式，多样的动效，自定义字体等的支持性不强。

因此，基于网络环境和渲染性能的影响，在设计 H5 页面时，应注意以下几点：

简化不重要的动画 / 动效

简化复杂的图形文字样式

减少页面渲染的频率和次数

2. 受限于浏览器

通常 Web App 生存于浏览器里，宿主是浏览器。不同的浏览器自身的属性不尽相同，如：浏览器自带的手势，页面切换方式，链接跳转方式，版本兼容问题等等。

再如，基于浏览器的 Web APP 在打开新的模块中的页面时，大多会新开窗口来展现。例如用户在使用购物类 APP 时，浏览每日精选模块时，每当打开新的商品时，默认新开一个窗口。这 样的优劣势显而易见：优势是能够记录用户浏览过的痕迹，浏览过的商品，以便后续横向对比；劣势是过多的页面容易使用户迷失在页面中。

因此， Web App 基于浏览器的特性，从设计角度应该遵循以下了两点：

少用手势，避免与浏览器手势冲突。

减少页面跳转次数，尽量在当前页面显示。

3. 系统限制，平台特性

由于 Html5 语言的技术特性，无法调用系统级别的权限。例如，系统级别的弹窗，系统级别的通知，地理信息，通讯录，语音等等。且与系统的兼容性也会存在一些问题。以上限制通常导致 APP 的拓展性不强，体验相对较差。

但它们也有相同点，如在测试方面。不管是移动 web App 还是原生 App ，都是需要在移动终端上运行的，那么对 app 测试 的兼容性配适的需求就是一样的。基本上线前，都需要进行 app 兼容性测试， app功能测试 ，遍历测试，安全测试等，确保产品质量和用户体验。