Web頁面設計基礎

頁面設計原則

Web作為出版物的一種，同其他出版物如報紙，雜志等在設計上有許多共同之處，也要遵循一些設計的基本原則，不同之處在于Web的“非所見即所得”特性和交互性。因此，熟悉一些設計的基本原則，再對Web的特殊性作一些考慮，便不難設計出美觀大方的頁面來。如果有美術設計基礎，對Web頁面的設計會很有幫助。如果不具備這方面的背景知識，那么下面的一些原則將會對你有點幫助。

設計的3C原則

所謂3C原則是指：簡潔、一致性、好的對比度。
Web頁面設計需要遵循這三條原則。

簡潔

設計并不再現具體的物象和特征，它要表達的是一定的意圖和要求，在適當的環境里為人們所理解和接受。它與繪畫有內在聯系，但又不同于繪畫，它以滿足人們的實用和需求為目標，因而它比繪畫更單純，清晰和精確。頁面設計屬于設計的一種，同樣要求簡練，準確。

從人記憶能力的角度來說，由于人的大腦一次最多可記憶五到七條信息，因此如果希望人們在看完你的Web頁后能留下印象，最好也應該用一個簡單的關鍵詞語或圖像吸引他們的注意力，如天極網的的“YESKY”.，醒目易記。
保持簡潔的通常做法是使用一個醒目的標題，這個標題常常采用圖形來表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字體和顏色的數目。一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于256種。頁面上所有的元素都應當有明確的含義和用途，不要試圖用無關的圖片把頁面裝點起來，初學者容易犯的一個錯誤是把頁面搞的花里呼哨，卻不能讓別人明白他到底要突出表達的是什么內容，主題和意念。

一致性

一致性是表現一個站點的獨特風格的重要手段之一。
要保持一致性，可以從頁面的排版下手，各個頁面使用相同的頁邊距。文本，圖形之間保持相同的間距。主要圖形，標題或符號旁邊留下相同的空白。如果在第一頁的頂部放置了公司標志，那么在其他各頁面都放上這一標志。如果使用圖標導航，則各個頁面應當使用相同的圖標。
一致性還包括：頁面中的每個元素與整個頁面以及站點的色彩和風格上的一致性。所有的圖標都應當具有相同的設計風格，比如全部采用圖象的線條剪輯畫或全部使用寫實的照片等。
另一種保持一致性的辦法是字體和顏色的使用。文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。一個站點通常只使用一到兩種標準色，為了保持顏色上的一致性，標準色一致或相近。比如，站點的主題色彩如果為紅色，可能就需要將鏈接的色彩也改為紅色。

對比度

使用對比是強調突出某些內容的最有效的辦法之一。好的對比度使內容更易于辨認和接受。實現對比的方法很多，最常用的是使用顏色的對比。比如，內容提要和正文使用不同顏色的字體，內容提要使用藍色，而正文采用黑色；也可以使用大的標題，也即是面積上的對比；還可以使用圖像對比，題頭的圖像明確的向瀏覽者傳達本頁的主題，這里同樣需要注意的是鏈接的色彩，在設計頁面時我們常常會只注意到未被訪問的鏈接的色彩，而容易忽視訪問過的鏈接色彩將使得鏈接的文字難地辨認。
還有一種實現對比的方法是使用字體變化。在文字排版中，可以使用斜體和黑體實出關鍵內容，但是注意不要濫用，否則就達不到應有的強調效果。
使用對比的關鍵是強調突出關鍵內容，以吸引瀏覽者，鼓勵他去發掘更深層次的內容。

為了對3C原則上有直觀的認識，可以去優秀的站點看看，體會一下這些站點對簡潔，一致性和對度等原則的把握。

頁面設計要點

Web上的內容包羅萬象，版式豐富多彩，但無論怎樣的變化，好的Web站點總是有許多共同之處，例如：

