未来是Web App的天下,还是Native App的天下?作为设计师,我们是应该努力把客户端的体验提升到最优,还是在网页应用层面上做更多的设计?这个一直是大家关心的话题。那么,我们首先应该立体的认识一下Web App和Native App。

一、Web App

Web无需安装,对设备碎片化的适应能力优于App,它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验升级,使得专为iPhone等有WebKit浏览内核的移动设备开发的Web应用,也有了如App一般流畅的用户体验。

图1 谷歌 Voice 和谷歌 Gmail是Web App的设计典范

Web App的优势:

1.开发成本低

2.适配多种移动设备成本低

3.跨平台和终端

4.迭代更新容易

5.无需安装成本

Web App的劣势:

1.浏览的体验短期内还无法超越原生应用

2.不支持离线模式(html5将会解决这个问题)

3.消息推送不够及时

4.调用本地文件系统的能力弱

图2 街旁和百度小说,采用HTML5实现了接近Native的体验效果

二、Native App

而App因为位于平台层上方,向下访问和兼容的能力会比较好一些,可以支持在线或离线,消息推送或本地资源访问,摄像拨号功能的调取。但是由于设备碎片化,App的开发成本要高很多,维持多个版本的更新升级比较麻烦,用户的安装门槛也比较高。但是比较乐观的是,App store培养了一种比较好的用户付费模式,所以在Apple的生态圈里,开发者的盈利模式是一种明朗状态,其他market也在往这条路上靠拢。

图3 Gowalla和Awesome Note,是移动客户的经典设计案例

Native App的优势:

1.提供最佳的用户体验,最优质的用户界面,最华丽的交互

2.针对不同平台提供不同体验

3.可节省带宽成本

4.可访问本地资源

5.盈利模式明朗

Native App的劣势:

1.移植到不同平台上比较麻烦

2.维持多个版本的成本比较高

3.需要通过store或market的确认

4.盈利需要与第三方分成

三、融合

乔布斯有一次谈到这个问题,他说Web是未来,虽然现阶段Native给了用户更好的体验。如果现在的开发者不有效的利用Web技术,那他就落伍了。但如果过分依赖Web,完全不用Native那也未必就是好事。

iOS平台上的App有三类:Web App,通过浏览器访问;Native App,通过App store安装;第三类叫Hybrid  App,它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的科,其实里面是HTML5的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端Android版,走的也是Hybrid App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。

图4 掌上百度和Naver客户端都是Web App+Native App的架构


  图5 掌上百度的架构说明,客户端嵌套服务端,保证服务的高效迭代与更新

谷歌的Chrome OS和Android都是操作系统,但走的是两条路。Chrome OS走的是Web app的路。从Chrome OS 大会上发布的Chrome Web App能看出来,谷歌想为未来的Chrome OS做铺垫,鼓励更多的开发者开发出具有应用程序体验的Web App,正如Chrome OS官网上说的——“Nothing but the web”。而Android走的是Native App的路。Android作为手机平台的操作系统,明显更注重应用程序开发,这一点从Android Market可以看出来。也许前微软首席架构师Ray Ozzie的评价更加一针见血:“谷歌的战略中Android(以app为主)是在赌过去,而Chrome OS(完全基于Web)则是在赌未来。”

于是我们可以得到这样一个启发,你要想服务于未来,必须不断的跟随技术发展的脚步,提供更好的网页服务和体验。但是人们是活在当下,为了当下用户的需求,又必须提供现阶段浏览体验最好的客户端产品。但是,客户端是笨重且迟缓的,它不能像传统网页那样,一有风吹草动就华丽转身,只能规划好功能点,一步一步迭代,毕竟用户的升级成本太高了。所以,就有了这种Web App + Native App的架构,在现有条件下给用户最好的浏览体验和升级迭代。

四、未来趋势

虽然我们都愿意相信,当Web的体验和Native的体验逐渐趋近的时候,人们更愿意把精力花在内容获取上,而不是软件交互上,但是现阶段的交互体验,恰恰是影响人们获取内容的主要短板。所以,趋势摆在那里,我们却无法预测这个时间差。

就跟电脑端的应用一样,虽然现在Web化的趋势已经非常明显了,但是还是无法取代你本机安装的一些工具类的、游戏类的应用,在Web技术没有达到本地应用的效率和体验之前,Web是无法颠覆Native的。

