基于HTML5技術的移動Web前端設計與開發

秦源

（石河子大學信息科學與技術學院，新疆 石河子 832003）

0 引言

隨著網絡信息時代的迅速來臨，智能手機在人們日常生活、工作中所發揮的作用也越來越大。雖然現階段人們日常使用的移動終端操作系統已經有IOS、Andriod、Windows等幾種，但真正具備兼容移動前端系統開發的語言卻少之又少。傳統的系統開發工作主要是通過在電腦終端與移動終端分別設置不同開發系統的方式進行移動前端系統的開發和研究工作。由于這種開發模式具有成本高、周期長且開發速度緩慢等缺點，已經無法滿足互聯網信息時代發展的要求。對此，研究人員應該從前臺界面著手，從中尋找能夠有效兼容各個平臺的開發語言和架構，推動系統開發工作的順利開展。

1 HTML5技術及Web技術概述

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

2 基于HTML5的移動Web前端技術分析

2.1 移動Web前端開發技術

2.1.1 交互設計

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

2.1.2 視覺設計

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

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

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

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

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

2.1.3 Web 前端開發

Web行為標準并不是單一的行為標準，而是各種不同行為標準整合在一起的一個有機整體。目前，常見的網頁設計主要包括了網頁結構、表現、結構優化行為等幾種語言構成。如果將與之對應的網頁行為標準進行詳細劃分的話，那么機構化行為標準語言主要有XHTML、XML等幾種。表現行為標準語言則主要以CSS為主，行為標準則主要涉及了對象行為模型、ECMAScript等相關內容。總之任何一種行為標準語言的起草或發布，都必須以國家或組織起草、制定的行為標準為依據。比如，ecma本就是ECMAScript的行為標準。Web標準的起草和發布，則進一步降低了Web與Web開發設計的難度。也就是說，如果將Web標準結構詳細劃分為HTML、CSS、javascript等幾部分內容的話，設計人員必將表現結構中的行為表現以及HTML等標簽，寫入各個標簽中才能體現出頁面結構的整體性效果。

2.2 HTML5的關鍵技術

2.2.1 canvas 技術

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

2.2.2 HTML5DeviceAPI 技術

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

2.2.3 HTML5 表單技術

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

3 基于HTML5的移動Web前端設計與開發構建

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

4 HTML5技術的應用展望

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

5 結語

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