精心組織的內容；
格式美觀的正文；
和諧的色彩搭配；
較好的對比度，使得文字具有較強的可讀性；
生動背景圖案；
頁面元素大小適中，布局勻稱；
不同元素之間留有足夠空白，給人視覺上休息的機會；
各元素之間保持平衡；
文字準確無誤，無錯別字、無拼寫錯誤；

總的來說評價一個頁面設計的好壞基本上要考慮以下幾個方面的因素：

組織內容

設計Web頁面時，所發布的材料必須經過精心組織，比如說按邏輯、按時間順序或按地理位置等等進行組織，而且這種內容組織應當是易于理解的。

材料組織好后，下一步就是在Web頁面上布置文本、圖片等內容，目的是引導瀏覽者在頁內瀏覽。我們應該控制頁面上的元素的放置順序和它們相互之間的空隙。比如，可以把與一段文字相關的圖形放在段落旁邊或嵌入段落中，但不要把與段落無關的圖形放在段落邊上，以免引起瀏覽者的誤解。把相關的內容放在一起，而不相關的內容用空白，水平線或其他圖形分隔開，最好是瀏覽者看完一頁之后可以選擇繼續讀下去或通過鏈接跳到其他合適的主題上去。

由于人們閱讀材料習慣于從左到右，從上到下進行，因此他們眼睛首先看到的是頁面的左上角，然后逐漸往下看。根據這一習慣。我們在組織內容時可以把希望瀏覽者最先看到的內容放在頁面的左上角和頁面頂部，如公司的標志，最新消息以及其他一些重要內容等等；然后按重要性遞減的順序，由上而下放其他一些內容。重要的內容應當是瀏覽者最容易發現，而不是放在很深的鏈接之后的，頁面上的廣告為了達到宣傳效果，通常也放在頁面頂部顯著位置。在段落中不宜放入過多的鏈接，否則會引起瀏覽者瀏覽上的混亂，最好的辦法是按邏輯關系選擇放置，而不是隨便亂放。如果可能的話，應該把鏈接放在一些相關的說明性文字旁邊。比如，在一列放置文本，在另一列放置鏈接。這樣就可以提示瀏覽者去使用這些鏈接。

設計時可用的一些頁面元素

在確定Web站點的基本組織結構之后，就可以著手設計頁面了。下面是設計時可供使用的一些元素：

文本格式化：Web本身對文本和字體的格式化能力并不強，在Web頁面中，可以指定文本尺寸、排列和其他的一些格式化屬性（序號列表和無序號列表），但建議不要改變字體，而應當使用缺省字體，你指定的字體在瀏覽者那里并不一定能夠找到，如果確實有必要少量使用某種特殊字體，可以把這些字體象素化變為圖像，然后將圖像插入到頁面中；

按鈕、圖標和其他導航工具，幫助瀏覽者在Web內導航。

背景：給頁面添加背景，包括紋理填充、水印式背景和長條狀背景等等，可以使得頁面更加美觀，給瀏覽者留下深刻的映象；

圖形：可加入圖片、圖表和圖形等；

表格：用來顯示按行和列組織的信息，比如產品價格表，客戶名單等；

顏色：包括圖片的色彩、文本和背景的色彩等；

多媒體元素：包括聲音、動畫、視頻片斷、背說音樂等。

頁面布局：在頁面上放置文本、圖形等元素，在元素間添加橫線條，空白等，并用表格、杠架進行排版。

在后面的章節我們將陸續介紹這些元素的使用。

選擇文本和背景的色彩

色彩可以使頁面更加生動。首先，使用色彩可以產生強烈的視覺效果，使你的頁面在瀏覽者心中留下很深的印象；色彩還可以傳遞設計者的思想情感。但是必注意慎重的使用色彩，否則很可能弄巧成拙。濫用色彩容易造成視覺上的混亂。一般情況下不要過多的使用效果太強烈的色彩，對于大面積的文字來說，白底黑字或黑底白字總是最佳選擇。

