基于HTML5的Web App的開(kāi)發(fā)與探索

章 斕

(福建師范大學(xué)協(xié)和學(xué)院，福建 福州 350108)

基于HTML5的Web App的開(kāi)發(fā)與探索

章 斕

(福建師范大學(xué)協(xié)和學(xué)院，福建 福州 350108)

對(duì)于移動(dòng)互聯(lián)網(wǎng)行業(yè)來(lái)說(shuō)，HTML5的出現(xiàn)帶來(lái)了具有強(qiáng)大的跨平臺(tái)兼容性的Web APP——一種頁(yè)面可直接適配手機(jī)屏幕、在瀏覽器上輕量運(yùn)行、具有強(qiáng)大的表現(xiàn)能力、可實(shí)時(shí)更新且體驗(yàn)類似于Native App的網(wǎng)頁(yè)應(yīng)用.首先介紹了Web App的主要特點(diǎn).在此基礎(chǔ)上，闡述了基于HTML5的Web App的實(shí)現(xiàn).最后，分析了Web APP發(fā)展面臨的機(jī)遇與挑戰(zhàn).

HTML5；Web APP；開(kāi)發(fā)探索

Web App，即網(wǎng)頁(yè)應(yīng)用.它是一種依賴于Web瀏覽器，通過(guò)網(wǎng)絡(luò)進(jìn)行訪問(wèn)的應(yīng)用程序.HTML5的強(qiáng)勢(shì)發(fā)展、智能手機(jī)的迅速普及，以及優(yōu)質(zhì)的用戶體驗(yàn)都極大地促進(jìn)了Web App的發(fā)展.

與原有的Native App相比，Web App具有明顯的優(yōu)勢(shì)，比如：可以一次開(kāi)發(fā)多平臺(tái)使用，應(yīng)用開(kāi)發(fā)成本較低；在支持HTML5的瀏覽器上運(yùn)行，直接適配多種移動(dòng)終端；方便服務(wù)提供商隨時(shí)發(fā)布更新；無(wú)需下載安裝，打開(kāi)瀏覽器就能使用.但也存在一些不足，比如：短時(shí)間內(nèi)，用戶體驗(yàn)不能與Native App相媲美；不能充分發(fā)揮移動(dòng)設(shè)備的硬件功能；不能在離線狀態(tài)下工作.

為了證明用Web App取代Native App的可行性，微軟與ZeptoLab合作推出了基于Internet Explorer 9和HTML5框架的《Cut the rope》(即“割繩子游戲”，其iOS版本在Apple Store的下載量超過(guò)5000萬(wàn)).在國(guó)內(nèi)，手機(jī)端新浪微游戲平臺(tái)登場(chǎng)之初主打的也是HTML5游戲，中國(guó)移動(dòng)游戲基地也表示將把HTML5作為其未來(lái)游戲平臺(tái)發(fā)展的重要方向[1].通過(guò)游戲這種形象直觀的展示來(lái)證明Web App同樣可以有良好的用戶體驗(yàn)，這對(duì)于瀏覽器廠商來(lái)說(shuō)是一件非常具有說(shuō)服力的事情[2].

功能日益完善的瀏覽器在未來(lái)不再只是一個(gè)瀏覽、獲取信息的入口，它還將擁有PC所有的功能，甚至成為一個(gè)新的應(yīng)用入口，取代操作系統(tǒng).HTML5的迅速發(fā)展推動(dòng)了Web App時(shí)代的到來(lái).

1 以用戶為中心的設(shè)計(jì)

伴隨著觸屏移動(dòng)設(shè)備的發(fā)展，人們對(duì)時(shí)尚、美感、趣味性的不斷追求，觸屏手機(jī)界面設(shè)計(jì)也在不斷改頭換面，各種頗具想象力和創(chuàng)造性的界面映入我們的視野.然而，并不是越花哨的界面設(shè)計(jì)就越具有吸引力.界面設(shè)計(jì)并非藝術(shù)創(chuàng)作，但仍需要藝術(shù)性的視角和技能.觸屏移動(dòng)設(shè)備的蜂起，也給設(shè)計(jì)師的工作帶來(lái)各種挑戰(zhàn).屏幕大小的制約、分辨率的多樣化、交互方式的變革，這些都是在設(shè)計(jì)過(guò)程中要考慮的問(wèn)題.

