從業(yè)余到專業(yè)系列--02：網(wǎng)頁設(shè)計(jì)理論的重復(fù)準(zhǔn)則

上一篇文章講述了網(wǎng)頁設(shè)計(jì)的對(duì)齊準(zhǔn)則，今天則開始分析重復(fù)準(zhǔn)則。

運(yùn)用重復(fù)準(zhǔn)則，網(wǎng)頁不會(huì)像對(duì)齊之后發(fā)生顯著變化。重復(fù)可以在細(xì)節(jié)上提升網(wǎng)頁的設(shè)計(jì)。

1.先看運(yùn)用過對(duì)比的設(shè)計(jì)

這是上一篇運(yùn)用完對(duì)比準(zhǔn)則后的網(wǎng)頁，但是網(wǎng)頁整體上看還是平淡無味。各個(gè)設(shè)計(jì)元素通過對(duì)齊鏈接起來還不夠，我們應(yīng)該用重復(fù)準(zhǔn)則增強(qiáng)它們的視覺聯(lián)系。

2.為網(wǎng)頁的標(biāo)志部分應(yīng)用重復(fù)

首先先回顧一下運(yùn)用過對(duì)比的標(biāo)志

下面開始運(yùn)用重復(fù)來改善這部分的設(shè)計(jì)。

首先我們?yōu)楣久Q和描述之間添加一條黑線，這里重復(fù)使用了logo圖形的設(shè)計(jì)元素：白線。同樣將公司名稱輕微往左邊移動(dòng)，使位置排列得和logo的圖形相呼應(yīng)。

注意到網(wǎng)頁header中間的聯(lián)系信息以及右邊的搜索框，調(diào)整它們的位置，使他們的中心和這條黑線水平對(duì)齊。

增加這條黑線目的在于，為后續(xù)的網(wǎng)頁增加可運(yùn)用重復(fù)的設(shè)計(jì)元素。

3.在網(wǎng)頁上重復(fù)色彩和字體

現(xiàn)在增加一些重復(fù)的設(shè)計(jì)元素，效果如下圖：

網(wǎng)頁的內(nèi)容部分，H2的標(biāo)題都重復(fù)用了和logo相同的顏色，而且H2標(biāo)題使用了新的字體，這個(gè)字體也很容易和H1標(biāo)題字體區(qū)分開來。

網(wǎng)頁左邊的導(dǎo)航欄部分，導(dǎo)航鏈接都使用了相同的藍(lán)色和相同的字體。導(dǎo)航欄標(biāo)題的字體和H2字體是一樣的，為了區(qū)分它們，導(dǎo)航欄標(biāo)題顏色保留為黑色。

4.再為網(wǎng)頁設(shè)計(jì)增加重復(fù)元素

讓我們?cè)僭黾右恍┲貜?fù)的設(shè)計(jì)元素。

我們?yōu)槊總€(gè)H2標(biāo)題下方添加一條粗黑線，同樣黑線稍微向右移動(dòng)一些，這樣就變成logo部分設(shè)計(jì)元素的重復(fù)運(yùn)用。

黑線在瀏覽網(wǎng)頁起著視覺引導(dǎo)作用。一般而言，瀏覽網(wǎng)頁會(huì)先看logo部分，隨后視覺會(huì)落到頁面上和logo有重復(fù)設(shè)計(jì)元素的內(nèi)容上。

網(wǎng)頁左邊的導(dǎo)航欄，我們?yōu)槊總€(gè)連接下方增加細(xì)黑線，這里同樣使用線這個(gè)設(shè)計(jì)元素，將網(wǎng)頁內(nèi)容在視覺上聯(lián)系起來。

從心理學(xué)角度上講，粗黑線可以傳遞一種穩(wěn)重的感覺，藍(lán)色可以給人信任、理性的感覺。

5.總結(jié)

觀察對(duì)比運(yùn)用重復(fù)之前和之后的圖片，雖然網(wǎng)頁沒有像用對(duì)比一樣起了顯著的變化，但也使網(wǎng)頁設(shè)計(jì)的感覺更好。

在設(shè)計(jì)網(wǎng)頁時(shí)，思考哪些地方應(yīng)該運(yùn)用重復(fù)，以讓網(wǎng)頁的設(shè)計(jì)元素有一個(gè)視覺聯(lián)系，通常網(wǎng)頁標(biāo)題部分是運(yùn)用重復(fù)的地方。

但是注意網(wǎng)頁不能過多運(yùn)用重復(fù)，細(xì)微重復(fù)可以增加網(wǎng)頁設(shè)計(jì)的整體感和規(guī)劃感。

下一次我們?cè)诰W(wǎng)頁設(shè)計(jì)時(shí)，將運(yùn)用對(duì)比準(zhǔn)則。對(duì)比和對(duì)齊一樣可以明顯改善網(wǎng)頁設(shè)計(jì)的整體效果。