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

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

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

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

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

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

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

2.網(wǎng)頁色彩的對比

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

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

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

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

可以運用對比將網(wǎng)頁的不同部分區(qū)分開來。

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

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

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

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

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

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

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

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

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

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

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

5.總結(jié)

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

上面大都運用了顏色對比，不過這里還有其他設(shè)計元素可以運用：

• 顏色對比
• 形狀對比
• 大小對比
• 字體對比
• 紋理對比

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

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