名詞介紹

Native APP

Native APP 指的是原生程序绽昼，一般依托于操作系統(tǒng)唯鸭，有很強(qiáng)的交互，是一個完整的App硅确，可拓展性強(qiáng)目溉，需要用戶下載安裝使用。（簡單來說菱农，原生應(yīng)用是特別為某種操作系統(tǒng)開發(fā)的缭付，比如iOS、Android循未、黑莓等等陷猫，它們是在各自的移動設(shè)備上運(yùn)行的）

該模式通常是由“云服務(wù)器數(shù)據(jù)+APP應(yīng)用客戶端”兩部份構(gòu)成秫舌，APP應(yīng)用所有的UI元素、數(shù)據(jù)內(nèi)容绣檬、邏輯框架均安裝在手機(jī)終端上足陨。

原生應(yīng)用程序是某一個移動平臺（比如iOS或安卓）所特有的，使用相應(yīng)平臺支持的開發(fā)工具和語言（比如iOS平臺支持Xcode和Objective-C娇未，安卓平臺支持Eclipse和Java）墨缘。原生應(yīng)用程序看起來（外觀）和運(yùn)行起來（性能）是最佳的。

WebAPP

Web App 指采用Html5語言寫出的App零抬，不需要下載安裝镊讼。類似于現(xiàn)在所說的輕應(yīng)用。生存在瀏覽器中的應(yīng)用平夜，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用蝶棋。（Web應(yīng)用本質(zhì)上是為移動瀏覽器設(shè)計的基于Web的應(yīng)用，它們是用普通Web開發(fā)語言開發(fā)的忽妒，可以在各種智能手機(jī)瀏覽器上運(yùn)行）

Web App開發(fā)即是一種框架型APP開發(fā)模式（HTML5 APP 框架開發(fā)模式）玩裙，該開發(fā)具有跨平臺的優(yōu)勢，該模式通常由“HTML5云網(wǎng)站+APP應(yīng)用客戶端”兩部份構(gòu)成段直，APP應(yīng)用客戶端只需安裝應(yīng)用的框架部份献酗，而應(yīng)用的數(shù)據(jù)則是每次打開APP的時候，去云端取數(shù)據(jù)呈現(xiàn)給手機(jī)用戶坷牛。

HTML5應(yīng)用程序使用標(biāo)準(zhǔn)的Web技術(shù)，通常是HTML5很澄、JavaScript和CSS京闰。這種只編寫一次、可到處運(yùn)行的移動開發(fā)方法構(gòu)建的跨平臺移動應(yīng)用程序可以在多個設(shè)備上運(yùn)行甩苛。雖然開發(fā)人員單單使用HTML5和JavaScript就能構(gòu)建功能復(fù)雜的應(yīng)用程序蹂楣，但仍然存在一些重大的局限性，具體包括會話管理讯蒲、安全離線存儲以及訪問原生設(shè)備功能（攝像頭痊土、日歷和地理位置等）。

HybridAPP

Hybrid APP指的是半原生半Web的混合類App墨林。需要下載安裝赁酝，看上去類似Native App，但只有很少的UI Web View旭等，訪問的內(nèi)容是 Web 酌呆。

混合應(yīng)用程序讓開發(fā)人員可以把HTML5應(yīng)用程序嵌入到一個細(xì)薄的原生容器里面，集原生應(yīng)用程序和HTML5應(yīng)用程序的優(yōu)點(diǎn)（及缺點(diǎn)）于一體搔耕。

混合應(yīng)用大家都知道是原生應(yīng)用和Web應(yīng)用的結(jié)合體隙袁，采用了原生應(yīng)用的一部分、Web應(yīng)用的一部分，所以必須在部分在設(shè)備上運(yùn)行菩收、部分在Web上運(yùn)行梨睁。不過混合應(yīng)用中比例很自由，比如Web 占90%娜饵，原生占10%坡贺；或者各占50%。

