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

 

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

 

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

 

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

 

顏色對(duì)比

 

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

 

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

 

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

 

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

 

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

 

 

 

大小對(duì)比

 

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

 

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

 

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

 

 

 

對(duì)齊方式對(duì)比

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

 

大膽使用留白

 

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

 

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

 

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

 

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

 

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

 

 

 

把關(guān)聯(lián)項(xiàng)在視覺(jué)上進(jìn)行分組

 

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

 

 

 

創(chuàng)建視覺(jué)層次

 

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

 

層次是靠把元素分成有繼承關(guān)系的組來(lái)表達(dá)的。層次讓用戶明白他們?cè)谑裁吹胤?、要到什么地方去，從而?shí)現(xiàn)站點(diǎn)的交流，目的。列表是視覺(jué)上表達(dá)層次關(guān)系的很好的例子。

 

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