说明：Native APP（原生APP），Web APP，Hybrid APP（混合模式移动移用）
本文目录：
1、概念和优劣势
2、选择标准
3、设计要点
4、如何区分混合中的原生和H5
5、名词科普
我们日常使用的APP应用主要分为以下几类：
（1）原生APP，即Native APP；
（2）H5页面，也就是web APP；
（3）混合页面，即Hybrid APP，结合了原生和网页两种形式。
当然，还有小程序，作为新兴的轻应用，寄存于原生APP中，此处暂且不介绍，后面单独作为一个专题。
1·概念和优劣势
（一）基本概念
Native APP：指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的应用，可拓展性强。需要下载安装。
Web APP：指采用HTML语言写出的APP，一般依托于浏览器，有一定的交互，类似于现在的轻应用，是触屏的网页版。不需要下载安装。
Hybrid APP：指的是半原生半网页的混合类APP，很多应用采用原生App的框架，Web的内容。
（二）优劣势分析：
下面主要从性能速度、用户体验、设备流量、开发维护四个方面进行对比。
从表中，我们可以发现，在速度性能、用户体验、设备调用方面，原生APP都具有绝对优势，但是在开发维护方面，原生APP的成本也比较高。相对地，H5网页APP开发维护较简单，但体验方便并不是很好。
我们可以根据具体的使用场景，选择对应的形式进行开发。
2·选择标准
在准备做移动App时，应该先问问自己以下几个问题：
1. 你的应用是否需要使用某些设备的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器
2. 你的开发预算是多少？
3. 你的应用是否一定需要网络
4. 你的应用的目标硬件设备是所有的移动设备还是仅仅只是一部分而已
5. 你自己已经熟悉的开发语言
6. 这个应用对于性能要求是否苛刻
7. 如何靠这个应用赢利
我想这几个问题应该能让你做出明智的选择。
另外，根据上表的4个纬度，我们可以根据具体不同的需要，选择对应的形式。
（一）性能和体验
1、当对「A-性能」「B-体验」方面要求比较高。需要加载快速、界面清晰、动效酷炫、通知及时等体验，优先选择：原生。
2、当对「A-性能」「B-体验」方面要求比较低。包括：
（1）产品阶段：为非核心需求，或阶段性的营销活动，运营灵活，希望被分享，对性能要求低。注重效率周期而不是性能体验。
（2）产品周期：在试运营阶段，功能开发不完善，需快速收集用户反馈信息及时更新，H5试错成本低。注重内容反馈而不是界面效果。
优先选择：H5
（二 ）硬件流量
当必须用到『C-硬件』方面的特性。比如，需要以下权限。
（2）需要使用定位、摄像头、感应器等设备底层权限功能；
（3）需要访问文件系统。因涉及安全和用户隐私，需获得用户授权。
（4）需要提供离线服务。
（5）需要节省流量。
优先选择：原生APP
（三）开发问题
H5的开发比原生的成本低，包括了资源预算成本、重新修改成本，对开发要求较低。
（1）当开发资源预算有限：应用须适应多个操作系统，选用H5.
（2）当开发技术能力很强：强到推翻之前的结论，使H5可以达到原生的效果，上述H5的缺点变成了优势。比如，丰富的功能接口可供开发者调用，能解决网速不流畅问题，。则可选择用H5.
3·设计要点
设计在于限制。原生APP因为相对限制少，所以我们设计发挥较大。我们主要讨论H5设计过程中的一些限制。
Web APP的受限因素及设计要点：
（一）网络环境
对网络环境依赖性较大，每次都需从服务器请求数据。设计点：
简化不重要的动画特效,不要求做到酷炫，但求好用。
简化复杂的图形文字样式。
减少页面渲染的频率和次数。‘
（二）受限于浏览器
宿主是浏览器，不同浏览器自身属性不同，如浏览器自带手势，页面切换方式，链接跳转方式，版本兼容问题。
（1）少用手势，避免与浏览器手势冲突。
（2）减少页面跳转次数，尽量在当前页面显示。
（3）不要使用浏览器加载方式，用下拉刷新，不要让用户有浏览网页的感觉。
（4）顶部导航标题栏尽量使用原生的，这样在网速渣，内容没刷出来，也可以快速返回退出。
（三）系统限制，平台特性
由于HTML5语言的技术特征，无法调用系统级别的权限，如系统级别的弹窗、通知、地理信息等，且与系统兼容性存在问题。导致H5 APP拓展性不强，体验相对较差。
4·区分混合中的原生和H5页面
混合APP结合了原生和H5两者的特性，所以它是一个这种的方案。那如何区分Hybrid中的原生页面和H5页面？
很多人从页面设计上区分，比如：有加载进度条，没有底部Tab标签栏，顶部显示两个导航条等，但是这些很多已经被弱化。
下面介绍安卓手机如何区分原生和H5页面。
在手机「设置」-连按五次「安卓系统版本号」，即可打开「开发者选项」，打开“显示布局边界”。有布局的部分就是naive，一般一个控件一个边界框。；而H5中只使用一个webview控件，只有一个边界框。
5·名词科普
（一）什么是H5页面
概述：介绍了H5如何诞生（HTML经过4个版本的迭代，最后由WhatWG和W3C两个组织合作，创建了新一代的HTML），以及H5的优势（全新的框架和平台，跨平台性降低开发和运营成本、本地存储特性省启动时间省流量）——2015年5月14日 下午11:55
H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
HTML的第一版1991年开始研发，1993年发布。本来每隔一段时间HTML都应该进行更新，但是自1999年12月HTML4.01发布以来，就再也没有更新。此后的十多年，互联网行业发生了翻天覆地的变化，人们逐渐意识到原有的HTML已经不能适应互联网的发展了。这时出现了两个组织分别提出了新的方案：WHATWG和W3C。前者开发了Web Applications 1.0，后者则开发了XHTML2.0。在2006 年，双方决定进行合作，来创建新一代的HTML，这就是H5。
H5在2008年发布草案以来，并未引起广泛关注，而是进入了长期的迭代优化周期。直到去年10月W3C终于宣布，经过长达8年的努力，HTML5标准规范最终制定完成并向全世界开放。H5标准规范的开放注定成为一个划时代意义的事件，H5工具也渐露光芒，比如能可视化制作，不需要写代码的H5制作工具互动大师就受到了各方的关注。
H5之所以能引发如此广泛的效应，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，像H5工具互动大师提供免插件的音视频、图像动画、本地存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。
H5的最显著的优势在于跨平台性：比如用互动大师搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。
此外，H5的本地存储特性也给使用者带来了更多便利；基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。而互动大师让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。
H5页面优劣势：（2016/5/12 14:46 从其他笔记整理）
优势：开发周期短，能适应多个操作系统，发布和更新方便，快速迭代。.
劣势：依赖网络，每次打开需重新加载，有限的设备底层功能。
（二）响应式网页设计
1、 关于响应式、自适应、液态和静态的区别
响应式：Responsive is characterized by having defined layouts for different resolutions. Within each layout, the design is liquid and resizes the width of elements relative to the changing window size. You can think of Responsive as a series of Liquid layouts.
自适应：Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.You can think of Adaptive as a series of Static layouts.
液态：Liquid (also called "Fluid") is characterized by scaling the width of parts of the design relative to the window. It tends to fail when the window is much smaller or much larger than it was originally designed for.
静态：Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.
2、内容流
内容所占的垂直空间。 内容下方的可随内容增多自动向下延伸
3、相对单位
使用相对单位，而不是像素大小
4、断点
页面布局在预设点进行变形，如在台式桌面上显示3栏，而在移动设备上显示1栏。
5、最大值和最小值
内容可以充满整个屏幕，如移动端，但是也要看情况。如，宽度为100%，最大宽度为1000px, 内容就会以不超过1000px的宽度填充屏幕。
6、嵌套对象
用户相对位置固定、彼此紧密练习的要素，可将要素放在容器中，使用像素之类的静态单位，其对于Logo和按钮等不需扩展的内容非常有用。
7、移动优先还是台式桌面优先
看哪种方式适合自己
8、web字体vs系统字体
web字体炫酷，但需要用户下载，字越多，加载页面时间越长；系统字体加载速度快，但普通。
9、位图vs矢量图
位图：细节、华丽的效果；矢量图：通常较小
参考：
<超赞！聊聊Web App、Hybrid App与Native App的设计差异>——mux.baidu
<Hybrid App中原生页面 VS H5页面-人人都是产品经理>
响应式网页设计的9项基本原则—译自：9 basic principles of responsive web design——Sandijs Ruluks