有些應(yīng)用最開始就是包了個原生客戶端的殼划咐，其實(shí)里面是HTML5的網(wǎng)頁拴念，后來才推出真正的原生應(yīng)用。比較知名的APP褐缠，比如手機(jī)百度和淘寶客戶端 Android版政鼠，走的也是Hybrid App的路線，不過手機(jī)百度里面封裝的不是WebView队魏，而是自己的瀏覽內(nèi)核公般，所以體驗(yàn)上更像客戶端，更高效胡桨。

三種APP技術(shù)特性

Native APP

Native APP的優(yōu)點(diǎn)：

能夠與移動硬件設(shè)備的底層功能官帘，比如個人信息，攝像頭以及重力加速器等等昧谊。
可訪問手機(jī)所有功能（GPS刽虹、攝像頭）。
速度更快呢诬、性能高涌哲、整體用戶體驗(yàn)不錯。
可線下使用（因?yàn)槭窃诟鶺eb相對地平臺上使用的）尚镰。
支持大量圖形和動畫
容易發(fā)現(xiàn)（在App Store里面和應(yīng)用商店里面）和重新發(fā)現(xiàn)（應(yīng)用圖標(biāo)會一直在主頁上）阀圾，對于蘋果而言，應(yīng)用下載能創(chuàng)造盈利（當(dāng)然App Store抽取20-30% 的營收）
比移動Web App運(yùn)行快
一些商店與賣場會幫助用戶尋找原生App
官方賣場的應(yīng)用審核流程會保證讓用戶得到高質(zhì)量以及安全的App
官方會發(fā)布很多開發(fā)工具或者人工支持來幫助你的開發(fā)
頁面存放于本地
Native APP的缺點(diǎn)：

開發(fā)成本高狗唉，尤其是當(dāng)需要多種移動設(shè)備來測試時
因?yàn)槭遣煌拈_發(fā)語言初烘，所以開發(fā)，維護(hù)成本也高
因?yàn)橛脩羰褂玫腁pp版本不同分俯，所以你維護(hù)起來很困難
支持設(shè)備非常有限（一般是哪個系統(tǒng)就在哪個平臺專屬設(shè)備上用）
官方賣場審核流程復(fù)雜且慢肾筐，會嚴(yán)重影響你的發(fā)布進(jìn)程
上線時間不確定（App Store審核過程不一）
內(nèi)容限制（App Store限制）
獲得新版本時需重新下載應(yīng)用更新（提示用戶下載跟新，用戶體驗(yàn)差）
WebAPP

WebAPP的優(yōu)點(diǎn)：

跨平臺開發(fā)缸剪、用戶不需要去賣場來下載安裝App,開發(fā)速度快
任何時候都可以發(fā)布App局齿，因?yàn)楦静恍枰俜劫u場的審核
純H5 APP快速開發(fā)、低成本橄登、多平臺抓歼，與很多APP開發(fā)方式不同的是-圖文混合的排版（正是這些復(fù)雜多變的CSS樣式消耗了性能讥此，但是它帶來了排版的多樣性，能夠細(xì)致到每一個字寬行高和風(fēng)格的像素級處理谣妻，才是H5的優(yōu)異之處）
支持設(shè)備廣泛
較低的開發(fā)成本
可即時上線
無內(nèi)容限制
用戶可以直接使用最新版本（自動更新萄喳，不需用戶手動更新）
跨平臺開發(fā)
用戶不需要去賣場來下載安裝App
如果你已經(jīng)有了一個Web App，你可以使用 responsive web design來輔助改進(jìn)
頁面存放于web服務(wù)器（受限于UIwebview）（減少了內(nèi)存蹋半，但是會增加服務(wù)器的壓力）
WebAPP的缺點(diǎn)：

