章 斕

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

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

章 斕

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

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

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

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

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

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

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

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

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

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

1.1 為觸屏移動設(shè)備而設(shè)計

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

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

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

1.1.2 文字排版

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

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

1.1.3 尺寸大小

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

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

1.1.4 交互創(chuàng)新

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

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

1.2 為用戶體驗而設(shè)計

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

1.2.1 功能簡約

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

1.2.2 流體布局

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

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

1.2.3 主體突出

集中顯示應(yīng)用的重要功能是移動設(shè)備界面設(shè)計的關(guān)鍵，因為用戶一打開界面，這些功能的入口就能迅速跳入用戶的眼睛，鼓勵、引導(dǎo)用戶完成任務(wù)或工作.同時,Web App的主體功能應(yīng)該是簡單的，因為用戶需要頻繁操作.結(jié)合清晰的功能入口，專注單一功能的流程設(shè)計，在該流程的操作中不要提供其他功能入口.

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

1.2.4 頁面精悍

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

1.2.5 徹底導(dǎo)航

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

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

1.2.6 易于點擊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 Web App的機(jī)遇

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

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

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

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

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

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

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

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

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

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

[6]樊文娟．基于Ajax的富客戶端界面的設(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