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

韓迎紅

（山西警官職業(yè)學(xué)院信息工程系 山西省太原市 030006）

進(jìn)入新世紀(jì)以來，互聯(lián)網(wǎng)接入方式的變化，移動互聯(lián)網(wǎng)、智能終端設(shè)備的普及，讓全面上網(wǎng)時代已經(jīng)來臨。特別是在國家大力推進(jìn)5G基站建設(shè)，在公共場所和交通工具上免費(fèi)推廣無線網(wǎng)絡(luò)，智能手機(jī)功能日益豐富完善且價(jià)格更加親民等因素，讓我國已經(jīng)成為世界上移動設(shè)備上網(wǎng)人數(shù)排在首位的國家?；贖TML5技術(shù)的移動Web技術(shù)是目前適應(yīng)手機(jī)移動終端屏幕顯示特點(diǎn)需要的專用技術(shù)，具有廣闊的應(yīng)用前景。本文通過對HTML5技術(shù)、移動Web技術(shù)進(jìn)行工作原理、性能優(yōu)勢分析，探討了優(yōu)化改進(jìn)基于HTML5技術(shù)的移動Web前端設(shè)計(jì)與開發(fā)的途徑方法，抓住HTML5關(guān)鍵技術(shù)的特點(diǎn)針對提高移動Web前端設(shè)計(jì)與開發(fā)的有效性，提出了具有實(shí)踐價(jià)值的對策和建議。

1 HTML5技術(shù)概述

1.1 HTML5技術(shù)

HTML5技術(shù)是網(wǎng)絡(luò)發(fā)展中具有核心價(jià)值的重要技術(shù)代表，作為標(biāo)準(zhǔn)通用語言中的超文本標(biāo)記語言，對網(wǎng)絡(luò)標(biāo)準(zhǔn)的新標(biāo)簽和使用新特性進(jìn)一步明確是其最重要的技術(shù)優(yōu)勢，特別是對移動互聯(lián)網(wǎng)移動終端設(shè)備在圖像、語音和視頻等方面的支撐功能，有效提高了跨平臺使用的效率，增強(qiáng)了代碼的開發(fā)效率和利用效率。HTML5技術(shù)在強(qiáng)化WEB頁面表現(xiàn)能力上有其他技術(shù)不可比擬的優(yōu)勢，而且能實(shí)現(xiàn)與本地?cái)?shù)據(jù)庫的關(guān)聯(lián)，提高了數(shù)據(jù)搜索的效率，因此是目前移動互聯(lián)網(wǎng)應(yīng)用中普及率最高的核心技術(shù)。從技術(shù)研究領(lǐng)域來看，HTML5技術(shù)是由HTML技術(shù)、CSS和JAVA技術(shù)整合組成的綜合類應(yīng)用技術(shù)，2015年由W3C發(fā)布了該技術(shù)最新的網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)，目前谷歌、火狐、微軟等大部分主流瀏覽器最新版本都支持HTML5技術(shù)的應(yīng)用。

HTML5技術(shù)最早誕生于2008年1月，是作為HTML下一代的主要標(biāo)準(zhǔn)，作為用來取代HTML4.01、XHTML1.0等技術(shù)標(biāo)準(zhǔn)，以更好適應(yīng)移動互聯(lián)網(wǎng)時代發(fā)展需要而進(jìn)行研究開發(fā)的重點(diǎn)技術(shù)。該技術(shù)最大的優(yōu)勢是跟上移動互聯(lián)網(wǎng)的發(fā)展需要，讓W(xué)EB標(biāo)準(zhǔn)能適應(yīng)大量新出現(xiàn)的WEB APP的快速發(fā)展需要。該技術(shù)改變了過去WEB應(yīng)用開發(fā)中，使用多媒體應(yīng)用時需要增加各種插件，如安裝Flash、JAVA等插件才能進(jìn)行網(wǎng)頁多媒體功能使用和播放。開發(fā)人員基于HTML5技術(shù)能對WEB應(yīng)用進(jìn)行全新的開發(fā)架構(gòu)設(shè)計(jì)，讓應(yīng)用界面更加美觀、具有更好的交互性能便于用戶操作。

1.2 HTML5技術(shù)應(yīng)用方向

