恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5和原生APP之间的区别?
0.0°
2017-06-26 原创文章 经验/观点 举报 16367 17 64 0

最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊。产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两种不同的APP,大大降低了开发成本。可实际的工作中却发现并不是如此,既不省事儿,又有很多BUG,而且各种css的兼容性的问题一大堆,更不要说动画点不到这些问题啦,真是一个坑比一个坑深啊。即使如此,虽然还是有很多问题没有很好的解决,为什么还是有很多H5汇合APP开发的人呢。这里要提到一个刚刚当了奶爸不久的扎克伯格——小扎同学。

早在2010年的时候,那个时候HTML5刚刚兴起不久,乔布斯就说HTML5将会成为取代Flash的下一个技术浪潮,从那个时候开始,很多大公司和有想法的创业公司都在试水并尝试不断的推动HTML5的发展。这里面就以Facebook的创始人最为炙热。他提出一定要尽可能的利用HTML5和Web App来打破iOS和Android的垄断,Facebook在信息浪潮的年代竟然用长达2年的时间潜心研发HTML5,投注大量的精力和物力。最终因HTML5自身技术问题导致经常出现bug,那对Facebook来说影响是不可估量的,因此差点引发被雅虎收购的命运。好在到2012年因为公司对市场上所有JS MVC框架都不满意以后,再加上借着重构Instagram网站的机会,才决定自己写一套,这个时候才从HTML5转向原生应用。

那说到H5和原生APP的差异,那什么是原生APP,什么是web APP?看到一个前辈解释的特别好,在这里和大家分享。

Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。

原生APP又称Native App,该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

那除了定义中提到两者的构成部分和读取数据的不同以外,还有哪些方面有区别呢?偶从以下几个方面简单阐述一下:

1、开发方面的区别(这个地方太专业啦,请教了团队的开发小伙伴)

目前React Native开发越来越火,微信小程序是基于React Native开发的,体验接近原生APP,发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件,也能顺利发布到苹果APP store。

移动Web App

  1、因为运行在移动设备的浏览器上,所以只需要一个开发项目

  2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

  3、这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

  1、每一种移动操作系统都需要独立的开发项目

  2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

  3、需要使用各自的软件开发包,开发工具以及各自的控件

2、能力方面的区别

移动Web App

  只能使用有限的移动硬件设备功能。

原生App

  能够与移动硬件设备的底层功能,比如个人信息,摄像头以及重力加速器等等。对于这一点感触很深刻,2016年做新年H5营销小活动的时候,就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

  移动Web App

  1、从移动设备上的浏览器访问

  2、不需要安装额外的软件

  3、软件更新只需要服务器就够了

  4、因为现在没有什么商品或卖场提供这种App,不过一般都是嵌套在系统内部,或者内部系             统中使用

    5、跨平台开发,用户不需要去卖场来下载安装App

      6、需要过度依赖网络,没有任何缓存数据

      7、任何时候都可以发布App,因为根本不需要官方卖场的审核

  8、如果你已经有了一个Web App,你可以使用 responsive web design来辅助改进(这也是优势?)

      9、所有的用户都是用同样的版本

  原生App

  1、直接下载到设备

  2、以独立的应用程序运行(并不需要浏览器)

  3、用户必须手动去下载并安装这些原生App

  4、有一些商店与卖场来帮助用户寻找你的App,app store里面应有尽有。

  5、原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

  6、手机用户无法上网也可访问APP应用中以前下载的数据。

  7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

  8、APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

      9、用户可以自由地选择是否更新软件版本,所以会出现不同用户同时使用不同版本的情况

 关于两者的交互方式不同的地方,回头令起篇幅再述……

即使两者之间有很大的区别,即使H5有一大堆的坑和问题,但是仍旧不妨碍移动WEB无所不在,移动web是目前唯一的支持各种设备访问的平台,也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性,这一点是它得天独厚的优势。所以,对于一个对于决策者来说,如果你是要做一款体验更好的产品的话,那Native App不妨是最佳的选择。当然如果你想尽快让你的产品占住一席之地的话,力求快速开发、低成本、多平台等等的话,那技术还有很多问题都没有很好解决的H5,也是不错的选择。正式因为它有复杂多变的CSS样式消耗了大量性能,它才有一个更有竞争力的优势——它带来了多样性的排版,能够细致到每一个字宽行高和风格的像素级处理,能够给你带来不一样的图文汇合的排版。我想这些更是H5的优异之处吧。

更新:2017-06-26

收藏

17人已收藏

好设青年

然,知其然,释其所以然

  • 42

    作品

  • 450

    粉丝

  • 14

    关注

  • 商品列表设计如何提升购物体验——泛渠道小程序产品复盘思考
  • 论页面设计中的间距重要性——8大电商移动端间距数据采集和分析
  • B2C和C2C在前端购物流程设计上有哪些不同?
  • 京东、淘宝商品详情页设计背后的思考
相关标签
设计分享经验

    猜你喜欢

      2017-06-26 原创文章 经验/观点 举报 16367 17 64 0

      H5和原生APP之间的区别?

      0.0°

      你确定要举报H5和原生APP之间的区别?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      64
      17
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录