基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開(kāi)發(fā)

曹華山

（湖南大眾傳媒職業(yè)技術(shù)學(xué)院，湖南 長(zhǎng)沙410100）

1 引言

隨著市場(chǎng)競(jìng)爭(zhēng)的日益激烈，產(chǎn)品生產(chǎn)正逐步向快速交付、頻繁迭代方向發(fā)展，互聯(lián)網(wǎng)產(chǎn)品也是如此。人們對(duì)互聯(lián)網(wǎng)產(chǎn)品的交付周期要求越來(lái)越高。近年來(lái)，隨著移動(dòng)應(yīng)用的興起，移動(dòng)終端的數(shù)量不斷增多[1]。目前，智能手機(jī)已經(jīng)作為人們?nèi)粘Ｉ钅酥凉I(yè)生產(chǎn)中必不可少的移動(dòng)工具?；ヂ?lián)網(wǎng)技術(shù)和移動(dòng)應(yīng)用的充分融合可以有效提升人們的工作效率、生活質(zhì)量，移動(dòng)互聯(lián)網(wǎng)正改變著人們的生活。隨著物聯(lián)網(wǎng)概念的提出，移動(dòng)互聯(lián)網(wǎng)顯得更加重要[2]。因此，未來(lái)的發(fā)展方向勢(shì)必是移動(dòng)互聯(lián)網(wǎng)。

目前，人們?nèi)粘Ｊ褂玫囊苿?dòng)終端操作系統(tǒng)主要分為三大操作系統(tǒng)，分別是IOS、Andriod、Windows。但是真正兼容移動(dòng)前端系統(tǒng)的開(kāi)發(fā)語(yǔ)言較少，以往的開(kāi)發(fā)中往往需要在電腦終端和移動(dòng)終端分別配置和開(kāi)發(fā)兩套不同的系統(tǒng)[3]。此種開(kāi)發(fā)模式導(dǎo)致了開(kāi)發(fā)成本高，開(kāi)發(fā)周期長(zhǎng)，開(kāi)發(fā)工作難以滿足快速交付的基本要求。因此，從前臺(tái)界面入手，尋找可以兼容三大平臺(tái)的開(kāi)發(fā)語(yǔ)言和架構(gòu)勢(shì)在必行。

2移動(dòng)Web及HTML5技術(shù)特點(diǎn)

2.1 移動(dòng)Web

隨著4G、5G、大數(shù)據(jù)技術(shù)的不斷發(fā)展，催生出一大批移動(dòng)社交及服務(wù)軟件，如微信、抖音等，以上軟件對(duì)于移動(dòng)互聯(lián)網(wǎng)的發(fā)展起到了很好的推動(dòng)作用。在社交和服務(wù)軟件的使用過(guò)程中，人們對(duì)于移動(dòng)應(yīng)用的前端使用體驗(yàn)要求不斷提高。

2.2 HTML5技術(shù)及特點(diǎn)

近年來(lái)，逐步興起了HTML5技術(shù)，這是移動(dòng)互聯(lián)網(wǎng)技術(shù)中應(yīng)用最為廣泛的技術(shù)。此種技術(shù)最早產(chǎn)生于20世紀(jì)90年代，最先應(yīng)用于移動(dòng)APP的開(kāi)發(fā)過(guò)程中，很好地解決了用戶體驗(yàn)迭代優(yōu)化以及兼容不同操作系統(tǒng)的問(wèn)題[4]。隨著H5技術(shù)的不斷發(fā)展，Web開(kāi)發(fā)逐步進(jìn)入了一個(gè)新階段，在設(shè)計(jì)標(biāo)準(zhǔn)、開(kāi)發(fā)的標(biāo)準(zhǔn)化等方面取得了較大進(jìn)步，基于HTML5技術(shù)的Web開(kāi)發(fā)技術(shù)有了質(zhì)的提升，例如用戶在使用H5技術(shù)時(shí)，可以將視頻、動(dòng)畫(huà)、圖像和音頻等組件嵌入至網(wǎng)頁(yè)中，很好地提升了用戶的使用體驗(yàn)感[5]。

