說明：Native APP（原生APP），Web APP捶码，Hybrid APP（混合模式移動移用）
本文目錄：
1撕蔼、概念和優(yōu)劣勢
2豁鲤、選擇標準
3、設計要點
4罕邀、如何區(qū)分混合中的原生和H5
5畅形、名詞科普
我們?nèi)粘Ｊ褂玫腁PP應用主要分為以下幾類：
（1）原生APP，即Native APP诉探；
（2）H5頁面日熬，也就是web APP；
（3）混合頁面肾胯，即Hybrid APP竖席，結合了原生和網(wǎng)頁兩種形式。
當然敬肚，還有小程序毕荐，作為新興的輕應用，寄存于原生APP中艳馒，此處暫且不介紹憎亚，后面單獨作為一個專題第美。
1·概念和優(yōu)劣勢
（一）基本概念
Native APP：指的是原生程序别威，一般依托于操作系統(tǒng)衫樊，有很強的交互，是一個完整的應用挠乳，可拓展性強卖怜。需要下載安裝。
Web APP：指采用HTML語言寫出的APP，一般依托于瀏覽器揖赴，有一定的交互突倍，類似于現(xiàn)在的輕應用盆昙，是觸屏的網(wǎng)頁版。不需要下載安裝焊虏。
Hybrid APP：指的是半原生半網(wǎng)頁的混合類APP淡喜，很多應用采用原生App的框架，Web的內(nèi)容诵闭。
（二）優(yōu)劣勢分析：
下面主要從性能速度炼团、用戶體驗、設備流量疏尿、開發(fā)維護四個方面進行對比瘟芝。
從表中，我們可以發(fā)現(xiàn)褥琐，在速度性能锌俱、用戶體驗、設備調(diào)用方面敌呈，原生APP都具有絕對優(yōu)勢贸宏，但是在開發(fā)維護方面，原生APP的成本也比較高磕洪。相對地吭练，H5網(wǎng)頁APP開發(fā)維護較簡單，但體驗方便并不是很好析显。
我們可以根據(jù)具體的使用場景鲫咽，選擇對應的形式進行開發(fā)。
2·選擇標準
在準備做移動App時叫榕，應該先問問自己以下幾個問題：
1.?你的應用是否需要使用某些設備的特殊功能浑侥，比如攝像頭，攝像頭閃光燈或者重力加速器
2.?你的開發(fā)預算是多少晰绎？
3.?你的應用是否一定需要網(wǎng)絡
4.?你的應用的目標硬件設備是所有的移動設備還是僅僅只是一部分而已
5.?你自己已經(jīng)熟悉的開發(fā)語言
6.?這個應用對于性能要求是否苛刻
7.?如何靠這個應用贏利
我想這幾個問題應該能讓你做出明智的選擇寓落。?
另外，根據(jù)上表的4個緯度荞下，我們可以根據(jù)具體不同的需要伶选，選擇對應的形式。
（一）性能和體驗
1尖昏、當對「A-性能」「B-體驗」方面要求比較高仰税。需要加載快速、界面清晰抽诉、動效酷炫陨簇、通知及時等體驗，優(yōu)先選擇：原生迹淌。
2河绽、當對「A-性能」「B-體驗」方面要求比較低己单。包括：
（1）產(chǎn)品階段：為非核心需求，或階段性的營銷活動耙饰，運營靈活纹笼，希望被分享，對性能要求低苟跪。注重效率周期而不是性能體驗廷痘。
（2）產(chǎn)品周期：在試運營階段，功能開發(fā)不完善件已，需快速收集用戶反饋信息及時更新笋额，H5試錯成本低。注重內(nèi)容反饋而不是界面效果拨齐。
優(yōu)先選擇：H5
（二 ）硬件流量
當必須用到『C-硬件』方面的特性鳞陨。比如，需要以下權限瞻惋。
（2）需要使用定位、攝像頭援岩、感應器等設備底層權限功能歼狼；
（3）需要訪問文件系統(tǒng)。因涉及安全和用戶隱私享怀，需獲得用戶授權羽峰。
（4）需要提供離線服務。
（5）需要節(jié)省流量添瓷。
優(yōu)先選擇：原生APP
（三）開發(fā)問題
H5的開發(fā)比原生的成本低梅屉，包括了資源預算成本、重新修改成本鳞贷，對開發(fā)要求較低坯汤。
（1）當開發(fā)資源預算有限：應用須適應多個操作系統(tǒng)，選用H5.
（2）當開發(fā)技術能力很強：強到推翻之前的結論搀愧，使H5可以達到原生的效果惰聂，上述H5的缺點變成了優(yōu)勢。比如咱筛，豐富的功能接口可供開發(fā)者調(diào)用搓幌，能解決網(wǎng)速不流暢問題，迅箩。則可選擇用H5.
3·設計要點
設計在于限制溉愁。原生APP因為相對限制少，所以我們設計發(fā)揮較大饲趋。我們主要討論H5設計過程中的一些限制拐揭。
Web APP的受限因素及設計要點：
（一）網(wǎng)絡環(huán)境
對網(wǎng)絡環(huán)境依賴性較大罢缸，每次都需從服務器請求數(shù)據(jù)。設計點：
簡化不重要的動畫特效,不要求做到酷炫投队，但求好用枫疆。
簡化復雜的圖形文字樣式。
減少頁面渲染的頻率和次數(shù)敷鸦∠⑿ǎ‘
（二）受限于瀏覽器
宿主是瀏覽器，不同瀏覽器自身屬性不同扒披，如瀏覽器自帶手勢值依，頁面切換方式，鏈接跳轉方式碟案，版本兼容問題愿险。
（1）少用手勢，避免與瀏覽器手勢沖突价说。
（2）減少頁面跳轉次數(shù)辆亏，盡量在當前頁面顯示。
（3）不要使用瀏覽器加載方式鳖目，用下拉刷新扮叨，不要讓用戶有瀏覽網(wǎng)頁的感覺。
（4）頂部導航標題欄盡量使用原生的领迈，這樣在網(wǎng)速渣彻磁，內(nèi)容沒刷出來，也可以快速返回退出狸捅。
（三）系統(tǒng)限制衷蜓，平臺特性
由于HTML5語言的技術特征，無法調(diào)用系統(tǒng)級別的權限尘喝，如系統(tǒng)級別的彈窗磁浇、通知、地理信息等瞧省，且與系統(tǒng)兼容性存在問題扯夭。導致H5 APP拓展性不強，體驗相對較差鞍匾。
4·區(qū)分混合中的原生和H5頁面
混合APP結合了原生和H5兩者的特性交洗，所以它是一個這種的方案。那如何區(qū)分Hybrid中的原生頁面和H5頁面橡淑？
很多人從頁面設計上區(qū)分构拳，比如：有加載進度條，沒有底部Tab標簽欄，頂部顯示兩個導航條等置森，但是這些很多已經(jīng)被弱化斗埂。
下面介紹安卓手機如何區(qū)分原生和H5頁面。
在手機「設置」-連按五次「安卓系統(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是“超文本標記語言”的英文縮寫贮配。我們上網(wǎng)所看到網(wǎng)頁谍倦，多數(shù)都是由HTML寫成的±崂眨“超文本”是指頁面內(nèi)可以包含圖片、鏈接宴猾，甚至音樂圆存、程序等非文字元素。而“標記”指的是這些超文本必須由包含屬性的開頭與結尾標志來標記仇哆。瀏覽器通過解碼HTML沦辙，就可以把網(wǎng)頁內(nèi)容顯示出來，它也構成了互聯(lián)網(wǎng)興起的基礎讹剔。
??HTML的第一版1991年開始研發(fā)油讯，1993年發(fā)布。本來每隔一段時間HTML都應該進行更新延欠，但是自1999年12月HTML4.01發(fā)布以來陌兑，就再也沒有更新。此后的十多年由捎，互聯(lián)網(wǎng)行業(yè)發(fā)生了翻天覆地的變化兔综，人們逐漸意識到原有的HTML已經(jī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ā)布草案以來慧瘤，并未引起廣泛關注戴已，而是進入了長期的迭代優(yōu)化周期。直到去年10月W3C終于宣布碑隆，經(jīng)過長達8年的努力恭陡，HTML5標準規(guī)范最終制定完成并向全世界開放。H5標準規(guī)范的開放注定成為一個劃時代意義的事件上煤，H5工具也漸露光芒休玩，比如能可視化制作，不需要寫代碼的H5制作工具互動大師就受到了各方的關注劫狠。
????H5之所以能引發(fā)如此廣泛的效應拴疤，根本在于它不再只是一種標記語言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺独泞，像H5工具互動大師提供免插件的音視頻呐矾、圖像動畫、本地存儲以及更多酷炫而且重要的功能懦砂，并使這些應用標準化和開放化蜒犯，從而使互聯(lián)網(wǎng)也能夠輕松實現(xiàn)類似桌面的應用體驗。
??H5的最顯著的優(yōu)勢在于跨平臺性：比如用互動大師搭建的站點與應用可以兼容PC端與移動端荞膘、Windows與Linux罚随、安卓與IOS。它可以輕易地移植到各種不同的開放平臺羽资、應用平臺上淘菩，打破各自為政的局面。這種強大的兼容性可以顯著地降低開發(fā)與運營成本屠升，可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機遇潮改。
???????此外，H5的本地存儲特性也給使用者帶來了更多便利腹暖；基于H5開發(fā)的輕應用比本地APP擁有更短的啟動時間汇在，更快的聯(lián)網(wǎng)速度，而且無需下載占用存儲空間微服，特別適合手機等移動媒體趾疚。而互動大師讓開發(fā)者無需依賴第三方瀏覽器插件即可創(chuàng)建高級圖形缨历、版式、動畫以及過渡效果糙麦，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果辛孵。
H5頁面優(yōu)劣勢：（2016/5/12 14:46??從其他筆記整理）
優(yōu)勢：開發(fā)周期短，能適應多個操作系統(tǒng)赡磅，發(fā)布和更新方便魄缚，快速迭代。.
劣勢：依賴網(wǎng)絡焚廊，每次打開需重新加載冶匹，有限的設備底層功能。
（二）響應式網(wǎng)頁設計
? 1咆瘟、 關于響應式嚼隘、自適應、液態(tài)和靜態(tài)的區(qū)別
響應式：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.
液態(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.
查看：響應式袒餐、自適應飞蛹、液態(tài)和靜態(tài)具體演示效果
2、內(nèi)容流
內(nèi)容所占的垂直空間灸眼。?內(nèi)容下方的可隨內(nèi)容增多自動向下延伸
3卧檐、相對單位
使用相對單位，而不是像素大小
4焰宣、斷點
頁面布局在預設點進行變形霉囚，如在臺式桌面上顯示3欄，而在移動設備上顯示1欄匕积。
5盈罐、最大值和最小值
內(nèi)容可以充滿整個屏幕，如移動端闪唆，但是也要看情況暖呕。如，寬度為100%苞氮，最大寬度為1000px, 內(nèi)容就會以不超過1000px的寬度填充屏幕。
6瓤逼、嵌套對象
用戶相對位置固定笼吟、彼此緊密練習的要素，可將要素放在容器中霸旗，使用像素之類的靜態(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的設計差異>——mux.baidu
<Hybrid App中原生頁面 VS H5頁面-人人都是產(chǎn)品經(jīng)理>
響應式網(wǎng)頁設計的9項基本原則—譯自：9 basic principles of responsive web design——Sandijs Ruluks
