基于HTML5的Web界面設(shè)計模式初探

1、    基于html5的web界面設(shè)計模式初探    鄧威摘要：建立在數(shù)字化環(huán)境下的web界面設(shè)計是以網(wǎng)站為支撐、網(wǎng)頁為承載的一種新穎設(shè)計。隨著html5與css3等新技術(shù)的不斷優(yōu)化，涌現(xiàn)出很多新功能，進(jìn)而導(dǎo)致web界面設(shè)計模式從設(shè)計基礎(chǔ)到設(shè)計范疇再到交互都有了更新。該文通過對比分析html5與css3對web界面設(shè)計模式的影響，發(fā)現(xiàn)web界面設(shè)計已經(jīng)超越其原有的視覺設(shè)計這一單方面的特色，它逐漸與web其他相關(guān)高科技融合在一起，開創(chuàng)了更多優(yōu)化功能，使用戶體驗(yàn)更加舒適。關(guān)鍵詞：html5；web界面；設(shè)計模式；初探中圖分類號：tp393 文獻(xiàn)標(biāo)識碼：a 文

2、章編號：1009-3044（2018）33-0184-031 引言隨著科學(xué)技術(shù)的不斷發(fā)展和網(wǎng)絡(luò)的普及應(yīng)用，web界面設(shè)計朝著更加智能并且有趣的方向發(fā)展，其頁面內(nèi)容也趨于豐富化。2012年12月，web網(wǎng)絡(luò)平臺的基石正式被確定為html5規(guī)范1，這種舉措不單說明html5是傳統(tǒng)pc的web設(shè)計，而且表明其他所有的智能終端都有采用，為信息時代下的web發(fā)展與應(yīng)用提供了極其豐富的開發(fā)標(biāo)準(zhǔn)。2 web界面設(shè)計模式2.1 web界面設(shè)計基礎(chǔ)web，全稱為全球廣域網(wǎng)，縮寫為wwan，同時又稱為萬維網(wǎng)，是一種跨平臺的html和http協(xié)議的分布式、全局且動態(tài)的圖形信息系統(tǒng)2。web界面設(shè)計是一種基于數(shù)字環(huán)境

3、、網(wǎng)站和網(wǎng)頁的新設(shè)計。根據(jù)人們對傳統(tǒng)美學(xué)的一般理解，網(wǎng)頁界面設(shè)計作為一種視覺表達(dá)手段而受到極大的重視。在web界面設(shè)計中，忽略影響技術(shù)的種種復(fù)雜因素，則其設(shè)計中重要且關(guān)鍵的問題就歸根于組織和創(chuàng)建網(wǎng)站的內(nèi)容，比如如何使得頁面內(nèi)容布局新穎、顏色搭配符合大眾審美，動畫和視頻酷炫且合理等。隨著html4向html5和css向css3的革新與換代，web網(wǎng)頁的功能已經(jīng)遠(yuǎn)遠(yuǎn)超越內(nèi)容的展示這一單一功能，它還可以與用戶進(jìn)行交互鏈接，吸收用戶的反饋信息，更好地服務(wù)于大眾用戶，網(wǎng)頁設(shè)計的新標(biāo)準(zhǔn)可以體現(xiàn)一個企業(yè)的成與敗?；ヂ?lián)網(wǎng)的特殊性使得web網(wǎng)頁界面設(shè)計趨于一種跨學(xué)科領(lǐng)域的知識綜合體。為了給用戶提供更美觀、更舒適

4、的用戶體驗(yàn)效果，滿足大眾對web界面的不同需求，有必要將計算機(jī)圖形學(xué)、客戶機(jī)和服務(wù)器技術(shù)、用戶界面設(shè)計、人機(jī)交互、心理學(xué)以及社會學(xué)等融合在一起來設(shè)計web界面2。2.2 web界面設(shè)計范疇2.2.1 內(nèi)容網(wǎng)站的目的在于信息的傳播，作用是設(shè)計傳播途徑，核心是如何將信息以用戶最容易接收的方式呈現(xiàn)給用戶。由于新時代下賦予web的特殊意義，其內(nèi)容已經(jīng)超越我們傳統(tǒng)定義的web內(nèi)容，它現(xiàn)今的內(nèi)容更加趨于豐富化，不但有傳統(tǒng)的文字、圖形和動畫，還有新時代下出現(xiàn)的超鏈接、交互操作、音視頻以及網(wǎng)絡(luò)游戲，甚至一個界面同時出現(xiàn)以上的綜合，一個網(wǎng)站要想成功，其內(nèi)容質(zhì)量必須達(dá)標(biāo)3。web網(wǎng)頁界面設(shè)計首先要滿足用戶對其內(nèi)容