（1）在網(wǎng)絡(luò)游戲開發(fā)中。HTML5技術(shù)能讓瀏覽器在不安裝flash等插件條件下就能利用java等技術(shù)進(jìn)行網(wǎng)頁游戲的開發(fā)，特別是移動端小游戲開發(fā)具有很好的應(yīng)用前景。利用移動應(yīng)用接口接入HTML5技術(shù)設(shè)計(jì)的小游戲，能讓用戶在微信朋友圈、小程序等就進(jìn)行不用下載的游戲操作，因此受到用戶歡迎并在社交平臺廣泛傳播。

（2）在網(wǎng)絡(luò)營銷中。HTML5技術(shù)能設(shè)計(jì)開發(fā)功能豐富、頁面美觀而且非常適應(yīng)移動智能設(shè)備互動的頁面。營銷人員借助HTML5技術(shù)開發(fā)各種營銷頁面，出現(xiàn)了基于HTML5技術(shù)的H5營銷概念，這種形式的營銷以小游戲、邀請函、賀卡和測試題等新穎美觀的方式進(jìn)行品牌宣傳運(yùn)營活動，介紹傳播產(chǎn)品的使用和功效，不僅形式靈活也更為用戶喜歡。

（3）在WEB APP開發(fā)中。HTML5技術(shù)能支持WEB APP開發(fā)利用描述文件功能實(shí)現(xiàn)對任務(wù)的離線執(zhí)行。打破了傳統(tǒng)WEB技術(shù)必須在線的局限，在可能出現(xiàn)掉線時保證應(yīng)用不會被中斷，用戶有更好的持續(xù)使用感受。HTML5技術(shù)還利用新增的本地存儲、音頻視頻播放等功能，讓用戶基于頁面的交互感受和使用原生APP一樣，更加便捷而功能豐富。

1.3 HTML5關(guān)鍵技術(shù)介紹

（1）canvas技術(shù)。該技術(shù)作為HTML新增加的功能，能利用JAVA腳本來實(shí)現(xiàn)對圖像的實(shí)時繪制，能對二維和三維圖像進(jìn)行處理，在數(shù)據(jù)可視化支撐下，能利用三維模型對新建圖像數(shù)據(jù)進(jìn)行修改，也能從各角度觀看圖像清晰真實(shí)的展示。

（2）WEBNotifications技術(shù)。該技術(shù)突破了傳統(tǒng)文本通知方式，新增了HTML通知方式，能在網(wǎng)絡(luò)提示畫面顯示的桌面，把當(dāng)前不在活動狀態(tài)下的頁面存儲于瀏覽器進(jìn)程中。

（3）Video標(biāo)簽技術(shù)。不再必須加載插件才能進(jìn)行視頻播放，播放的視頻文件能實(shí)現(xiàn)和網(wǎng)站內(nèi)容的聯(lián)系互動，結(jié)合canvas技術(shù)能實(shí)現(xiàn)對視頻框架的修改，也能實(shí)現(xiàn)動畫制作、對視頻進(jìn)行截圖、識別視頻截圖內(nèi)容的功能。

（4）Application Cache技術(shù)。該技術(shù)和瀏覽器緩存的結(jié)合，能減少瀏覽器緩存的次數(shù)，利用本地?cái)?shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲，將HTML模板存于本地緩存中，于線下使用相應(yīng)的應(yīng)用。

（5）表單技術(shù)。該技術(shù)應(yīng)用于文本輸入、信息搜索類的場景時，采用數(shù)據(jù)驗(yàn)證、焦點(diǎn)處理和頁面元素互相印證、發(fā)送電子郵件等處理方式，減少用戶操作的繁瑣過程，利用鍵盤快捷方式就能實(shí)現(xiàn)功能使用，大大改進(jìn)了用戶使用感受。

2 WEB前端設(shè)計(jì)

WEB前端系統(tǒng)是一種組合類的綜合設(shè)計(jì)系統(tǒng)，一般是由交互設(shè)計(jì)、視覺設(shè)計(jì)、WEB前端開發(fā)等組成的專業(yè)開發(fā)團(tuán)隊(duì)負(fù)責(zé)。從功能上可以分為代碼開發(fā)和界面設(shè)計(jì)或前端設(shè)計(jì)兩個類型。WEB前端系統(tǒng)構(gòu)建流程如圖1所示。

