基于HTML5的Web App的開發與探索

章 斕

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

基于HTML5的Web App的開發與探索

章 斕

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

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

HTML5；Web APP；開發探索

Web App，即網頁應用.它是一種依賴于Web瀏覽器，通過網絡進行訪問的應用程序.HTML5的強勢發展、智能手機的迅速普及，以及優質的用戶體驗都極大地促進了Web App的發展.

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

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

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

1 以用戶為中心的設計

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

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

1.1 為觸屏移動設備而設計

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

1.1.1 圖標設計

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

1.1.2 文字排版

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

由于平板設備的顯示屏亮度和對比度要高于普通電腦，因此很多在普通電腦上合適的字體和設計直接搬到平板設備上會由于背景的亮度而產生實物過虛的問題.要盡量避免這些問題，在移動終端適當地加大文字尺寸是比較明智的[3].

1.1.3 尺寸大小

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

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

1.1.4 交互創新

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

可以在游戲或者其他娛樂類的產品中嘗試各種復雜炫目的交互效果，但對于用戶需要時常用到的工具型的應用來說，在導航結構、瀏覽方式及相應的視覺交互形式等方面要盡量保持規范、簡潔，符合用戶的認知，滿足用戶的期望.

1.2 為用戶體驗而設計

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

1.2.1 功能簡約

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

1.2.2 流體布局

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

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

1.2.3 主體突出

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

應用的每個頁面顯示的內容是有很強的針對性的，讓用戶迅速明白自己所處位置，獲取哪方面的內容，同時也要讓用戶能迅速跳轉到別的頁面.

1.2.4 頁面精悍

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

1.2.5 徹底導航

在有限的屏幕空間里，導航能提升Web App的可用性，進而提升品牌和可信度.優秀的導航設計可以讓用戶便捷地瀏覽頁面內容，同時還能將正確的信息架構傳達給用戶，直觀地表現出Web App的內容.

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

1.2.6 易于點擊

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

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

2 基于HTML5的Web App的實現

HTML5通常指包括HTML5，CSS3和JavaScript在內的一套技術組合.HTML5的出現讓網頁可以僅通過HTML5就實現很多原來需要依賴flash等插件實現的效果，極大地豐富了網頁的表現能力.也正是HTML5讓Web App可以給用戶提供不同于傳統網頁的展示效果和交互方式，讓Web App的用戶可以擁有和Native App用戶相同的體驗.而JavaScript腳本和AJAX的廣泛應用，改變了傳統網頁的技術架構和頁面組織形式，為Web App的發展打下了良好的基礎.

2.1 Web App技術架構

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

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

服務器主要負責接受前端的接口調用，負責對應接口的業務邏輯處理，將需要儲存的處理結果使用SQL語句保存到數據庫，最后將處理結果返回給前端數據層.數據庫僅被動地負責數據存儲，通過服務器的操作，保證數據庫的數據始終是最新的.

這種分層方式類似于傳統的Native App，使用前端數據層代替Native App的網絡層的職能.其設計目的在于盡可能讓各層負責的工作相互獨立、各司其職，使得在業務、接口甚至技術方案發生變更時，可以影響到盡量少的模塊.

2.2 Web App實現關鍵技術

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

UI界面層負責界面顯示和用戶交互，它在實現時使用了HTML、CSS、JavaScript、JQuery等技術.

在構建界面時，采用了HTML+CSS這個網頁制作時結構和表現分離的經典結構.

HTML在UI界面層中作為頁面框架，使用div進行頁面結構的搭建.HTML5給HTML帶來了一些標準化的新標簽，比如：標簽增加了time的類型，在Windows，Android和IOS中，time標簽的實現取決于瀏覽器的實現，這樣在不同的系統中就可以提供適合各自系統的實現方案.

CSS在網頁制作中負責提供網頁的樣式.在HTML生成頁面時，對需要提供樣式的標簽都提供了class或者id的屬性.CSS可以根據這些屬性結合其選擇器，對這些標簽進行樣式的修改.CSS3更是提供了便于使用的圓角、陰影、漸變等效果和平移、縮放、旋轉等特效，讓Web App的界面表現能力更加接近于Native App.

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

前端數據層負責與服務端進行交互，需要對服務端發起HTTP請求，并解析服務端返回的數據.它在實現時使用了AJAX這個重要技術.

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

2.3 Web App頁面體驗優化

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

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

OPOA，即One Page, One Application，也就是單頁面應用.在傳統網站中，導航里的每一個鏈接點擊后都會跳轉到一個獨立的頁面.而在OPOA的網頁中，在用戶點擊導航欄的Tab標簽時，并沒有進行頁面跳轉，而是執行了一段JavaScript腳本，這段腳本會隱藏當前顯示的內容，并且將下一個頁面的內容展示出來.

3 機遇與挑戰

3.1 Web App的機遇

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

3.2 Web App面臨的挑戰

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

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

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

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

[2]Web Apps來襲，基于HTML5技術的瀏覽器大戰開始[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]又是為了觸屏移動設備而設計[EB/OL]．http://beforweb.com/node/49．2012-02-15.

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

[6]樊文娟．基于Ajax的富客戶端界面的設計與實現[D].蘭州：蘭州大學碩士學位論文，2010.

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

(責任編校：晴川)

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— )，女，江蘇泰州人，福建師范大學協和學院講師,碩士.研究方向：數字媒體.

TP31

A

1008-4681(2015)05-0050-04