表現(xiàn)美感的設(shè)計(jì)方式多種多樣，但其最終的落點(diǎn)都是要符合交互設(shè)計(jì)中的“可用性”原則.移動(dòng)設(shè)備產(chǎn)品的設(shè)計(jì)，遵循以用戶為中心的宗旨，使產(chǎn)品能滿足用戶基本的功能需求、符合用戶的認(rèn)知和行為習(xí)慣，同時(shí)能高效而愉悅地完成任務(wù)或工作，達(dá)到預(yù)期的目的.滿足可用性后，美觀大方的界面風(fēng)格則是在此基礎(chǔ)上的點(diǎn)綴，起著“錦上添花”的作用.

1.1 為觸屏移動(dòng)設(shè)備而設(shè)計(jì)

觸屏設(shè)備多為手機(jī)、平板電腦、電子閱讀器等.要在有限的屏幕可視區(qū)域當(dāng)中打造出成功的界面設(shè)計(jì)方案，必須結(jié)合實(shí)際的產(chǎn)品需求，在視覺(jué)元素的尺寸和空間布局等方面做好充分的權(quán)衡與判斷，讓信息一目了然，表意不隱晦，不誤導(dǎo)用戶.以下就從圖標(biāo)設(shè)計(jì)、文字排版、尺寸大小、交互創(chuàng)新四個(gè)方面進(jìn)行闡述.

1.1.1 圖標(biāo)設(shè)計(jì)

由于屏幕大小的限制，在圖標(biāo)設(shè)計(jì)過(guò)程當(dāng)中，要把握好圖標(biāo)的大小.過(guò)大，影響其他元素的顯示；過(guò)小，影響手指與屏幕的交互操作.Web App中圖標(biāo)的風(fēng)格要全盤統(tǒng)一，給人以專業(yè)的感覺(jué)，形成良好的品牌認(rèn)知.同時(shí)，隨著Web的發(fā)展和人們審美意識(shí)的轉(zhuǎn)變，圖標(biāo)的設(shè)計(jì)風(fēng)格也開(kāi)始迭代更新.人們開(kāi)始偏愛(ài)簡(jiǎn)潔的表現(xiàn)方式，設(shè)計(jì)出的圖標(biāo)也比較概括，表達(dá)一種目標(biāo)或動(dòng)作，符合人們的認(rèn)知.由過(guò)去的水晶立體風(fēng)格轉(zhuǎn)向扁平簡(jiǎn)潔的發(fā)展路線，甚至有些產(chǎn)品的圖標(biāo)還采用單色剪影的效果去表現(xiàn).比如Google的圖標(biāo)，在這一點(diǎn)上表現(xiàn)明顯.

1.1.2 文字排版

對(duì)字體數(shù)量進(jìn)行限制，合理減少界面中的文字信息，直觀的圖形化界面使用戶可以方便地完成操作任務(wù).控制字號(hào)大小，使用高亮或者對(duì)比的方式突出類似條目的信息.在不影響文字顯示的情況下，充分利用單屏空間，采用多途徑的設(shè)計(jì)方法來(lái)描述內(nèi)容.保持文字的可讀尺寸，頁(yè)面的清新風(fēng)格，切忌因?yàn)檫^(guò)度追求視覺(jué)美感，忽略最基本的可讀性，使頁(yè)面排版變得凌亂不堪，破壞了用戶閱讀的連續(xù)性.

由于平板設(shè)備的顯示屏亮度和對(duì)比度要高于普通電腦，因此很多在普通電腦上合適的字體和設(shè)計(jì)直接搬到平板設(shè)備上會(huì)由于背景的亮度而產(chǎn)生實(shí)物過(guò)虛的問(wèn)題.要盡量避免這些問(wèn)題，在移動(dòng)終端適當(dāng)?shù)丶哟笪淖殖叽缡潜容^明智的[3].

