秦源

（石河子大學(xué)信息科學(xué)與技術(shù)學(xué)院，新疆 石河子 832003）

0 引言

隨著網(wǎng)絡(luò)信息時(shí)代的迅速來臨，智能手機(jī)在人們?nèi)粘Ｉ?、工作中所發(fā)揮的作用也越來越大。雖然現(xiàn)階段人們?nèi)粘Ｊ褂玫囊苿?dòng)終端操作系統(tǒng)已經(jīng)有IOS、Andriod、Windows等幾種，但真正具備兼容移動(dòng)前端系統(tǒng)開發(fā)的語言卻少之又少。傳統(tǒng)的系統(tǒng)開發(fā)工作主要是通過在電腦終端與移動(dòng)終端分別設(shè)置不同開發(fā)系統(tǒng)的方式進(jìn)行移動(dòng)前端系統(tǒng)的開發(fā)和研究工作。由于這種開發(fā)模式具有成本高、周期長(zhǎng)且開發(fā)速度緩慢等缺點(diǎn)，已經(jīng)無法滿足互聯(lián)網(wǎng)信息時(shí)代發(fā)展的要求。對(duì)此，研究人員應(yīng)該從前臺(tái)界面著手，從中尋找能夠有效兼容各個(gè)平臺(tái)的開發(fā)語言和架構(gòu)，推動(dòng)系統(tǒng)開發(fā)工作的順利開展。

1 HTML5技術(shù)及Web技術(shù)概述

互聯(lián)網(wǎng)技術(shù)與移動(dòng)應(yīng)用的深度融合，不但促進(jìn)了人們工作效率、生活質(zhì)量的全面提升，而且使人們的生活、工作方式發(fā)生了翻天覆地的變化。所以，移動(dòng)互聯(lián)網(wǎng)必然是人類社會(huì)未來發(fā)展的必然趨勢(shì)。4G、5G、大數(shù)據(jù)技術(shù)迅速發(fā)展，為微信、抖音等移動(dòng)社交服務(wù)軟件的發(fā)展提供了強(qiáng)有力的技術(shù)支持。在社交服務(wù)軟件開發(fā)和應(yīng)用的過程中，人們對(duì)移動(dòng)應(yīng)用全段使用體驗(yàn)提出的要求也隨之越來越高。而HTML5技術(shù)則成了近年來移動(dòng)互聯(lián)網(wǎng)技術(shù)中應(yīng)用最廣泛的先進(jìn)技術(shù)手段之一。誕生于20世紀(jì)90年代的HTML5技術(shù)，最初主要發(fā)揮著為移動(dòng)APP開發(fā)提供技術(shù)服務(wù)的作用，該技術(shù)的應(yīng)用，徹底解決了用戶在體驗(yàn)迭代優(yōu)化和兼容不同類型操作系統(tǒng)時(shí)出現(xiàn)的問題?；ヂ?lián)網(wǎng)技術(shù)的迅速發(fā)展和普及、HTML5技術(shù)的大范圍應(yīng)用將Web前端開發(fā)與設(shè)計(jì)推向了新的階段。研究人員在標(biāo)準(zhǔn)設(shè)計(jì)、開發(fā)等各方面取得了長(zhǎng)足進(jìn)步，以HTML5技術(shù)為依托的Web開發(fā)技術(shù)水平得到了有效提升，通過將視頻、動(dòng)畫、圖像等融入網(wǎng)頁中，增強(qiáng)了用戶的使用體驗(yàn)感。

2 基于HTML5的移動(dòng)Web前端技術(shù)分析

2.1 移動(dòng)Web前端開發(fā)技術(shù)

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

交互設(shè)計(jì)是軟件設(shè)計(jì)工作的關(guān)鍵環(huán)節(jié)之一，由于軟件設(shè)計(jì)的全過程中，不管是基礎(chǔ)設(shè)計(jì)，還是概念表達(dá)都涉及了交互設(shè)計(jì)，因此為了保證軟件設(shè)計(jì)工作的順利完成，設(shè)計(jì)人員應(yīng)該充分重視交互設(shè)計(jì)工作的重要性。首先，明確軟件設(shè)計(jì)的目標(biāo)，從不同層次開展用戶群的測(cè)試檢驗(yàn)工作，完善和優(yōu)化軟件設(shè)計(jì)方案；其次，采取有效措施減少軟件設(shè)計(jì)過程中的信息總量，降低后期軟件應(yīng)用過程中數(shù)據(jù)存儲(chǔ)的壓力；最后，嚴(yán)格按照系統(tǒng)功能設(shè)計(jì)要求，及時(shí)向用戶彈出處理錯(cuò)誤提示，保證用戶可以根據(jù)自身使用要求，自主選擇錯(cuò)誤處理方式。并充分發(fā)揮交互設(shè)計(jì)功能的優(yōu)勢(shì)，增強(qiáng)用戶的使用體驗(yàn)，增強(qiáng)用戶使用應(yīng)用程序的信息，提高軟件應(yīng)用的效果[1]。

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

