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

陳梅　高斐　蘇晨

摘要：Web界面設(shè)計，是建立在數(shù)字化環(huán)境下，以網(wǎng)站為依托，以網(wǎng)頁為載體的一種新型設(shè)計。隨著HTML5與CSS3新技術(shù)新功能的擴充，Web界面設(shè)計模式從內(nèi)容到交互都有了更多的改變，該文從HTML5與CSS3新技術(shù)的角度分析探討新技術(shù)對Web界面設(shè)計模式的影響與改善，指出Web界面設(shè)計已從原來視覺設(shè)計這一領(lǐng)域，與Web前端技術(shù)進行了更多的技術(shù)融合，更多的關(guān)注用戶體驗。

關(guān)鍵詞：HTML5；Web界面；設(shè)計模式

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2017）31-0089-02

1 Web界面設(shè)計模式

1.1 Web界面設(shè)計

Web即全球廣域網(wǎng)，也稱為萬維網(wǎng)，它是一種HTML和HTTP協(xié)議的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)。Web界面設(shè)計，是建立在數(shù)字化環(huán)境下，以網(wǎng)站為依托，以網(wǎng)頁為載體的一種新型設(shè)計。根據(jù)人們對傳統(tǒng)美學普遍認識，Web界面設(shè)計一直被強調(diào)為視覺上的表現(xiàn)手段，如果不計算技術(shù)的因素，Web界面設(shè)計中重要的問題往往是如何組織和創(chuàng)建Web站點的內(nèi)容。例如，新穎的布局，靚麗的色彩，炫酷的動畫等。

隨著HTML4進化到HTML5、CSS進化到CSS3，網(wǎng)頁不再僅僅是內(nèi)容的展示，同樣還承載著與用戶溝通交流得到互動環(huán)節(jié)，是否帶來商業(yè)方面的成功也成為衡量Web設(shè)計作用的標準。因為互聯(lián)網(wǎng)的特殊性，Web界面設(shè)計變成了跨學科，跨領(lǐng)域知識的綜合體。為了實現(xiàn)更好的Web界面設(shè)計，需要運用計算機圖形學、程序設(shè)計、客戶機/服務器技術(shù)、用戶界面設(shè)計、人機互動關(guān)系、心理學、社會學等諸多方面的知識，為用戶提供更加便捷與美觀的網(wǎng)頁界面。

1.2 Web界面設(shè)計涉及范圍

1.2.1 內(nèi)容

網(wǎng)站的本質(zhì)在于信息的傳播以及如何傳播，問題集中在怎樣引導用戶。由于Web的特殊性，內(nèi)容已經(jīng)脫離我們傳統(tǒng)的定義，它可以包括：文字，圖形，超鏈接，交互操作，動畫，視頻，音頻，在線游戲甚至更多的混合型的組織形式，擁有高質(zhì)量的內(nèi)容是網(wǎng)站成功的關(guān)鍵。Web界面設(shè)計一方面為了滿足視覺體驗，帶給客戶不同以往的美學感受，可以吸引第一次訪問的客戶更加關(guān)注站點，另一方面當用戶在某個地方停留下來后，用戶感興趣的就是信息。內(nèi)容，作為界面設(shè)計的一部分，既要良好的展現(xiàn)，又要方便用戶快速獲取。因此，Web界面設(shè)計的最基本原則是通過有效的方法更好的組織和規(guī)劃用戶所能瀏覽到的信息，為用戶提供方便閱讀的瀏覽頁面，獲得用戶的好感。

1.2.2 技術(shù)

技術(shù)的完善與系統(tǒng)是保證合理功能的基礎(chǔ)。Web是由傳統(tǒng)紙媒進化到互聯(lián)網(wǎng)的信息載體，其傳播媒介已經(jīng)發(fā)生了徹底的變化，因此要從互聯(lián)網(wǎng)的根本特性出發(fā)進行設(shè)計。目前互聯(lián)網(wǎng)技術(shù)的更新迭代非常迅速，HTML，CSS，JavaScript等都在以超乎想象的速度發(fā)展。因此優(yōu)秀的Web界面一定是及時把握并應用最新的技術(shù)，設(shè)計師作為Web界面的設(shè)計者，應該時常關(guān)注技術(shù)領(lǐng)域的變化，保持對Web前端技術(shù)較高的關(guān)注度。

1.2.3 交互