1.1.3 尺寸大小

如果說(shuō)交互對(duì)象的布局位置取決于平臺(tái)類型及持機(jī)方式，那么它們的尺寸則在很大程度上由手指的大小來(lái)決定.必須將這些交互元素設(shè)計(jì)的足夠大，才能保證用戶可以進(jìn)行準(zhǔn)確的辨識(shí)和觸擊.

不過(guò)，要做的多大才算夠呢？不妨抬起手看看自己的指尖.很多系統(tǒng)平臺(tái)的設(shè)計(jì)規(guī)范也都在這方面進(jìn)行了描述.理論上，可觸擊元素的最小尺寸應(yīng)該為44像素(約1/4英寸或7毫米)見(jiàn)方[4].

1.1.4 交互創(chuàng)新

設(shè)計(jì)要與人進(jìn)行交流.觸屏設(shè)備已經(jīng)將用戶從鼠標(biāo)中解放出來(lái)，用手指直接與界面進(jìn)行交互[5].為了讓手指自由操作并得到充分的休息，要對(duì)頁(yè)面元素的布局進(jìn)行深入的考慮.另外，當(dāng)用戶與界面交互操作時(shí)，界面的一部分必然會(huì)被拇指遮擋住，如何保證控制元件的布局不會(huì)干擾到實(shí)際內(nèi)容，同樣是一項(xiàng)設(shè)計(jì)挑戰(zhàn).類似這樣的問(wèn)題還有很多，但多數(shù)可以歸納到“舒適度”與“可視性”這兩方面.

可以在游戲或者其他娛樂(lè)類的產(chǎn)品中嘗試各種復(fù)雜炫目的交互效果，但對(duì)于用戶需要時(shí)常用到的工具型的應(yīng)用來(lái)說(shuō)，在導(dǎo)航結(jié)構(gòu)、瀏覽方式及相應(yīng)的視覺(jué)交互形式等方面要盡量保持規(guī)范、簡(jiǎn)潔，符合用戶的認(rèn)知，滿足用戶的期望.

1.2 為用戶體驗(yàn)而設(shè)計(jì)

UED，即User Experience Design(以用戶為中心的設(shè)計(jì)).通過(guò)對(duì)產(chǎn)品的界面和行為進(jìn)行設(shè)計(jì)，讓產(chǎn)品和它的用戶建立一種有機(jī)關(guān)系.概括地講，為用戶體驗(yàn)而設(shè)計(jì)的目的是讓用戶能夠在最短的時(shí)間內(nèi)，用最快的速度，高效且出色地完成任務(wù)或者工作.在Web App的設(shè)計(jì)中，除了要滿足基本的交互設(shè)計(jì)規(guī)范外，還應(yīng)該注意以下幾個(gè)方面的內(nèi)容.

1.2.1 功能簡(jiǎn)約

“簡(jiǎn)單就是美”，這是交互設(shè)計(jì)中的至高境界.優(yōu)秀的Web App設(shè)計(jì)要精簡(jiǎn)應(yīng)用功能，保留住最重要的功能.讓精力有限的用戶能夠把視線集中到核心任務(wù)的入口.在界面設(shè)計(jì)的過(guò)程中，產(chǎn)品經(jīng)理往往會(huì)傾向于給用戶更多的選擇或功能，然而根據(jù)二八原理，事實(shí)上80%的功能往往也只有20%的用戶會(huì)使用.全盤展示反而會(huì)使用戶感到困惑或不解，從而對(duì)產(chǎn)品產(chǎn)生排斥心理.因此，有選擇地保留主要功能，隱藏次要功能，還原應(yīng)用的本質(zhì)，可以讓應(yīng)用簡(jiǎn)單化，界面清新化.

1.2.2 流體布局