軟件設(shè)計(jì)中的視覺設(shè)計(jì)也是影響軟件設(shè)計(jì)質(zhì)量和效果的關(guān)鍵因素之一，視覺設(shè)計(jì)也就是軟件設(shè)計(jì)中的UI視覺設(shè)計(jì)，其主要是從以下幾方面著手對(duì)軟件界面進(jìn)行相應(yīng)視覺設(shè)計(jì)，從而達(dá)到增強(qiáng)軟件視覺效果的目的。

（1）文字。系統(tǒng)界面開發(fā)設(shè)計(jì)中的文字與圖像等基本元素是信息傳遞不可或缺的重要載體，由于單一的圖像傳遞方式無法體現(xiàn)出系統(tǒng)界面設(shè)計(jì)的最佳效果，所以設(shè)計(jì)人員在系統(tǒng)界面設(shè)計(jì)過程中，應(yīng)該增加相應(yīng)的文字，才能呈現(xiàn)出軟件設(shè)計(jì)界面的最佳效果。而其為了豐富軟件設(shè)計(jì)表達(dá)的內(nèi)涵，設(shè)計(jì)人員在開展軟件設(shè)計(jì)工作時(shí)，應(yīng)該合理運(yùn)用文字豐富軟件界面，才能在增強(qiáng)軟件界面藝術(shù)魅力與視覺沖擊力的基礎(chǔ)上，為用戶使用應(yīng)用軟件提供更好的使用體驗(yàn)。

（2）圖像。圖像是一種最直觀且有效的信息表達(dá)和傳遞方式。圖像與文字的緊密結(jié)合，不但豐富了頁面信息傳遞的效果，而且豐富了信息傳遞的內(nèi)涵。圖像與聲音和文字等信息傳遞方式相比，其作為一種視覺化語言，有效地縮短了空間距離，拉近了用戶之間的距離，提高了用戶軟件使用的效率。

（3）版式布局。如果網(wǎng)站向用戶傳遞的信息不僅零散且內(nèi)容過于復(fù)雜的話，該網(wǎng)站必須將信息內(nèi)容以整體且準(zhǔn)確的方式傳遞給用戶，才能確保用戶及時(shí)地接收到網(wǎng)站傳遞的信息。這就要求網(wǎng)站必須采用合理的文字、視頻以及圖片排版布局方式，增強(qiáng)網(wǎng)站的視覺效果，確保用戶在閱讀信息的過程中，獲得更多的線索，解決信息閱讀和接收過程中遇到的問題。

（4）色彩。色彩中包括了濕、冷、純、亂等各種不同的人類情感，不同色彩組合在一起為用戶帶來的使用體驗(yàn)也各不相同。色彩的合理搭配不但增強(qiáng)了用戶界面的立體感，還為用戶帶來了美的享受。所以設(shè)計(jì)人員應(yīng)該準(zhǔn)確掌握網(wǎng)頁排版的藝術(shù)，就應(yīng)用程序視覺設(shè)計(jì)中存在的問題，借助電腦或移動(dòng)設(shè)備Web應(yīng)用程序，合理地進(jìn)行視覺設(shè)計(jì)概念的布局，充分發(fā)揮HTML，CSS，javascript代碼工具的優(yōu)勢(shì)，將PSD、PNG等不同類型的文件圖片整合在一起，促進(jìn)設(shè)計(jì)質(zhì)量與效率的有效提升。

2.1.3 Web 前端開發(fā)

