名詞介紹
Native APP
Native APP 指的是原生程序,一般依托于操作系統(tǒng),有很強(qiáng)的交互,是一個(gè)完整的App,可拓展性強(qiáng),需要用戶下載安裝使用。(簡(jiǎn)單來(lái)說(shuō),原生應(yīng)用是特別為某種操作系統(tǒng)開(kāi)發(fā)的,比如iOS、Android、黑莓等等,它們是在各自的移動(dòng)設(shè)備上運(yùn)行的)
該模式通常是由“云服務(wù)器數(shù)據(jù)+APP應(yīng)用客戶端”兩部份構(gòu)成,APP應(yīng)用所有的UI元素、數(shù)據(jù)內(nèi)容、邏輯框架均安裝在手機(jī)終端上。
原生應(yīng)用程序是某一個(gè)移動(dòng)平臺(tái)(比如iOS或安卓)所特有的,使用相應(yīng)平臺(tái)支持的開(kāi)發(fā)工具和語(yǔ)言(比如iOS平臺(tái)支持Xcode和Objective-C,安卓平臺(tái)支持Eclipse和Java)。原生應(yīng)用程序看起來(lái)(外觀)和運(yùn)行起來(lái)(性能)是最佳的。
WebAPP
Web App 指采用Html5語(yǔ)言寫(xiě)出的App,不需要下載安裝。類似于現(xiàn)在所說(shuō)的輕應(yīng)用。生存在瀏覽器中的應(yīng)用,基本上可以說(shuō)是觸屏版的網(wǎng)頁(yè)應(yīng)用。(Web應(yīng)用本質(zhì)上是為移動(dòng)瀏覽器設(shè)計(jì)的基于Web的應(yīng)用,它們是用普通Web開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的,可以在各種智能手機(jī)瀏覽器上運(yùn)行)
Web App開(kāi)發(fā)即是一種框架型APP開(kāi)發(fā)模式(HTML5 APP 框架開(kāi)發(fā)模式),該開(kāi)發(fā)具有跨平臺(tái)的優(yōu)勢(shì),該模式通常由“HTML5云網(wǎng)站+APP應(yīng)用客戶端”兩部份構(gòu)成,APP應(yīng)用客戶端只需安裝應(yīng)用的框架部份,而應(yīng)用的數(shù)據(jù)則是每次打開(kāi)APP的時(shí)候,去云端取數(shù)據(jù)呈現(xiàn)給手機(jī)用戶。
HTML5應(yīng)用程序使用標(biāo)準(zhǔn)的Web技術(shù),通常是HTML5、JavaScript和CSS。這種只編寫(xiě)一次、可到處運(yùn)行的移動(dòng)開(kāi)發(fā)方法構(gòu)建的跨平臺(tái)移動(dòng)應(yīng)用程序可以在多個(gè)設(shè)備上運(yùn)行。雖然開(kāi)發(fā)人員單單使用HTML5和JavaScript就能構(gòu)建功能復(fù)雜的應(yīng)用程序,但仍然存在一些重大的局限性,具體包括會(huì)話管理、安全離線存儲(chǔ)以及訪問(wèn)原生設(shè)備功能(攝像頭、日歷和地理位置等)。
HybridAPP
Hybrid APP指的是半原生半Web的混合類App。需要下載安裝,看上去類似Native App,但只有很少的UI Web View,訪問(wèn)的內(nèi)容是 Web 。
混合應(yīng)用程序讓開(kāi)發(fā)人員可以把HTML5應(yīng)用程序嵌入到一個(gè)細(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)行。不過(guò)混合應(yīng)用中比例很自由,比如Web 占90%,原生占10%;或者各占50%。
有些應(yīng)用最開(kāi)始就是包了個(gè)原生客戶端的殼,其實(shí)里面是HTML5的網(wǎng)頁(yè),后來(lái)才推出真正的原生應(yīng)用。比較知名的APP,比如手機(jī)百度和淘寶客戶端 Android版,走的也是Hybrid App的路線,不過(guò)手機(jī)百度里面封裝的不是WebView,而是自己的瀏覽內(nèi)核,所以體驗(yàn)上更像客戶端,更高效。
三種APP技術(shù)特性
Native APP
Native APP的優(yōu)點(diǎn):
- 能夠與移動(dòng)硬件設(shè)備的底層功能,比如個(gè)人信息,攝像頭以及重力加速器等等。
- 可訪問(wèn)手機(jī)所有功能(GPS、攝像頭)。
- 速度更快、性能高、整體用戶體驗(yàn)不錯(cuò)。
- 可線下使用(因?yàn)槭窃诟鶺eb相對(duì)地平臺(tái)上使用的)。
- 支持大量圖形和動(dòng)畫(huà)
- 容易發(fā)現(xiàn)(在App Store里面和應(yīng)用商店里面)和重新發(fā)現(xiàn)(應(yīng)用圖標(biāo)會(huì)一直在主頁(yè)上),對(duì)于蘋果而言,應(yīng)用下載能創(chuàng)造盈利(當(dāng)然App Store抽取20-30% 的營(yíng)收)
- 比移動(dòng)Web App運(yùn)行快
- 一些商店與賣場(chǎng)會(huì)幫助用戶尋找原生App
- 官方賣場(chǎng)的應(yīng)用審核流程會(huì)保證讓用戶得到高質(zhì)量以及安全的App
- 官方會(huì)發(fā)布很多開(kāi)發(fā)工具或者人工支持來(lái)幫助你的開(kāi)發(fā)
- 頁(yè)面存放于本地
Native APP的缺點(diǎn):
- 開(kāi)發(fā)成本高,尤其是當(dāng)需要多種移動(dòng)設(shè)備來(lái)測(cè)試時(shí)
- 因?yàn)槭遣煌拈_(kāi)發(fā)語(yǔ)言,所以開(kāi)發(fā),維護(hù)成本也高
- 因?yàn)橛脩羰褂玫腁pp版本不同,所以你維護(hù)起來(lái)很困難
- 支持設(shè)備非常有限(一般是哪個(gè)系統(tǒng)就在哪個(gè)平臺(tái)專屬設(shè)備上用)
- 官方賣場(chǎng)審核流程復(fù)雜且慢,會(huì)嚴(yán)重影響你的發(fā)布進(jìn)程
- 上線時(shí)間不確定(App Store審核過(guò)程不一)
- 內(nèi)容限制(App Store限制)
- 獲得新版本時(shí)需重新下載應(yīng)用更新(提示用戶下載跟新,用戶體驗(yàn)差)
WebAPP
WebAPP的優(yōu)點(diǎn):
- 跨平臺(tái)開(kāi)發(fā)、用戶不需要去賣場(chǎng)來(lái)下載安裝App,開(kāi)發(fā)速度快
- 任何時(shí)候都可以發(fā)布App,因?yàn)楦静恍枰俜劫u場(chǎng)的審核
- 純H5 APP快速開(kāi)發(fā)、低成本、多平臺(tái),與很多APP開(kāi)發(fā)方式不同的是-圖文混合的排版(正是這些復(fù)雜多變的CSS樣式消耗了性能,但是它帶來(lái)了排版的多樣性,能夠細(xì)致到每一個(gè)字寬行高和風(fēng)格的像素級(jí)處理,才是H5的優(yōu)異之處)
- 支持設(shè)備廣泛
- 較低的開(kāi)發(fā)成本
- 可即時(shí)上線
- 無(wú)內(nèi)容限制
- 用戶可以直接使用最新版本(自動(dòng)更新,不需用戶手動(dòng)更新)
- 跨平臺(tái)開(kāi)發(fā)
- 用戶不需要去賣場(chǎng)來(lái)下載安裝App
- 如果你已經(jīng)有了一個(gè)Web App,你可以使用 responsive web design來(lái)輔助改進(jìn)
- 頁(yè)面存放于web服務(wù)器(受限于UIwebview)(減少了內(nèi)存,但是會(huì)增加服務(wù)器的壓力)
WebAPP的缺點(diǎn):
- 只能使用有限的移動(dòng)硬件設(shè)備功能,無(wú)法使用很多移動(dòng)硬件設(shè)備的獨(dú)特功能
- 要同時(shí)支持多種移動(dòng)設(shè)備的瀏覽器讓開(kāi)發(fā)維護(hù)的成本也不低(也要適配不同的瀏覽器),如果用戶使用更多的新型瀏覽器,那問(wèn)題就更不好處理了
- 對(duì)于用戶來(lái)說(shuō),這種App很難被用戶發(fā)現(xiàn)
- 這里的數(shù)據(jù)獲取都是在資源頁(yè)面上異步完成的,因?yàn)橹挥羞@樣才能讓這些資源頁(yè)面完成預(yù)加載或者渲染。(異步的話都涉及到耗時(shí)的問(wèn)題)
- 表現(xiàn)差(對(duì)聯(lián)網(wǎng)的要求比較大)
- 用戶體驗(yàn)沒(méi)那么炫
- 圖片和動(dòng)畫(huà)支持性不高
- 沒(méi)法在App Store中下載、無(wú)法通過(guò)應(yīng)用下載獲得盈利機(jī)會(huì)
- 對(duì)手機(jī)特點(diǎn)有限制(攝像頭、GPS等)
- 無(wú)法體會(huì)包括會(huì)話管理、安全離線存儲(chǔ)以及訪問(wèn)原生設(shè)備功能(攝像頭、日歷和地理位置等)
- 頁(yè)面跳轉(zhuǎn)更加費(fèi)力,不穩(wěn)定感更強(qiáng)
- 更小的頁(yè)面空間(由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間),更大的信息記憶負(fù)擔(dān)
- 導(dǎo)航不明顯,原有底部導(dǎo)航消失,有效的導(dǎo)航遇到挑戰(zhàn)
- 交互動(dòng)態(tài)效果收到限制,影響一些頁(yè)面場(chǎng)景、邏輯的理解。比如登錄注冊(cè)流程的彈出、完成及異常退出,做好文字提示。
Hybrid APP
(1)第一種方案:Web架構(gòu)為重
優(yōu)點(diǎn):
- 全Web開(kāi)發(fā),一定程度上有利于Web前端技術(shù)人員快速地構(gòu)建頁(yè)面樣式
- 有利于在不同的平臺(tái)上面展示同一個(gè)交互層
- 便于調(diào)試,開(kāi)發(fā)的時(shí)候可以通過(guò)瀏覽器的
- 方式進(jìn)行調(diào)試,工具豐富。
- 兼容多平臺(tái)
- 順利訪問(wèn)手機(jī)的多種功能
- App Store中可下載(Wen應(yīng)用套用原生應(yīng)用的外殼)
- 可線下使用
- 頁(yè)面存放于本地和服務(wù)器兩種方式,部署應(yīng)用程序(受限于UIwebview)
缺點(diǎn):
- 不確定上線時(shí)間
- 雖然說(shuō)你可以專注在界面以及交互開(kāi)發(fā)上了,但是這頁(yè)會(huì)成為一個(gè)缺點(diǎn),比如說(shuō)要仿造一個(gè)iOS的默認(rèn)設(shè)置界面,就需要大量的html以及css代碼了,而且效果不一定和iPhone上面的界面一樣好
- 用戶體驗(yàn)不如本地應(yīng)用
- 性能稍慢(需要連接網(wǎng)絡(luò))
- 技術(shù)還不是很成熟(比如Facebook現(xiàn)在的應(yīng)用屬于混合應(yīng)用它可以在許多App Store暢通無(wú)阻,但是摻雜了大量Web特性,所以它運(yùn)行速度比較慢,而現(xiàn)在為了提高性能FB又決定采用原生應(yīng)用)
(2)第二種方案:編譯轉(zhuǎn)換方式
優(yōu)點(diǎn):
- 利用自己熟悉的語(yǔ)言進(jìn)行應(yīng)用開(kāi)發(fā)。
- 缺點(diǎn):
- 嚴(yán)重依賴于其工具廠商提供的工具包,調(diào)試的時(shí)候就要有全套的工具。
(3)第三種方案:Native架構(gòu)為重(主流)
優(yōu)點(diǎn):
- 最穩(wěn)定的Hybrid App開(kāi)發(fā)方式了,交互層的效率上由Native的東西解決了,而且架構(gòu)上基本就是在App內(nèi)寫(xiě)網(wǎng)頁(yè),連App Store都是采用了該種方案;
缺點(diǎn):
- 團(tuán)隊(duì)至少需要兩個(gè)工程師,一個(gè)是Web的,一個(gè)是iOS或者Android的。當(dāng)然如果開(kāi)發(fā)人員會(huì)兩種技術(shù)也可獨(dú)立承擔(dān);還是運(yùn)行效率,要權(quán)衡好多少界面采用Web來(lái)渲染,畢竟WebView的效率會(huì)相對(duì)降低,以前Facebook就是因?yàn)閃eb的渲染效率低下,把整個(gè)應(yīng)用改為原生的解決方案。當(dāng)然這里面可以通過(guò)優(yōu)化來(lái)解決,但是優(yōu)化也是有限度的。
3種APP對(duì)比分析
- 對(duì)用戶來(lái)講差別主要是用戶體驗(yàn),如果WebApp做得好也能接近原生App的效果;
- 對(duì)于開(kāi)發(fā)人員,WebApp更加易于移植到多個(gè)平臺(tái),減少非常多的工作量。
1.主要區(qū)別
原生APP中:
- 每一種移動(dòng)操作系統(tǒng)都需要獨(dú)立的開(kāi)發(fā)項(xiàng)目;
- 每種平臺(tái)都需要獨(dú)立的開(kāi)發(fā)語(yǔ)言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等,需要使用各自的軟件開(kāi)發(fā)包,開(kāi)發(fā)工具以及各自的控件。
- Native App(原生型APP)需要開(kāi)發(fā)“云服務(wù)器數(shù)據(jù)中心”和“APP客戶端”
- 每次獲取最新的APP功能,需要升級(jí)APP應(yīng)用
- 原生型APP應(yīng)用的安裝包相對(duì)較大,包含UI元素、數(shù)據(jù)內(nèi)容、邏輯框架;
- 手機(jī)用戶無(wú)法上網(wǎng)也可訪問(wèn)APP應(yīng)用中以前下載的數(shù)據(jù)
- 原生型的APP可以調(diào)用手機(jī)終端的硬件設(shè)備(語(yǔ)音、攝像頭、短信、GPS、藍(lán)牙、重力感應(yīng)等)
- APP應(yīng)用更新新功能,涉及到每次要向各個(gè)應(yīng)用商店進(jìn)行提交審核。
- 適用企業(yè):游戲、電子雜志、管理應(yīng)用、物聯(lián)網(wǎng)等無(wú)需經(jīng)常更新程序框架的APP應(yīng)用。
WebAPP中:
- 因?yàn)檫\(yùn)行在移動(dòng)設(shè)備的瀏覽器上,所以只需要一個(gè)開(kāi)發(fā)項(xiàng)目
- 這種應(yīng)用可以使用HTML5,CSS3以及JavaScript以及服務(wù)器端語(yǔ)言來(lái)完成(PHP,Ruby on Rails,Python),這里可沒(méi)有標(biāo)準(zhǔn)的SDK,基本任意選擇別忘了有一些跨平臺(tái)的開(kāi)發(fā)工具,比如PhoneGap, Sencha Touch 2,APPcan以及Appcelerator Titanium等等。
- Web APP需開(kāi)發(fā)“html5云網(wǎng)站”和“APP客戶端”
- 每次打開(kāi)APP,都要通過(guò)APP框架向云網(wǎng)站取UI及數(shù)據(jù)
- 手機(jī)用戶無(wú)法上網(wǎng)則無(wú)法訪問(wèn)APP應(yīng)用中的數(shù)據(jù)
- 框架型的APP無(wú)法調(diào)用手機(jī)終端的硬件設(shè)備,(語(yǔ)音、攝像頭、短信、GPS、藍(lán)牙、重力感應(yīng)等)
- 框架型APP的訪問(wèn)速度受手機(jī)終端上網(wǎng)的限制,每次使用均會(huì)消耗一定的手機(jī)上網(wǎng)流量
- 框架型APP應(yīng)用的安裝包小巧,只包含框架文件,而大量的UI元素、數(shù)據(jù)內(nèi)容剛存放在云端
- APP用戶每次都可以訪問(wèn)到實(shí)時(shí)的最新的云端數(shù)據(jù)
- APP用戶無(wú)須頻繁更新APP應(yīng)用,與云端實(shí)現(xiàn)的是實(shí)時(shí)數(shù)據(jù)交互
- 適用企業(yè):電子商務(wù)、金融、新聞資訊、企業(yè)集團(tuán),需經(jīng)常更新內(nèi)容的APP應(yīng)用。
2.開(kāi)發(fā)難度區(qū)別
移動(dòng)web和混合App開(kāi)發(fā)難度對(duì)于web開(kāi)發(fā)者來(lái)說(shuō)相對(duì)較低,而且可以充分利用現(xiàn)有的web開(kāi)發(fā)工具和工作流程
3.發(fā)布渠道和更新方式
混合App可以在應(yīng)用商店App Store發(fā)布,但可以自主更新,而原生App的更新必須通過(guò)應(yīng)用商店App Store。
4.移動(dòng)設(shè)備本地API訪問(wèn)
混合App可以通過(guò)JavaScript API訪問(wèn)到移動(dòng)設(shè)備的攝像頭、GPS;而原生App可以通過(guò)原生編程語(yǔ)言訪問(wèn)設(shè)備所有功能。
5.跨平臺(tái)和可移植性
基于瀏覽器的移動(dòng)web最好的可移植性和跨平臺(tái)表現(xiàn);混合App也能節(jié)省跨平臺(tái)的時(shí)間和成本,只需編寫(xiě)一次核心代碼就可部署到多個(gè)平臺(tái),而原生App的跨平臺(tái)性能最差。
6.搜索引擎友好
只有移動(dòng)web對(duì)搜索引擎友好,可與在線營(yíng)銷無(wú)縫整合。
7.貨幣化
混合App除廣告外,還支持付費(fèi)下載及程序內(nèi)購(gòu)買;原生App的程序內(nèi)購(gòu)買金額2012年首次超過(guò)下載收費(fèi)。
8.消息推送
只有混合App和原生App支持消息推送,這能增加用戶忠誠(chéng)度。
9.獲取方法區(qū)別
原生APP中:
- 直接下載到設(shè)備
- 以獨(dú)立的應(yīng)用程序運(yùn)行(并不需要瀏覽器)
- 用戶必須手動(dòng)去下載并安裝這些原生App
- 有一些商店與賣場(chǎng)來(lái)幫助用戶尋找你的App,
WebAPP中:
- 從移動(dòng)設(shè)備上的瀏覽器訪問(wèn)
- 不需要安裝額外的軟件
- 軟件更新只需要服務(wù)器就夠了
- 因?yàn)楝F(xiàn)在沒(méi)有什么商品或賣場(chǎng)提供這種App,所以如何搜索這些移動(dòng)Web App相當(dāng)不簡(jiǎn)單
10.版本控制區(qū)別
原生APP中:
用戶可以自由地選擇是否更新軟件版本,所以會(huì)出現(xiàn)不同用戶同時(shí)使用不同版本的情況
WebAPP中:
所有的用戶都是用同樣的版本
如何判斷一個(gè)混合APP開(kāi)發(fā)的頁(yè)面形式
- 斷網(wǎng)檢查不是絕對(duì)的,web app并不一定是在遠(yuǎn)程服務(wù)器上的, 也能pack在程序里,load本地的資源也能算是web app。
- 在系統(tǒng)設(shè)置里進(jìn)入“開(kāi)發(fā)者選項(xiàng)”,勾選“顯示布局邊界”,然后就可以看得出來(lái)了。(比較靠譜)
- 一般web界面有明顯的加載的過(guò)程,你看頁(yè)面的最上面一般有一個(gè)加載的進(jìn)度條,不過(guò)這個(gè)進(jìn)度條一般加載也比較快,有些應(yīng)用在這樣的說(shuō)明頁(yè)面會(huì)有刷新操作、這樣你斷網(wǎng)再刷新就會(huì)提示網(wǎng)址找不到
- 網(wǎng)頁(yè)的一般就在手機(jī)的當(dāng)前界面加載一個(gè)url地址。
- (快速)滾動(dòng)起來(lái)是否比較卡
- 圖片加載失敗的圖標(biāo)
怎樣選擇開(kāi)發(fā)模式(視情況而定)
近年來(lái)隨著移動(dòng)設(shè)備類型的變多,操作系統(tǒng)的變多,用戶需求的增加,對(duì)于每個(gè)項(xiàng)目啟動(dòng)前,大家都會(huì)考慮到的成本,團(tuán)隊(duì)成員,技術(shù)成熟度,時(shí)間,項(xiàng)目需求等一堆的因素。
因此,開(kāi)發(fā)App的方案已經(jīng)變得越來(lái)越多了。無(wú)數(shù)的人參與或者看到過(guò)一個(gè)討論:原生開(kāi)發(fā)還是混合開(kāi)發(fā),又或者是Web開(kāi)發(fā)?要結(jié)實(shí)踐和自身的情況。
- 比如,你的預(yù)算是多少?預(yù)算充足的話可以開(kāi)發(fā)幾個(gè)本地應(yīng)用加一個(gè)Web應(yīng)用
- 你的應(yīng)用需要什么時(shí)候面市?Web應(yīng)用可以很快地開(kāi)發(fā)然后直接推出來(lái)
- 你的應(yīng)用需要包含什么特點(diǎn)和功能?如果跟手機(jī)的某些功能深度整合了,比如攝像頭,需要呈現(xiàn)大量圖形和動(dòng)畫(huà)就選原生 應(yīng)用好點(diǎn)
- 你的應(yīng)用是否一定需要網(wǎng)絡(luò)
- 你的應(yīng)用的目標(biāo)硬件設(shè)備是所有的移動(dòng)設(shè)備還是僅僅只是一部分而已
- 你自己已經(jīng)熟悉的開(kāi)發(fā)語(yǔ)言,或者說(shuō)現(xiàn)有資源
- 這個(gè)應(yīng)用對(duì)于性能要求是否苛刻
- 如何靠這個(gè)應(yīng)用贏利我想這幾個(gè)問(wèn)題應(yīng)該能讓你做出明智的選擇
- 你的應(yīng)用是否需要使用某些設(shè)備的特殊功能,比如攝像頭,攝像頭閃光燈或者重力加速器
- 移動(dòng)Web無(wú)所不在,移動(dòng)Web是目前唯一的支持各種設(shè)備訪問(wèn)的平臺(tái),與桌面Web一樣,移動(dòng)Web支持各種標(biāo)準(zhǔn)的協(xié)議。移動(dòng)Web也是唯一一個(gè)可供開(kāi)發(fā)者發(fā)布移動(dòng)應(yīng)用的,平臺(tái),它將各種移動(dòng)交互與桌面任務(wù)有效地連接了起來(lái);而開(kāi)發(fā)Native App可以充分利用設(shè)備的特性,而這一點(diǎn)往往是Web瀏覽器做不到的,所以對(duì)一個(gè)產(chǎn)品本身而言,Native App是最佳的選擇。
- 為應(yīng)用收費(fèi)(人們的觀念webApp是不收費(fèi)的)用原生開(kāi)發(fā)模式
- Web Apps是唯一一個(gè)經(jīng)久不衰的移動(dòng)內(nèi)容、服務(wù)、應(yīng)用開(kāi)發(fā)平臺(tái)。
- 使用定位功能、使用攝像頭、使用感應(yīng)器、訪問(wèn)文件系統(tǒng)、離線用戶、多點(diǎn)觸控:雙擊、縮放及其他組合的用戶界面(UI)手勢(shì);快速圖形API:原生平臺(tái)為你提供了顯示最快速的圖形。如果你顯示只有寥寥幾個(gè)元素的靜態(tài)屏幕,這個(gè)功能可能不太重要,但如果你使用大量數(shù)據(jù),需要快速刷新,這項(xiàng)功能卻很重要;流暢動(dòng)畫(huà):與快速圖形API有關(guān)的是實(shí)現(xiàn)流暢動(dòng)畫(huà)的功能。這在動(dòng)畫(huà)、高度交互的報(bào)表或者轉(zhuǎn)換照片和聲音的計(jì)算密集型算法中顯得尤為重要;內(nèi)置部件:攝像頭、地址簿、地理位置及設(shè)備的其他原生功能可以無(wú)縫地整合到移動(dòng)應(yīng)用程序中。另一個(gè)重要的內(nèi)置部件是加密的存儲(chǔ)裝置,這方面稍后會(huì)有詳細(xì)介紹;易于使用:原生平臺(tái)是人們耳熟能詳?shù)钠脚_(tái),所以如果你在這個(gè)熟悉的平臺(tái)上添加人們期望的所有原生功能,也就擁有了一款使用起來(lái)完全更容易的應(yīng)用程序時(shí)用原生
- 是原生App還是移動(dòng)Web App,主要受商業(yè)目標(biāo),目標(biāo)用戶,以及技術(shù)需要這些因素影響的。其實(shí)更多時(shí)候你也不要為選擇那種App模式煩惱,正如本文提到,類似Facebook這樣的公司就為用戶提供了兩種選擇。然而對(duì)于大部分人來(lái)說(shuō),預(yù)算,資源限制將會(huì)逼迫我們只能選擇其中一種(或者只能以其中一種為重點(diǎn)
六、WebAPP和原生APP交互區(qū)別
1.Web APP受限因素
相比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):
- 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效
- 簡(jiǎn)化復(fù)雜的圖形文字樣式
- 減少頁(yè)面渲染的頻率和次數(shù)
- 具體案例:設(shè)計(jì)Web APP要去除冗余的功能,回溯本源,只給用戶提供最初的本質(zhì)需求。既符合H5精簡(jiǎn)功能又達(dá)到了突出核心功能的設(shè)計(jì)原則。
- 切記重要的并不是我們提供的信息量有多大,而是我們能否給他們提供真正需要的信息。
- 切記要減少功能入口,增強(qiáng)用戶的專注度,不要分散用戶的注意力。
(2)瀏覽器限制
- 通常Web App生存于瀏覽器里,宿主是瀏覽器。不同的瀏覽器自身的屬性不盡相同,如:瀏覽器自帶的手勢(shì),頁(yè)面切換方式,鏈接跳轉(zhuǎn)方式,版本兼容問(wèn)題等等。
- 具體案例1:UC 瀏覽器和百度瀏覽器自身支持手勢(shì)切換頁(yè)面。手指從左側(cè)滑動(dòng)頁(yè)面,返回至上一級(jí)。百度手機(jī)助手H5頁(yè)面,頂部Banner支持手勢(shì)左右滑動(dòng)切換。這一操作與瀏覽器自身手勢(shì)是沖突的。
- 具體案例2:基于瀏覽器的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ì)較差。具體案例:百度網(wǎng)頁(yè)地圖與百度APP地圖。
- Web版地圖基于瀏覽器展現(xiàn),因此,不能全屏顯示地圖,給用戶的眼界帶來(lái)局限感;相反,Native 版地圖以全屏展現(xiàn)的形式,很好的拓展了用戶的視野。整個(gè)界面干凈簡(jiǎn)潔,首頁(yè)去除冗余功能。
- 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版地圖。
2.Web APP設(shè)計(jì)要點(diǎn)
(1)簡(jiǎn)化
- 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效
- 簡(jiǎn)化復(fù)雜的圖形文字樣式
(2)少用
- 少用手勢(shì),避免與瀏覽器手勢(shì)沖突
- 少用彈窗
(3)減少
- 減少頁(yè)面內(nèi)容
- 減少控件數(shù)量
- 減少頁(yè)面跳轉(zhuǎn)次數(shù),盡量在當(dāng)前頁(yè)面顯示
(4)增強(qiáng)
- 增強(qiáng)Loading時(shí)的趣味性
- 增強(qiáng)頁(yè)面主次關(guān)系
- 增強(qiáng)控件復(fù)用性
3.有效的WebAPP產(chǎn)品設(shè)計(jì)
- 有效的導(dǎo)航設(shè)計(jì):基本的快捷導(dǎo)航中包括返回常用頁(yè)面(如首頁(yè)、我的等)的快捷方式
- 出現(xiàn)深層架構(gòu)時(shí),及時(shí)補(bǔ)充返回重要層級(jí)頁(yè)面的快捷方式。
- 情境式導(dǎo)航,方便用戶快捷跳轉(zhuǎn)到ta想去的頁(yè)面,如購(gòu)買結(jié)束時(shí)提供查看訂單詳情的按鈕。
- WebAPP更加需要畫(huà)頁(yè)面跳轉(zhuǎn)的流程圖,摸清各個(gè)頁(yè)面的入口,尤其是頁(yè)面返回的流程;有些簡(jiǎn)化的返回按鈕,可以特殊注明返回到的頁(yè)面。