通常還應該選擇相近的色彩。多數的頁面背景為白色、黑色或灰色，其他一些次要的元素，如背景圖片、線條適宜采用不搶眼的色彩。在數量有限的情況下，只有少量精心選擇的元素為了突出強調的需要，才彩用明亮的色彩。在數量有限的情況下，這引起彩色亮點會產生強烈的視覺沖擊，但如果用得太多了，就會形成一種均勻的噪聲，而達不到強調的效果。

在選擇背景和正文顏色時，最重要的一點是注意易讀性。實現易讀性的關鍵在于提供足夠的明暗對比。由于黑白之間有最強烈的對比度，因此大多數網頁都采用黑底白字顯示文本，但是，也不必拘泥于黑白兩色實現對比，可以選擇一對顏色，其中一個是亮的，一個量暗的，只要它們保持足夠的對比度，比如說，灰底黑字也是不錯的選擇。

大面積的適宜采用低對比度。因此，對于大的形狀或粗體字最好采用低對比度的色彩組合。

除了亮度上的對比之外，還要考慮顏色上的對比。互補色具有最強的顏色對比，兩種有較強的色彩對比度的顏色組合在一起時，很難區分它們的邊界。顏色對比同樣可以產生強烈的視覺效果。運用強的色彩對比，可以制造緊張，激動等感覺。但是，在文本和它的背景之間不宜采用太強的顏色對比，否則文字看起來會顯示得模糊。特別是，文本切忌放在使用其的互補色的背景上。

在選擇顏色時，還要注意冷暖色的問題。冷色調（藍、綠）會產生收縮感，而暖色調（紅、橙、黃）則有向前突出的感覺。深藍色和深綠色適合作為背景色，而明亮的黃色適合于那些希望引起注意的東西。事實上，只要我們平時稍加觀察，就會發現許多商店的招牌，廣告或其他商業圖形展示都采用深藍色背景加黃色文字，標記的組合。這種組合非常醒目，最適合商業領域使用。黑色和黃色也是另一種常用的顏色組合。

在Web頁面上，大多采用明亮的背景色襯以深顏色的文字這樣的一種顏色組合。

除了色彩的對比、冷暖感覺之外，還需要考慮色彩帶給人心理上的感覺。比如，冷的顏色使人平靜，而暖色使人激動；強的色彩對比造成緊張感；暗的顏色給人以沉重感和壓迫感。亮的顏色給人輕松、開放的感覺。我們可以根據所要表達的主題，選擇合適的色彩。

色彩除了帶給人心理上的感覺之外，有些顏色實際上已經有了社會意義。比如，紅色代表停止，綠色代表通行，灰色和深藍色代表保守，穩重等。恰當運用色彩可以調動瀏覽者心理上的感受。比如，在許多飲食店中，采用藍色，給人輕松愉快的感覺，這同樣也適合于網頁，在網頁中使用顏色時，就要盡量使得色彩搭配與這些習俗相吻合。

考慮到大多數人使用256色顯示模式，因此一個頁面顯示的顏色不宜過多，連頁面內的圖像在內應當控制在256色以內。主題顏色通常只需要兩到三種，并采用一種標準色。

以下是使用色彩的一些建議：

對多數網頁特別是有大面積文字的網頁來說，應采用白色或淺色的背景，如淺灰色、淡黃色、淺藍色或淺綠色，文字采用黑色或深顏色；
避免在淺色背景使用明亮顏色的文字，因為這樣文字會很難辨認；
深顏色背景上使用淺色的文字是一種很好的組合，但是如果不是特別需要，應留作那些需要引起瀏覽者特別注意的小塊區域和場合，比如標題圖形等；
使用黑色背景許多時候顯得太沉重，可以考慮使用深灰色、深藍、粟色等；
白色、淺灰色、淺藍色、淺綠色、淺褐色很適合作為深色背景上的文字顏色；
大的、粗體的文字比常規尺寸的文字更適合使用；交強的顏色，可考慮鮮紅色，橙色，明亮的藍色，但注意不要濫用。