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

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

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

1 引言

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

2 HTML5技術介紹

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

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

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

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

3 Web技術

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

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

4 Web前端系統(tǒng)設計

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

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

4.1 交互設計

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

4.2 視覺設計

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

4.3 界面設計

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

5 基于HTML5的移動Web前端設計與開發(fā)

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

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

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

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

6 結語

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