只能使用有限的移動硬件設(shè)備功能,無法使用很多移動硬件設(shè)備的獨(dú)特功能
要同時支持多種移動設(shè)備的瀏覽器讓開發(fā)維護(hù)的成本也不低（也要適配不同的瀏覽器）他巨，如果用戶使用更多的新型瀏覽器，那問題就更不好處理了
對于用戶來說减江，這種App很難被用戶發(fā)現(xiàn)
這里的數(shù)據(jù)獲取都是在資源頁面上異步完成的染突，因?yàn)橹挥羞@樣才能讓這些資源頁面完成預(yù)加載或者渲染。（異步的話都涉及到耗時的問題）
表現(xiàn)差（對聯(lián)網(wǎng)的要求比較大）
用戶體驗(yàn)沒那么炫
圖片和動畫支持性不高
沒法在App Store中下載辈灼、無法通過應(yīng)用下載獲得盈利機(jī)會
對手機(jī)特點(diǎn)有限制（攝像頭份企、GPS等）
無法體會包括會話管理、安全離線存儲以及訪問原生設(shè)備功能（攝像頭巡莹、日歷和地理位置等）
頁面跳轉(zhuǎn)更加費(fèi)力司志，不穩(wěn)定感更強(qiáng)
更小的頁面空間（由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間），更大的信息記憶負(fù)擔(dān)
導(dǎo)航不明顯降宅，原有底部導(dǎo)航消失骂远，有效的導(dǎo)航遇到挑戰(zhàn)
交互動態(tài)效果收到限制，影響一些頁面場景腰根、邏輯的理解激才。比如登錄注冊流程的彈出、完成及異常退出额嘿，做好文字提示贸营。
Hybrid APP

（1）第一種方案：Web架構(gòu)為重

優(yōu)點(diǎn)：

全Web開發(fā)，一定程度上有利于Web前端技術(shù)人員快速地構(gòu)建頁面樣式
有利于在不同的平臺上面展示同一個交互層
便于調(diào)試岩睁，開發(fā)的時候可以通過瀏覽器的
方式進(jìn)行調(diào)試，工具豐富揣云。
兼容多平臺
順利訪問手機(jī)的多種功能
App Store中可下載（Wen應(yīng)用套用原生應(yīng)用的外殼）
可線下使用
頁面存放于本地和服務(wù)器兩種方式捕儒，部署應(yīng)用程序(受限于UIwebview)
缺點(diǎn)：

不確定上線時間
雖然說你可以專注在界面以及交互開發(fā)上了，但是這頁會成為一個缺點(diǎn)邓夕，比如說要仿造一個iOS的默認(rèn)設(shè)置界面刘莹，就需要大量的html以及css代碼了，而且效果不一定和iPhone上面的界面一樣好
用戶體驗(yàn)不如本地應(yīng)用
性能稍慢（需要連接網(wǎng)絡(luò)）
技術(shù)還不是很成熟（比如Facebook現(xiàn)在的應(yīng)用屬于混合應(yīng)用它可以在許多App Store暢通無阻焚刚，但是摻雜了大量Web特性点弯，所以它運(yùn)行速度比較慢，而現(xiàn)在為了提高性能FB又決定采用原生應(yīng)用）
（2）第二種方案：編譯轉(zhuǎn)換方式

優(yōu)點(diǎn)：

利用自己熟悉的語言進(jìn)行應(yīng)用開發(fā)矿咕。

缺點(diǎn)：

嚴(yán)重依賴于其工具廠商提供的工具包抢肛，調(diào)試的時候就要有全套的工具狼钮。

（3）第三種方案：Native架構(gòu)為重（主流）

優(yōu)點(diǎn)：

最穩(wěn)定的Hybrid App開發(fā)方式了，交互層的效率上由Native的東西解決了捡絮，而且架構(gòu)上基本就是在App內(nèi)寫網(wǎng)頁熬芜，連App Store都是采用了該種方案；

缺點(diǎn)：

