摘要：本文闡述了網(wǎng)頁設計的概念，將美學與實際的網(wǎng)頁設計相結(jié)合，通過留白、意象、色彩、中國元素等審美元素來呈現(xiàn)現(xiàn)代網(wǎng)頁設計的美學觀點，以html、CSS等網(wǎng)頁語言將藝術(shù)與商業(yè)相結(jié)合。

關(guān)鍵詞：網(wǎng)頁設計；美學；色彩；留白；中國元素

中圖分類號：TP391 文獻標識碼：A 文章編號：1007-9599 （2012） 20-0000-02

網(wǎng)頁設計是網(wǎng)站向網(wǎng)民提供信息產(chǎn)品和信息服務的一種方式，它是開展電子商務的基礎設施和信息平臺。網(wǎng)站同時也是通過網(wǎng)絡平臺宣傳和反映網(wǎng)站企業(yè)的形象和文化的重要窗口。美學與商業(yè)的結(jié)合將使得美學更大眾化，商業(yè)更藝術(shù)化，營造出一個雙贏的局面。使用CSS和HTML技術(shù)可以實現(xiàn)這個目標，將網(wǎng)頁設計與美學完美結(jié)合。

1 CSS

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它被用于網(wǎng)頁的風格設計。通過設立CSS，能夠統(tǒng)一管理HTML中各個標志的顯示屬性。CSS能夠使網(wǎng)頁設計師更有效地控制網(wǎng)頁所呈現(xiàn)的外觀。使用CSS，能夠精確地控制網(wǎng)頁元素的定位、外觀呈現(xiàn)效果和其他的特殊效果。

做好CSS的布局，網(wǎng)頁就成功了一半。我們要在開發(fā)中注意選擇帶有語義的標記，方便后續(xù)人員的開發(fā)，即id或class要讓人見名知意。創(chuàng)建良好的標記首先要選擇文檔類型，再制定語言和字符集，接著制定標題。選用恰當?shù)脑匾餐瑯又匾苊膺^度地使用div和span元素，它們的少量和必要的合理使用可以增強文檔的結(jié)構(gòu)性，但若是發(fā)現(xiàn)自己過度使用了它們，那么請考慮一下是否還有更加適合的HTML元素能夠來代替它們。

要盡可能地少使用標簽元素。如果想創(chuàng)建良好的文檔結(jié)構(gòu)，那么請盡可能地少使用標簽元素。只使用必要的標簽，將其他不是必須的標簽都刪除。這樣做的好處在于它不僅能夠讓文件保持適宜的大小，還能讓瀏覽器迅速完成對文檔的解析，得到更快的顯示網(wǎng)頁的速度。

在適當?shù)臅r候使用id和class屬性。為元素添加起標識作用的屬性可以讓你在稍后容易地將該元素與CSS或javascript關(guān)聯(lián)起來。雖然如今依然有部分瀏覽器對clas和id的大小寫名稱不敏感，但為了方便調(diào)試和考慮到多瀏覽器的兼容性，還是區(qū)分為好。

另外，出于靈活性的考慮，給元素添加額外的class和span是十分有必要的。在頁面的段落中聲明內(nèi)部元素，意味著在設計時我們可以為這些元素應用某些額外的樣式。額外的span標簽還有圖像替換的功能。但為什么不使用同樣具有該功能的img元素呢？這也是出于靈活性的考慮。若是圖片的地址直接寫入到HTML中，就不可能只通過替換樣式文件讓頁面產(chǎn)生變化了。

2 色彩

色彩是藝術(shù)表現(xiàn)的元素之一。在網(wǎng)頁設計中，網(wǎng)頁設計師根據(jù)內(nèi)容和諧、布局平衡和突出重點的設計原則，將不同的色彩進行組合，搭配構(gòu)成令人賞心悅目的網(wǎng)頁頁面[2]。同時，色彩對人們的心理也具有一定的影響力，網(wǎng)頁設計師將合理地運用這一特點進行網(wǎng)頁設計。

我認為在網(wǎng)頁設計中起碼應該把握以下幾點色彩設計的原則：

2.1 確定網(wǎng)頁的主色調(diào)，選擇襯托色彩，凸顯網(wǎng)站內(nèi)容和主題

