目前主流应用大致分为三类：WebApp、HybridApp、NativeApp。一、WebApp、HybridApp、NativeApp的纵向对比首先，我们先了解一下什么是WebApp、HybridApp、NativeApp。(1)WebAPPWebApp是指用Html5语言编写的App，不需要下载安装。类似于现在所谓的轻应用。浏览器中的应用程序基本上可以说是Web应用程序的触摸屏版本。优点(1)开发成本低，(2)更新速度快，(3)无需通知用户更新，无需手动升级，(4)能够跨多个平台和终端。缺点：（1）临时入口（2）无法获取系统级通知、提醒、动画等（3）用户留存率低（4）设计限制多（5）体验差（2）HybridAppHybridAPP指一个半本地半网络的混合应用程序。它需要下载并安装。看起来和NativeApp类似，但是只有几个UIWebView，访问的内容是Web。例如，商店中的新闻应用和视频应用通常使用原生框架和网络内容。HybridApp力求打造类似于NativeApp的体验，但仍然受到技术、网速等诸多因素的限制。还没有***。(3)NativeAppNativeAPP是指原生程序，一般依赖操作系统，交互性强。它是一个完整的应用程序，具有很强的可扩展性。用户需要下载并安装它。优点：（1）创造优秀的用户体验（2）性能稳定（3）运行速度快，使用方便（4）访问本地资源（通讯录，相册）（5）设计优秀的动画效果，转场，（6）在系统层面有贴心的通知或提醒（7）用户留存率高缺点：（1）分发成本高（不同平台有不同的开发语言和界面适配）（2）维护成本高（例如，一个AppIt已更新到V5，但仍有用户在使用V2、V3、V4，需要更多开发者维护之前的版本）（3）更新较慢，平台不同，提交-审核流程不同-online等，需要经过的过程比较复杂。其次，从上图可以看出WebApp、HybridApp、NativeApp的技术特点。WebAPP的开发基于Html5语言。Html5语言本身就有不可避免的局限性。正是这些局限性的存在，使得WebApp在体验上不如NativeApp。3、WebApp的制约因素及设计要点与NativeApp相比，WebApp的体验受限于以上五个因素：网络环境、渲染性能、平台特性、浏览器限制、系统限制。(1)网络环境，渲染性能WebAPP对网络环境的依赖性很强，因为WebAPP中的H5页面，用户使用的时候，去服务器端请求展示页面。如果此时用户恰好遇到网速慢、网络不稳定等其他环境，会大大降低用户请求页面的效率，用户在使用过程中会出现不流畅、断断续续的不良感受。同时，H5技术本身的渲染性能较弱：不支持复杂的图形样式、各种动态效果、自定义字体等。因此，基于网络环境和渲染性能的影响，应注意以下几点设计H5页面时要注意：简化不重要的动画/动效简化复杂的图文样式减少页面渲染的频率和次数从下图中移动Web版jing.fm与Native版jing对比后，可以看出，去除了WebAPP首页的冗余功能，追根溯源，只为用户提供jing.fm——电台原有的本质需求。既符合H5精简功能的设计原则，又突出了核心功能。无疑给用户一种眼前一亮的感觉。就像书中的一个核心观点《瞬间之美》：重要的不是我们提供了多少信息，而是我们能否提供给他们真正需要的信息。又如：百度***推出的直达号，以靓子健身为例：从NativeApp和WebApp（百度直达号）的对比可以看出，Native靓子是以九宫格的形式展示的，以及属于双导航。功能入口过多；缺点是用户不知道应该关注哪里，分散了用户的注意力。网页版良子整合并减少导航入口，提升用户集中度；界面干净整洁，很好地传达了梁子本身的含义——放松、欢乐、休闲、舒适。(2)受浏览器的限制通常WebApp是住在浏览器中的，宿主就是浏览器。不同的浏览器有不同的属性，比如：浏览器内置手势、页面切换方式、链接跳转方式、版本兼容问题等等。例如下图：UC浏览器和百度浏览器支持手势切换页面。用手指从左侧滑动页面返回上一级。百度手机助手H5页面，顶部Banner支持手势左右滑动切换。该操作与浏览器自身的手势冲突。再比如，基于浏览器的WebAPP在新的模块中打开一个页面时，大部分都会打开一个新的窗口进行显示。例如，当用户在使用购物应用程序浏览每日选择模块时，每当打开新产品时，默认都会打开一个新窗口。这样做的优缺点很明显：优点是可以记录用户浏览过的痕迹和浏览过的商品，方便后续横向对比；缺点是页面太多容易让用户迷失在页面中。正如谷歌开发手册中描述的那样：当用户打开一个WebApp时，他们希望该应用程序看起来像一个单一的应用程序，而不是一系列网页的组合。但是，什么时候需要跳转到页面，什么时候显示在当前页面，就需要设计者慎重考虑了。因此，基于浏览器的特点，WebApp从设计的角度应该遵循以下两点：少用手势，避免与浏览器手势冲突，减少页面跳转次数，尽量在当前页面显示.(3)系统限制、平台特性由于Html5语言的技术特性，无法调用系统级权限。比如系统级的弹窗、系统级的通知、地理信息、通讯录、语音等。而且与系统的兼容性也会存在一些问题。以上限制通常会导致APP的扩展性较差，体验相对较差。比如百度地图：网页版地图是基于浏览器显示的。因此地图无法全屏显示，给用户的视觉带来局限感；整个界面干净简洁，首页去掉了多余的功能。在制定路线的体验中，如图：Web版地图比Native版消耗流量大，离线地图无法预缓存。地理位置的判断也是基于宿主浏览器，而不是Web地图本身。拿到路线后，改变到达方式相对不方便。相反，Native版的地图可以直接获取用户的地理位置，可以清晰地向用户展示App规划的路线，并且可以方便的查看多个路线规划，从而做出最适合自己的规划。公交、步行、自驾等切换路线，只需一键操作。与Web版地图相比，Native版地图增加了更多情感和易用的功能，例如：能够记录用户的生活轨迹，记录用户的点点滴滴足迹，享受拥堵避让计划等。Web版地图基于技术架构，实现上述功能难度较大。从用户体验上来说，弱于地图的Native版本。4.总结如上所述，在设计WebAPP时，应遵循以下几点：(1)对不重要的动画/动效进行精简和精简，简化复杂的图形和文字样式(2)少用手势，避免与浏览器Gesture冲突冲突和少用弹窗（3）减少页面内容，减少控件数量，减少页面跳转次数，尽量在当前页面显示（4）增强Loading的乐趣，增强页面主次关系，增强控件的复用性***：小编推荐一组优秀的WebAPPforecast.io/m.ftchinese.com/phone.htmlthenextweb.comjing.fmyuedu.fmmail.google.complus。google.comsnowbird.comeverthing.mem.vancl.compattern.dk/sun/转载请注明来自“百度MUX”