HTML技術(shù)經(jīng)歷了多個(gè)發(fā)展歷程，例如HTML1主要用于搭建網(wǎng)頁(yè)架構(gòu)，而HTML5則是在在HTML1的基礎(chǔ)上不斷進(jìn)行發(fā)展和更新，創(chuàng)建了自己特有的標(biāo)簽和語(yǔ)法，使得圖片的畫(huà)面等可以嵌套在網(wǎng)頁(yè)中，實(shí)現(xiàn)最終設(shè)計(jì)的效果。與HTML1相比，HTML5具有以下幾個(gè)方面的創(chuàng)新：①使用了結(jié)構(gòu)化的標(biāo)簽語(yǔ)言，如hgroud、footer、section、header等，便于使得代碼結(jié)構(gòu)的清晰性和可讀性得到了很大程度提升；②可以利用localStorage技術(shù)支撐離線存儲(chǔ)技術(shù)；③借助HTML5的IndexedDE技術(shù)可以實(shí)現(xiàn)復(fù)雜數(shù)據(jù)的存儲(chǔ)，使用緩存技術(shù)將文件資料等信息進(jìn)行本地化下載，這便使得用戶可在離線狀態(tài)下使用移動(dòng)應(yīng)用；④HTML5可以發(fā)揮其獨(dú)特的多媒體優(yōu)勢(shì)，實(shí)現(xiàn)移動(dòng)應(yīng)用音頻視頻、圖像功能的展示。在開(kāi)發(fā)移動(dòng)應(yīng)用過(guò)程中，借助網(wǎng)頁(yè)技術(shù)構(gòu)建起組織形式。

3 Web前端系統(tǒng)及HTML5關(guān)鍵技術(shù)

3.1 Web前端系統(tǒng)

Web前端系統(tǒng)的團(tuán)隊(duì)主要包括三個(gè)：交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師和前端開(kāi)發(fā)工程師。其中交互設(shè)計(jì)涉及到從基礎(chǔ)界面設(shè)計(jì)到軟件開(kāi)發(fā)、運(yùn)維等全壽命周期的工作中，設(shè)計(jì)過(guò)程中，應(yīng)該充分考慮目標(biāo)用戶在面對(duì)界面時(shí)可能作出的反應(yīng)。

交互設(shè)計(jì)的注意點(diǎn)主要有：有用戶掌握界面的主動(dòng)權(quán)，對(duì)于錯(cuò)誤的提示要清晰，語(yǔ)言可讀性和易懂性要強(qiáng)，能夠快速地得到反饋，導(dǎo)航和定位功能要有效協(xié)調(diào)，可以方便退出。視覺(jué)設(shè)計(jì)主要從文字、圖像、版式布局、色彩四個(gè)方面入手，圖文并茂，實(shí)現(xiàn)文字和圖像的優(yōu)化布局，對(duì)文字要進(jìn)行藝術(shù)字處理，加強(qiáng)文字在界面中的藝術(shù)感，從而給用戶帶來(lái)良好的視覺(jué)體驗(yàn)。圖像的表現(xiàn)力比文字更加直觀，在圖像和文字的配合下，可以使信息的傳遞感染力更強(qiáng)，圖像和文字、音頻不同，降低了由于地域的不同而產(chǎn)生的交流障礙，是一種可以進(jìn)行全球范圍內(nèi)溝通的語(yǔ)言形式。版式布局是對(duì)復(fù)雜的信息碎片進(jìn)行統(tǒng)一的組織梳理，將不同的圖像和文字等元素進(jìn)行綜合排版，達(dá)到視覺(jué)上的和諧和美化，方便用戶在閱讀過(guò)程中可以準(zhǔn)確把握脈絡(luò)，快速找準(zhǔn)重點(diǎn)。色彩的不同搭配可以為用戶帶來(lái)獨(dú)特的感受，選擇合理的搭配方式，可以強(qiáng)化界面效果。視覺(jué)設(shè)計(jì)師在進(jìn)行視覺(jué)設(shè)計(jì)過(guò)程中，需要了解Photoshop等工具，采用布局、色彩和表單等設(shè)計(jì)方法。

Web開(kāi)發(fā)是各種技術(shù)的融合，包含HTML技術(shù)、CSS技術(shù)和Javascript技術(shù)，給用戶開(kāi)發(fā)出體驗(yàn)較好的界面。Web前端的標(biāo)準(zhǔn)主要有結(jié)構(gòu)標(biāo)準(zhǔn)（HTML標(biāo)準(zhǔn)、XML標(biāo)準(zhǔn)和XHTML標(biāo)準(zhǔn)）。表現(xiàn)標(biāo)準(zhǔn)主要是CSS層，借助CSS技術(shù)可以定制和改善網(wǎng)頁(yè)的效果，還可以實(shí)現(xiàn)圖像的淡化、淡入和淡出等，并且可以進(jìn)行初步的設(shè)計(jì)交互，從而實(shí)現(xiàn)網(wǎng)頁(yè)整體美觀度的提升。借助CSS技術(shù)可以實(shí)現(xiàn)結(jié)構(gòu)碼和表現(xiàn)碼的業(yè)務(wù)分離，降低了站點(diǎn)維護(hù)的難度，簡(jiǎn)化了HTML文檔。行為標(biāo)準(zhǔn)是ECMA國(guó)際標(biāo)準(zhǔn)ECMAScript262標(biāo)準(zhǔn)。另外DOM（Document Object Model，文檔對(duì)象模型）是處置超文本協(xié)議的標(biāo)準(zhǔn)程序接口，借助DOM建立的文檔樹(shù)形結(jié)構(gòu)和API，開(kāi)發(fā)者便可以掌握對(duì)頁(yè)面操作的主動(dòng)權(quán)，可以輕松地實(shí)現(xiàn)節(jié)點(diǎn)的增刪改。網(wǎng)頁(yè)DOM結(jié)構(gòu)如下：

