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

吳元杰，何毅平，朱曉慶，陳 庚

（長江工程職業技術學院 湖北 武漢 430212）

1 引言

在互聯網迅速發展的背景下，移動終端也越來越多地被人們使用和了解，5G時代應運而生[1]。由于移動終端技術以新穎的形式出現在大眾視野，交易市場上出現了各式各樣的操作系統。從現在市場情況來看，Windows Phone系統、Android系統和iOS系統占有絕大多數[2]。除系統外，移動終端市場也呈現出被壟斷的狀態，主要的品牌有微軟、谷歌和蘋果等。與此同時，HTML5也逐漸進入人們視野。HTML5是在其他技術之后產生的，但HTML5發展速度很快，在移動Web前端設計與開發中取得了顯著成績。HTML5在功能上能解決更多問題，顯示更多內容，慢慢加速了Web的完整度和成熟度。HTML5在性能方面逐漸完善，在新的大數據互聯網狀況下，其可以帶給使用者全新的使用體驗和感受。綜上所述，研究HTML5技術的移動Web前段設計和開發分析有著非常重要的意義。

2 HTML5技術介紹

HTML技術在Web設計過程中被使用，其有廣闊的市場和研究意義，價值和潛力也極高。HTML5作為HTML技術中的新形式，其是組成Web內容不可忽視的關鍵部分[3]。

事實上，HTML技術最早產生于20世紀90年代，并逐漸被使用到Web內容的設計和研發過程中。在90年代末期，HTML以全新的面貌發展成為互聯網技術風向標的一種。在此之后，HTML被越來越多的人研究和使用，受眾群體廣，范圍也逐漸加大。本文所介紹的HTML5技術產生的影響是深遠的，不單是為當下服務，對下一個時期的互聯網發展也有深遠的影響[4]。HTML技術相比傳統的Web設計與開發技術手段來看，體現出全新的功能性和更完整的使用感。除此之外，HTML5技術在內容和設計手段兩方面，體現了更加全面性以及多元化的特點，在此過程中還融入了大量新的元素和創新點。除了以上方面，還改變了原有的canvas標簽，在此基礎上進行刪除和增加新的想法。

HTML5技術促進了Web前端設計的發展，為其創造了新的形式，豐富了其內容，給人一種嶄新的使用感受，為研發工作人員提供了新的技術支持，提高了其工作效率。使用者在觀看內容過程中，可以通過多種類型的觀看模式。第一，可通過跨終端對一樣的內容采用不同的觀看和獲取信息的模式。第二，可通過插件等方法將更多形式的內容引入Web核心內容當中。使用者的觀看瀏覽過程不再被其的系統和設備所阻礙，在獲取信息的時候更加方便快捷[5]。

當然，HTML5技術也并非萬能的，在使用時也存在相應的問題：（1）新技術的發展速度還沒有達到很高的水平，在使用的受眾人群中也沒有達到普及化要求，其在性能和功能上還夠健全，存在一定缺陷，在使用者群體中還有一些人表示使用感不太好。（2）HIML5技術在使用過程中，還存在一定局限，這也是一個值得長期探討的問題。

3 Web技術

在互聯網時代，智能手機是人們離不開的交流設備，其功能也在不斷完善和發展，由原來的打電話、發短信等功能，發展為看視頻、聽音樂、玩游戲等用于交流聊天的設備。智能手機發展到如今的狀態離不開研發人員對系統的研發和設計，操作系統始終支持著智能手機的發展。正是因為研發人員的不斷努力，才讓彼此之間的溝通和交流更加便捷和順暢，縮短了人與人之間的距離。

在帶來好處的同時，我們還應看到移動終端操作系統在使用和操作過程中的復雜性。由此可見，當前構建一個系統化的操作系統是非常必要的。目前，社會發展狀況和經濟發展的結構都不能組建一個系統化的操作系統。HTML5技術的出現可以實現跨平臺的交流和合作[6]。然而，當前Web技術還存在一定的問題，比如存在運行比較慢等問題。但隨著移動前端技術的不斷發展，這些問題都會迎刃而解，最終帶給使用者全新的體驗和服務升級。

4 Web前端系統設計

針對于前端設計，不得不說Web前端開發是被談及最多的。針對目前的和傳統的Web前端開發技術內容進行比較開展探討，有利于說明和分析移動Web前端設計的主要部分及優點。

