振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網頁設計中“對比”原則的剖析和應用
2010/05/06
網頁設計中“對比”原則的剖析和應用

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

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

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

  顏色對比

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

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

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

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

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

  尺寸對比

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

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

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

  對齊方式的對比

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

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

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

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

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

  動手去做

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

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

 

最後更新 ( 2010/05/17 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