圖1：WEB前端系統(tǒng)構(gòu)建流程

2.1 交互設(shè)計(jì)

在WEB前端系統(tǒng)設(shè)計(jì)中，交互設(shè)計(jì)是貫穿從基礎(chǔ)界面設(shè)計(jì)到概念表達(dá)的所有設(shè)計(jì)過程，體現(xiàn)的是始終以用戶需求為中心的設(shè)計(jì)原則和設(shè)計(jì)方向。交互設(shè)計(jì)的最佳設(shè)計(jì)目標(biāo)是能對不同特點(diǎn)的用戶群準(zhǔn)確進(jìn)行界面操作的反應(yīng)預(yù)判。為減少用戶操作中的記憶負(fù)擔(dān)，盡量減少交互中需要記憶的信息量。在用戶做出操作指令之后，通過及時反應(yīng)、必要提醒幫助用戶進(jìn)行下一步操作。整個系統(tǒng)要有良好的糾錯、容錯功能，在系統(tǒng)出現(xiàn)錯誤時能提供對應(yīng)的提示信息給用戶，用戶能主動進(jìn)行下一步操作。優(yōu)秀的交互設(shè)計(jì)讓用戶最直觀的感受是操作容易，準(zhǔn)確便捷有效，使用起來感覺輕松流暢。交互設(shè)計(jì)中必須把握設(shè)計(jì)關(guān)鍵點(diǎn)的需要，從全面了解用戶和產(chǎn)品的交互心理、操作行為特點(diǎn)出發(fā)，對設(shè)計(jì)的每個環(huán)節(jié)進(jìn)行細(xì)化。

交互設(shè)計(jì)的要點(diǎn)有：幫助用戶始終掌握界面操作的主動權(quán)，由用戶依據(jù)自己的需求來進(jìn)行下一步操作決定。在頁面出現(xiàn)錯誤提示時，系統(tǒng)提示簡單而清晰有效，對誤操作可能帶來的后果要進(jìn)行說明。在交互過程中避免使用難懂的機(jī)器語言，用明確下一步干什么的簡單直觀語言進(jìn)行表述。要縮短頁面反饋的時間，在用戶等待頁面反饋的過程中采用一個其他響應(yīng)畫面或者語言的方式，給用戶短暫等待的心理暗示。在頁面操作過程中，增加返回之前頁面的按鈕，便于用戶進(jìn)行信息接收回復(fù)或者其他中斷操作之后返回之前編輯操作的頁面。在交互中要提高幫助的有效性，減少用戶操作中遇到的疑難雜癥和困惑之處，提高用戶使用感受。在頁面導(dǎo)航設(shè)計(jì)中，選擇最合適、最便捷的跳轉(zhuǎn)方式實(shí)現(xiàn)導(dǎo)航，讓主要導(dǎo)航和輔助導(dǎo)航之間功能協(xié)調(diào)統(tǒng)一，操作輕松直觀。在頁面定位和退出操作中，有多種選項(xiàng)供用戶選擇，可以選擇直接定位跳轉(zhuǎn)，也可以選擇層層后退頁面，慢慢退出頁面操作。

2.2 視覺設(shè)計(jì)