Web行為標(biāo)準(zhǔn)并不是單一的行為標(biāo)準(zhǔn)，而是各種不同行為標(biāo)準(zhǔn)整合在一起的一個(gè)有機(jī)整體。目前，常見的網(wǎng)頁設(shè)計(jì)主要包括了網(wǎng)頁結(jié)構(gòu)、表現(xiàn)、結(jié)構(gòu)優(yōu)化行為等幾種語言構(gòu)成。如果將與之對(duì)應(yīng)的網(wǎng)頁行為標(biāo)準(zhǔn)進(jìn)行詳細(xì)劃分的話，那么機(jī)構(gòu)化行為標(biāo)準(zhǔn)語言主要有XHTML、XML等幾種。表現(xiàn)行為標(biāo)準(zhǔn)語言則主要以CSS為主，行為標(biāo)準(zhǔn)則主要涉及了對(duì)象行為模型、ECMAScript等相關(guān)內(nèi)容?？傊魏我环N行為標(biāo)準(zhǔn)語言的起草或發(fā)布，都必須以國(guó)家或組織起草、制定的行為標(biāo)準(zhǔn)為依據(jù)。比如，ecma本就是ECMAScript的行為標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)的起草和發(fā)布，則進(jìn)一步降低了Web與Web開發(fā)設(shè)計(jì)的難度。也就是說，如果將Web標(biāo)準(zhǔn)結(jié)構(gòu)詳細(xì)劃分為HTML、CSS、javascript等幾部分內(nèi)容的話，設(shè)計(jì)人員必將表現(xiàn)結(jié)構(gòu)中的行為表現(xiàn)以及HTML等標(biāo)簽，寫入各個(gè)標(biāo)簽中才能體現(xiàn)出頁面結(jié)構(gòu)的整體性效果。

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

2.2.1 canvas 技術(shù)

H1界面采用的前端設(shè)計(jì)技術(shù)與傳統(tǒng)前端設(shè)計(jì)技術(shù)相比，采取了增加canvas標(biāo)簽的方式，進(jìn)行圖像的分析處理。這種標(biāo)簽在實(shí)際應(yīng)用過程中，主要是借助2DProgrammatic標(biāo)準(zhǔn)接口程序，付出相對(duì)較低的存儲(chǔ)空間，完成對(duì)圖像的分析和處理工作。由于該技術(shù)不僅可用于圖像的繪制、分析和處理環(huán)節(jié)，而且還可以通過演示HTML頁面中元素定義的方式，提高圖像處理效果。所以，該技術(shù)的普及和應(yīng)用，促進(jìn)了界面前端設(shè)計(jì)效果的有效提升[2]。

2.2.2 HTML5DeviceAPI 技術(shù)

DeviceAPI作為一種訪問攝像頭、麥克風(fēng)以及地理位置標(biāo)準(zhǔn)化API接口，在實(shí)際應(yīng)用過程中，主要是通過對(duì)本地設(shè)備產(chǎn)生的多媒體數(shù)據(jù)進(jìn)行在線錄制、傳輸以及保存的方式，幫助用戶獲取數(shù)據(jù)當(dāng)前位置，確保用戶可以及時(shí)獲取符合自身要求的數(shù)據(jù)信息。

2.2.3 HTML5 表單技術(shù)

表單技術(shù)是Web應(yīng)用廣泛的技術(shù)手段之一，該技術(shù)在實(shí)際應(yīng)用過程中，只需要用戶通過在電腦終端中運(yùn)用HTML與javascript技術(shù)即可完成用戶基本信息的輸入工作。針對(duì)數(shù)據(jù)傳輸過程中，移動(dòng)應(yīng)用端無法進(jìn)行鍵盤輸入操作的問題，設(shè)計(jì)人員根據(jù)用戶采用的輸入方式對(duì)現(xiàn)有輸入方案進(jìn)行了全面優(yōu)化和完善，比如，通過對(duì)表單結(jié)構(gòu)的自由化升級(jí)，將傳統(tǒng)HTML架構(gòu)中，表單中的各個(gè)元素的標(biāo)簽管理納入HTML5體系中，不斷取消了各種不同限制對(duì)表單中各個(gè)元素標(biāo)簽使用產(chǎn)生的限制，同時(shí)通過對(duì)各個(gè)元素定位的優(yōu)化，提高了表單的自由度，滿足了用戶提出的個(gè)性化使用需求。

3 基于HTML5的移動(dòng)Web前端設(shè)計(jì)與開發(fā)構(gòu)建

