韓迎紅

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

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

1 HTML5技術(shù)概述

1.1 HTML5技術(shù)

HTML5技術(shù)是網(wǎng)絡(luò)發(fā)展中具有核心價(jià)值的重要技術(shù)代表，作為標(biāo)準(zhǔn)通用語(yǔ)言中的超文本標(biāo)記語(yǔ)言，對(duì)網(wǎng)絡(luò)標(biāo)準(zhǔn)的新標(biāo)簽和使用新特性進(jìn)一步明確是其最重要的技術(shù)優(yōu)勢(shì)，特別是對(duì)移動(dòng)互聯(lián)網(wǎng)移動(dòng)終端設(shè)備在圖像、語(yǔ)音和視頻等方面的支撐功能，有效提高了跨平臺(tái)使用的效率，增強(qiáng)了代碼的開發(fā)效率和利用效率。HTML5技術(shù)在強(qiáng)化WEB頁(yè)面表現(xiàn)能力上有其他技術(shù)不可比擬的優(yōu)勢(shì)，而且能實(shí)現(xiàn)與本地?cái)?shù)據(jù)庫(kù)的關(guān)聯(lián)，提高了數(shù)據(jù)搜索的效率，因此是目前移動(dòng)互聯(lián)網(wǎng)應(yīng)用中普及率最高的核心技術(shù)。從技術(shù)研究領(lǐng)域來(lái)看，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)，作為用來(lái)取代HTML4.01、XHTML1.0等技術(shù)標(biāo)準(zhǔn)，以更好適應(yīng)移動(dòng)互聯(lián)網(wǎng)時(shí)代發(fā)展需要而進(jìn)行研究開發(fā)的重點(diǎn)技術(shù)。該技術(shù)最大的優(yōu)勢(shì)是跟上移動(dòng)互聯(lián)網(wǎng)的發(fā)展需要，讓W(xué)EB標(biāo)準(zhǔn)能適應(yīng)大量新出現(xiàn)的WEB APP的快速發(fā)展需要。該技術(shù)改變了過(guò)去WEB應(yīng)用開發(fā)中，使用多媒體應(yīng)用時(shí)需要增加各種插件，如安裝Flash、JAVA等插件才能進(jìn)行網(wǎng)頁(yè)多媒體功能使用和播放。開發(fā)人員基于HTML5技術(shù)能對(duì)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)頁(yè)游戲的開發(fā)，特別是移動(dòng)端小游戲開發(fā)具有很好的應(yīng)用前景。利用移動(dòng)應(yīng)用接口接入HTML5技術(shù)設(shè)計(jì)的小游戲，能讓用戶在微信朋友圈、小程序等就進(jìn)行不用下載的游戲操作，因此受到用戶歡迎并在社交平臺(tái)廣泛傳播。

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

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

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

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

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

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

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

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

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

WEB前端系統(tǒng)是一種組合類的綜合設(shè)計(jì)系統(tǒng)，一般是由交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、WEB前端開發(fā)等組成的專業(yè)開發(fā)團(tuán)隊(duì)負(fù)責(zé)。從功能上可以分為代碼開發(fā)和界面設(shè)計(jì)或前端設(shè)計(jì)兩個(gè)類型。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ì)過(guò)程，體現(xiàn)的是始終以用戶需求為中心的設(shè)計(jì)原則和設(shè)計(jì)方向。交互設(shè)計(jì)的最佳設(shè)計(jì)目標(biāo)是能對(duì)不同特點(diǎn)的用戶群準(zhǔn)確進(jìn)行界面操作的反應(yīng)預(yù)判。為減少用戶操作中的記憶負(fù)擔(dān)，盡量減少交互中需要記憶的信息量。在用戶做出操作指令之后，通過(guò)及時(shí)反應(yīng)、必要提醒幫助用戶進(jìn)行下一步操作。整個(gè)系統(tǒng)要有良好的糾錯(cuò)、容錯(cuò)功能，在系統(tǒng)出現(xiàn)錯(cuò)誤時(shí)能提供對(duì)應(yīng)的提示信息給用戶，用戶能主動(dòng)進(jìn)行下一步操作。優(yōu)秀的交互設(shè)計(jì)讓用戶最直觀的感受是操作容易，準(zhǔn)確便捷有效，使用起來(lái)感覺(jué)輕松流暢。交互設(shè)計(jì)中必須把握設(shè)計(jì)關(guān)鍵點(diǎn)的需要，從全面了解用戶和產(chǎn)品的交互心理、操作行為特點(diǎn)出發(fā)，對(duì)設(shè)計(jì)的每個(gè)環(huán)節(jié)進(jìn)行細(xì)化。

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

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

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

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

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

WEB前端開發(fā)工程師對(duì)用戶對(duì)面的操作性能、速度和用戶體驗(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)是一個(gè)標(biāo)準(zhǔn)集合而成的數(shù)據(jù)庫(kù)。依據(jù)WEB標(biāo)準(zhǔn)能把頁(yè)面劃分為結(jié)構(gòu)、表現(xiàn)和行為三個(gè)部分并分別對(duì)應(yīng)其使用的標(biāo)準(zhǔn)語(yǔ)言。

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

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

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

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

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

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

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

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

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

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

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

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

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