平日里我們?yōu)g覽的網(wǎng)頁，一般都是以淺色調(diào)為主的居多，如：人人網(wǎng)（www.renren.com）以較淺的藍色為基調(diào)，豆瓣網(wǎng)（www.douban.com）以淺綠色為基調(diào)，滬江網(wǎng)（class.hujiang.com）以淺灰色為基調(diào)等。以淺色為底，給人柔和素淡的感覺，配合深色的文字，讓人視覺上得到舒適的感覺。淺色的基調(diào)有利于整體頁面的搭配，便于突出網(wǎng)頁的重點內(nèi)容，方便閱讀。其他的如背景圖片等次要內(nèi)容，不能喧賓奪主，要采用不那么搶眼的顏色。而需要得到突出表現(xiàn)的內(nèi)容，就適宜采用明亮的色彩，或者與背景色對比度大的色彩，對網(wǎng)頁的瀏覽者產(chǎn)生強烈的視覺沖擊，但不宜過多使用，否則反而會讓頁面變得繁雜混亂。

2.2 在網(wǎng)頁中運用同色系的色彩

使用同色系的色彩，會讓人覺得頁面賞心悅目，留下好印象。同色系的色彩易于搭配，不會使得頁面顯得雜亂，也不會讓人視覺疲憊，可以大面積使用。但同色系的色彩搭配也存在弊端，它容易使得網(wǎng)頁色彩單調(diào)，令人覺得乏味，為了解決這個問題，網(wǎng)頁設計師可以采取局部使用對比色的圖片來增加頁面整體變化，增加一種輕松活潑的感覺。

2.3 頁面中對比或互補色的運用

通過使用對比互補的色彩，能夠塑造輕松活潑，以及運動感強的網(wǎng)頁效果，它適宜體現(xiàn)輕松主題的網(wǎng)站，既色彩豐富，又協(xié)調(diào)悅目。雖然對比色帶來了如此的好處，它同樣也存在著缺陷。過于豐富的色彩會造成視覺的疲憊和重點不清晰，譬如，過于豐富的背景色彩會影響前景圖片和文字的取色，嚴重時會使文字融于背景中不易辨識。所以，在設計網(wǎng)頁的時候，我們只用一到兩種色彩占據(jù)主導地位，其他的對比色作為陪襯或點綴來調(diào)節(jié)整體效果，大面積的色彩填充宜用低比度色彩，所以背景色用單一的色彩為佳。

總而言之，色彩的運用方式多種多樣，目的是要讓網(wǎng)頁設計達到實用和審美的統(tǒng)一與和諧，要解決設計中的色彩運用的具體問題，就需要在長期的實踐中不斷積累經(jīng)驗和學習前人總結(jié)的解決方法。

3 留白

“留白”從字義上來簡單理解就是“留出空白”，它與色彩中的白色不是同一概念，它更適合于從哲學上來理解[1]。它發(fā)源于中國傳統(tǒng)的虛實相生、陰陽辯證的哲學思想，發(fā)展于傳統(tǒng)的繪畫行業(yè)，中國水墨畫將“留白”的禪意發(fā)揮得淋漓盡致，它表達出一種“以無生有，以簡勝繁”的思想，這種設計理念與西方二十世紀興起的一些現(xiàn)代設計理念如出一轍。在現(xiàn)代設計中，“留白”體現(xiàn)了極簡主義的一種追求，體現(xiàn)了“形斷而意不斷”的禪意，符合人們對簡單純粹的生活的追求與向往?！傲舭住蓖卣沽丝臻g的聯(lián)想力，設計師在有限的空間里為人們擴寬了思路，使得設計充滿了魔力。

怎樣才能理解中國傳統(tǒng)水墨畫中的“留白”概念，然后將它在如今的網(wǎng)頁設計中得到發(fā)揚光大，是我們在現(xiàn)代商業(yè)網(wǎng)頁設計中需要探討的課題。

現(xiàn)在的網(wǎng)頁設計和網(wǎng)絡剛流行起來時已經(jīng)產(chǎn)生了很大的變化，除了更具結(jié)構(gòu)感的版式設計和充滿科技感的新技術(shù)的應用外，如今的網(wǎng)頁設計中增加了許多“留白”，并從“留白”與畫面的對立統(tǒng)一中追求現(xiàn)代網(wǎng)頁設計的形式美?！傲舭住币呀?jīng)成為了現(xiàn)代網(wǎng)頁設計的重要手段，優(yōu)秀的網(wǎng)頁設計作品中都能看到“留白”傳達的積極意義。在網(wǎng)頁設計中處理好“留白”與圖形的關(guān)系更能提高和強化網(wǎng)頁的視覺傳達效果，加強網(wǎng)頁的畫面表現(xiàn)效果。