視覺設(shè)計(jì)在軟件系統(tǒng)設(shè)計(jì)中被稱之為UI設(shè)計(jì)，從字面理解就是界面設(shè)計(jì)，是用戶看到的界面效果設(shè)計(jì)。從深層次看，UI設(shè)計(jì)是比較復(fù)雜的系統(tǒng)美化設(shè)計(jì)過程，不是簡單地把需要的控件功能進(jìn)行裝飾設(shè)計(jì)，更要將美觀、友好和用戶需求以視覺設(shè)計(jì)展示出來。從界面文字設(shè)計(jì)上看，文字不僅承載相應(yīng)的語言信息，還要采用藝術(shù)化加工設(shè)計(jì)手法，成為視覺形象符號。通過對文字界面的設(shè)計(jì)編排，提高文字信息內(nèi)容的可讀性和明確性，提高文字界面的藝術(shù)視覺感受，讓用戶有良好的文字視覺感受。從頁面圖像設(shè)計(jì)上看，發(fā)揮圖像的主觀表現(xiàn)力，通過和文字的相輔相成，讓頁面?zhèn)鬟f的信息更加豐富。文字作為全球性不受聲音、文化、民族等其他因素局限的交流方式，要體現(xiàn)語言多樣化的優(yōu)勢。如果用戶不能選擇自己熟悉的語言進(jìn)行頁面閱讀，就需要圖像來對文字表達(dá)的內(nèi)容進(jìn)行輔助表達(dá)，從而讓用戶消除語言文字陌生感，比較直觀的理解頁面內(nèi)容。從排版布局上看，頁面上的信息內(nèi)容比較豐富而零散。通過對文字、圖片等視覺元素組織和排版設(shè)計(jì)，不僅能實(shí)現(xiàn)良好的視覺感受，也能在頁面閱讀中找到閱讀重點(diǎn)、搜索路徑，合理的排版能讓用戶快速進(jìn)入頁面操作過程。從頁面色彩設(shè)計(jì)上看，不同色彩的搭配會給用戶帶來不一樣的操作體驗(yàn)。界面的色彩設(shè)計(jì)和排版設(shè)計(jì)、交互設(shè)計(jì)是同時需要考慮的設(shè)計(jì)因素，只有將這些設(shè)計(jì)的內(nèi)容進(jìn)行綜合統(tǒng)籌和效果強(qiáng)化，才能讓W(xué)EB前端系統(tǒng)設(shè)計(jì)取得更好的設(shè)計(jì)效果。

3 基于HTML5技術(shù)的移動Web前端開發(fā)

3.1 移動WEB前端開發(fā)標(biāo)準(zhǔn)

WEB前端開發(fā)工程師對用戶對面的操作性能、速度和用戶體驗(yàn)感受直接負(fù)責(zé)，需要依據(jù)大量的技術(shù)標(biāo)準(zhǔn)才能實(shí)現(xiàn)網(wǎng)絡(luò)界面設(shè)計(jì)的良好體驗(yàn)。常用的WEB設(shè)計(jì)標(biāo)準(zhǔn)是一個標(biāo)準(zhǔn)集合而成的數(shù)據(jù)庫。依據(jù)WEB標(biāo)準(zhǔn)能把頁面劃分為結(jié)構(gòu)、表現(xiàn)和行為三個部分并分別對應(yīng)其使用的標(biāo)準(zhǔn)語言。

（1）結(jié)構(gòu)標(biāo)準(zhǔn)采用HTML、XML、XHTML等超文本標(biāo)記語言作為網(wǎng)頁文檔標(biāo)準(zhǔn)語言。HTML5是目前主流使用的版本，XML作為可擴(kuò)展的標(biāo)記語言是用于電子文件標(biāo)記的特殊語言，是下一代WEB設(shè)計(jì)的趨勢。XHTML可擴(kuò)展文本標(biāo)記語言是對HTML4的優(yōu)化產(chǎn)品，在跨平臺使用中因?yàn)楦訃?yán)謹(jǐn)規(guī)范的書寫標(biāo)準(zhǔn)而得到廣泛使用。

（2）表現(xiàn)標(biāo)準(zhǔn)采用CSS層疊樣式表來表現(xiàn)文件樣式。利用CSS技術(shù)能實(shí)現(xiàn)對網(wǎng)頁顯示效果的優(yōu)化、定制和改善，目前已經(jīng)有濾鏡、圖像漸變、淡化等多種圖像顯示效果，而且能和用戶實(shí)現(xiàn)初步的設(shè)計(jì)交互，設(shè)計(jì)更受用戶喜愛的前端美化頁面。CSS技術(shù)和HTML、XHTML技術(shù)結(jié)構(gòu)起來，讓表現(xiàn)和結(jié)構(gòu)的展示碼實(shí)現(xiàn)了分離，對站點(diǎn)外觀的維護(hù)工作變得更加簡單，提高了瀏覽器加載速度，增強(qiáng)了用戶良好的操作感受。