5、和質(zhì)量的要求，其次要給用戶不同的審美感受，給予他們良好的視覺體驗(yàn)，這樣能吸引首次訪問該網(wǎng)頁的新用戶更多地關(guān)注站點(diǎn)；另外，當(dāng)用戶停留在某個地方或某個界面的時間較長時，說明用戶對此感興趣，web界面設(shè)計中就要通過對用戶瀏覽數(shù)據(jù)進(jìn)行分析，進(jìn)而給不同的用戶自主提供他們感興趣的內(nèi)容，一切看起來都順理成章。網(wǎng)頁內(nèi)容作為界面設(shè)計的一大模塊，其最主要的要求就是頁面顯示良好，讓用戶可以在視覺上很享受，愿意繼續(xù)通過它索引更多信息，因此，為了讓用戶用著舒心，web界面設(shè)計時應(yīng)該大量分析用戶的瀏覽數(shù)據(jù)，結(jié)合有效的方法，利用這些數(shù)據(jù)更好地組織和規(guī)劃用戶的瀏覽信息，并為他們提供他們所感興趣的或有用的推薦。2.2.2 技術(shù)

6、技術(shù)和制度的完善是保障web功能合理的基礎(chǔ)。網(wǎng)絡(luò)是信息從傳統(tǒng)紙質(zhì)媒體向互聯(lián)網(wǎng)傳播的載體，其媒介發(fā)生了深刻的變化。因此，web技術(shù)出發(fā)點(diǎn)應(yīng)該是互聯(lián)網(wǎng)的基本特征。當(dāng)下，互聯(lián)網(wǎng)技術(shù)以驚人的速度快速發(fā)展，html、css和java腳本等也以此為基點(diǎn)在以超乎想象的速度發(fā)展，這樣的發(fā)展趨勢迫使web界面必須及時掌握和應(yīng)用最新的技術(shù)來服務(wù)于廣大用戶4。web界面的設(shè)計者應(yīng)該始終關(guān)注技術(shù)領(lǐng)域的變化，并高度重視web前端技術(shù)，實(shí)時以用戶體驗(yàn)為設(shè)計動力。2.2.3 交互web界面同樣作為人機(jī)界面，與其他人機(jī)界面在pc操作體統(tǒng)、手機(jī)界面以及辦公軟件界面等都有很多共同之處。諸多科學(xué)家和其研究團(tuán)隊(duì)的專業(yè)人員往往愿意投很

7、多時間和經(jīng)歷來觀察和研究人們操作網(wǎng)絡(luò)的行為，然后統(tǒng)計他們操作的數(shù)據(jù)，最終通過分析數(shù)據(jù)來評估用戶的體驗(yàn)效果。應(yīng)用軟件、瀏覽網(wǎng)站或執(zhí)行任務(wù)等人們普遍作用在電腦上的行為都是可以預(yù)期的，通常這些行為可以被作如下歸納：1）安全探索：網(wǎng)絡(luò)的危害方面人人皆知，所以人們對網(wǎng)絡(luò)也存在芥蒂之心，但是如果一個網(wǎng)站可以給用戶安全感，則用戶就會頻繁使用該網(wǎng)站，并且每一步都會認(rèn)可它；2）即時滿足：人類的本性是追求結(jié)果型，總是迫切從開始看到結(jié)果，這體現(xiàn)在網(wǎng)頁中就是人們喜歡快速從萬千信息中找到自己所需要的；3）滿意度：當(dāng)人們看到一個全新的界面時，他們首先注重的往往不是對細(xì)節(jié)的瀏覽，而通常以最快的速度瀏覽整個界面大體內(nèi)容，并在

8、心里默默選擇他們所需的目標(biāo)元素，盡管有時它可能是一個錯誤的選擇，但是用戶的這種行為是確定的；4）習(xí)慣：當(dāng)一個人重復(fù)使用一個接口時，一些常見的操作將演變?yōu)槿祟惖姆瓷鋭幼?。在?xí)慣的支配下，用戶在下次使用時就不會對這些操作考慮太多，直接點(diǎn)擊使用或?yàn)g覽；5）空間記憶：這個通常表現(xiàn)在人們使用物品或?yàn)g覽文件時，無意識中記住他們的擺放位置或儲存的文件夾，而不是通過記住他們的名字來找到它們；6）簡化重復(fù)工作：在很多軟件中，用戶有時候需要重復(fù)某些操作來達(dá)到他們的目的。網(wǎng)頁上的功能模塊性質(zhì)的差異性是由于網(wǎng)站、功能和交互模式等的不同造成的，但人們往往沒有注意到這些細(xì)節(jié)，在瀏覽網(wǎng)頁中總會出現(xiàn)相同的瀏覽操作和交互，導(dǎo)致

