從業(yè)余到專業(yè)系列--03：網(wǎng)頁(yè)設(shè)計(jì)理論的對(duì)比準(zhǔn)則

我們已經(jīng)學(xué)過(guò)了網(wǎng)頁(yè)設(shè)計(jì)的對(duì)齊和重復(fù)準(zhǔn)則，現(xiàn)在開始學(xué)習(xí)對(duì)比。

對(duì)比可以為頁(yè)面增加變化、動(dòng)感以及吸引眼球。同時(shí)也增加了網(wǎng)頁(yè)的設(shè)計(jì)元素的區(qū)分度。重復(fù)準(zhǔn)則細(xì)微地改變網(wǎng)頁(yè)設(shè)計(jì)，對(duì)比則會(huì)造成很大的不同。

1.先看上次的網(wǎng)頁(yè)

這是上次的網(wǎng)頁(yè)，我們已經(jīng)對(duì)齊了設(shè)計(jì)元素，也增加了諸如字體、色彩、線等重復(fù)元素，事實(shí)上，這個(gè)網(wǎng)頁(yè)已經(jīng)存在一些對(duì)比。

• 標(biāo)志部分和其他頁(yè)面是鮮明的對(duì)比
• 標(biāo)題部分的字體和色彩同正文是對(duì)比
• 導(dǎo)航欄鏈接的顏色及底部的細(xì)線和其他設(shè)計(jì)元素也是對(duì)比

現(xiàn)在我們要再增加一些對(duì)比，讓網(wǎng)頁(yè)設(shè)計(jì)更有戲劇性。

2.網(wǎng)頁(yè)色彩的對(duì)比

網(wǎng)頁(yè)設(shè)計(jì)元素的顏色是可以運(yùn)用對(duì)比的一個(gè)重要的地方。

色彩方面，將網(wǎng)頁(yè)導(dǎo)航欄鏈接顏色設(shè)計(jì)成粉色，使讀者更容易區(qū)分。

大標(biāo)題H1，網(wǎng)頁(yè)的大標(biāo)題是重要性僅次于logo的部分，包含著網(wǎng)頁(yè)的重要信息，所以這里設(shè)計(jì)成綠色，同時(shí)調(diào)大字號(hào)，斜體和大寫。這樣很容易吸引訪客的注意力。

3.為網(wǎng)頁(yè)背景增加對(duì)比

可以運(yùn)用對(duì)比將網(wǎng)頁(yè)的不同部分區(qū)分開來(lái)。

網(wǎng)頁(yè)底部：從原來(lái)的白底黑字變成了黑底白字，同時(shí)鏈接字體換成斜體風(fēng)格，這既是對(duì)比，又是設(shè)計(jì)元素的一種重復(fù)。

網(wǎng)頁(yè)頭部：增加了一個(gè)灰色背景，使頭部可以和網(wǎng)頁(yè)的其他內(nèi)容區(qū)分開來(lái)。而且在頭部下面增加一條細(xì)線，更增加了網(wǎng)頁(yè)的對(duì)比。

3.為網(wǎng)頁(yè)導(dǎo)航欄增加對(duì)比

現(xiàn)在開始為網(wǎng)頁(yè)導(dǎo)航欄增加一些對(duì)比。

和頭部及尾部一樣，為導(dǎo)航欄增加一些背景色?，F(xiàn)在很容易看出網(wǎng)頁(yè)是由四個(gè)部分組成的。

導(dǎo)航欄的背景選擇了不同于頭部和尾部的灰色，但即背景顏色相同，網(wǎng)頁(yè)之間的空白還是可以很容易把它們區(qū)分出來(lái)。給導(dǎo)航欄的不同部分增加不同的背景，并且為網(wǎng)頁(yè)增加懸停效果，這樣整個(gè)網(wǎng)頁(yè)設(shè)計(jì)有了更多的對(duì)比。

4.為網(wǎng)頁(yè)特定部分增加對(duì)比

網(wǎng)頁(yè)通常都有一定目的性，有時(shí)候要為一些特定的內(nèi)容使用對(duì)比。

假設(shè)這個(gè)網(wǎng)頁(yè)是為了引導(dǎo)訪客購(gòu)買某產(chǎn)品，這里會(huì)有一個(gè)購(gòu)買按鈕。

這個(gè)按鈕包含了諸如圓角、陰影、邊框等效果，可以很容易和網(wǎng)頁(yè)的其他內(nèi)容區(qū)分。色彩上再次運(yùn)用重復(fù)的準(zhǔn)則，使用了和導(dǎo)航欄鏈接相同的顏色。

現(xiàn)在瞇起眼睛看網(wǎng)頁(yè)，按鈕部分和網(wǎng)頁(yè)其他內(nèi)容的對(duì)比如此鮮明，以至于你很難不去注意到它。

5.總結(jié)

對(duì)比讓網(wǎng)頁(yè)內(nèi)容有主次之分，區(qū)分網(wǎng)頁(yè)的不同內(nèi)容。同時(shí)也增加了網(wǎng)頁(yè)設(shè)計(jì)的戲劇性。

上面大都運(yùn)用了顏色對(duì)比，不過(guò)這里還有其他設(shè)計(jì)元素可以運(yùn)用：

• 顏色對(duì)比
• 形狀對(duì)比
• 大小對(duì)比
• 字體對(duì)比
• 紋理對(duì)比

現(xiàn)在瀏覽網(wǎng)頁(yè)時(shí)，注意看其他網(wǎng)頁(yè)設(shè)計(jì)師是如何運(yùn)用對(duì)比，運(yùn)用了哪幾種對(duì)比。

不同對(duì)比的效果是不同的，顏色對(duì)比往往比形狀對(duì)比效果要鮮明。12px的字至少要14px的字才能形成對(duì)比。