（3）行為標(biāo)準(zhǔn)采用腳本程序設(shè)計(jì)語言，是遵循國際通用標(biāo)準(zhǔn)的DOM文檔對象模型。該技術(shù)是處理可拓展標(biāo)識語言的標(biāo)準(zhǔn)程序接口，能將頁面映射分解為由眾多標(biāo)簽節(jié)點(diǎn)構(gòu)成的多層級結(jié)構(gòu)，從而為創(chuàng)建文檔樹形圖提供API。在該技術(shù)支撐下，頁面開發(fā)設(shè)計(jì)工程師能更加輕松地修改、添加節(jié)點(diǎn)，掌握了頁面內(nèi)容和結(jié)構(gòu)設(shè)計(jì)的主動權(quán)。數(shù)據(jù)流媒體處理示意圖如圖2所示。

圖2：數(shù)據(jù)流媒體處理示意圖

3.2 移動WEB前端設(shè)計(jì)原則

（1）界面要設(shè)計(jì)簡潔，方便操作。在移動頁面瀏覽時，最吸引用戶的是各種豐富的圖片。但是對移動WEB來說，手機(jī)等智能終端屏幕的尺寸限制了圖片使用，圖片并不是越多越好，過多過雜的圖片會讓移動頁面用戶感到找不到重點(diǎn)，產(chǎn)生視覺上的疲勞。因此移動界面設(shè)計(jì)中圖片要起到畫龍點(diǎn)睛的效果，把關(guān)鍵主題信息在界面上有比較突出的表現(xiàn)。一般字體選擇好識別的標(biāo)準(zhǔn)字體，顏色來突出顯示內(nèi)容時，也要遵循一個頁面色彩不超過三種的用色原則。

（2）界面要突出用戶使用需求。以人為本是互聯(lián)網(wǎng)發(fā)展中必須遵循的主要設(shè)計(jì)理念。用戶體驗(yàn)比頁面內(nèi)容更要受到設(shè)計(jì)師的關(guān)注，因?yàn)橹挥辛己糜脩趔w驗(yàn)感受的頁面才能讓用戶進(jìn)行瀏覽和后續(xù)操作。要從用戶需求出發(fā)進(jìn)行界面設(shè)計(jì)，讓用戶在界面上停留時間越長越能激發(fā)用戶操作使用頁面的需求。

（3）界面要實(shí)現(xiàn)個性化可定制。移動互聯(lián)網(wǎng)和傳統(tǒng)互聯(lián)網(wǎng)相比，是屬于嵌入式系統(tǒng)，針對不同用戶群體有不同的市場定位，因此界面設(shè)計(jì)中要采用模塊化設(shè)計(jì)，用可定制功能滿足多元化個性化用戶的需要。

3.3 移動WEB前端設(shè)計(jì)開發(fā)應(yīng)用前景

（1）向在線教育、網(wǎng)絡(luò)電商和流媒體等相關(guān)垂直行業(yè)發(fā)展。HTML5技術(shù)能通過標(biāo)記視頻播放位置，無插件播放等優(yōu)勢促進(jìn)垂直行業(yè)的功能實(shí)現(xiàn)。

（2）向網(wǎng)頁交互游戲發(fā)展。HTML5技術(shù)能實(shí)現(xiàn)游戲無需下載的交互使用，包含的社交屬性比原生APP更有成本優(yōu)勢和競爭優(yōu)勢，特別是在跨屏互動等交互性能更加突出的方向拓展應(yīng)用是未來研究方向。

（3）向傳媒業(yè)的內(nèi)容填充方向發(fā)展。HTML5技術(shù)能讓新媒體的編排發(fā)布變得更加容易，模板化內(nèi)容替換功能將推動傳統(tǒng)媒體向新媒體的快速轉(zhuǎn)型。

基于HTML5技術(shù)的移動Web前端設(shè)計(jì)與開發(fā)是一項(xiàng)適應(yīng)移動互聯(lián)網(wǎng)發(fā)展的全新領(lǐng)域，本文通過對設(shè)計(jì)與開發(fā)的標(biāo)準(zhǔn)、原則和應(yīng)用場景、發(fā)展前景的研究，對優(yōu)化和改進(jìn)移動Web前端設(shè)計(jì)與開發(fā)提出了一些建議，旨在促進(jìn)HTML5技術(shù)在移動Web中得到更好的應(yīng)用和發(fā)展。