Web界面作為人機交互界面，與其他的人機交互界面如PC操作系統(tǒng)界面、手機界面、辦公軟件界面等有很多相似的地方，但也有其獨有的一些特點。認知科學家和其他研究人員，花費了數(shù)百小時，對人們操作網(wǎng)站的行為，進行了仔細觀察和認真研究，以及他們自己怎樣評估自己的行為，通過這些研究發(fā)現(xiàn)，人們在使用軟件、操作網(wǎng)站或執(zhí)行其他任何希望在新軟件中支持的動作時，用戶的行為是可以預期的。這些行為包括：

第一，安全探索：如果一個人覺得他可以在一個界面上進行探索而不會產(chǎn)生可怕的后果，他會對這個界面更加肯定。第二，即時滿足：人們喜歡立刻從他們的行為看到結(jié)果，這是人類的天性。第三，滿意即可：當人們看到一個新的界面時，他們不會仔細審視每個細節(jié)，而是會快速掃描這個界面，挑選他預期會達到目的元素進行操作，盡管有時可能是個錯誤的選擇。第四，習慣：當一個人重復使用某個界面時，一些常用的操作將演變成為人的反射性動作。用戶不需要對這些操作進行過多的思考，他們已經(jīng)養(yǎng)成了習慣。第五，空間記憶：當人們使用東西或文檔時，他們經(jīng)常通過回憶它們的位置來再次找到它們，而不是它們的名字。第六，簡化重復工作：在很多軟件中，用戶有時候需要重復某些操作。

不同的網(wǎng)站，功能不同，交互方式不同，頁面上的功能模塊也不盡相同，人們在瀏覽類型相似的網(wǎng)站，通常對網(wǎng)站的操作流程與交互習慣也會按照一定模式來進行。因此可以根據(jù)頁面的功能，在網(wǎng)站制作之初，根據(jù)功能，制定一個設(shè)計規(guī)則，所有的模塊都在這個規(guī)則下進行設(shè)計。良好的設(shè)計規(guī)則，會把耦合密集的設(shè)計參數(shù)進行歸類作為一個模塊，并以此劃分工作任務。而模塊之間彼此通過一個固定的數(shù)據(jù)接口進行交互。

1.3 Web界面設(shè)計模式

設(shè)計模式已經(jīng)在軟件編程中得到了非常成功的應用，在CSS和HTML中，設(shè)計模式是指一組適用于多種瀏覽器和屏幕閱讀器的常用功能，利用它可以系統(tǒng)地應用到HTML和CSS網(wǎng)頁設(shè)計和開發(fā)中。它們提高了網(wǎng)頁設(shè)計和開發(fā)的生產(chǎn)力、 創(chuàng)造性和效率，并且大大降低了代碼的復雜性。

設(shè)計模式是所有創(chuàng)意的基礎(chǔ)，它們類似于可重用的算法，可以通過系統(tǒng)地修改和相互組合來產(chǎn)生預期結(jié)果。 設(shè)計模式能夠顯著提升創(chuàng)造力和生產(chǎn)力。它可以單獨使用，快速產(chǎn)生一些結(jié)果；也可以與其他模式相結(jié)合，產(chǎn)生一些復雜結(jié)果。設(shè)計模式簡化和豐富了創(chuàng)造過程。它們將創(chuàng)造性工作變得像塔積木一樣容易。選擇一些預定義的設(shè)計模式，進行適當?shù)男薷暮徒M合，就可以得到符合要求的結(jié)果。

2 HTML5與Web界面設(shè)計模式

Web界面設(shè)計，不同與傳統(tǒng)紙媒、影視的設(shè)計，Web界面的是通過HTML、CSS、JavaScript這三項關(guān)鍵技術(shù)來實現(xiàn)的，其中，HTML作為結(jié)構(gòu)部分，起到了至關(guān)重要的作用。

2.1 HTML5對Web界面設(shè)計的影響

HTML5對Web界面設(shè)計的影響主要表現(xiàn)之一是HTML語義化標簽，HTML5 可以讓很多更語義化的結(jié)構(gòu)化代碼標簽代替大量的無意義的 div 標簽。這種語義化的特性不僅提升了網(wǎng)頁的質(zhì)量和語義，并且減少了以前用于CSS調(diào)用的class和id 屬性。

HTML5常用結(jié)構(gòu)標簽：