團(tuán)隊至少需要兩個工程師福稳，一個是Web的涎拉，一個是iOS或者Android的。當(dāng)然如果開發(fā)人員會兩種技術(shù)也可獨(dú)立承擔(dān)的圆；還是運(yùn)行效率境氢，要權(quán)衡好多少界面采用Web來渲染跑揉，畢竟WebView的效率會相對降低，以前Facebook就是因?yàn)閃eb的渲染效率低下，把整個應(yīng)用改為原生的解決方案挡鞍。當(dāng)然這里面可以通過優(yōu)化來解決，但是優(yōu)化也是有限度的酣藻。

3種APP對比分析

對用戶來講差別主要是用戶體驗(yàn)笑窜，如果WebApp做得好也能接近原生App的效果；對于開發(fā)人員瓤檐，WebApp更加易于移植到多個平臺赂韵，減少非常多的工作量。

1.主要區(qū)別

原生APP中：

每一種移動操作系統(tǒng)都需要獨(dú)立的開發(fā)項(xiàng)目挠蛉；
每種平臺都需要獨(dú)立的開發(fā)語言祭示。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等，需要使用各自的軟件開發(fā)包谴古，開發(fā)工具以及各自的控件质涛。
Native App（原生型APP）需要開發(fā)“云服務(wù)器數(shù)據(jù)中心”和“APP客戶端”
每次獲取最新的APP功能，需要升級APP應(yīng)用
原生型APP應(yīng)用的安裝包相對較大掰担，包含UI元素汇陆、數(shù)據(jù)內(nèi)容、邏輯框架带饱；
手機(jī)用戶無法上網(wǎng)也可訪問APP應(yīng)用中以前下載的數(shù)據(jù)
原生型的APP可以調(diào)用手機(jī)終端的硬件設(shè)備（語音毡代、攝像頭、短信勺疼、GPS教寂、藍(lán)牙、重力感應(yīng)等）
APP應(yīng)用更新新功能执庐，涉及到每次要向各個應(yīng)用商店進(jìn)行
提交審核酪耕。
適用企業(yè)：游戲、電子雜志轨淌、管理應(yīng)用迂烁、物聯(lián)網(wǎng)等無需經(jīng)常更新程序框架的APP應(yīng)用看尼。

WebAPP中：

因?yàn)檫\(yùn)行在移動設(shè)備的瀏覽器上，所以只需要一個開發(fā)項(xiàng)目
這種應(yīng)用可以使用HTML5,CSS3以及JavaScript以及服務(wù)器端語言來完成（PHP,Ruby on Rails,Python）婚被，這里可沒有標(biāo)準(zhǔn)的SDK狡忙，基本任意選擇別忘了有一些跨平臺的開發(fā)工具，比如PhoneGap, Sencha Touch 2址芯，APPcan以及Appcelerator Titanium等等灾茁。
Web APP需開發(fā)“html5云網(wǎng)站”和“APP客戶端”
每次打開APP，都要通過APP框架向云網(wǎng)站取UI及數(shù)據(jù)
手機(jī)用戶無法上網(wǎng)則無法訪問APP應(yīng)用中的數(shù)據(jù)
框架型的APP無法調(diào)用手機(jī)終端的硬件設(shè)備谷炸，（語音北专、攝像頭、短信旬陡、GPS拓颓、藍(lán)牙、重力感應(yīng)等）
框架型APP的訪問速度受手機(jī)終端上網(wǎng)的限制描孟，每次使用均會消耗一定的手機(jī)上網(wǎng)流量
框架型APP應(yīng)用的安裝包小巧驶睦，只包含框架文件，而大量的UI元素匿醒、數(shù)據(jù)內(nèi)容剛存放在云端
APP用戶每次都可以訪問到實(shí)時的最新的云端數(shù)據(jù)
APP用戶無須頻繁更新APP應(yīng)用场航，與云端實(shí)現(xiàn)的是實(shí)時數(shù)據(jù)交互
適用企業(yè)：電子商務(wù)、金融廉羔、新聞資訊溉痢、企業(yè)集團(tuán)，需經(jīng)常更新內(nèi)容的APP應(yīng)用憋他。

