淺談網頁設計的藝術表現形式

摘要:隨著網絡技術的發展，越來越多的企事業單位意識到利用網絡和媒體進行傳播信息的重要性。網頁設計作為一項設計網站的專業技術，已經逐漸的被人們所熟知。網頁設計的藝術性表現在設計的整個流程之中，包括版面布局設計、色彩搭配、字體選擇以及圖形修飾等方面。

關鍵詞:網站;網頁設計;藝術性;表現形式

中圖分類號:TP311 文獻標識碼:A 文章編號:1009-3044(2010)01-203-03

On the Artistic Manifestation of Web Design

DING Kai

(China University of Mining And Technology， Xuzhou 221116， China)

Abstract: With the development of Web Technology， more and more enterprises and business organizations have realized the importance of information dissemination by using the internet and media. As a professional technology designing websites， web design has gradually been well known. The artistry of the web design is manifested in the whole designing process， including layout designing， color matching， font selection and graphics modification， etc.

Key words: website; web design; artistry; manifestation

作為一名網頁設計者，在設計網頁之前的首要任務就是調研。我們需要知道這個網站設計的目的是什么，面向的讀者由哪些人組成，網站提供什么樣的信息，有沒有標志性圖片或文字等等一些問題。這些問題將引導你更好地去設計該網站。怎樣的一個網頁才能算得上是一個好的網頁呢?有些設計者被美學和圖像所吸引，專注于設計版面花哨的網頁，在他的網頁中含有大量顏色各異的圖片，讓讀者眼花繚亂，而并沒有傳遞出網站想要宣傳的信息;另一方面，有些設計者設計的網頁看似把所有要表達的信息都流暢地表達出來，但卻難以取悅于讀者，因為他忽略了網頁設計的美學和藝術特征，這是網頁設計的兩個極端。所以一個既能夠向用戶提供必要信息，又能夠吸引讀者眼球，給讀者以美的享受，那才是一個好網頁。

網頁設計既是一項開發技術，更是一門藝術。網頁設計缺少了對美學的追求，網頁缺少了藝術性，那這樣的網頁必定是失敗的，也就必定不會起到宣傳的作用。網頁設計的藝術性貫穿網頁設計的整個流程。下面筆者將就網頁設計的版面布局設計、色彩搭配、字體選擇以及圖形修飾等五個方面闡述網頁設計的藝術。

1 版面布局設計

版面布局設計是建立網頁的基礎，網頁的版面既不能讓內容充斥填滿，也不能不含內容，過于單調簡單。通常利用柵格來規劃版面的設計，柵格理論其實來源于數學中的黃金分割比例，設計時把版面的橫向和縱向平均分成相等的3的整數倍數等分，這些等分線就組成了基本的柵格，我們就可以在這些柵格中進行版面布局，例如用版面的縱向2/3和橫向的1/3來展示主文檔，用橫向的1/3來顯示網站名和標題信息，用橫向的1/3和縱向的1/3來顯示網站的標志符號，這樣用近于黃金分割比例分配的布局，從美學角度來講非常令人愉悅。

圖1 主文檔區域圖2 標題區域

網頁的視覺平衡是版面設計必須考慮的重要因素，它很大程度上影響著讀者對網頁的喜好程度。視覺平衡主要分為對稱平衡和非對稱平衡。對稱平衡是指組成網頁的元素分布在網頁中心軸的兩邊，可以是單欄、雙欄、三欄或以上。單欄和三欄以上比較少見，主要用于包含的信息較少的網頁中，如某種產品的宣傳首頁，就像一扇大門引領你進入其宣傳中心頁面;雙欄和三欄較為常見，三欄結構一般是把主要內容放在中欄，也就是第二欄，相對不重要的信息或功能放在一三欄;雙欄結構介于單欄和三欄之間，把主要信息分為兩半分別顯示在一二欄中，雙欄在非對稱平衡中也有很多應用。但是要注意的是，相互對稱的元素之間的主色調應該基本一致，要么都是暖色調，要么都是冷色調，否則會失去原本設計的平衡感。這也是下文顏色搭配中要注意的一點。非對稱平衡，就是元素不對稱地分布在網頁版面中，其大小、形狀、色調和位置均不相同。非對稱平衡是一把雙刃劍，用好了能夠達到對稱平衡無法企及的效果，用不好則會影響整個網頁的視覺效果，所謂過猶不及。不論是對稱平衡還是非對稱平衡，都免不了在網頁中插入導航條方便瀏覽者選擇瀏覽，導航條是網頁設計不可缺少的基礎元素之一，導航條一般放在整篇網頁的上端或是下端，導航條的設計可以是“全文字+修飾”的形式，也可以用JavaScript實現，也可以用Flash實現，選擇哪種方法實現由網站風格確定，導航條的設計在顏色、形狀、大小上要與網站風格統一。導航條的風格反過來又從一定程度上決定了網站的風格，所以二者相互呼應，頁面才能得到統一的風格。