3.2 HTML5關(guān)鍵技術(shù)

3.2.1 canvas技術(shù)

H1界面中相比于傳統(tǒng)的前端技術(shù)，新增了標(biāo)簽，實(shí)現(xiàn)對(duì)圖像的處理，此種標(biāo)簽可以利用2D Programmatic標(biāo)準(zhǔn)接口程序，利用較低的存儲(chǔ)代價(jià)實(shí)現(xiàn)圖像的處理。此種技術(shù)不僅可以繪制圖像，還可以實(shí)現(xiàn)對(duì)圖像的分析和處置。此標(biāo)簽僅僅可以完成HTML頁(yè)面中元素的定義，若要實(shí)現(xiàn)圖像處理，可以借助標(biāo)準(zhǔn)的API程序接口。

3.2.2 Device API技術(shù)

Device API是一種可以訪問(wèn)攝像頭、麥克風(fēng)和地理位置的標(biāo)準(zhǔn)API接口。此種標(biāo)準(zhǔn)定義了一套可以實(shí)現(xiàn)對(duì)本地設(shè)備產(chǎn)生的多媒體數(shù)據(jù)的在線傳輸，如進(jìn)行視頻的錄制和保存。Geolocation定位API是HTML5的重要組件，通過(guò)調(diào)用此種API可以幫助用戶獲取當(dāng)前位置。目前，市場(chǎng)上的瀏覽器種類(lèi)較多，但并非所有瀏覽器均支持Geolocation定位API。

3.2.3 表單技術(shù)

表單技術(shù)是Web應(yīng)用中最常用的技術(shù)，在電腦端可以使用HTML和javascript技術(shù)實(shí)現(xiàn)用戶基本信息的輸入，在移動(dòng)應(yīng)用端，由于鍵盤(pán)輸入受限。HTML5根據(jù)用戶的輸入方式進(jìn)行了一套方案優(yōu)化，并對(duì)表單做了一些功能優(yōu)化，如對(duì)表單的結(jié)構(gòu)進(jìn)行自由化，在傳統(tǒng)HTML架構(gòu)中，表單中的各個(gè)元素必須防止在form標(biāo)簽中，比如select和input標(biāo)簽，在HTML5中，取消了此種限制，而是根據(jù)自身ID實(shí)現(xiàn)元素的定位，此種方式讓表單的自由度更高。另外，表單的輸入類(lèi)型變得更加多樣化，HTML5技術(shù)引入了email、color、search、date等多種類(lèi)型的輸入元素，例如：。

4 基于HTML5的移動(dòng)Web前端系統(tǒng)搭建步驟

4.1 基本流程

構(gòu)建Web前端的基本流程分為需求調(diào)研分析、原型設(shè)計(jì)、前端代碼開(kāi)發(fā)。其中原型設(shè)計(jì)及中分為低保真和高保真設(shè)計(jì)。用戶的需求分析包含分析用戶群分析和人物角色分析，用戶調(diào)研可以采用問(wèn)卷調(diào)查、可用性測(cè)試兩種方式進(jìn)行。低保真設(shè)計(jì)主要進(jìn)行交互設(shè)計(jì)，高保真設(shè)計(jì)主要負(fù)責(zé)視覺(jué)設(shè)計(jì)、初期前端開(kāi)發(fā)。

4.2 移動(dòng)Web前端開(kāi)發(fā)

首先對(duì)代碼進(jìn)行分層，分為結(jié)構(gòu)層、表現(xiàn)層和行為層三層。三層在代碼級(jí)別分別對(duì)應(yīng)HTML、CSS和JaveScript三種不同的代碼文件。結(jié)構(gòu)層要實(shí)現(xiàn)對(duì)頁(yè)頭、導(dǎo)航、內(nèi)容和頁(yè)腳的定義，然后在其基礎(chǔ)上實(shí)現(xiàn)HTML標(biāo)簽的定義，在標(biāo)簽定義過(guò)程中，要注意幾點(diǎn)問(wèn)題。首先要使用帶具體語(yǔ)意的標(biāo)簽元素；其次，只把