2.開發(fā)難度區(qū)別

移動web和混合App開發(fā)難度對于web開發(fā)者來說相對較低孩饼，而且可以充分利用現(xiàn)有的web開發(fā)工具和工作流程

3.發(fā)布渠道和更新方式

混合App可以在應(yīng)用商店App Store發(fā)布，但可以自主更新竹挡，而原生App的更新必須通過應(yīng)用商店App Store镀娶。

4.移動設(shè)備本地API訪問

混合App可以通過JavaScript API訪問到移動設(shè)備的攝像頭、GPS揪罕；而原生App可以通過原生編程語言訪問設(shè)備所有功能梯码。

5.跨平臺和可移植性

基于瀏覽器的移動web最好的可移植性和跨平臺表現(xiàn)；混合App也能節(jié)省跨平臺的時間和成本耸序，只需編寫一次核心代碼就可部署到多個平臺，而原生App的跨平臺性能最差鲁猩。

6.搜索引擎友好

只有移動web對搜索引擎友好坎怪，可與在線營銷無縫整合。

7.貨幣化

混合App除廣告外廓握，還支持付費(fèi)下載及程序內(nèi)購買搅窿；原生App的程序內(nèi)購買金額2012年首次超過下載收費(fèi)嘁酿。

8.消息推送

只有混合App和原生App支持消息推送，這能增加用戶忠誠度男应。

9.獲取方法區(qū)別

原生APP中：
直接下載到設(shè)備
以獨(dú)立的應(yīng)用程序運(yùn)行(并不需要瀏覽器)
用戶必須手動去下載并安裝這些原生App
有一些商店與賣場來幫助用戶尋找你的App闹司，

WebAPP中：
從移動設(shè)備上的瀏覽器訪問
不需要安裝額外的軟件
軟件更新只需要服務(wù)器就夠了
因?yàn)楝F(xiàn)在沒有什么商品或賣場提供這種App，所以如何搜索這些移動Web App相當(dāng)不簡單

10.版本控制區(qū)別

原生APP中：
用戶可以自由地選擇是否更新軟件版本沐飘，所以會出現(xiàn)不同用戶同時使用不同版本的情況

WebAPP中：
所有的用戶都是用同樣的版本

如何判斷一個混合APP開發(fā)的頁面形式

斷網(wǎng)檢查不是絕對的游桩，web app并不一定是在遠(yuǎn)程服務(wù)器上的， 也能pack在程序里耐朴，load本地的資源也能算是web app借卧。

在系統(tǒng)設(shè)置里進(jìn)入“開發(fā)者選項(xiàng)”，勾選“顯示布局邊界”筛峭，然后就可以看得出來了铐刘。（比較靠譜）

一般web界面有明顯的加載的過程，你看頁面的最上面一般有一個加載的進(jìn)度條影晓，不過這個進(jìn)度條一般加載也比較快镰吵，有些應(yīng)用在這樣的說明頁面會有刷新操作、這樣你斷網(wǎng)再刷新就會提示網(wǎng)址找不到

網(wǎng)頁的一般就在手機(jī)的當(dāng)前界面加載一個url地址挂签。

（快速）滾動起來是否比較卡

圖片加載失敗的圖標(biāo)

怎樣選擇開發(fā)模式（視情況而定）

近年來隨著移動設(shè)備類型的變多疤祭，操作系統(tǒng)的變多，用戶需求的增加竹握，對于每個項(xiàng)目啟動前画株，大家都會考慮到的成本，團(tuán)隊成員啦辐，技術(shù)成熟度谓传，時間，項(xiàng)目需求等一堆的因素芹关。
因此续挟，開發(fā)App的方案已經(jīng)變得越來越多了。無數(shù)的人參與或者看到過一個討論：原生開發(fā)還是混合開發(fā)侥衬，又或者是Web開發(fā)诗祸？要結(jié)實(shí)踐和自身的情況。

