一、 網(wǎng)頁設(shè)計中的對比原則

 

一件網(wǎng)頁設(shè)計作品由許多元素構(gòu)成，它們的重要性各不相同，其中一些元素的重要性要高于其它元素。一些相互關(guān)聯(lián)，而另一些則沒有任何聯(lián)系。棘手的是如何有效地和可視化地表達這些元素，這正是對比原則發(fā)揮作用之處。

 

對比產(chǎn)生在兩個或多個元素之間，設(shè)計者可以利用對比對用戶產(chǎn)生直接的視覺吸引。想象一下，如果頁面上所有的元素都是同樣的樣式，那么整個頁面將是無序的，頁面結(jié)構(gòu)也沒有流動性和層級性。內(nèi)容閱讀起來將變得非常困難。這使得對比原則成為頁面web設(shè)計中一個必要的方法。

 

這篇文章中我們將看看如何使用對比在顏色、大小和對齊方式三個方面創(chuàng)建一些不同之處。

 

顏色對比

 

許多人一想到對比便立刻想到顏色。盡管對比原則并不僅僅限于顏色對比，但它對于用戶識別各種元素的確大有幫助。

 

現(xiàn)在幾乎所有的頁面一般都包括頭部、內(nèi)容區(qū)域和底部。這三部分是完全不同的，它們在視覺上應(yīng)當區(qū)分明確，使用背景顏色產(chǎn)生對比是一個不錯的方法。

 

站點Church Media Group就是一個非常好的例子。它的頭部和底部均采用了深色背景，而內(nèi)容區(qū)則采用白色背景。這使內(nèi)容區(qū)域和其他部分截然分開，并且使其重要性更加突出。如果仔細觀察，我們會發(fā)現(xiàn)在內(nèi)容區(qū)還有另外一層的背景對比。內(nèi)容區(qū)上半部分的特色產(chǎn)品區(qū)用了亮藍色的背景，而它和內(nèi)容區(qū)其他部分的對比則并不強烈，這就告訴我們這兩部分是相互關(guān)聯(lián)的。

 

Phil Renaud's portfolio 使用了一個獨特的布局和色系。他使用了金黃色來使左側(cè)的導航和其他部分的棕色產(chǎn)生對比。

 

文字也可以使用顏色產(chǎn)生對比。Billy Tamplin 在這方面有一個非常棒的作品，它分別給頁面標題、副標題和段落文本使用不同的顏色。對于博客風格的布局，在文章標題和內(nèi)容文本之間創(chuàng)建對比是非常重要的。它可以使用戶在拖動滾動條時很容易地看到文章的起始部分。

 

 

 

大小對比

 

在Web設(shè)計中另一種創(chuàng)建對比的方法就是讓元素的大小產(chǎn)生不同，是其中一些元素的尺寸比其它的大。

 

當你無法使用顏色對比時，可以考慮使用大小對比。Taxi在布局上做了很多而只使用了很少的顏色。所以為了在三個欄目之間創(chuàng)建出層次，設(shè)計者為中間一欄使用了比左右兩欄大了很多的寬度，這使得用戶很明顯地認為中間一欄是整個頁面最重要的部分。

 

正如可為文字標題應(yīng)用顏色來創(chuàng)建對比一樣，使用大小也可以。用Big headings為站點內(nèi)容創(chuàng)建層次是一個很好的方法，Imaginaria Creative使用了大標題來吸引訪問者的注意，并且吸引他們閱讀下面字號稍小的一些段落。

 

 

 

對齊方式對比

 

好的對齊方式在高質(zhì)量的web設(shè)計中發(fā)揮著很大的作用。當把東西對齊放置時，它們看起來會很舒服。但我認為這恰恰是用不同的對齊方式創(chuàng)建對比的困難之處，并且應(yīng)謹慎使用。不過如果使用得當則能創(chuàng)建非常有效的分割效果。

 

LegiStyles在每個標題下面的內(nèi)容塊應(yīng)用了很大的外邊距，和大字號的標題一起創(chuàng)建了明顯的對比。如果要采用這種方式，務(wù)必要使對比顯得明顯一些，否則就會看起來像是錯誤地進行了設(shè)計。

 