流體布局讓W(xué)eb App在移動(dòng)友好道路上又向前走了重要一步.它不僅能擺脫網(wǎng)頁(yè)周圍額外的空間，也可以在許多不同的終端或平臺(tái)完美顯示.流體布局，正如它名字描述的那樣，可以根據(jù)瀏覽器的大小決定頁(yè)面的寬度，充分利用屏幕空間.不管你的設(shè)備分辨率是多少，都能自動(dòng)適應(yīng)屏幕的寬度變化，具有很強(qiáng)的彈性.這使得Web App與Native App一樣，充滿整個(gè)可用視窗，而不是左右兩邊留白.

流體寬度易于實(shí)現(xiàn)，取決于當(dāng)前設(shè)置或布局.改變頁(yè)面CSS樣式表中的寬度屬性百分比，或者使用Full Screen API在合適的時(shí)候提供一個(gè)全屏界面.

1.2.3 主體突出

集中顯示應(yīng)用的重要功能是移動(dòng)設(shè)備界面設(shè)計(jì)的關(guān)鍵，因?yàn)橛脩粢淮蜷_(kāi)界面，這些功能的入口就能迅速跳入用戶的眼睛，鼓勵(lì)、引導(dǎo)用戶完成任務(wù)或工作.同時(shí),Web App的主體功能應(yīng)該是簡(jiǎn)單的，因?yàn)橛脩粜枰l繁操作.結(jié)合清晰的功能入口，專注單一功能的流程設(shè)計(jì)，在該流程的操作中不要提供其他功能入口.

應(yīng)用的每個(gè)頁(yè)面顯示的內(nèi)容是有很強(qiáng)的針對(duì)性的，讓用戶迅速明白自己所處位置，獲取哪方面的內(nèi)容，同時(shí)也要讓用戶能迅速跳轉(zhuǎn)到別的頁(yè)面.

1.2.4 頁(yè)面精悍

移動(dòng)設(shè)備的長(zhǎng)頁(yè)面會(huì)使程序加載的時(shí)間較長(zhǎng)，用戶等待的時(shí)間也隨之變長(zhǎng).因此，保持頁(yè)面短而緊湊，使得用戶在所有平臺(tái)上訪問(wèn)應(yīng)用時(shí)，能迅速打開(kāi)并順利完成任務(wù).甚至當(dāng)設(shè)備上只有非常有限的下載速度時(shí)，也能較快運(yùn)行.

1.2.5 徹底導(dǎo)航

在有限的屏幕空間里，導(dǎo)航能提升Web App的可用性，進(jìn)而提升品牌和可信度.優(yōu)秀的導(dǎo)航設(shè)計(jì)可以讓用戶便捷地瀏覽頁(yè)面內(nèi)容，同時(shí)還能將正確的信息架構(gòu)傳達(dá)給用戶，直觀地表現(xiàn)出Web App的內(nèi)容.

同時(shí)，Web App的導(dǎo)航設(shè)計(jì)需要組織清晰且分類明確，分類之間具有一定的連貫性，且分類命名易于理解，平衡導(dǎo)航的深度和廣度，有助于引導(dǎo)用戶使用Web App.

1.2.6 易于點(diǎn)擊

移動(dòng)設(shè)備的觸摸屏越來(lái)越普及，這意味著用戶將使用自己的手指與Web App進(jìn)行交互.如果設(shè)計(jì)的圖標(biāo)或文字鏈可點(diǎn)擊范圍太小，就容易造成誤操作或者無(wú)效操作.

通過(guò)消除分散在文章和段落中的文字鏈接，利用圖標(biāo)取代文字鏈接，這樣可以增大元素的點(diǎn)擊區(qū)域，而不用擴(kuò)大視覺(jué)區(qū)域，使得用戶可以輕松自如地點(diǎn)擊，避免誤操作或者無(wú)效操作.同時(shí)，這種圖標(biāo)加文字的鏈接使得排版不受限制，也達(dá)到Native App的視覺(jué)效果.

2 基于HTML5的Web App的實(shí)現(xiàn)