比如轴总，你的預(yù)算是多少直颅？預(yù)算充足的話可以開發(fā)幾個本地應(yīng)用加一個Web應(yīng)用
你的應(yīng)用需要什么時候面市？Web應(yīng)用可以很快地開發(fā)然后直接推出來
你的應(yīng)用需要包含什么特點(diǎn)和功能怀樟？如果跟手機(jī)的某些功能深度整合了功偿，比如攝像頭，需要呈現(xiàn)大量圖形和動畫就選原生 應(yīng)用好點(diǎn)
你的應(yīng)用是否一定需要網(wǎng)絡(luò)
你的應(yīng)用的目標(biāo)硬件設(shè)備是所有的移動設(shè)備還是僅僅只是一部分而已
你自己已經(jīng)熟悉的開發(fā)語言往堡，或者說現(xiàn)有資源
7.這個應(yīng)用對于性能要求是否苛刻

8.如何靠這個應(yīng)用贏利我想這幾個問題應(yīng)該能讓你做出明智的選擇

9.你的應(yīng)用是否需要使用某些設(shè)備的特殊功能械荷，比如攝像頭共耍，攝像頭閃光燈或者重力加速器

10.移動Web無所不在，移動Web是目前唯一的支持各種設(shè)備訪問的平臺吨瞎，與桌面Web一樣痹兜，移動Web支持各種標(biāo)準(zhǔn)的協(xié)議。移動Web也是唯一一個可供開發(fā)者發(fā)布移動應(yīng)用的颤诀，平臺字旭，它將各種移動交互與桌面任務(wù)有效地連接了起來；而開發(fā)Native App可以充分利用設(shè)備的特性着绊，而這一點(diǎn)往往是Web瀏覽器做不到的谐算，所以對一個產(chǎn)品本身而言，Native App是最佳的選擇归露。

11.為應(yīng)用收費(fèi)(人們的觀念webApp是不收費(fèi)的)用原生開發(fā)模式

12.Web Apps是唯一一個經(jīng)久不衰的移動內(nèi)容洲脂、服務(wù)、應(yīng)用開發(fā)平臺剧包。

13.使用定位功能恐锦、使用攝像頭、使用感應(yīng)器疆液、訪問文件系統(tǒng)一铅、離線用戶、多點(diǎn)觸控：雙擊堕油、縮放及其他組合的用戶界面（UI）手勢潘飘；快速圖形API：原生平臺為你提供了顯示最快速的圖形。如果你顯示只有寥寥幾個元素的靜態(tài)屏幕掉缺，這個功能可能不太重要卜录，但如果你使用大量數(shù)據(jù)，需要快速刷新眶明，這項(xiàng)功能卻很重要艰毒；流暢動畫：與快速圖形API有關(guān)的是實(shí)現(xiàn)流暢動畫的功能。這在動畫搜囱、高度交互的報表或者轉(zhuǎn)換照片和聲音的計算密集型算法中顯得尤為重要丑瞧；內(nèi)置部件：攝像頭、地址簿蜀肘、地理位置及設(shè)備的其他原生功能可以無縫地整合到移動應(yīng)用程序中绊汹。另一個重要的內(nèi)置部件是加密的存儲裝置，這方面稍后會有詳細(xì)介紹扮宠；易于使用：原生平臺是人們耳熟能詳?shù)钠脚_西乖，所以如果你在這個熟悉的平臺上添加人們期望的所有原生功能，也就擁有了一款使用起來完全更容易的應(yīng)用程序時用原生

14.是原生App還是移動Web App，主要受商業(yè)目標(biāo)浴栽，目標(biāo)用戶，以及技術(shù)需要這些因素影響的轿偎。其實(shí)更多時候你也不要為選擇那種App模式煩惱典鸡，正如本文提到，類似Facebook這樣的公司就為用戶提供了兩種選擇坏晦。然而對于大部分人來說萝玷，預(yù)算，資源限制將會逼迫我們只能選擇其中一種（或者只能以其中一種為重點(diǎn)