網頁設計的一致性原理是版面設計必須遵循的原則之一。它是指不同元素之間相互影響的方法，為了讓你設計的網頁達到一個完美的整體性，我們就必須遵循版面布局的一致性，應用相近性原理和重復性原理是常見的方法。相近性原理能夠讓一組物體看起來像是一個整體，讓不同的元素緊湊地放在一起可以產生視覺焦點，讓觀察者覺得這就是一個不可分割的整體，拿去其中任何一個元素都會覺得整體缺失了某些東西。重復性原理是通過重復顏色、形狀、紋理或者相似的物體來達到整體性的效果。這就是為什么許多網頁設計者在設計一個網站時總是保持基本相同的邊框、標題、目錄等的顏色和紋理，或是使用相同的標志，目的就是要保持logo、目錄和整體的布局的連貫性，這樣就不會讓讀者感覺到頁面之間的跳轉過于突兀。典型的網站有“三星電子”網站，在不同的產品內容中都保持著相同的網頁布局。

與一致性相對的概念是強調或突出。一個網頁中如果都是一些一致性的元素，就會顯得過于平凡，一個網頁中同樣需要能夠引起讀者特別注意的元素，把網頁中需要強調的元素放到該網頁的視覺中心。設計者可以通過以下方法來實現“強調”:連續、分離、對比、比例。連續是指通過引導讀者的視線向一個方向移動，然后在這個方向上放置一個明顯的特征物，盡管這個特征物可能并不是很大，但是它同樣起到了“強調”的作用。分離是指將一個事物從它周圍的事物中分離出來，突出重點。對比就是把不同的元素并列放置，使用不同的顏色、大小、形狀來形成對比，盡管所要強調的事物不在版面的中心，也同樣能夠起到強調的作用。通過夸大或縮小一個物體的比例來改變讀者心中對日常事物形成的印象，讓讀者眼前一亮，從而達到“強調”元素的作用。

2 色彩搭配設計

介紹了版面設計的藝術，讓我們來談一談網頁中的色彩搭配。網頁中色彩的選擇是一件很困難的事情，你需要考慮瀏覽者的喜好、網站的內容以及搭配的平衡性。色彩的選擇包括顏色的選擇、色溫色調的選擇、色值的選擇等等。

在人們的思想中有著某種固定的形式，那就是不同的顏色代表著不同的心情和基調，例如紅色代表著激情與動力，橙色代表陽光和胃口，黃色代表幸福和能量，綠色代表成長和希望，藍色代表智慧和典雅，黑色代表死亡和罪惡，也代表權力和優雅，……色彩的一個重要特點就是色溫，暖色包括由紅色到黃色的一系列顏色，能讓人產生激情;冷色有綠色到藍色的一系列顏色組成，能讓人冷靜。色值是顏色的明暗程度，分為淺色、純色和深色。淺色帶給人柔和輕靈，深色帶給人厚重濃密。色彩的搭配建立起和諧生動的顏色混合，讓我們選擇的顏色能夠充分發揮其特色。典型的顏色搭配方案有6種:單色搭配、相似色搭配、補色搭配、差異補色搭配、三階色搭配、四階色搭配。下面就用的比較多的幾種做具體研究。

1)單色搭配方案:根據你要設計的網站的主題，確定一種符合網站經營性目的的基本色，然后我們可以利用這個色系的淺色、本色和深色來搭配色彩。單色搭配的應用前景主要是一些需要體現品牌和身份的公司網站，這些網站無一不是利用單色搭配來體現產品的特性的，讀者一眼就能把握網站所要表達的信息，而且能夠留下深刻的印象，這樣也就達到了企業宣傳的目的;

2)相似色搭配方案:相似色搭配是指以一種基本色為中心，利用色環(如下圖所示)中與其相鄰的幾種顏色搭配網站，當然選擇的相鄰的顏色不能過多，這會讓讀者產生眼花繚亂、繁而不精的感覺;