“留白”在實用性上，能夠更佳地實現(xiàn)關(guān)鍵信息的聚焦效果，是網(wǎng)頁布局的關(guān)鍵?！傲舭住笔蔷W(wǎng)頁布局重要的組成部分，在文字、圖片、視頻等繁雜的信息交錯中，它能平衡這種信息交錯帶來的復雜感，實現(xiàn)寧靜的效果。在另一方面，“留白”還能方便地突出網(wǎng)頁的主題，對于新聞類或電子商務類的網(wǎng)站，這個作用再重要不過。

另外，白色作為一種色彩，既可增強又可協(xié)調(diào)網(wǎng)頁的色彩對比，因此“留白”在網(wǎng)頁設計中具有獨特的審美意義。在網(wǎng)頁中強調(diào)“留白”，不僅能夠提高網(wǎng)頁的觀賞性，也滿足了用戶視覺的需要，“留白”能夠使網(wǎng)頁的整個內(nèi)容排布得松緊有度。

可以從三個方面來理解分析“留白”所傳遞的魅力：觀者的視知覺、心理接受和時代、社會特征這三個方面。觀者能夠通過“留白”的引導，從繁復的信息中，快速地找到自己關(guān)注的信息，不會形成信息傳遞障礙?！傲舭住边€能引導觀者的視覺移動順序，網(wǎng)頁設計師通過設置適當?shù)耐ｎD，合理有效地引導觀者瀏覽想讓他們了解的網(wǎng)頁信息。

真正的網(wǎng)頁設計師的設計不是為了嘩眾取寵，而是在藝術(shù)和功能上做到協(xié)調(diào)統(tǒng)一?！傲舭住弊鳛橐环N簡約的力量創(chuàng)造了網(wǎng)頁的藝術(shù)意境，也迎合了用戶的使用心理。

4 中國元素

網(wǎng)絡將世界變成了一個多國度文化自由交流的空間，其中，中國元素在網(wǎng)頁設計上的運用是極為亮眼的。在本國的網(wǎng)頁設計中，中國元素的出現(xiàn)和電子商務的需求是脫離不開的，如：茶、玉石、文房四寶等極具中國特色的商品，需要具有中國元素的網(wǎng)頁來承載。就連國外的一些網(wǎng)站也將漢字的意象融入網(wǎng)頁設計當中，把中國書法藝術(shù)融入現(xiàn)代網(wǎng)頁設計中，更有助于體現(xiàn)網(wǎng)站的思想和主題，可見審美無國界，美是通行世界的語言。

中國元素具有民族特色，它包羅的元素很廣泛，漢字、圖騰、吉祥物等都常常出現(xiàn)。漢字由它本身的象形歷史產(chǎn)生了令人遐想的空間，書法在此基礎上將它的美感升華，行書線條流暢，楷書端莊秀美，草書狂放寫意……圖騰中的龍鳳圖案以及其他異獸或傳說中是神仙鬼怪都是極好的素材，通過藝術(shù)的加工，為網(wǎng)頁增加了神秘的色彩。

5 結(jié)論

隨著技術(shù)的發(fā)展，CSS拓展了HTML對網(wǎng)頁的展現(xiàn)能力，為人們呈現(xiàn)了不同的網(wǎng)絡世界。不僅是簡潔有序的排版，和諧的色彩搭配、寫意的留白、神秘的中國元素等新的美學元素的加入，豐富了單調(diào)的網(wǎng)頁，更加貼切地表達了網(wǎng)頁的主題，也更體貼地表現(xiàn)了網(wǎng)站企業(yè)對用戶的關(guān)懷?，F(xiàn)在優(yōu)秀的網(wǎng)頁，都是將美學與網(wǎng)頁設計相結(jié)合，才能更吸引用戶，無論中外，人性的美學都是世界通用的語言。我相信在未來，網(wǎng)頁設計師們將更多美學的元素運用于網(wǎng)頁設計中，從而使兩者的聯(lián)系更為緊密，不止是發(fā)揚美學，并且也將網(wǎng)頁想傳達的內(nèi)容通過美學來傳遞給網(wǎng)頁瀏覽者。

參考文獻：

[1]衛(wèi)捷.“留白”理念在現(xiàn)代網(wǎng)頁設計中的映射[D].河南：河南大學，2011.

[2]曾漢霞，楊嘉偉.網(wǎng)頁設計中的色彩運用藝術(shù)[J].大家，2010，16：78.

[3]高桂清.淺談中國傳統(tǒng)元素在網(wǎng)頁設計中的應用[J].大眾文藝，2010，24：67.

[4]SHEA D，HOLZSCHLAG M E.CSS禪意花園[M].陳黎夫，山崺颋.北京：人民郵電出版社，2012.