網頁設計中「對比」原則的剖析與應用

網頁設計是由很多不同的元素構成的，這些元素的重要性都不同，有些元素需要特別突出、有些元素彼此之間存在著聯繫，而另外的元素之間則一點關聯性都沒有。比較難辦的是如何有效的在視覺上來傳遞元素之間的關係。這就該用到對比原則了。

對比就是兩個或更多元素之間的不同。透過對比，設計師就可以創造出視覺趣味性，同時引導使用者的注意力。想像一下，如果頁面上所有的元素都是一個模樣，那就會覺得這些內容沒有組織，沒有"(視線)流"，沒有明確的結構，也很難去理解和接受。因此在網頁設計中，對比是很重要的一環。

在這篇文章中，我們將會看到如何透過顏色、尺寸、對齊方式這三個面向的對比原則來設計更優秀的網頁。

顏色對比

大多數人聽到「對比」這個詞，他們首先想到的就是顏色。儘管對比原則中不只包含顏色，但是顏色對於幫助使用者識別頁面中不同的元素有很大的幫助。

一般頁面都包含頁頭，內容區，頁尾。那麼我們就需要從視覺上清晰的區分中這三個不同的部分。很好的方法就是： 使用不同的背景色。

churchmedia網站就是一個很好的例子。頁頭和頁腳都使用較深的背景色，內容區是白色。透過這種差異，可以很明顯的突出內容，並表現出它的重要性。如果我們再深入點看，在內容區域也有不同的背景色對比：「案例」部分使用了淺藍色。正因為它與其他內容部分的對比很小，表示兩個部分是有關聯的。

Phil Renaud's portfolio 這個網站使用了一個獨特佈局和極其漂亮的配色方案。網站整體使用了棕色來設計，他使用了一種金黃色來增加垂直導航區域和其他區域的對比。

文字之間也可以使用顏色來形成對比。在Billy Tamplin中，標題，副標題，文章段落分別使用了不同的顏色，將各部分合理的區分並建立視覺結構，最終獲得了很好的效果。作為部落格的介面來說，在文章標題和主體內容之間建立對比是很重要的。這樣在使用者捲動頁面的時候，就可以讓他們清楚的看到文章的從哪開始和到哪結束。

尺寸對比

在頁面設計中另一個對比方式就是不同的元素使用不同的尺寸。換句話說，讓一部分內容比其他的更大。

在不能依靠顏色的時候，透過尺寸建立對比則變得非常重要。 Taxi的配色很少，而它的頁面中有很多的新聞。因此，為了建立三列佈局的結構，設計師在中間列使用了大得多的寬度-比左側和右側列的兩倍還大。讓使用者一眼就能看出來，中間那一列是頁面中最重要的部分。

正如標題可以使用顏色來建立對比，尺寸也可以。在網站內容中，大標題是建立視覺結構很好的方法。 Imaginaria Creative的網站中，使用了大標題來吸引用戶的注意力並且留住他們，這樣用戶就會閱讀下面那些稍小的段落中更多內容。

對齊方式的對比

在高品質網頁設計中，好的對齊方式佔了很大的比重。當物品排成一行時，通常看起來會更好。因此，我覺得使用不同的對齊方式來建立對比是較難的而且要更謹慎的使用。但是如果做的好的話是非常有效的。

LegiStyles在標題下方的內容區塊左側使用了一個很大的留白。再加上大尺寸的標題，形成了一個很好的對比效果。如果你想使用不同的對齊方式，那麼一定要將這種不同的尺度做大，否則最後會看起來像一個糟糕的設計中的失誤。

居中的大段文字是排版中的禁忌。因為會造成文字很難閱讀。但是，可以嘗試將左對齊的文字段落和居中對齊的標題來混合起來。這是使用不同的對齊方式建立對比的另一個好方法。再結合使用一種漂亮的襯線字體，這樣也能獲得很漂亮的效果。

Simon Collison的每個內容區塊中，都使用了居中對齊的標題，左對齊的文字。儘管標題的文字並沒有比段落的文字大很多，但是已經能看出差別了。

A List Apart是另一個居中標題左對齊段落的很好的例子。

動手去做

學習在你的設計中建立合適的對比跟學習其他的設計準則一樣–需要練習。花點時間研究那些優秀設計師的作品，看看他們是如何使用對比的。要記住，對比就是"不同"。如果兩個元素實質上就是非常不同的，那麼一定要讓它們有明顯的視覺差異。

英文原文：The Principle of Contrast in Web Design