HTML5通常指包括HTML5，CSS3和JavaScript在內(nèi)的一套技術(shù)組合.HTML5的出現(xiàn)讓網(wǎng)頁(yè)可以僅通過(guò)HTML5就實(shí)現(xiàn)很多原來(lái)需要依賴flash等插件實(shí)現(xiàn)的效果，極大地豐富了網(wǎng)頁(yè)的表現(xiàn)能力.也正是HTML5讓W(xué)eb App可以給用戶提供不同于傳統(tǒng)網(wǎng)頁(yè)的展示效果和交互方式，讓W(xué)eb App的用戶可以擁有和Native App用戶相同的體驗(yàn).而JavaScript腳本和AJAX的廣泛應(yīng)用，改變了傳統(tǒng)網(wǎng)頁(yè)的技術(shù)架構(gòu)和頁(yè)面組織形式，為Web App的發(fā)展打下了良好的基礎(chǔ).

2.1 Web App技術(shù)架構(gòu)

Web App與Native App相較而言，最大的優(yōu)勢(shì)之一就是可以實(shí)時(shí)控制自身的更新，無(wú)論是增加新功能還是修改bug，服務(wù)器修改后就可實(shí)時(shí)生效，讓所有的用戶使用最新的版本.這也意味著在Web App的產(chǎn)品生命周期中，它一定會(huì)根據(jù)用戶需求和市場(chǎng)情況，發(fā)生頻繁的變更，良好的架構(gòu)能讓變更的影響盡量集中，降低了修改和繼續(xù)維護(hù)成本.

前端數(shù)據(jù)層介于UI界面和后端之間，它封裝了前端所有的對(duì)數(shù)據(jù)的處理工作.前端數(shù)據(jù)層的作用主要包括兩個(gè)方面：(1)前端數(shù)據(jù)層緩存了數(shù)據(jù)庫(kù)中的數(shù)據(jù)，并提供接口供UI界面層在需要的時(shí)候調(diào)用.(2)前端數(shù)據(jù)層需要根據(jù)用戶的操作，將用戶的操作封裝成HTTP請(qǐng)求，調(diào)用和服務(wù)端約定好的接口，并在服務(wù)端處理后以XML形式返回處理結(jié)果，根據(jù)解析處理結(jié)果更新數(shù)據(jù)緩存.

服務(wù)器主要負(fù)責(zé)接受前端的接口調(diào)用，負(fù)責(zé)對(duì)應(yīng)接口的業(yè)務(wù)邏輯處理，將需要儲(chǔ)存的處理結(jié)果使用SQL語(yǔ)句保存到數(shù)據(jù)庫(kù)，最后將處理結(jié)果返回給前端數(shù)據(jù)層.數(shù)據(jù)庫(kù)僅被動(dòng)地負(fù)責(zé)數(shù)據(jù)存儲(chǔ)，通過(guò)服務(wù)器的操作，保證數(shù)據(jù)庫(kù)的數(shù)據(jù)始終是最新的.

這種分層方式類似于傳統(tǒng)的Native App，使用前端數(shù)據(jù)層代替Native App的網(wǎng)絡(luò)層的職能.其設(shè)計(jì)目的在于盡可能讓各層負(fù)責(zé)的工作相互獨(dú)立、各司其職，使得在業(yè)務(wù)、接口甚至技術(shù)方案發(fā)生變更時(shí)，可以影響到盡量少的模塊.

2.2 Web App實(shí)現(xiàn)關(guān)鍵技術(shù)

在上文的四層結(jié)構(gòu)中，UI界面層和前端數(shù)據(jù)層共同屬于總體架構(gòu)的前端部分，服務(wù)端和數(shù)據(jù)庫(kù)組成了后臺(tái).后臺(tái)使用PHP和MySQL實(shí)現(xiàn)，只要保證與前端的協(xié)議不變，技術(shù)實(shí)現(xiàn)方案可以任意變更，并非Web App實(shí)現(xiàn)的關(guān)鍵技術(shù)，這里暫且不論.下面的內(nèi)容僅討論前端實(shí)現(xiàn).

UI界面層負(fù)責(zé)界面顯示和用戶交互，它在實(shí)現(xiàn)時(shí)使用了HTML、CSS、JavaScript、JQuery等技術(shù).

