WEBAPP、HYBRIDAPP与NATIVEAPP的综合对比说明课件.docx

WEB APP、HYBRID APP与NATIVE APP的综合对比说明 目前主流应用程序大体分为三类：Web App、Hybrid App、 Native App。 一、Web App、Hybrid App、Native App 纵向对比 首先，我们来看看什么是 Web App、Hybrid App、 Native App。 1. Web APP Web App 指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。 优点： （1）开发成本低，（2）更新快，（3）更新无需通知用户，不需要手动升级，（4）能够跨多个平台和终端。 缺点： （1）临时性的入口（2）无法获取系统级别的通知，提醒，动效等等(若需要可变相通过手机等第三方工具形式在对接实现)（3）用户留存率低（4）设计受限制诸多（5）体验较差 (6) 相对而言网络环境要求较大 (7) 手机上本地资源调用上(相机、GPS、通讯录等)有一定局限性 (8) 受限浏览器版本(相对而言在设计时可能考虑基于微信和QQ浏览器的专项定制开发) 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）性能稳定（3）操作速度快，上手流畅（4）访问本地资源（通讯录，相册）（5）设计出色的动效，转场，（6）拥有系统级别的贴心通知或提醒（7）用户留存率高(注：看似的效果，源于对装机量能有所监控，但仅为虚数，时间上这个未来必将被摒弃，更多要体现注册用户数、用户活动率等所取代) 缺点： （1）分发成本高（不同平台有不同的开发语言和界面适配）（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本）（3）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂 二、Web App、Hybrid App、Native App 技术特性 由上图可见，Web APP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在，使得Web App在体验中要逊于Native App。 三、Web App受限制因素及设计要点 相比Native App，Web App体验中受限于以上5个因素：网络环境，渲染性能，平台特性，受限于浏览器，系统限制。 1. 网络环境，渲染性能 Web APP对网络环境的依赖性较大，因为Web APP中的H5页面，当用户使用时，去服务器请求显示页面。如果此时用户恰巧遇到网速慢，网络不稳定等其他环境时，用户请求页面的效率大打折扣，在用户使用中会出现不流畅，断断续续的不良感受。同时，H5技术自身渲染性能较弱：对复杂的图形样式，多样的动效，自定义字体等的支持性不强。 因此，基于网络环境和渲染性能的影响，在设计H5页面时，应注意以下几点： 简化不重要的动画/动效 简化复杂的图形文字样式 减少页面渲染的频率和次数 从下图移动Web版 jing.fm和Native版jing对比后可以看出：Web APP首页去除冗余的功能，回溯本源，只给用户提供了jing.fm最初的本质需求——电台。既符合H5精简功能又达到了突出核心功能的设计原则。无疑给用户眼前一亮的气息。  再如：百度最新推出的直达号，以良子健身为例： 从Native App和Web App（百度直达号）的对比中，我们可以看出Native良子以九宫格的形式展现，且属于双重导航，功能入口太多；弊端是用户不知道聚焦在哪里，分散用户的注意力。而Web版良子整合并减少了导航的入口，增强用户的专注度；界面清爽，整洁，很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。 2. 受限于浏览器 通常Web App生存于浏览器里，宿主是浏览器。不同的浏览器自身的属性不尽相同，如：浏览器自带的手势，页面切换方式，链接跳转方式，版本兼容问题等等。 例如下图：UC 浏览器和百度浏览器自身支持手势切换页面。手指从左侧滑动页面，返回至上一级。百度手机助手H5页面，顶部Banner支持手势左右滑动切换。这一操作与浏览器自