9、最終獲取的內(nèi)容信息也都雷同。因此，網(wǎng)頁界面在設(shè)計中有必要根據(jù)頁面的不同功能將所有模塊分類出現(xiàn)，避免用戶的重復(fù)操作。良好的設(shè)計規(guī)則將耦合的設(shè)計參數(shù)分類為模塊并將其劃分為任務(wù)，模塊通過固定的數(shù)據(jù)接口相互作用。2.3 web界面設(shè)計模式在css和html中，設(shè)計模式通常是指多個瀏覽器和屏幕閱讀器的一組通用功能，可以被系統(tǒng)地應(yīng)用到html和css頁面的設(shè)計和開發(fā)中，這樣的設(shè)計模式在軟件編程中是非常成功，它們大大提高了網(wǎng)頁設(shè)計和開發(fā)的速率，并在創(chuàng)新方面也得到提升，同時還簡化了編寫代碼的冗長和復(fù)雜5。設(shè)計模式是基礎(chǔ)。所有的創(chuàng)造力都來源于它，這就好比循環(huán)利用的算法可以通過簡單參數(shù)的修改或邊界條件的調(diào)整就可以

10、預(yù)期通過系統(tǒng)的修改和組合來生成。設(shè)計模式可以顯著提高效率和創(chuàng)新，它的單獨(dú)應(yīng)用也會快速產(chǎn)生出其不意的效果，更何況它還可以被嵌入其他模塊來組合使用，那樣結(jié)果更是紛繁復(fù)雜。針對設(shè)計模式的簡化會大大豐富整個創(chuàng)作過程，致使創(chuàng)造性的工作宛如塔樓般簡單可控，僅僅通過簡單的選擇適當(dāng)修改和組合的預(yù)定義設(shè)計模式就可以得到用戶想要的結(jié)果。3 html5與web界面設(shè)計模式web界面設(shè)計不同于傳統(tǒng)紙質(zhì)媒體和影視設(shè)計，他是通過html、css和java腳本這三個關(guān)鍵技術(shù)來實(shí)現(xiàn)的，其中html作為結(jié)構(gòu)的核心部分起著至關(guān)重要的作用。3.1 html5的新特性隨著時代的進(jìn)步，網(wǎng)絡(luò)的更新?lián)Q代速度甚是驚人，創(chuàng)造性的網(wǎng)站日新月異，

11、每天都給用戶帶來不一樣的體驗(yàn)。鑒于html邊界對網(wǎng)絡(luò)的影響長達(dá)10年之久，html4開創(chuàng)者們認(rèn)為其在web界面模式設(shè)計中扮演著重要角色，因此愿意注入大量的心血和資金不斷尋找新的技術(shù)來為廣大用戶提供更為強(qiáng)大的功能，但目前在語言標(biāo)記和瀏覽器的不兼容等方面還存在弊端。然而，html5引入了一系列的新功能，比如表單控件、應(yīng)用程序接口（api）、多媒體、結(jié)構(gòu)化和語義等6，這些新特性主要體現(xiàn)在新標(biāo)記、新繪圖畫布模式、新應(yīng)用程序接口、新多媒體方式、新文檔結(jié)構(gòu)變化與智能表單以及新的html單元和屬性，html5引入的一整套全新的元素使得構(gòu)建web界面變得更加輕松可行，大大簡化了設(shè)計者的負(fù)擔(dān)。3.2 html5

12、對web界面設(shè)計的影響html5對web界面設(shè)計的主要影響之一是html語義標(biāo)注7。div標(biāo)簽是傳統(tǒng)意義上的設(shè)計，但html5改變了這樣的標(biāo)簽，使用大量語義結(jié)構(gòu)的代碼標(biāo)簽，這種語義大大減少了傳統(tǒng)所用的css調(diào)用的類和id屬性，對網(wǎng)頁質(zhì)量和語義都帶來質(zhì)的飛躍，為設(shè)計的后續(xù)工作帶來便利。3.3 css3對web界面設(shè)計的影響html5的語義結(jié)構(gòu)對應(yīng)于css3的出現(xiàn)。具有新特點(diǎn)的css3為網(wǎng)頁設(shè)計者們提供了很多優(yōu)化網(wǎng)頁的新思路。因?yàn)閏ss3具有豐富的動畫功能，這就可以為網(wǎng)頁的交互模式中增加趣味，伴隨著第三方動畫圖書館的萌生，web界面內(nèi)容更是達(dá)到前所未有的極致8。基于html5和css3技術(shù)的web