在構(gòu)建界面時(shí)，采用了HTML+CSS這個(gè)網(wǎng)頁(yè)制作時(shí)結(jié)構(gòu)和表現(xiàn)分離的經(jīng)典結(jié)構(gòu).

HTML在UI界面層中作為頁(yè)面框架，使用div進(jìn)行頁(yè)面結(jié)構(gòu)的搭建.HTML5給HTML帶來(lái)了一些標(biāo)準(zhǔn)化的新標(biāo)簽，比如：標(biāo)簽增加了time的類型，在Windows，Android和IOS中，time標(biāo)簽的實(shí)現(xiàn)取決于瀏覽器的實(shí)現(xiàn)，這樣在不同的系統(tǒng)中就可以提供適合各自系統(tǒng)的實(shí)現(xiàn)方案.

CSS在網(wǎng)頁(yè)制作中負(fù)責(zé)提供網(wǎng)頁(yè)的樣式.在HTML生成頁(yè)面時(shí)，對(duì)需要提供樣式的標(biāo)簽都提供了class或者id的屬性.CSS可以根據(jù)這些屬性結(jié)合其選擇器，對(duì)這些標(biāo)簽進(jìn)行樣式的修改.CSS3更是提供了便于使用的圓角、陰影、漸變等效果和平移、縮放、旋轉(zhuǎn)等特效，讓W(xué)eb App的界面表現(xiàn)能力更加接近于Native App.

JavaScript是實(shí)現(xiàn)Web App的核心技術(shù)，它提供了動(dòng)態(tài)改變網(wǎng)頁(yè)內(nèi)容的能力，讓網(wǎng)頁(yè)擺脫了點(diǎn)擊后一定要刷新頁(yè)面才能展示新數(shù)據(jù)的傳統(tǒng)形式，可以在頁(yè)面不刷新的情況下直接修改頁(yè)面上的任意元素.JQuery是一個(gè)輕量級(jí)的JavaScript庫(kù)，讓用戶可以更方便地處理HTML元素和事件.JQuery提供了強(qiáng)大的選擇器和良好的AJAX封裝，它在各平臺(tái)中良好的兼容性也讓它在各個(gè)Web App項(xiàng)目中被大量使用.

前端數(shù)據(jù)層負(fù)責(zé)與服務(wù)端進(jìn)行交互，需要對(duì)服務(wù)端發(fā)起HTTP請(qǐng)求，并解析服務(wù)端返回的數(shù)據(jù).它在實(shí)現(xiàn)時(shí)使用了AJAX這個(gè)重要技術(shù).

AJAX指的是異步的JavaScript和XML，它讓頁(yè)面可以在不刷新的情況下，異步訪問(wèn)服務(wù)器的接口并且接收XML格式的返回值.這樣頁(yè)面就可以動(dòng)態(tài)地根據(jù)請(qǐng)求服務(wù)端的結(jié)果，來(lái)更新頁(yè)面的顯示內(nèi)容.其中所有需要填入數(shù)據(jù)的位置在一開(kāi)始都被空出，等待頁(yè)面初始化完成需要獲取具體數(shù)據(jù)時(shí)，通過(guò)前端數(shù)據(jù)層封裝的AJAX接口向服務(wù)端請(qǐng)求數(shù)據(jù)，服務(wù)端用XML返回并且經(jīng)過(guò)前端數(shù)據(jù)層解析后，UI界面再通過(guò)JavaScript動(dòng)態(tài)生成頁(yè)面上的HTML代碼，展示用戶真正看到的界面.

2.3 Web App頁(yè)面體驗(yàn)優(yōu)化

