（1）Native App：

一种基于智能移动设备本地操作系统（如iOS、Android、WP操作系统），并使用对应系统所适用的程序语言编写运行的第三方应用程序，由于它是直接与操作系统对接，代码和界面都是针对所运行的平台开发和设计的，能很好地发挥出设备的性能，所以交互体验会更流畅。

（2）Web App：

一种采用Html语言编写的，存在于智能移动设备浏览器中的应用程序，不需要下载安装，可以说是触屏版的网页应用，由于它不依赖于操作系统，因此开发了一款Web App后，基本能应用于各种系统平台。

（3）Hybrid App：

一种用Native技术来搭建App的外壳，壳里的内容由Web技术来提供的移动应用，兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”。

二、App技术框架的选择

对于设计师而言，我们往往是被告知这个项目采用的是哪种技术框架，然后就开始设计了，其实，我们也可以根据产品特点、框架特点和项目时间来与产品和开发同学协商，合理地为App中不同的部分选择对应技术框架，然后才在对应的技术框架下思考设计方案。

三、Hybrid App技术框架的设计特点

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

Hybrid App的大部分内容都是在Native框架中加载Web网页内容，能在保证用户体验的前提下，让App的内容更具有扩展性，即使接入再多的内容和业务功能，也不会使得整个App的安装包过大，典型Hybrid App的代表就是我们的手机淘宝客户端。Hybrid App在设计时，要注意以下五个要点。

（1）图像渲染

Native技术部分由于能直接调用系统的渲染引擎，所以能实现流畅的复杂图像渲染，而不影响设备的性能。

Web内容部分由于是基于内置浏览器，在图像渲染的时候要通过浏览器访问系统的渲染引擎或调用基于浏览器的第三方渲染引擎，中间需要在多个层级进行渲染请求，所以渲染的时效性和性能会下降不少，导致较复杂的图像渲染或动态渲染时，会出现机器卡顿。

由于标题栏采用了Native技术框架，可采用复杂的毛玻璃效果，让标题栏更通透，而内容区采用了基于Html5的Web技术，因此不适合动态变换背景图的渲染方案（当图片轮播时，背景图会随着图片内容而动态变换出模糊的背景）。

（2）动效体验

由于Hybrid App的内容区大部分采用基于Html5的Web技术，对动效的解释和操作需要消耗大量的CPU性能，在设计时，要注意以下三个方面：

a. 不同的动效类型对CPU性能的消耗不同:对CPU性能要求低的动效类型能运行得更流畅，但如果当你的设计方案是非系统自带的动效类型时，就需要提前跟开发沟通可行性和对CPU性能的消耗问题。

b. 机型的性能差异：不同的手机机型的CPU性能相差较大，需要了解不同机型在你的App中的占比，因为即在iPhone6上能完美运行的动效或交互动作，在iPhone6以下的手机上可能就会卡住不动了，所以不太适合用于CPU性能消耗较大的频繁渲染。

c. 网络的影响：如果你的动效在运动时，还需要加载内容，就要考虑网络较慢时，内容加载对动效流畅度的影响，这时可考虑先加载完内容，再开始动效或简化、压缩加载的内容量。

如图8所示，在Web内容区，当点击图片后，该图片放大（系统默认的缩放动效，对CPU性能消耗小），但其它图片自动重新排列的动效会比较消耗CPU性能，在低端机器上会出现卡顿或闪退的情况，并且还会受到网速的影响，导致体验不友好，如果必须做复杂动效，可以让该动效只出现在高端机型中。

（3）平台兼容

由于Hybrid App的Web内容，是不同的平台共用同一套设计方案，所以为了更好地让设计方案兼容不同的平台特性和手机分辨率。