WEB APP、HYBRID APP與NATIVE APP的綜合對(duì)比說(shuō)明.doc

WEB APP、HYBRID APP與NATIVE APP的綜合對(duì)比說(shuō)明目前主流應(yīng)用程序大體分為三類：Web App、Hybrid App、 Native App。一、Web App、Hybrid App、Native App 縱向?qū)Ρ仁紫?，我們?lái)看看什么是 Web App、Hybrid App、 Native App。1. Web APPWeb App 指采用Html5語(yǔ)言寫(xiě)出的App，不需要下載安裝。類似于現(xiàn)在所說(shuō)的輕應(yīng)用。生存在瀏覽器中的應(yīng)用，基本上可以說(shuō)是觸屏版的網(wǎng)頁(yè)應(yīng)用。優(yōu)點(diǎn)：（1）開(kāi)發(fā)成本低，（2）更新快，（3）更新無(wú)需通知用戶，不需要手動(dòng)升級(jí)，（4）能夠跨多個(gè)平臺(tái)和終端。缺點(diǎn)：（1）臨時(shí)性的入口（2）無(wú)法獲取系統(tǒng)級(jí)別的通知，提醒，動(dòng)效等等(若需要可變相通過(guò)手機(jī)等第三方工具形式在對(duì)接實(shí)現(xiàn))（3）用戶留存率低（4）設(shè)計(jì)受限制諸多（5）體驗(yàn)較差 (6) 相對(duì)而言網(wǎng)絡(luò)環(huán)境要求較大 (7) 手機(jī)上本地資源調(diào)用上(相機(jī)、GPS、通訊錄等)有一定局限性(8) 受限瀏覽器版本(相對(duì)而言在設(shè)計(jì)時(shí)可能考慮基于微信和QQ瀏覽器的專項(xiàng)定制開(kāi)發(fā))2. Hybrid AppHybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問(wèn)的內(nèi)容是 Web 。例如Store里的新聞?lì)怉PP，視頻類APP普遍采取的是Native的框架，Web的內(nèi)容。Hybrid App 極力去打造類似于Native App 的體驗(yàn)，但仍受限于技術(shù)，網(wǎng)速，等等很多因素。尚不完美。3. Native AppNative APP 指的是原生程序，一般依托于操作系統(tǒng)，有很強(qiáng)的交互，是一個(gè)完整的App，可拓展性強(qiáng)。需要用戶下載安裝使用。優(yōu)點(diǎn)：（1）打造完美的用戶體驗(yàn)（2）性能穩(wěn)定（3）操作速度快，上手流暢（4）訪問(wèn)本地資源（通訊錄，相冊(cè)）（5）設(shè)計(jì)出色的動(dòng)效，轉(zhuǎn)場(chǎng)，（6）擁有系統(tǒng)級(jí)別的貼心通知或提醒（7）用戶留存率高(注：看似的效果，源于對(duì)裝機(jī)量能有所監(jiān)控，但僅為虛數(shù)，時(shí)間上這個(gè)未來(lái)必將被摒棄，更多要體現(xiàn)注冊(cè)用戶數(shù)、用戶活動(dòng)率等所取代)缺點(diǎn)：（1）分發(fā)成本高（不同平臺(tái)有不同的開(kāi)發(fā)語(yǔ)言和界面適配）（2）維護(hù)成本高（例如一款A(yù)pp已更新至V5版本，但仍有用戶在使用V2， V3， V4版本，需要更多的開(kāi)發(fā)人員維護(hù)之前的版本）（3）更新緩慢，根據(jù)不同平臺(tái)，提交審核上線 等等不同的流程，需要經(jīng)過(guò)的流程較復(fù)雜二、Web App、Hybrid App、Native App 技術(shù)特性由上圖可見(jiàn)，Web APP 的開(kāi)發(fā)基于Html5語(yǔ)言。而Html5語(yǔ)言本身又有著不可避免的局限性。正是這些局限性的存在，使得Web App在體驗(yàn)中要遜于Native App。三、Web App受限制因素及設(shè)計(jì)要點(diǎn)相比Native App，Web App體驗(yàn)中受限于以上5個(gè)因素：網(wǎng)絡(luò)環(huán)境，渲染性能，平臺(tái)特性，受限于瀏覽器，系統(tǒng)限制。1. 網(wǎng)絡(luò)環(huán)境，渲染性能Web APP對(duì)網(wǎng)絡(luò)環(huán)境的依賴性較大，因?yàn)閃eb APP中的H5頁(yè)面，當(dāng)用戶使用時(shí)，去服務(wù)器請(qǐng)求顯示頁(yè)面。如果此時(shí)用戶恰巧遇到網(wǎng)速慢，網(wǎng)絡(luò)不穩(wěn)定等其他環(huán)境時(shí)，用戶請(qǐng)求頁(yè)面的效率大打折扣，在用戶使用中會(huì)出現(xiàn)不流暢，斷斷續(xù)續(xù)的不良感受。同時(shí)，H5技術(shù)自身渲染性能較弱：對(duì)復(fù)雜的圖形樣式，多樣的動(dòng)效，自定義字體等的支持性不強(qiáng)。因此，基于網(wǎng)絡(luò)環(huán)境和渲染性能的影響，在設(shè)計(jì)H5頁(yè)面時(shí)，應(yīng)注意以下幾點(diǎn)：o 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效o 簡(jiǎn)化復(fù)雜的圖形文字樣式o 減少頁(yè)面渲染的頻率和次數(shù)從下圖移動(dòng)Web版 jing.fm和Native版jing對(duì)比后可以看出：Web APP首頁(yè)去除冗余的功能，回溯本源，只給用戶提供了jing.fm最初的本質(zhì)需求電臺(tái)。既符合H5精簡(jiǎn)功能又達(dá)到了突出核心功能的設(shè)計(jì)原則。無(wú)疑給用戶眼前一亮的氣息。再如：百度最新推出的直達(dá)號(hào)，以良子健身為例：從Native App和Web App（百度直達(dá)號(hào)）的對(duì)比中，我們可以看出Native良子以九宮格的形式展現(xiàn)，且屬于雙重導(dǎo)航，功能入口太多；弊端是用戶不知道聚焦在哪里，分散用戶的注意力。而Web版良子整合并減少了導(dǎo)航的入口，增強(qiáng)用戶的專注度；界面清爽，整潔，很好地傳達(dá)了良子本身的寓意輕松、愉悅、休閑、舒適。2. 受限于瀏覽器通常Web App生存于瀏覽器里，宿主是瀏覽器。不同的瀏覽器自身的屬性不盡相同，如：瀏覽器自帶的手勢(shì)，頁(yè)面切換方式，鏈接跳轉(zhuǎn)方式，版本兼容問(wèn)題等等。例如下圖：UC 瀏覽器和百度瀏覽器自身支持手勢(shì)切換頁(yè)面。手指從左側(cè)滑動(dòng)頁(yè)面，返回至上一級(jí)。百度手機(jī)助手H5頁(yè)面，頂部Banner支持手勢(shì)左右滑動(dòng)切換。這一操作與瀏覽器自身手勢(shì)是沖突的。再如，基于瀏覽器的Web APP在打開(kāi)新的模塊中的頁(yè)面時(shí)，大多會(huì)新開(kāi)窗口來(lái)展現(xiàn)。例如用戶在使用購(gòu)物類APP時(shí)，瀏覽每日精選模塊時(shí)，每當(dāng)打開(kāi)新的商品時(shí)，默認(rèn)新開(kāi)一個(gè)窗口。這樣的優(yōu)劣勢(shì)顯而易見(jiàn)：優(yōu)勢(shì)是能夠記錄用戶瀏覽過(guò)的痕跡，瀏覽過(guò)的商品，以便后續(xù)橫向?qū)Ρ?；劣?shì)是過(guò)多的頁(yè)面容易使用戶迷失在頁(yè)面中。正如Google開(kāi)發(fā)手冊(cè)里描述：當(dāng)用戶打開(kāi)一個(gè)Web App的時(shí)候，他們期待這個(gè)應(yīng)用就像是一個(gè)單個(gè)應(yīng)用，而不是一系列網(wǎng)頁(yè)的結(jié)合。然而，什么情況下需要跳轉(zhuǎn)頁(yè)面，什么情況下在當(dāng)前頁(yè)面展示則需要設(shè)計(jì)師細(xì)致考量。因此，Web App基于瀏覽器的特性，從設(shè)計(jì)角度應(yīng)該遵循以下了兩點(diǎn)：少用手勢(shì)，避免與瀏覽器手勢(shì)沖突。減少頁(yè)面跳轉(zhuǎn)次數(shù)，盡量在當(dāng)前頁(yè)面顯示。3. 系統(tǒng)限制，平臺(tái)特性由于Html5語(yǔ)言的技術(shù)特性，無(wú)法調(diào)用系統(tǒng)級(jí)別的權(quán)限。例如，系統(tǒng)級(jí)別的彈窗，系統(tǒng)級(jí)別的通知，地理信息，通訊錄，語(yǔ)音等等。且與系統(tǒng)的兼容性也會(huì)存在一些問(wèn)題。以上限制通常導(dǎo)致APP的拓展性不強(qiáng)，體驗(yàn)相對(duì)較差。例如百度地圖：Web版地圖基于瀏覽器展現(xiàn)，因此，不能全屏顯示地圖，給用戶的眼界帶來(lái)局限感；相反，Native 版地圖以全屏展現(xiàn)的形式，很好的拓展了用戶的視野。整個(gè)界面干凈簡(jiǎn)潔，首頁(yè)去除冗余功能。在制定路線的體驗(yàn)中，如圖：Web 版地圖耗費(fèi)的流量大于Native版，且不能預(yù)先緩存離線地圖。對(duì)于地理位置的判斷也是基于宿主瀏覽器，而非Web地圖本身。獲取路線后，對(duì)于更換到達(dá)方式，相對(duì)來(lái)說(shuō)是不便利的。相反，Native 版地圖，能夠直接訪問(wèn)用戶的地理位置，能夠很清晰的為用戶展現(xiàn)App規(guī)劃的路線，并能輕松的查看多種路線方案，以便做出符合自己的最佳方案。對(duì)于切換公交，走路，自駕等路線方式也是只需一鍵操作。Native 版地圖相對(duì)于 Web版地圖增加更多情感化，易用的功能，如：能夠記錄用戶的生活軌跡，記錄用戶的點(diǎn)滴足跡，能夠享受躲避擁堵方案等。而Web版地圖基于技術(shù)框架，很難實(shí)現(xiàn)以上功能，從用戶體驗(yàn)角度來(lái)看，弱于Native版地圖。四、小結(jié)綜述所述，在設(shè)計(jì)Web APP時(shí)，應(yīng)當(dāng)遵循以下幾點(diǎn)：1. 簡(jiǎn)化o 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效o 簡(jiǎn)化復(fù)雜的圖形文字樣式2. 少用o 少用手勢(shì)，避免與瀏覽器手勢(shì)沖突o 少用彈窗3. 減少o 減少頁(yè)面內(nèi)容o 減少控件數(shù)量o 減少頁(yè)面跳轉(zhuǎn)次數(shù)，盡量在當(dāng)前頁(yè)面顯示4. 增強(qiáng)o 增強(qiáng)Loading時(shí)的趣味性o 增強(qiáng)頁(yè)面主次關(guān)系o 增強(qiáng)控件復(fù)用性5. 對(duì)比小結(jié)HTML5原生APP兼容和跨平臺(tái)H5基于瀏覽器開(kāi)發(fā)，所以對(duì)網(wǎng)絡(luò)和設(shè)備的多樣化支持較好，又可以在不同的平臺(tái)（微信公眾號(hào)、瀏覽器等）重復(fù)使用；需要對(duì)不同的機(jī)型適配，IOS和android需分別開(kāi)發(fā)；版本升級(jí)維護(hù)一套版本即可，且隨時(shí)升級(jí)、即時(shí)生效；IOS和android分別發(fā)布版本，安裝包更新需應(yīng)用商店審核（一般1-3個(gè)工作日）；離線使用依賴于網(wǎng)絡(luò)；可以緩存數(shù)據(jù)，不涉及網(wǎng)絡(luò)交互的功能可直接離線使用；占用手機(jī)空間較少占用手機(jī)空間較多占用手機(jī)空間調(diào)用本地應(yīng)用和設(shè)備（語(yǔ)音、攝像頭、短信、GPS、藍(lán)牙、重力感應(yīng)等）對(duì)攝像頭、陀螺儀等設(shè)備調(diào)取雖技術(shù)上能實(shí)現(xiàn)，但支持效果較差，且每次調(diào)取都會(huì)警告，影響用戶體驗(yàn)；調(diào)用方便，且使用過(guò)程相對(duì)流暢；運(yùn)行速度除設(shè)備性能外，易受到網(wǎng)絡(luò)情況影響；對(duì)網(wǎng)絡(luò)情況依賴性小音頻、視頻通過(guò)插件實(shí)現(xiàn)，影響頁(yè)面加載速度；兩種方式：1、 H5嵌入；2、 嵌入原生應(yīng)用中（無(wú)需加載插件）；開(kāi)發(fā)周期開(kāi)發(fā)周期相對(duì)較短，擴(kuò)展性強(qiáng)需要根據(jù)不同的版本來(lái)單獨(dú)開(kāi)發(fā)，所以開(kāi)發(fā)周期相對(duì)較長(zhǎng)；五、綜合評(píng)述結(jié)論如下：1、在跨平臺(tái)上，HTML5勝出；HTML5采用網(wǎng)絡(luò)通用語(yǔ)言，不用考慮終端設(shè)備或者操作系統(tǒng)的不同。2、在用戶體驗(yàn)和表現(xiàn)上原生APP開(kāi)發(fā)勝出。在用戶體驗(yàn)和表現(xiàn)這個(gè)方面，HTML5面臨不同瀏覽器的功能接入問(wèn)題，同時(shí)在提供用戶展示圖形界面和數(shù)據(jù)展現(xiàn)的豐富性方面不足。3、在開(kāi)發(fā)速度和成本方面，HTML5勝出。HTML5的開(kāi)發(fā)確實(shí)比原生開(kāi)發(fā)更節(jié)省時(shí)間和人力，開(kāi)發(fā)周期相