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

（長(zhǎng)江工程職業(yè)技術(shù)學(xué)院 湖北 武漢 430212）

1 引言

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

2 HTML5技術(shù)介紹

HTML技術(shù)在Web設(shè)計(jì)過程中被使用，其有廣闊的市場(chǎng)和研究意義，價(jià)值和潛力也極高。HTML5作為HTML技術(shù)中的新形式，其是組成Web內(nèi)容不可忽視的關(guān)鍵部分[3]。

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

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

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

3 Web技術(shù)

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

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

4 Web前端系統(tǒng)設(shè)計(jì)

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

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

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

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

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

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

4.3 界面設(shè)計(jì)

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

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

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

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

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

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

6 結(jié)語(yǔ)

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