六昆婿、WebAPP和原生APP交互區(qū)別
1.Web APP受限因素

相比Native App球碉，Web App體驗(yàn)中受限于以上5個因素：網(wǎng)絡(luò)環(huán)境，渲染性能仓蛆，平臺特性睁冬，瀏覽器限制，系統(tǒng)限制看疙。

（1）網(wǎng)絡(luò)環(huán)境豆拨，渲染性能

Web APP對網(wǎng)絡(luò)環(huán)境的依賴性較大，因?yàn)閃eb APP中的H5頁面能庆，當(dāng)用戶使用時施禾，去服務(wù)器請求顯示頁面。如果此時用戶恰巧遇到網(wǎng)速慢搁胆，網(wǎng)絡(luò)不穩(wěn)定等其他環(huán)境時弥搞，用戶請求頁面的效率大打折扣，在用戶使用中會出現(xiàn)不流暢渠旁，斷斷續(xù)續(xù)的不良感受攀例。同時，H5技術(shù)自身渲染性能較弱：對復(fù)雜的圖形樣式一死，多樣的動效肛度，自定義字體等的支持性不強(qiáng)。 因此投慈，基于網(wǎng)絡(luò)環(huán)境和渲染性能的影響承耿，在設(shè)計H5頁面時，應(yīng)注意以下幾點(diǎn)：

簡化不重要的動畫/動效

簡化復(fù)雜的圖形文字樣式

減少頁面渲染的頻率和次數(shù)

具體案例：設(shè)計Web APP要去除冗余的功能伪煤，回溯本源加袋，只給用戶提供最初的本質(zhì)需求。既符合H5精簡功能又達(dá)到了突出核心功能的設(shè)計原則抱既。

切記重要的并不是我們提供的信息量有多大职烧，而是我們能否給他們提供真正需要的信息。

切記要減少功能入口，增強(qiáng)用戶的專注度蚀之，不要分散用戶的注意力蝗敢。

（2）瀏覽器限制

通常Web App生存于瀏覽器里，宿主是瀏覽器足删。不同的瀏覽器自身的屬性不盡相同寿谴，如：瀏覽器自帶的手勢，頁面切換方式失受，鏈接跳轉(zhuǎn)方式讶泰，版本兼容問題等等。

具體案例1：UC 瀏覽器和百度瀏覽器自身支持手勢切換頁面拂到。手指從左側(cè)滑動頁面痪署，返回至上一級。百度手機(jī)助手H5頁面兄旬，頂部Banner支持手勢左右滑動切換狼犯。這一操作與瀏覽器自身手勢是沖突的。

具體案例2：基于瀏覽器的Web APP在打開新的模塊中的頁面時领铐，大多會新開窗口來展現(xiàn)辜王。例如用戶在使用購物類APP時，瀏覽每日精選模塊時罐孝，每當(dāng)打開新的商品時呐馆，默認(rèn)新開一個窗口。這樣的優(yōu)劣勢顯而易見：優(yōu)勢是能夠記錄用戶瀏覽過的痕跡莲兢，瀏覽過的商品汹来，以便后續(xù)橫向?qū)Ρ龋涣觿菔沁^多的頁面容易使用戶迷失在頁面中改艇。

正如Google開發(fā)手冊里描述：當(dāng)用戶打開一個Web App的時候收班，他們期待這個應(yīng)用就像是一個單個應(yīng)用，而不是一系列網(wǎng)頁的結(jié)合谒兄。然而摔桦，什么情況下需要跳轉(zhuǎn)頁面，什么情況下在當(dāng)前頁面展示則需要設(shè)計師細(xì)致考量承疲。

因此邻耕，Web App基于瀏覽器的特性，從設(shè)計角度應(yīng)該遵循以下了兩點(diǎn)：