設(shè)計(jì)人員在進(jìn)行移動(dòng)Web前端的設(shè)計(jì)與開發(fā)工作時(shí)，應(yīng)該嚴(yán)格按照以人為本的理念，設(shè)計(jì)能夠滿足人們生活、生產(chǎn)需求的前端系統(tǒng)。對(duì)此，設(shè)計(jì)人員在移動(dòng)Web前端設(shè)計(jì)過程中，應(yīng)該充分考慮系統(tǒng)適用人群心理變化的特點(diǎn)，站在人們的需求與使用感受角度上，設(shè)計(jì)窗戶滿足人們實(shí)際使用需求的個(gè)性化系統(tǒng)設(shè)計(jì)方案。在Web前端流程構(gòu)建過程中，則應(yīng)該通過開展用戶問卷調(diào)查和數(shù)據(jù)分析工作的方式，準(zhǔn)確地了解和掌握人們的個(gè)性化使用需求，并在原型設(shè)計(jì)的基礎(chǔ)上，將其他步驟融入其中，加快Web前端開發(fā)設(shè)計(jì)工作的速度。Web前端基本流程可以詳細(xì)地劃分為需求調(diào)研分析、原型設(shè)計(jì)、前端代碼開發(fā)等幾部分內(nèi)容。設(shè)計(jì)則進(jìn)一步細(xì)分為低保真設(shè)計(jì)與高保真設(shè)計(jì)兩部分內(nèi)容。用戶需求主要指的是用戶群分析、人物角色分析等內(nèi)容[3]。用戶調(diào)研中常用的調(diào)研方式主要有問卷調(diào)查、可用性測(cè)試等幾種。所以為了提高Web前端設(shè)計(jì)的效果，設(shè)計(jì)人員應(yīng)該從以下幾方面著手做好軟件應(yīng)用開發(fā)設(shè)計(jì)的相關(guān)工作。首先，針對(duì)代碼的分層。將代碼層分為結(jié)構(gòu)層、行為層與表現(xiàn)層三部分。Web前端設(shè)計(jì)主要是從組成、功能、行為等方面開展的，由于各個(gè)層面之間都是獨(dú)立存在的，因此在Web前端設(shè)計(jì)過程中，各部分彼此之間不會(huì)產(chǎn)生任何影響。這幾方面所對(duì)應(yīng)的物理層次與文件主要包括了HTML、CSS、javascript等幾種，所以設(shè)計(jì)人員必須充分重視級(jí)別劃分工作的重要性，保證各個(gè)層級(jí)代碼的獨(dú)立性與邏輯結(jié)構(gòu)的清晰性，為后續(xù)系統(tǒng)維護(hù)與測(cè)試工作的開展提供依據(jù)。設(shè)計(jì)人員在系統(tǒng)設(shè)計(jì)過程中，應(yīng)該通過塑造合理規(guī)定的方式，發(fā)揮出源代碼在系統(tǒng)設(shè)計(jì)中所發(fā)揮的作用，嚴(yán)格按照相關(guān)規(guī)定和要求，借助先進(jìn)技術(shù)手段完成前端系統(tǒng)的開發(fā)設(shè)計(jì)工作。標(biāo)準(zhǔn)化操作不但減少了權(quán)限不明確等原因?qū)Ρ舜酥g的交流產(chǎn)生的影響，同時(shí)促進(jìn)了工作速度和效率的有效提升。此外，為了保證Web前端開發(fā)設(shè)計(jì)的質(zhì)量，設(shè)計(jì)人員在實(shí)施相關(guān)技術(shù)時(shí)，應(yīng)該以高精度原型設(shè)計(jì)軟件為基礎(chǔ)，開展前端系統(tǒng)的開發(fā)與設(shè)計(jì)工作，并在設(shè)計(jì)過程中利用HTML5、CSS3、javascript等技術(shù)手段開展系統(tǒng)的開發(fā)設(shè)計(jì)工作，充分發(fā)揮Web前端作為系統(tǒng)設(shè)計(jì)核心的優(yōu)勢(shì)，保證客戶端用戶界面的流暢性，降低用戶使用操作的難度，引導(dǎo)用戶使用相關(guān)程序，擴(kuò)大客戶前端系統(tǒng)的推廣和應(yīng)用范圍[4]。

4 HTML5技術(shù)的應(yīng)用展望

