說明：Native APP（原生APP），Web APP，Hybrid APP（混合模式移動移用）
本文目錄：
1、概念和優(yōu)劣勢
2、選擇標(biāo)準(zhǔn)
3、設(shè)計要點
4、如何區(qū)分混合中的原生和H5
5、名詞科普
我們?nèi)粘Ｊ褂玫腁PP應(yīng)用主要分為以下幾類：
（1）原生APP，即Native APP；
（2）H5頁面，也就是web APP；
（3）混合頁面，即Hybrid APP，結(jié)合了原生和網(wǎng)頁兩種形式。
當(dāng)然，還有小程序，作為新興的輕應(yīng)用，寄存于原生APP中，此處暫且不介紹，后面單獨作為一個專題。
1·概念和優(yōu)劣勢
（一）基本概念
Native APP：指的是原生程序，一般依托于操作系統(tǒng)，有很強的交互，是一個完整的應(yīng)用，可拓展性強。需要下載安裝。
Web APP：指采用HTML語言寫出的APP，一般依托于瀏覽器，有一定的交互，類似于現(xiàn)在的輕應(yīng)用，是觸屏的網(wǎng)頁版。不需要下載安裝。
Hybrid APP：指的是半原生半網(wǎng)頁的混合類APP，很多應(yīng)用采用原生App的框架，Web的內(nèi)容。
（二）優(yōu)劣勢分析：
下面主要從性能速度、用戶體驗、設(shè)備流量、開發(fā)維護四個方面進行對比。
從表中，我們可以發(fā)現(xiàn)，在速度性能、用戶體驗、設(shè)備調(diào)用方面，原生APP都具有絕對優(yōu)勢，但是在開發(fā)維護方面，原生APP的成本也比較高。相對地，H5網(wǎng)頁APP開發(fā)維護較簡單，但體驗方便并不是很好。
我們可以根據(jù)具體的使用場景，選擇對應(yīng)的形式進行開發(fā)。
2·選擇標(biāo)準(zhǔn)
在準(zhǔn)備做移動App時，應(yīng)該先問問自己以下幾個問題：
1.?你的應(yīng)用是否需要使用某些設(shè)備的特殊功能，比如攝像頭，攝像頭閃光燈或者重力加速器
2.?你的開發(fā)預(yù)算是多少？
3.?你的應(yīng)用是否一定需要網(wǎng)絡(luò)
4.?你的應(yīng)用的目標(biāo)硬件設(shè)備是所有的移動設(shè)備還是僅僅只是一部分而已
5.?你自己已經(jīng)熟悉的開發(fā)語言
6.?這個應(yīng)用對于性能要求是否苛刻
7.?如何靠這個應(yīng)用贏利
我想這幾個問題應(yīng)該能讓你做出明智的選擇。?
另外，根據(jù)上表的4個緯度，我們可以根據(jù)具體不同的需要，選擇對應(yīng)的形式。
（一）性能和體驗
1、當(dāng)對「A-性能」「B-體驗」方面要求比較高。需要加載快速、界面清晰、動效酷炫、通知及時等體驗，優(yōu)先選擇：原生。
2、當(dāng)對「A-性能」「B-體驗」方面要求比較低。包括：
（1）產(chǎn)品階段：為非核心需求，或階段性的營銷活動，運營靈活，希望被分享，對性能要求低。注重效率周期而不是性能體驗。
（2）產(chǎn)品周期：在試運營階段，功能開發(fā)不完善，需快速收集用戶反饋信息及時更新，H5試錯成本低。注重內(nèi)容反饋而不是界面效果。
優(yōu)先選擇：H5
（二 ）硬件流量
當(dāng)必須用到『C-硬件』方面的特性。比如，需要以下權(quán)限。
（2）需要使用定位、攝像頭、感應(yīng)器等設(shè)備底層權(quán)限功能；
（3）需要訪問文件系統(tǒng)。因涉及安全和用戶隱私，需獲得用戶授權(quán)。
（4）需要提供離線服務(wù)。
（5）需要節(jié)省流量。
優(yōu)先選擇：原生APP
（三）開發(fā)問題
H5的開發(fā)比原生的成本低，包括了資源預(yù)算成本、重新修改成本，對開發(fā)要求較低。
（1）當(dāng)開發(fā)資源預(yù)算有限：應(yīng)用須適應(yīng)多個操作系統(tǒng)，選用H5.
（2）當(dāng)開發(fā)技術(shù)能力很強：強到推翻之前的結(jié)論，使H5可以達到原生的效果，上述H5的缺點變成了優(yōu)勢。比如，豐富的功能接口可供開發(fā)者調(diào)用，能解決網(wǎng)速不流暢問題，。則可選擇用H5.
3·設(shè)計要點
設(shè)計在于限制。原生APP因為相對限制少，所以我們設(shè)計發(fā)揮較大。我們主要討論H5設(shè)計過程中的一些限制。
Web APP的受限因素及設(shè)計要點：
（一）網(wǎng)絡(luò)環(huán)境
對網(wǎng)絡(luò)環(huán)境依賴性較大，每次都需從服務(wù)器請求數(shù)據(jù)。設(shè)計點：
簡化不重要的動畫特效,不要求做到酷炫，但求好用。
簡化復(fù)雜的圖形文字樣式。
減少頁面渲染的頻率和次數(shù)。‘
（二）受限于瀏覽器
宿主是瀏覽器，不同瀏覽器自身屬性不同，如瀏覽器自帶手勢，頁面切換方式，鏈接跳轉(zhuǎn)方式，版本兼容問題。
（1）少用手勢，避免與瀏覽器手勢沖突。
（2）減少頁面跳轉(zhuǎn)次數(shù)，盡量在當(dāng)前頁面顯示。
（3）不要使用瀏覽器加載方式，用下拉刷新，不要讓用戶有瀏覽網(wǎng)頁的感覺。
（4）頂部導(dǎo)航標(biāo)題欄盡量使用原生的，這樣在網(wǎng)速渣，內(nèi)容沒刷出來，也可以快速返回退出。
（三）系統(tǒng)限制，平臺特性
由于HTML5語言的技術(shù)特征，無法調(diào)用系統(tǒng)級別的權(quán)限，如系統(tǒng)級別的彈窗、通知、地理信息等，且與系統(tǒng)兼容性存在問題。導(dǎo)致H5 APP拓展性不強，體驗相對較差。
4·區(qū)分混合中的原生和H5頁面
混合APP結(jié)合了原生和H5兩者的特性，所以它是一個這種的方案。那如何區(qū)分Hybrid中的原生頁面和H5頁面？
很多人從頁面設(shè)計上區(qū)分，比如：有加載進度條，沒有底部Tab標(biāo)簽欄，頂部顯示兩個導(dǎo)航條等，但是這些很多已經(jīng)被弱化。
下面介紹安卓手機如何區(qū)分原生和H5頁面。
在手機「設(shè)置」-連按五次「安卓系統(tǒng)版本號」，即可打開「開發(fā)者選項」，打開“顯示布局邊界”。有布局的部分就是naive，一般一個控件一個邊界框。；而H5中只使用一個webview控件，只有一個邊界框。
5·名詞科普
（一）什么是H5頁面
概述：介紹了H5如何誕生（HTML經(jīng)過4個版本的迭代，最后由WhatWG和W3C兩個組織合作，創(chuàng)建了新一代的HTML），以及H5的優(yōu)勢（全新的框架和平臺，跨平臺性降低開發(fā)和運營成本、本地存儲特性省啟動時間省流量）——2015年5月14日?下午11:55
H5是指第5代HTML，也指用H5語言制作的一切數(shù)字產(chǎn)品。所謂HTML是“超文本標(biāo)記語言”的英文縮寫。我們上網(wǎng)所看到網(wǎng)頁，多數(shù)都是由HTML寫成的。“超文本”是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。瀏覽器通過解碼HTML，就可以把網(wǎng)頁內(nèi)容顯示出來，它也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。
??HTML的第一版1991年開始研發(fā)，1993年發(fā)布。本來每隔一段時間HTML都應(yīng)該進行更新，但是自1999年12月HTML4.01發(fā)布以來，就再也沒有更新。此后的十多年，互聯(lián)網(wǎng)行業(yè)發(fā)生了翻天覆地的變化，人們逐漸意識到原有的HTML已經(jīng)不能適應(yīng)互聯(lián)網(wǎng)的發(fā)展了。這時出現(xiàn)了兩個組織分別提出了新的方案：WHATWG和W3C。前者開發(fā)了Web Applications 1.0，后者則開發(fā)了XHTML2.0。在2006 年，雙方?jīng)Q定進行合作，來創(chuàng)建新一代的HTML，這就是H5。
??H5在2008年發(fā)布草案以來，并未引起廣泛關(guān)注，而是進入了長期的迭代優(yōu)化周期。直到去年10月W3C終于宣布，經(jīng)過長達8年的努力，HTML5標(biāo)準(zhǔn)規(guī)范最終制定完成并向全世界開放。H5標(biāo)準(zhǔn)規(guī)范的開放注定成為一個劃時代意義的事件，H5工具也漸露光芒，比如能可視化制作，不需要寫代碼的H5制作工具互動大師就受到了各方的關(guān)注。
????H5之所以能引發(fā)如此廣泛的效應(yīng)，根本在于它不再只是一種標(biāo)記語言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺，像H5工具互動大師提供免插件的音視頻、圖像動畫、本地存儲以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化，從而使互聯(lián)網(wǎng)也能夠輕松實現(xiàn)類似桌面的應(yīng)用體驗。
??H5的最顯著的優(yōu)勢在于跨平臺性：比如用互動大師搭建的站點與應(yīng)用可以兼容PC端與移動端、Windows與Linux、安卓與IOS。它可以輕易地移植到各種不同的開放平臺、應(yīng)用平臺上，打破各自為政的局面。這種強大的兼容性可以顯著地降低開發(fā)與運營成本，可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機遇。
???????此外，H5的本地存儲特性也給使用者帶來了更多便利；基于H5開發(fā)的輕應(yīng)用比本地APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，而且無需下載占用存儲空間，特別適合手機等移動媒體。而互動大師讓開發(fā)者無需依賴第三方瀏覽器插件即可創(chuàng)建高級圖形、版式、動畫以及過渡效果，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。
H5頁面優(yōu)劣勢：（2016/5/12 14:46??從其他筆記整理）
優(yōu)勢：開發(fā)周期短，能適應(yīng)多個操作系統(tǒng)，發(fā)布和更新方便，快速迭代。.
劣勢：依賴網(wǎng)絡(luò)，每次打開需重新加載，有限的設(shè)備底層功能。
（二）響應(yīng)式網(wǎng)頁設(shè)計
? 1、 關(guān)于響應(yīng)式、自適應(yīng)、液態(tài)和靜態(tài)的區(qū)別
響應(yīng)式：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.
自適應(yīng)：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.
液態(tài)：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.
靜態(tài)：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.
查看：響應(yīng)式、自適應(yīng)、液態(tài)和靜態(tài)具體演示效果
2、內(nèi)容流
內(nèi)容所占的垂直空間。?內(nèi)容下方的可隨內(nèi)容增多自動向下延伸
3、相對單位
使用相對單位，而不是像素大小
4、斷點
頁面布局在預(yù)設(shè)點進行變形，如在臺式桌面上顯示3欄，而在移動設(shè)備上顯示1欄。
5、最大值和最小值
內(nèi)容可以充滿整個屏幕，如移動端，但是也要看情況。如，寬度為100%，最大寬度為1000px, 內(nèi)容就會以不超過1000px的寬度填充屏幕。
6、嵌套對象
用戶相對位置固定、彼此緊密練習(xí)的要素，可將要素放在容器中，使用像素之類的靜態(tài)單位，其對于Logo和按鈕等不需擴展的內(nèi)容非常有用。
7、移動優(yōu)先還是臺式桌面優(yōu)先
看哪種方式適合自己
8、web字體vs系統(tǒng)字體
web字體炫酷，但需要用戶下載，字越多，加載頁面時間越長；系統(tǒng)字體加載速度快，但普通。
9、位圖vs矢量圖
位圖：細節(jié)、華麗的效果；矢量圖：通常較小
參考：
<超贊！聊聊Web App、Hybrid App與Native App的設(shè)計差異>——mux.baidu
<Hybrid App中原生頁面 VS H5頁面-人人都是產(chǎn)品經(jīng)理>
響應(yīng)式網(wǎng)頁設(shè)計的9項基本原則—譯自：9 basic principles of responsive web design——Sandijs Ruluks
