Web App、Hybrid App与Native App的设计差异

正如Google开发手册里描述：当用户打开一个Web App的时候，他们期待这个应用就像是一个单个应用，而不是一系列网页的结合。然而，什么情况下需要跳转页面，什么情况下在当前页面展示则需要设计师细致考量。

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

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

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

3. 系统限制，平台特性

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

Web版地图基于浏览器展现，因此，不能全屏显示地图，给用户的眼界带来局限感；相反，Native 版地图以全屏展现的形式，很好的拓展了用户的视野。整个界面干净简洁，首页去除冗余功能。

在制定路线的体验中，如图：

Web 版地图耗费的流量大于Native版，且不能预先缓存离线地图。对于地理位置的判断也是基于宿主浏览器，而非Web地图本身。获取路线后，对于更换到达方式，相对来说是不便利的。

相反，Native 版地图，能够直接访问用户的地理位置，能够很清晰的为用户展现App规划的路线，并能轻松的查看多种路线方案，以便做出符合自己的最佳方案。对于切换公交，走路，自驾等路线方式也是只需一键操作。

Native 版地图相对于 Web版地图增加更多情感化，易用的功能，如：能够记录用户的生活轨迹，记录用户的点滴足迹，能够享受躲避拥堵方案等。而Web版地图基于技术框架，很难实现以上功能，从用户体验角度来看，弱于Native版地图。

四、小结

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

1. 简化

• 简化不重要的动画/动效
• 简化复杂的图形文字样式

2. 少用

• 少用手势，避免与浏览器手势冲突
• 少用弹窗

3. 减少

• 减少页面内容
• 减少控件数量
• 减少页面跳转次数，尽量在当前页面显示

4. 增强

• 增强Loading时的趣味性
• 增强页面主次关系
• 增强控件复用性