用戶在使用傳統(tǒng)網(wǎng)頁(yè)的時(shí)候，每一次鏈接點(diǎn)擊都意味著一次頁(yè)面刷新，用戶的每一次點(diǎn)擊都需要等待下一個(gè)頁(yè)面加載.用戶每打開(kāi)的一個(gè)新的頁(yè)面和上一個(gè)頁(yè)面是不連續(xù)的，傳統(tǒng)網(wǎng)頁(yè)的用戶在訪問(wèn)網(wǎng)頁(yè)的過(guò)程中，兩個(gè)頁(yè)面之間跳轉(zhuǎn)的瀏覽體驗(yàn)是被中斷的.然而Native App往往可以在多個(gè)用戶界面之間平滑的過(guò)渡，如果需要耗時(shí)的操作也可以使用動(dòng)畫或者進(jìn)度條等方式來(lái)保持用戶體驗(yàn)的連貫.不連貫的體驗(yàn)是除了表現(xiàn)能力之外，網(wǎng)頁(yè)和Native App的使用體驗(yàn)之間最大的差別.

Web App要保證盡量和Native App一致的體驗(yàn)，就必須解決用戶在網(wǎng)頁(yè)中操作時(shí)每一次點(diǎn)擊都會(huì)產(chǎn)生一次頁(yè)面刷新的問(wèn)題.好在JavaScript動(dòng)態(tài)改變頁(yè)面元素的能力給我們提供了OPOA這個(gè)針對(duì)頁(yè)面刷新問(wèn)題的良好解決方案[6].

OPOA，即One Page, One Application，也就是單頁(yè)面應(yīng)用.在傳統(tǒng)網(wǎng)站中，導(dǎo)航里的每一個(gè)鏈接點(diǎn)擊后都會(huì)跳轉(zhuǎn)到一個(gè)獨(dú)立的頁(yè)面.而在OPOA的網(wǎng)頁(yè)中，在用戶點(diǎn)擊導(dǎo)航欄的Tab標(biāo)簽時(shí)，并沒(méi)有進(jìn)行頁(yè)面跳轉(zhuǎn)，而是執(zhí)行了一段JavaScript腳本，這段腳本會(huì)隱藏當(dāng)前顯示的內(nèi)容，并且將下一個(gè)頁(yè)面的內(nèi)容展示出來(lái).

3 機(jī)遇與挑戰(zhàn)

3.1 Web App的機(jī)遇

在未來(lái)的世界無(wú)線網(wǎng)絡(luò)暢通無(wú)礙的時(shí)候，Web App將更能滿足未來(lái)的需要.所需要的所有數(shù)據(jù)、服務(wù)、工作環(huán)境都在“云端”.只需要打開(kāi)手機(jī)連接網(wǎng)絡(luò)打開(kāi)Web App，就可以索取所需要的，如服務(wù)、圖片、音樂(lè)、影片，做想做的，比如工作、社交、游戲等等.開(kāi)發(fā)者只需要更新自己的Web App就可以實(shí)現(xiàn)跨平臺(tái)同步更新，提供最及時(shí)最好的服務(wù)[7].

3.2 Web App面臨的挑戰(zhàn)

Web App的實(shí)現(xiàn)需要多個(gè)層面的標(biāo)準(zhǔn)來(lái)支持，其中就包括HTML5標(biāo)準(zhǔn).雖然標(biāo)準(zhǔn)的制定不能影響技術(shù)的發(fā)展革新，但是卻起著指引方向的作用.在HTML5標(biāo)準(zhǔn)完善前，各個(gè)瀏覽器廠商會(huì)根據(jù)自己的利益，在標(biāo)準(zhǔn)的支持上各行其是，而Web App將受制于此難以得到大范圍的推廣.比如transform這個(gè)屬性，在chrome中和FireFox中就有-webkit-transform和-moz-transform兩個(gè)版本.

