当前市面上有两种类型的APP，一种是用Android/IOS直接编写的原生APP的，一种是通过H5写的Web APP然后封装成原生APP的样子。

他们各有优劣，但是随着H5的势头正劲，现在H5开发的APP也越来越多，不乏一些大家常用的就是用H5开发的。例如京东一些页面、QQ兴趣部落等

原生APP与Web APP的区别

原生APP直接基于操作系统编写，可以调用很多操作系统底层应用，可以完成很复杂的交互与功能，需要下载安装。

原生APP的优点：1.操作稳定，效率高；2.直接访问底层应用，例如通讯录等；3.可以实现更多的交互效果；3.具有系统级别的交互体验与提醒。

缺点：1.开发成本高，不同平台使用不同的语言（IOS、Android）；2.维护成本高，每一个迭代版本都得维护；3.更新迭代耗时，根据不同平台，提交-审核-上线 等等不同的流程，需要经过的流程较复杂，且iOS和Android相比，审核更复杂，时间也更长。

Web APP 不需要下载，通过浏览器直接访问。需要浏览器系统进行交互。

优点：1. 开发成本低：H5是一种前端语言，与后台语言无关，并且适配各种平台；2.维护成本低：只需要发布就可以了；3.更新快：不需要经过复杂的上线流程即可更新

缺点：1.受限于网络和硬件、很多动效即使可以在H5上实现，效果也不好，且由于硬件和系统劣势，Android的效果更差；2.临时性的入口、无法获取系统级别的通知，提醒，动效等等；3.设计上受限制诸多， 用户体验较差 ；

如何辨别原生APP与Web APP

1. 看跳转。原生比Web效率更高、速度更快。唯品会是比唯品花更快。

2. 看断网。断网后依然能显示部分的是原生APP，显示404是Web APP

当然现在Web APP也可以通过预存离线包的形式实现断网访问。

3. 看APP顶部导航栏是否会有关闭的功能

顶部有关闭功能的是Web APP，没有的则是原生APP（不过，如果要完成这个功能也是可以的）

4. 下拉刷新功能

如果界面没有明显刷新现象的是原生的，如果有明显刷新现象，比如页面闪一下或者白屏一下的是H5页面（IOS和Android）。

不过现在很多框架、硬件升级、网速升级。如果APP有足够的开发资源来对H5页面进行优化，其实是可以做到和Native的体验非常接近的，能让你几乎无法分辨。

界面设计有哪些异同？

支付宝中原生APP的键盘和浮层是一体的，而唯品会H5页面的浮层和系统键盘是分离的，H5页面键盘是有局限性的。

关闭按钮容易误操作。比如京东的修改支付密码流程都是用H5写的，步骤比较多且每一步都很关键，如果用户误点击了关闭，整个修改密码的流程就前功尽弃了。

是够能覆盖顶部状态栏。原生APP可以在弹出框之后整个页面添加蒙版。而Web APP状态栏区域不会被蒙版覆盖。

设计入门或提升群：566106030 UI、电商、前端视频下载：www.nbteach.com