信息技術(shù)時(shí)代的迅速來臨以及Web平臺(tái)的全面普及和應(yīng)用，設(shè)計(jì)人員在開展Web前端開發(fā)設(shè)計(jì)工作時(shí)，必須將HTML5技術(shù)與Web深度融合在一起，才能滿足信息時(shí)代發(fā)展的需求。設(shè)計(jì)人員在開展系統(tǒng)開發(fā)設(shè)計(jì)工作時(shí)，應(yīng)該積極探索HTML5技術(shù)應(yīng)用的方式，通過對(duì)開發(fā)模式的創(chuàng)新和優(yōu)化，擴(kuò)大先進(jìn)技術(shù)手段的應(yīng)用范圍。這就要求，相關(guān)企業(yè)在開發(fā)和應(yīng)用HTML5技術(shù)時(shí)，必須充分重視HTML5系統(tǒng)對(duì)網(wǎng)絡(luò)應(yīng)用平臺(tái)所產(chǎn)生的積極影響，通過打造全新網(wǎng)絡(luò)體系的方式，推動(dòng)網(wǎng)絡(luò)信息技術(shù)的發(fā)展。我國(guó)相關(guān)部門在開展移動(dòng)前端開發(fā)與設(shè)計(jì)工作時(shí)，應(yīng)該借助先進(jìn)的HTML5信息處理技術(shù)，為Web前端服務(wù)平臺(tái)的設(shè)計(jì)提供技術(shù)支持。比如，政府部門在開展縣一級(jí)信息化網(wǎng)絡(luò)體系的建設(shè)工作時(shí)，應(yīng)該著眼于很多技術(shù)發(fā)展過程中存在的局限性問題，將提高信息資源處理效率和信息利用率作為首要目標(biāo)，避免因?yàn)閷?duì)互聯(lián)網(wǎng)平臺(tái)發(fā)展前景產(chǎn)生誤判，影響Web前端的開發(fā)、發(fā)展和應(yīng)用。充分發(fā)揮Web服務(wù)平臺(tái)的優(yōu)勢(shì)，構(gòu)建信息資源共享平臺(tái)，擴(kuò)大Web服務(wù)平臺(tái)的市場(chǎng)空間，利用多元化工作形體，使人們真正地認(rèn)識(shí)到HTML5信息技術(shù)在Web資源服務(wù)平臺(tái)開發(fā)建設(shè)中所發(fā)揮的積極作用，借助已有信息技術(shù)資源，增強(qiáng)用戶的使用體驗(yàn)。將HTML5技術(shù)作為Web前端開發(fā)設(shè)計(jì)從的技術(shù)職稱，深度挖掘移動(dòng)互聯(lián)網(wǎng)信息中具有使用價(jià)值的信息資源，推動(dòng)Web服務(wù)平臺(tái)的建設(shè)和發(fā)展[5]。此外，相關(guān)部門在積極運(yùn)用HTML5技術(shù)時(shí)，應(yīng)該深刻認(rèn)識(shí)到HTML5技術(shù)與移動(dòng)網(wǎng)絡(luò)之間存在的密切聯(lián)系，通過創(chuàng)新Web網(wǎng)絡(luò)服務(wù)領(lǐng)域開發(fā)策略的方式，徹底擺脫人力資源對(duì)Web前端開發(fā)設(shè)計(jì)工作的依賴性，擴(kuò)展技術(shù)人員的發(fā)展空間，構(gòu)建創(chuàng)新性技術(shù)體系，探索出一條符合網(wǎng)絡(luò)信息時(shí)代發(fā)展需求的技術(shù)研發(fā)和創(chuàng)新道路，為人類社會(huì)順利邁入大數(shù)據(jù)時(shí)代保駕護(hù)航。

5 結(jié)語

總而言之，網(wǎng)絡(luò)信息技術(shù)的迅速發(fā)展加快了智能化技術(shù)普及應(yīng)用的速度。設(shè)計(jì)人員在開展Web前端設(shè)計(jì)開發(fā)工作時(shí)，必須充分重視相關(guān)衍生開發(fā)技術(shù)應(yīng)有的重要性，充分發(fā)揮HTML5技術(shù)自身強(qiáng)大的功能優(yōu)勢(shì)，加大智能移動(dòng)端頁面開發(fā)的力度，才能設(shè)計(jì)出符合用戶個(gè)性化需求的移動(dòng)終端頁面，增強(qiáng)用戶的使用體驗(yàn),為HTML5架構(gòu)下移動(dòng)Web前端設(shè)計(jì)開發(fā)事業(yè)的發(fā)展保駕護(hù)航。