試析網(wǎng)頁(yè)設(shè)計(jì)與美學(xué)的結(jié)合

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

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；美學(xué)；色彩；留白；中國(guó)元素

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2012） 20-0000-02

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

1 CSS

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

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

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

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

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

2 色彩

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

我認(rèn)為在網(wǎng)頁(yè)設(shè)計(jì)中起碼應(yīng)該把握以下幾點(diǎn)色彩設(shè)計(jì)的原則：

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

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

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

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

2.3 頁(yè)面中對(duì)比或互補(bǔ)色的運(yùn)用

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

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

3 留白

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

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

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

“留白”在實(shí)用性上，能夠更佳地實(shí)現(xiàn)關(guān)鍵信息的聚焦效果，是網(wǎng)頁(yè)布局的關(guān)鍵。“留白”是網(wǎng)頁(yè)布局重要的組成部分，在文字、圖片、視頻等繁雜的信息交錯(cuò)中，它能平衡這種信息交錯(cuò)帶來的復(fù)雜感，實(shí)現(xiàn)寧?kù)o的效果。在另一方面，“留白”還能方便地突出網(wǎng)頁(yè)的主題，對(duì)于新聞?lì)惢螂娮由虅?wù)類的網(wǎng)站，這個(gè)作用再重要不過。

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

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

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

4 中國(guó)元素

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

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

5 結(jié)論

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

參考文獻(xiàn)：

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

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

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

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