总得来说,Web只是我们作为设计者和开发者所期待的一种理想化结果,开发成本低、轻松跨平台、迭代更新快,但是显然,现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Native。Web之于我们,只是一种趋势。在这个也许会非常久的过渡阶段,对复杂产品来说,Native App + Web App也许是个不错的解决方案。

Web App和Native App 谁将是未来的更多相关文章

  1. 轻应用、Web app 、Native app三者区别关系是什么?

    [龙友导读]最近百度公司在大会上宣布推出“轻应用”.轻应用到底是什么呢,和我们说的web app.native app到底有什么区别?是新生物的诞生还是概念的炒作?所以,今天特意为大家整理分享一篇这方 ...

  2. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  3. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  4. 【转】轻应用、Web App、Native App三者分别是什么?

      一.什么是Native app Native App是一种基于智能手机本地操作系统如IOS.Android.WP并使用原生程式编写运行的第三方应用程序,也叫地app.NativeApp因为位于平台 ...

  5. Web App、Hybrid App与Native App

    在这个App的时代,转战了前端,一直接触的都是pc, 离out不远了. 那么接下来,app是我接下来半年的重点,为什么是半年,因为时间不多了. 因为是前端,那么我的重心肯定是 Web App, Hyb ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. Web App 和 Native App,哪个是趋势?

    一.Web App vs. Native App 比起手机App,网站有一些明显的优点. 跨平台:所有系统都能运行 免安装:打开浏览器,就能使用 快速部署:升级只需在服务器更新代码 超链接:可以与其他 ...

  8. Web App和Native App的比较

    一.Web App vs. Native App 比起手机App,网站有一些明显的优点. 跨平台:所有系统都能运行 免安装:打开浏览器,就能使用 快速部署:升级只需在服务器更新代码 超链接:可以与其他 ...

  9. web app 、native app、hybrid app比较

    web app .native app.hybrid app比较 产品新人学习路 关注 2017.06.04 14:52* 字数 1887 阅读 11476评论 1喜欢 15 之前做讨论的时候,提出了 ...

随机推荐

  1. jquery 幻灯片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 异步调用backgroudworker

    先看一个小例子:C#客户端打开一个控件,控件中加载了好多数据大约要用5秒中,如果我们直接打开控件,那么这个控件就要5秒中才能弹出来,当然这个时候用户已经把他Kill了.这个时候我们就需要先给用户把控件 ...

  3. PHP实现中文字串截取无乱码的方法

    直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一个中文字符“锯”成两半.解决办法: 1.使用mbstring扩展库的mb_substr截取就不会出现乱码了. ...

  4. smarty模板引擎原理解析

    //php 控制器文件 <?php//引入模板引擎文件include("20130304.php");$smarty =newTinySmarty();$qq_numbers ...

  5. supervisor进程管理

    install :  apt-get install supervisor crete  a  xxxx.conf  file at   /etc/supervisor/conf.d the cont ...

  6. gcc/g++命令认识

    gcc & g++是gnu中最主要和最流行的c & c++编译器 . g++用来针对c++的处理命令,以.cpp为后缀,对于c语言后缀名一般为.c.这时候命令换做gcc即可. 下面以T ...

  7. 2016021801 - Java内存区域归纳对比

    线程私有 线程共享 程序计数器,虚拟机栈,本地方法栈 堆,方法区 内存区 异常 异常原因 程序计数器 无 虚拟机栈 StackOverflowError 线程请求的栈深度大于虚拟机栈所允许的深度 Ou ...

  8. SecurityCRT输出日志重定向

    使用CRT进行抓取log,因为工具本省缓冲区有限,导致,刷屏特别快,可能会错过一些log,可以对CRT的log进行增加输出源,或者说将输出到控制台的log再输出到本地文件中: 文件->点击(勾选 ...

  9. 项目管理Point

    1.项目管理流程 在设计阶段需要提交的成果物:类图设计(每个方法要有成形的SQL),页面设计,数据库设计,思路:需求分析->用户故事->客户确认(前三步是个迭代过程)->类图设计(了 ...

  10. java web 代码

    原 30套JSP网站源代码合集 IT小白白 发布时间: 2012/12/28 14:30 阅读: 272 收藏: 3 点赞: 0 评论: 0 JSP技术是以Java语言作为脚本语言的,JSP网页为整个 ...