網頁設計中的對比原則
一、 網頁設計中的對比原則
一件網頁設計作品由許多元素構成,它們的重要性各不相同,其中一些元素的重要性要高於其它元素。一些相互關聯,而另一些則沒有任何聯繫。棘手的是如何有效地和視覺化地表達這些元素,這正是對比原則發揮作用之處。
對比產生在兩個或多個元素之間,設計者可以利用對比對使用者產生直接的視覺吸引。想像一下,如果頁面上所有的元素都是同樣的樣式,那麼整個頁面將是無序的,頁面結構也沒有流動性和層級性。內容閱讀起來將變得非常困難。這使得對比原則成為頁面web設計中一個必要的方法。
這篇文章中我們將看看如何使用對比在顏色、大小和對齊方式三個方面創建一些不同之處。
顏色對比
許多人一想到對比便立刻想到顏色。儘管對比原則並不僅僅限於顏色對比,網頁設計但它對於使用者識別各種元素的確大有説明。
現在幾乎所有的頁面一般都包括頭部、內容區域和底部。這三部分是完全不同的,它們在視覺上應當區分明確,使用背景顏色產生對比是一個不錯的方法。
網站Church Media Group就是一個非常好的例子。它的頭部和底部均採用了深色背景,而內容區則採用白色背景。這使內容區域和其他部分截然分開,並且使其重要性更加突出。如果仔細觀察,我們會發現在內容區還有另外一層的背景對比。網頁設計內容區上半部分的特色產品區用了亮藍色的背景,而它和內容區其他部分的對比則並不強烈,這就告訴我們這兩部分是相互關聯的。
文字也可以使用顏色產生對比。Billy Tamplin 在這方面有一個非常棒的作品,它分別給頁面標題、副標題和段落文本使用不同的顏色。對於博客風格的佈局,在文章標題和內容文本之間創建對比是非常重要的。它可以使使用者在拖動捲軸時很容易地看到文章的起始部分。
大小對比
在Web設計中另一種創建對比的方法就是讓元素的大小產生不同,是其中一些元素的尺寸比其它的大。
當你無法使用顏色對比時,可以考慮使用大小對比。Taxi在佈局上做了很多而只使用了很少的顏色。所以為了在三個欄目之間創建出層次,設計者為中間一欄使用了比左右兩欄大了很多的寬度,網頁設計這使得使用者很明顯地認為中間一欄是整個頁面最重要的部分。
對齊方式對比
好的對齊方式在高品質的web設計中發揮著很大的作用。當把東西對齊放置時,它們看起來會很舒服。但我認為這恰恰是用不同的對齊方式創建對比的困難之處,並且應謹慎使用。不過如果使用得當則能創建非常有效的分割效果。
把大段的內容居中放置是排版佈局中的禁忌,它使內容很難閱讀。然而不要怕把居中的標題和左對齊的內容段落放在一起,因為這是應用對齊方式創建對比的另一種很好的方式。如果和襯線字體一起放置,可以使你的佈局呈現一個非常經典的外觀。
LegiStyles在每個標題下麵的內容塊應用了很大的外邊距,和大字型大小的標題一起創建了明顯的對比。如果要採用這種方式,務必要使對比顯得明顯一些,否則就會看起來像是錯誤地進行了設計。
Simon Collison為每個內容塊使用居中標題和左對齊的段落,標題的字型大小相對於段落字型大小不是很大,但這使兩者截然分開。 |