HTML5還處在完善的過(guò)程當(dāng)中，而Web App產(chǎn)品的大部分效果需要支持HTML5的強(qiáng)大瀏覽器對(duì)HTML5標(biāo)準(zhǔn)的良好支持.在PC端，雖然大多數(shù)主流瀏覽器都遵循HTML標(biāo)準(zhǔn)，但最終呈現(xiàn)給用戶的界面效果仍然會(huì)有所差異.這種情況，在移動(dòng)平臺(tái)將會(huì)有更明顯的變化.不同的瀏覽器展現(xiàn)出來(lái)的效果千差萬(wàn)別，這導(dǎo)致開(kāi)發(fā)者需要花費(fèi)大量時(shí)間用于兼容各個(gè)平臺(tái)瀏覽器的實(shí)現(xiàn)效果，增加了產(chǎn)品的開(kāi)發(fā)成本，這對(duì)于一個(gè)追求快速迭代的互聯(lián)網(wǎng)產(chǎn)品來(lái)說(shuō)是個(gè)致命傷.另外，移動(dòng)設(shè)備瀏覽器的性能還沒(méi)達(dá)到能夠支持與Native App體驗(yàn)相媲美的Web App的程度.目前頁(yè)面響應(yīng)速度偏慢和不流暢的頁(yè)面交互體驗(yàn)是Web App的兩大硬傷.在HTML5標(biāo)準(zhǔn)真正確定之前，在手機(jī)瀏覽器對(duì)HTML5的支持和性能真正讓人滿意之前，Web App想要取代Native App還有很長(zhǎng)的路要走.

在功能不涉及到網(wǎng)絡(luò)連接的情況下，Native App可以在離線的狀態(tài)下保證應(yīng)用的正常使用.但Web App是在瀏覽器中運(yùn)行的，其運(yùn)行必須依賴網(wǎng)絡(luò)環(huán)境.雖然HTML5有支持離線存儲(chǔ)的特性，也僅是在用戶使用過(guò)程中，根據(jù)功能需要來(lái)保存用戶數(shù)據(jù)，待用戶下次使用時(shí)直接可以讀取到上一次保存的數(shù)據(jù).在沒(méi)有網(wǎng)絡(luò)的情況下，網(wǎng)頁(yè)無(wú)法正常加載，導(dǎo)致Web App完全無(wú)法使用.現(xiàn)如今，國(guó)內(nèi)的Wifi覆蓋率還比較不夠高，而4G網(wǎng)絡(luò)的資費(fèi)還相對(duì)高昂.在網(wǎng)絡(luò)環(huán)境足夠完善的之前,Web App還無(wú)法完全取代Native App.

[1]愛(ài)娜．HTML5熱潮來(lái)襲，中國(guó)手機(jī)游戲市場(chǎng)面臨轉(zhuǎn)折[EB/OL].http://www.mhtml5.com/2012/04/4818.html,2012-04-11.

[2]Web Apps來(lái)襲，基于HTML5技術(shù)的瀏覽器大戰(zhàn)開(kāi)始[EB/OL].http://www.haoliulanqi.com/201202/1439.html,2012-02-14.

[3]小文字，大體驗(yàn)[EB/OL]．http://mux.baidu.com/?p=2653.html,2012-05-24.

[4]又是為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)[EB/OL]．http://beforweb.com/node/49．2012-02-15.

[5]楊濤，曾維鑫．淺析人機(jī)界面設(shè)計(jì)中的心理學(xué)因素[J]．藝術(shù)與設(shè)計(jì)(理論)，2007，(3)：85-87.

[6]樊文娟．基于Ajax的富客戶端界面的設(shè)計(jì)與實(shí)現(xiàn)[D].蘭州：蘭州大學(xué)碩士學(xué)位論文，2010.

[7]App進(jìn)化論[EB/OL]．http://www.aitinan.com/archives/2242,2011-07-29.

(責(zé)任編校：晴川)

Development and Exploration of Web App Based on HTML5

ZHANG Lan

(Xiehe College, Fujian Normal University, Fuzhou Fujian 350108, China)

For the mobile Internet industry, the appearance of HTML5 brings about the powerful Web App with cross-platform compatibility. It is a page which could directly fit the phone screen, be operated conveniently on browsers, retain strong performance capacity, provide real-time updates and offer user experience similar to Native App. This paper firstly introduces main features of Web App, expounds the realization of Web App based on HTML5 and analyzes opportunities and challenges for its development.

HTML5; Web App; development and exploration

2015-06-04

章斕(1981— )，女，江蘇泰州人，福建師范大學(xué)協(xié)和學(xué)院講師,碩士.研究方向：數(shù)字媒體.

TP31

A

1008-4681(2015)05-0050-04