網頁設計中“對比”原則的剖析和應用
網頁設計是由很多個不同的元素構成的,這些元素的重要性都不同,有些元素需要特別突出、有些元素彼此之間存在著聯繫,網頁設計而另外的元素之間則一點關聯性都沒有。比較難辦的是如何有效的在視覺上來傳遞元素之間的關係。這就該用到對比原則了。
對比就是兩個或更多個元素之間的不同。通過對比,設計師就可以創造出視覺趣味性,同時引導使用者的注意力。想像一下,如果頁面上所有的元素都是一個模樣,那就會覺得這些內容沒有組織,沒有"(視線)流",沒有明確的結構,也很難去理解和接受。因此在網頁設計中,對比是很重要的一部分。
在這篇文章中,我們將會看到如何通過顏色、尺寸、對齊方式這三個方面的對比原則來設計更優秀的網頁。
顏色對比
大多數人聽到“對比”這個詞,他們首先想到的就是顏色。儘管對比原則中不只包含顏色,但是顏色對於説明使用者識別頁面中不同的元素有很大的説明。
一般頁面都包含頁頭,內容區,頁腳。那麼我們就需要從視覺上清晰的區分中這三個不同的部分。很好的方法就是: 使用不同的背景色。
churchmedia網站是一個很好的例子。頁頭和頁腳都使用較深的背景色,台中網頁設計內容區是白色。通過這種差異,可以很明顯的突出內容,並表現出它的重要性。如果我們再深入點看,在內容區域也有不同的背景色對比:“案例”部分使用了淺藍色。正因為它與其他內容部分的對比很小,表示兩個部分是有關聯的。
Phil Renaud’s portfolio 這個網站使用了一個獨特佈局和極其漂亮的配色方案。網站整體使用了棕色來設計,網頁設計公司他使用了一種金黃色來增加垂直導航區域和其他區域的對比。
文本之間也可以使用顏色來形成對比。在Billy Tamplin中,標題,副標題,文章段落分別使用了不同的顏色,將各部分合理的區分並建立視覺結構,最終獲得了很好的效果。作為博客的介面來說,在文章標題和主體內容之間建立對比是很重要的。這樣在使用者滾動頁面的時候,就可以讓他們清楚的看到文章的從哪開始和到哪結束。
|