13、界面設(shè)計內(nèi)容已經(jīng)不再拘泥于js操作dom。3.4 基于html5的web界面設(shè)計模式基于以上新技術(shù)，可以在傳統(tǒng)的web界面設(shè)計的模式之上，進(jìn)一步發(fā)揮技術(shù)水平，比如提高web的可用性和提高用戶的舒適體驗(yàn)值9；利用css3動畫使網(wǎng)頁界面設(shè)計更加生動有趣，吸引用戶的眼球，使用戶在不知不覺中就增加了用戶體驗(yàn)，這樣可以為后續(xù)的優(yōu)化提供更多可依靠數(shù)據(jù)；對于站點(diǎn)，html5新的語義標(biāo)注更有助于搜索引擎的使用，通過聯(lián)想詞匯為用戶更快的提過所需，以不同的形式來縮短用戶的搜索時間，最快達(dá)到用戶的搜索目標(biāo)，另外呈現(xiàn)用戶的目標(biāo)可以采用圖片視頻，也可以采用媒體，總之就是為用戶提供最快捷的服務(wù)，并具有良好的可移植性10。

14、4 結(jié)論總而言之，html5在技術(shù)層面為web界面設(shè)計模式增加了新的功能和方法，這一新技術(shù)突破了傳統(tǒng)web界面設(shè)計的框架，使其設(shè)計模式進(jìn)入了一個全新的領(lǐng)域。網(wǎng)絡(luò)界面設(shè)計的新模式和新思路將在未來一段時期內(nèi)迅速涌現(xiàn)并且持續(xù)很長時間。隨著十九大對創(chuàng)新的重視，web界面設(shè)計模式也將更加依賴于技術(shù)的創(chuàng)新方面，逐漸用有趣的交互動畫取而代之傳統(tǒng)的靜態(tài)界面。web界面設(shè)計模式也將從單一頁面的可視化設(shè)計向功能模塊化的方向轉(zhuǎn)變。目前，基于移動終端的web應(yīng)用正在興起，基于移動終端的web界面設(shè)計模式日趨成熟和穩(wěn)定，該移動終端具有有限的顯示界面和有限的視覺顯示效果。傳統(tǒng)的基于視覺效果的web界面設(shè)計模式不再適用于當(dāng)

15、下用戶的需求。在設(shè)計領(lǐng)域，我們與web前端技術(shù)有更多的技術(shù)集成，更注重用戶體驗(yàn)。web界面設(shè)計的主要目的是在瀏覽web時滿足人們良好的交互體驗(yàn)，它是藝術(shù)與技術(shù)融合的產(chǎn)物。web界面設(shè)計模式將從技術(shù)層面上得到更大的提升和發(fā)展。參考文獻(xiàn)：1 陳梅，高斐，蘇晨.基于html5的web界面設(shè)計模式初探j(luò).電腦知識與技術(shù)，2017，13（31）：89 -90+107.2 姬翔，華慶一，李娟妮，等.基于界面設(shè)計模式的界面開發(fā)工具綜述j.計算機(jī)應(yīng)用研究，2016， 33（10）：2889-2894.3 姚芳，萬建成，馮仕紅.基于模型的參數(shù)化界面設(shè)計模式j(luò).北京工商大學(xué)學(xué)報（自然科學(xué)版）， 2008（2）：70-74.4 羅云飛.人機(jī)界面設(shè)計方法的模式初探a.湖北省機(jī)械工程學(xué)會、中國機(jī)械工程學(xué)會湖北工業(yè)設(shè)計研究所、武漢科技大學(xué)、湖北科技大學(xué).2005年工業(yè)設(shè)計國際會議論文集c.湖北省機(jī)械工程學(xué)會、中國機(jī)械工程學(xué)會湖北工業(yè)設(shè)計研究所、武漢科技大學(xué)、湖北科技大學(xué)，2005：4.5 蔡奎，盧雷，王帥強(qiáng)，等.基于web界面設(shè)計模式的復(fù)雜行為建模及其代碼生成方法j.計算機(jī)應(yīng)用，2009，29（04）：1139-1142.6 黃悅深.基于html5的移動web app開發(fā)j.圖書館雜志，2014，33（7）：72-77.7 劉華星，楊