2.3 網頁版面布局設計

網站中有很多不同的網頁，如主頁、欄目首頁、內容網頁等，不同的網頁需要不同的版面布局。與報紙、雜志不同的是，網站的所有網頁組成的是一個層次型結構，每一層網頁里都需要建立訪問下一層網頁的超鏈接索引，所以網頁所處的層次越高，網頁中的內容就越豐富，網頁的布局就越復雜。

2.3.1 網頁版面布局原則

網頁在設計上有許多共同之處，如報紙等，也要遵循一些設計的基本原則。熟悉一些設計原則，再對網頁的特殊性作一些考慮，便不難設計出美觀大方的頁面來。網頁頁面設計有以下幾條基本原則，熟悉這些原則將對頁面的設計有所幫助。

1．主次分明，中心突出

在一個頁面上，必須考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖像一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內容，這樣在頁面上就突出了重點，做到了主次有別。如圖2-13所示網頁上的內容主次分明，重點突出了酒店的會議設施、餐飲設施、康體娛樂設施和客房設施的圖片。

2．簡潔一致性

保持簡潔的常用做法是使用醒目的標題，這個標題常常采用圖形表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字體和顏色的數目。一般每頁使用的字體不超過3種，一個頁面中使用的顏色少于256種。

要保持一致性，可以從頁面的排版下手，各個頁面使用相同的頁邊距，文本、圖形之間保持相同的間距。主要圖形、標題或符號旁邊留下相同的空白。

3．大小搭配，相互呼應

較長的文章或標題，不要編輯在一起，要有一定的距離；同樣，較短的文章，也不能編排在一起。對待圖像的安排也是這樣，要互相錯開，使大小圖像之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。如圖2-14所示為圖文搭配大小呼應的網頁示例。

4．圖文并茂，相得益彰

文字和圖像具有一種相互補充的視覺關系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖像太多，缺少文字，必然會減少頁面的信息容量。因此，最理想的效果是文字與圖像的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內容。

5．網頁顏色選用

考慮到大多數人使用256色顯示模式，因此一個頁面顯示的顏色不宜過多，應當控制在256色以內。主題顏色通常只需要2～3種，并采用一種標準色。如圖2-15所示為主題顏色采用兩種的網頁示例。

6．網頁布局時的一些元素

網頁布局時的一些元素包括格式美觀的正文、和諧的色彩搭配、較好的對比度、可讀性較強的文字、生動的背景圖案、頁面元素大小適中、布局勻稱、不同元素之間有足夠空白、各元素之間保持平衡、文字準確無誤、無錯別字、無拼寫錯誤。

2.3.2 點、線、面的構成

點、線、面是構成視覺空間的基本元素，是表現視覺形象的基本設計語言。網頁設計實際上就是如何經營好三者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。一個按鈕、一個文字是一個點。幾個按鈕或者幾個文字的排列形成線。而線的移動或者數行文字或者一塊空白可以理解為面。點、線、面相互依存，相互作用；可以組合成各種各樣的視覺形象，千變萬化的視覺空間。

1．點的視覺構成

在網頁中，一個單獨而細小的形象可以稱之為點。點是相比較而言的，比如一個漢字是由很多筆劃組成的，但是在整個頁面中，可以稱為一個點。點也可以是網頁中相對微小單純的視覺形象，如按鈕、LOGO等。如圖2-16所示是網頁中的按鈕組成的點。

需要說明的是，并不是只有圓的才叫點，方形、三角形、自由形都可以作為視覺上的點，點是相對線和面而存在的視覺元素。

點是構成網頁的最基本單位，在網頁設計中，經常需要我們主觀地加些點，如在新聞的標題后加個NEW，在每一小行文字的前面加個方或者圓的點。

點在頁面中起到活潑生動的作用，使用得當，甚至可以是畫龍點睛的效果。

一個網頁往往需要有數量不等、形狀各異的點來構成。點的形狀、方向、大小、位置、聚集、發散，能夠給人帶來不同的心理感受。

2．線的視覺構成

點的延伸形成線，線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質量和情緒。如圖2-17所示為網頁中的線條。

線是分割頁面的主要元素之一，是決定頁面現象的基本要素。

線分為直線和曲線兩種，這是線的總體形狀。

線的總體形狀有垂直、水平、傾斜、幾何曲線自由線這幾種可能。

線是具有情感的。如水平線給人開闊、安寧、平靜的感覺；斜線具有動力、不安、速度和現代意識；垂直線具有莊嚴、挺拔、力量、向上的感覺；曲線具有柔軟流暢的女性特征；自由曲線是最好的情感抒發手段。

將不同的線運用到頁面設計中，會獲得不同的效果。知道什么時候應該運用什么樣的線條，可以充分的表達所要體現的東西。

3．面的視覺構成

面是無數點和線的組合，面具有一定的面積和質量，占據空間的位置更多，因而相比點和線來說，面的視覺沖擊力更大更強烈。如圖2-18所示為網頁中不同背景顏色將頁面分成不同的板塊。

只有合理的安排好面的關系，才能設計出充滿美感，藝術加實用的網頁作品。在網頁的視覺構成中，點、線、面既是最基本的造型元素，又是最重要的表現手段。在確定網頁主體形象的位置、動態時，點、線、面將是需要最先考慮的因素。只有合理的安排好點、線、面的互相關系，才能設計出具有最佳視覺效果的頁面。