少用手勢燕鸽，避免與瀏覽器手勢沖突兄世。

減少頁面跳轉(zhuǎn)次數(shù)，盡量在當(dāng)前頁面顯示啊研。

（3）系統(tǒng)限制御滩，平臺特性

由于Html5語言的技術(shù)特性鸥拧，無法調(diào)用系統(tǒng)級別的權(quán)限。例如削解，系統(tǒng)級別的彈窗富弦，系統(tǒng)級別的通知，地理信息氛驮，通訊錄舆声，語音等等。且與系統(tǒng)的兼容性也會存在一些問題柳爽。以上限制通常導(dǎo)致APP的拓展性不強(qiáng)，體驗(yàn)相對較差碱屁。具體案例：百度網(wǎng)頁地圖與百度APP地圖磷脯。

Web版地圖基于瀏覽器展現(xiàn)，因此娩脾，不能全屏顯示地圖赵誓，給用戶的眼界帶來局限感；相反柿赊，Native 版地圖以全屏展現(xiàn)的形式俩功，很好的拓展了用戶的視野。整個界面干凈簡潔碰声，首頁去除冗余功能诡蜓。

Web 版地圖耗費(fèi)的流量大于Native版，且不能預(yù)先緩存離線地圖胰挑。對于地理位置的判斷也是基于宿主瀏覽器蔓罚，而非Web地圖本身。獲取路線后瞻颂，對于更換到達(dá)方式豺谈，相對來說是不便利的。

相反贡这，Native 版地圖茬末，能夠直接訪問用戶的地理位置，能夠很清晰的為用戶展現(xiàn)App規(guī)劃的路線盖矫，并能輕松的查看多種路線方案丽惭，以便做出符合自己的最佳方案。對于切換公交辈双，走路吐根，自駕等路線方式也是只需一鍵操作。

Native 版地圖相對于 Web版地圖增加更多情感化辐马，易用的功能拷橘，如：能夠記錄用戶的生活軌跡局义，記錄用戶的點(diǎn)滴足跡，能夠享受躲避擁堵方案等冗疮。而Web版地圖基于技術(shù)框架萄唇，很難實(shí)現(xiàn)以上功能，從用戶體驗(yàn)角度來看术幔，弱于Native版地圖另萤。

2.Web APP設(shè)計要點(diǎn)

（1）簡化

簡化不重要的動畫/動效
簡化復(fù)雜的圖形文字樣式
（2）少用

少用手勢，避免與瀏覽器手勢沖突
少用彈窗
（3）減少

減少頁面內(nèi)容
減少控件數(shù)量
減少頁面跳轉(zhuǎn)次數(shù)诅挑，盡量在當(dāng)前頁面顯示
（4）增強(qiáng)

增強(qiáng)Loading時的趣味性
增強(qiáng)頁面主次關(guān)系
增強(qiáng)控件復(fù)用性
3.有效的WebAPP產(chǎn)品設(shè)計

有效的導(dǎo)航設(shè)計：基本的快捷導(dǎo)航中包括返回常用頁面（如首頁四敞、我的等）的快捷方式

出現(xiàn)深層架構(gòu)時，及時補(bǔ)充返回重要層級頁面的快捷方式拔妥。

情境式導(dǎo)航忿危，方便用戶快捷跳轉(zhuǎn)到ta想去的頁面，如購買結(jié)束時提供查看訂單詳情的按鈕没龙。

WebAPP更加需要畫頁面跳轉(zhuǎn)的流程圖铺厨，摸清各個頁面的入口，尤其是頁面返回的流程硬纤；有些簡化的返回按鈕解滓，可以特殊注明返回到的頁面。

作者：LabRaDor2079
鏈接：http://www.reibang.com/p/962a2abcb9f3
來源：簡書
著作權(quán)歸作者所有筝家。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)洼裤，非商業(yè)轉(zhuǎn)載請注明出處。