在性能上，移動Web前端開發與Web前端開發技術是一樣的，所以移動Web前端開發與Web前端開發技術在實際的應用過程中存在很多相同的部分。目前的前端開發工作越來越受到關注，在這樣的關注狀態下，前端研發工作人員越來越重視其技術性。

4.1 交互設計

交互設計在整個研發過程中都發揮著關鍵作用。在全程設計中，以解決用戶的使用便利性、滿足使用者的需求為最根本的目的，給使用者良好的、全新的使用感。第一方面，在前期設計的時候針對不同類型的使用者做全面、詳細的深入調查，結合更多信息設計出最好的方案。第二方面，應該深入了解使用者目前的生活習慣，使用簡單明了的語言，便于使用群體記憶和學習，始終堅持以使用者為主體、為使用者服務的方針和理念，了解使用者的心理狀態，使生產出來的產品貼近使用者的生活需求。

4.2 視覺設計

在視覺設計方面，要滿足使用者的視覺使用需求，提升視覺觀看的感受。不同人有不同的視覺使用需求，因此要有針對性地滿足使用者，盡可能達到各類型使用者的需求。

4.3 界面設計

在界面設計方面，要想給使用者留下深刻的第一印象，界面的設計應具有一定特點，能夠抓住使用者的眼球，需要有較強的吸引力，但在吸引使用者的同時還需要傳輸關鍵重要的信息內容，因此在界面設計方面就要多下功夫。文字和圖像是界面設計的兩個關鍵部分。（1）文字上，在界面設計過程中，在添加圖片的同時需要附加上一些文字進行解釋，在文字的使用上還要融入寫作者自己的想法，吸引觀看者的眼球。（2）圖像上，圖片吸引人眼球的效果不言而喻，就如我們小時候觀看動畫片一樣，會被界面生動形象的圖片所吸引，激發我們觀看的興趣，這就是圖片給界面設計增強的吸引力，能夠拉近我們與需要宣傳產品的距離，產生親切的感覺。

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

一直將使用者作為主要的目標群。設計的理念應該以人的服務為中心，設計的產品最終要為人民群眾服務。所以，在移動Web前端的設計上，應該考慮目前適用人群的心理變化和特征，從人們的需求和使用感出發，只有這樣才能設計出滿足人們需要的設計方案。在設計之初，應該有清晰的目標，此目標的建立應該以人為本、貼近人們生活實際需要。

在Web前端流程的構建過程中，需要事前對使用者進行調查和分析，只有對使用者進行清晰的了解和調查才能開展下一步驟的研究，但是在原型設計階段需要進行交互設計，之后再進行其他步驟的發展。

當前基于HTML5的移動Web前端設計與開發在很多地方已經被運用。HTML5技術雖然在此過程中發揮著重要的作用，但是其發揮的作用還遠不及移動互聯網時代的Web技術[7-8]。基于HTML5的Web 應用為移動端發展提供了良好的發展環境，其發展促進了移動互聯網發展和智能手機到移動端的Web瀏覽器的發展。

HTML5在移動設備HTML5頁面布局的呈現過程中發揮著不可替代的作用，其所起的作用促進了移動端Web前端研發工作的發展。HTML5技術在發展過程中不斷增加新的創新元素，促進了其性能的發展，這一突破有利于實現良好的頁面構建格局，很好地解決了頁面存在的一系列問題。其不僅在頁面布局上發揮重要作用，HTML5技術在移動端Web前端開發中的本地存儲以及離線應用中也發揮了重要作用。這一作用使HTML5表單元素變得更加多元化，除此之外，還實現了移動Web頁面的版式變得多樣化，很好地展現了頁面的豐富性和多樣性，以便于處理各種復雜工作。除此，Geolocation地理定位等功能很好地填補了Web應用自身的漏洞。要想提高開發的速度和質量就需要特別關注HTML5技術的移動端Web前端開發框架，輕量級框架如Jquery Mobile，重量級框架如Sencha Touch。

6 結語

本文針對HTML5技術及移動Web前端技術展開探討，在探討的最后，我們發現此類技術所具有的優勢，從目前來看其還不是太完善，還存在一定漏洞，但其有非常廣闊的前景，在以后的發展中將會逐漸實現操作系統上的統一化。總之，基于HTML5技術移動Web前端設計與開發是當下流行趨勢，為軟件開發帶來的效益不可估量。