在现在越来越多的app，你可以看到有一些app中是混着网页加载的（我们俗称的为H5）但要注意的web 前端开发是包含着h5的。web前端开发还包括了许多内容，比如说后台html，css，div等都是属于web前端开发的，html5和其它技能都是一样的，是属于web前端开发的一种技术，就是我们平时所说的移动端的网页制作，简称H5。

你也可能会发现有的app并没有网页加载，一些工具性的app为了达到最好的用户体验，流畅的响应所使用的app技术框架又有不同。

整体app 的技术分为三大类：native app、web app、hybrid app。必须要提及的是火爆的小程序不管是百度、微信、还是支付宝的，都是基于hybrid 框架技术的一项火爆的应用。如下图4.1.1表示 hybird的关系

技术最终是服务于产品的，产品是解决用户问题的。因此3个框架并不是有绝对的好坏。三者也有各自的优势和缺点，如下图4.1.2展示3者技术框架的嵌套关系。

基于智能移动操作系统（如iOS、Android），并使用对应系统所适用的程序语言编写运行的第三方应用程序，可以直接调用系统操作的接口，可以调用足够的cpu资源，可以让app 运行的速度更快、流畅，常见落地的场景如：大型手机游戏、性能要求较高的工具类app，但运行app所占据的内存与所需要的手机配置也会有要求。

一种采用Html、css、div、js等语言编写的，受限制于UI webview，页面存放不在本地。也无法调用系统底层接口，对CPU的性能使用有限，常见比较轻的产品、利于传播的app，在webapp中所使用的技术框架有jQueryMobile、frozen UI、iconic、amazon UI、cardkit、appjs等

一种用Native技术来搭建App的外壳，壳里的内容由Web技术来提供的移动应用，兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”。但同样受限制于UIVIEW，不能做大型类游戏产品。但可以兼顾交互体验、速度运行

产品经理在对技术框架了解后还应该熟悉技术的优势与劣势，我们如何在产品研发中选择对应的框架帮助更好的产品增长与转化呢？下面整理出了一些优势和劣势

1.Native

开发成本：要为iOS、Android各自开发一套App

维护成本：不仅要维护多个系统版本，还要维护多个历史版本（如有的用户在5.0版本，有的用户在4.0版本等）

版本发布：需要发布（用户安装）最新版App

资源存储：本地

网络要求：支持离线

开发时间：耗时最长

人员配比：需要iOS、Android系统的开发人员

性能要求：硬件配置性能要求高

2.Web

开发成本：只需开发一套App，即可运用到不同系统平台

维护成本：只需要维护一套（最新版本）

版本发布：直接发布，随时24小时可以发布（除开审核）

资源存储：服务器

网络要求：依赖网络

开发时间：语言选择不同，会有影响。但是最快的

人员配比：会写对应网页语言的开发

性能要求：硬件性能要求低

3.Hybrid（混合型）

开发成本：native需要iOS、android各自配备开发人员，web部分只需统一配置调用接口即可

维护成本：native需要为多最新版本和多个历史版本，web只需维护最新版本，并且web可以支持随时维护修改

版本发布：native部分需要发布（用户安装）最新的App，web部分不需要发布（用户安装）最新的App

资源存储：本地服务器和腾讯云、阿里云等云服务器

网络要求：大部分依赖网络也有本地部署

开发时间：根据功能复杂度，若功能集中在web 则快，反之则慢

性能要求：中等

由于hybrid是融入了系统自身的接口，所使用性能占比的CPU也是不同的。由于web需要依靠网络问题，所以hybrid框架应用中，是需要兼顾web的网络问题

由于Hybrid App是融合了Native App和Web App的技术特点，通过分析Hybrid App的技术框架成分，能让我们更好地掌握App框架的基本开发知识，有助于我们更好地去做设计。

1. 网络导致的无法载入图片问题

如上图是一条app典型的利用hybrid技术的应用。因为要支持微信端口的商城，电商系统在减少资源浪费的情况下，就只做一套。但却因网络问题导致了无法加载商品信息流页。

但因为商品的内容是丰富的，通过这样技术框架可以避免安装包过大。是一个典型的案例

2.使用系统的动效

在native 框架中有系统自带的动画。比如缩放、载入、点击效果、弹窗动画。在产品设计中选择系统自带的动画，可以避免native成本过高。由于web app\hybrid 都受限于UI VIEWR（一个技术接口），导致需要访问多个层级进行渲染，最终造成的动画效果就会卡帧或性能下降。

类似游戏产品，流畅的体验是玩家首先体验之一，大型游戏都会采取全部native 开发，如下图

3.注意兼容性

由于Hybrid App中，我们会常用一套web 方案。不管是微信、还是 app上，都会用一套字体与风格。但我们不可能让设计师在移动端、pad上切不同尺寸的图。所以为了更好地让设计方案兼容不同的平台特性和手机分辨率，所以建议文案和图形采用以下三种方式：

a. 系统默认字体：如果不是为了设计出特殊的字体样式，iOS、Android和Windows Phone系统的默认字体是基本满足我们的需求，同时在不同平台上的显示效果也会比较好。

b. svg 可缩放矢量图形：能够自由缩放大小来适应不同屏幕尺寸和分辨率，不会模糊变形。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

c. Iconfont来代替图标：能够自由变换大小和颜色。

4.把控web与native的平衡

web 页面因在hybrid中会更加自由，不管是UI还是交互上都会更能满足产品人的需求，但要注意如果web页面太多会导致整个app的体验大幅下降。用户进入app 后即不能接受到良好的native体验，还会认为是你产品的设计有问题。

Web方式可以帮助业务复杂的企业实现一些定制化的解决方案。业务类型太多，全部依靠native 会让app 显得过于臃肿耗费性能。

如下图支付宝图4.1.7所示，支付宝中支付、下单、付款等高频操作，才是采用native的方式，减少用户在高频操作中的卡顿情况。

5.注意加载等操作交互设计

利用hybrid的技术，其实本身也是在app中实现了一个不完全的浏览器。Hybrid但由于可能过度依靠html5 导致体验不够原生，还有可能审核被拒的可能。

针对下面4中加载情况产品经理要注意对应的交互和文案

1、正在加载中

2、加载成功

3、没网络

4、加载失败

最快的办法是直接使用一个【载入图标】+“正在载入中“，就可以接触用户的困惑。如图4.1.7所示

技术架构在不停的更新，产品经理要与开发同学沟通出最好的符合当前场景的解决方案。毕竟开发很可能只了解部分业务，至于为什么这么做则需要产品人员来主导了。

显然当前小程序也是hybrid的技术架构的亮点应用方向，适合轻度场景、没有过多的动画动效，页面少、功能不复杂。因此互联网产品人保持不断学习的态度是至关重要的。

好啦，今天原创就在这里，我会每周原创2篇工作案例

推荐阅读：