把大段的內(nèi)容居中放置是排版布局中的禁忌，它使內(nèi)容很難閱讀。然而不要怕把居中的標題和左對齊的內(nèi)容段落放在一起，因為這是應(yīng)用對齊方式創(chuàng)建對比的另一種很好的方式。如果和襯線字體一起放置，可以使你的布局呈現(xiàn)一個非常經(jīng)典的外觀。

 

Simon Collison為每個內(nèi)容塊使用居中標題和左對齊的段落，標題的字號相對于段落字號不是很大，但這使兩者截然分開。

 

學習在設(shè)計作品中創(chuàng)建合適的對比和掌握其他設(shè)計原則的一樣的，都需要實踐?；c時間來學習優(yōu)秀的設(shè)計作品，并看看他們是如何運用對比原則的。記住對比是關(guān)于事物之間的區(qū)別的。如果兩個元素在其性質(zhì)上區(qū)別很大，那么一定要使其外觀的區(qū)別也很明顯。

 

 

二、 網(wǎng)頁設(shè)計中的接近性原則

 

最近我看了一本閑置已久的關(guān)于設(shè)計的書(Non-Designer's Design Book, The (3rd Edition) )，讓我想起了我們潛意識地使用的一些設(shè)計原則。這本書是關(guān)于印刷設(shè)計的，但我認為對網(wǎng)頁設(shè)計也很有益處。

 

接近性原則說的是，要把相關(guān)聯(lián)的項在視覺上進行分組，減少干擾因素，并創(chuàng)造一個有秩序的布局?；ゲ幌嚓P(guān)的項應(yīng)當被隔離開，以強調(diào)它們是沒有關(guān)系的。

 

我想談一些有效實現(xiàn)接近原則的細節(jié)和方法，但這對于我們這篇文章的討論來說已經(jīng)足夠了。

 

正確地使用接近原則和其它設(shè)計原則對用戶體驗有重大影響，最終會影響到一個站點的成敗。

 

 

 

大膽使用留白

 

要恰當?shù)剡\用接近原則，第一步就是要理解空白在設(shè)計中的重要作用。

 

業(yè)余設(shè)計作品的一個常見問題就是缺少留白。設(shè)計是交流信息的一種手段，業(yè)余者在通過設(shè)計傳達信息時，很自然地傾向與把內(nèi)容填滿整個空間，而沒有考慮給組織布局留出足夠的空白余地。

 

留白對用戶的行為有很大的影響，甚至比頁面上的內(nèi)容還要大。留白可以引導用戶視線，創(chuàng)建對比，并創(chuàng)造持久的印象。

 

在W3Avenue的站點上，盡管有非常多的內(nèi)容（像任何一個博客網(wǎng)站一樣有很多的分類和文章）和一系列的側(cè)欄廣告，但它在視覺上并未讓用戶感到壓抑。這要歸功于頁面頭部、內(nèi)容區(qū)和側(cè)欄間的適當?shù)牧舭住?/span>W3Avenue的內(nèi)容并沒有什么特別之處，但它的設(shè)計在短時間內(nèi)帶來了非常大的瀏覽量(Alexa)。

 

所以不要為設(shè)計中的空白部分感到不安。適當?shù)厥褂昧舭资菍崿F(xiàn)接近原則的第一步，從而使設(shè)計在視覺上更加吸引人。

 

 

 

把關(guān)聯(lián)項在視覺上進行分組

 

Arora Designs 的站點盡管不怎么復雜也沒有包含那么多的信息，但它卻很有效地使用留白對元素進行了邏輯分組。這里要注意的是所謂“留白”并不一定是白色，留白可以是元素間的任何空白區(qū)域，而不考慮其顏色。

 

 

 

創(chuàng)建視覺層次

 

有效地使用留白和邏輯分組可以給站點一個清晰的視覺層次。當然，站點的信息架構(gòu)是有效地使用接近原則的基礎(chǔ)。

 

層次是靠把元素分成有繼承關(guān)系的組來表達的。層次讓用戶明白他們在什么地方、要到什么地方去，從而實現(xiàn)站點的交流，目的。列表是視覺上表達層次關(guān)系的很好的例子。

 

層次離不開留白（包括各種大小的留白）。要在站點上用簡單的HTML列表實現(xiàn)這個原則是很簡單的。挑戰(zhàn)之處在于從開始構(gòu)建一個站點到整個設(shè)計過程中都貫穿這一原則。