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

秦源

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

0 引言

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

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

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

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

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

2.1.1 交互設(shè)計

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

2.1.2 視覺設(shè)計

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

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

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

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

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

2.1.3 Web 前端開發(fā)

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

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

2.2.1 canvas 技術(shù)

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

2.2.2 HTML5DeviceAPI 技術(shù)

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

2.2.3 HTML5 表單技術(shù)

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

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

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

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

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

5 結(jié)語

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