圖3 24色環圖圖4 12色環圖

3)補色搭配方案:補色搭配就是利用上圖色環中相互對立的顏色，比如綠色和紅色、黃色和紫色、橙色和藍色等。但是因為補色的顏色彼此之間存在著非常大的差異，所以某些時候可能會引起“同步對比”效應，讓每種顏色相對于另一種顏色都更加突出。這種效應使得補色搭配在把觀眾視線吸引在一個物體周圍方面有著超強的能力，但是當補色用于前景——后景的關系時，就會顯得特別不自然，特別刺眼。

4)三階色搭配方案:三階色搭配即是使用色環中使之三等分的三種顏色作為搭配的顏色。例如三原色:紅色、黃色、藍色的搭配，由這三基色構成的圖形繞中心點旋轉一定的角度，就會得到另一組三階色搭配，如黃綠色、藍紫色、紅橙色的搭配等等。

根據網頁設計某些特殊的要求，還有其他的一些色彩搭配，在此不再一一贅述。

3 字體選擇設計

創建網頁的主要目的是為了向用戶傳遞相關的信息，而文字就是傳遞信息的主要手段，怎樣合理地安排文字、段落體現了網站設計者的創造性和藝術性，而字體的選擇則是核心工作。那么怎樣合理地選擇字體呢?

1)選擇字體的類型。網頁中的字體有很多種，各類字體都有其獨特的特征，你很難決定哪種字體更好，這就要根據你的設計主題，是莊重嚴肅，還是活潑頑皮……目前創新字體更是成為了一些網站追求的目標，因為相比于其他字體，它們能夠更好地迎合用戶，吸引用戶的眼球，這也是一些新奇網站的創新主流。但是并不是所有的瀏覽者的瀏覽器都支持或安裝了這些字體，所以這就限制了設計者展現創新的思維，限制網頁設計者盡量使用操作系統中預裝的較為普適的幾種字體(這幾種字體又叫做網絡安全字體)。

2)選擇字體的大小。對于不同的設計者，根據自己的實際設計經驗，他們自己都有一套獨立的定義使用字體大小的方案，如標題與正文什么樣的大小搭配會更好，不同段落之間的字體大小怎樣搭配會更好等。設計者可以根據自己的喜好和設計的經驗來決定選擇的字體大小，就如上文提及的一樣，當然也可以利用字體大小的落差來突出“強調”某部分文字。

4 圖形修飾設計

眾所周知，一個滿篇都是文字的網頁不是一個好網頁，一個好的網頁它必須能夠給閱讀者以視覺的沖擊，這樣的沖擊力靠的是什么?那就是圖形圖片。那么我們該怎樣選擇圖形圖片才能更好地體現網站的目的呢?首先，要選擇與網站宣傳相關的圖片。相關的圖片不僅能夠襯托版面的內容，提高內容的吸引力，更是能夠給閱讀者留下對產品的深刻印象。其次，圖片要有一定的趣味性，一定的視覺吸引力，要讓瀏覽者一見到就大感新奇。再次，圖片的大小和色調要與整個網頁協調。如果與網頁的主色調不相一致，就算再漂亮的圖片放在網頁中也是一種浪費，這不但體現不了網站的主題，反而會畫蛇添足，這也正驗證了上文對風格一致性的要求。

5 結束語

該文從版面布局設計、色彩搭配、字體選擇以及圖形修飾等五個方面闡述了目前在網頁設計藝術性方面的表現形式。注重網頁設計藝術性的目的只有一個，那就是要符合網站設計要求，合理運用各種技術和藝術手段設計出既實用又令人賞心悅目的網頁，在傳遞信息的同時給用戶以美的享受，讓用戶在不知不覺中記住網站的宣傳信息，將網頁設計藝術推向更高的境界。

參考文獻:

[1] 江朝偉.網頁設計[M].哈爾濱:哈爾濱工程大學出版社，2008.

[2] 梁景紅.網站設計與網頁配色實例精講[M].北京:人民郵電出版社，2004.

[3] 馬力.網頁設計的藝術美感分析[J].長江論壇，2008(6):89.

[4] 李德軍.探討網頁設計的藝術與處理原則[J].電腦知識與技術，2005(12):60.

[5] 金丹元.藝術感悟與審美反思[M].上海:學林出版社，2008.

[6] 楊恩寰，梅寶樹.藝術學[M].北京:人民出版社，2004.