從業(yè)余到專業(yè)系列--02：網(wǎng)頁設計理論的重復準則

上一篇文章講述了網(wǎng)頁設計的對齊準則，今天則開始分析重復準則。

運用重復準則，網(wǎng)頁不會像對齊之后發(fā)生顯著變化。重復可以在細節(jié)上提升網(wǎng)頁的設計。

1.先看運用過對比的設計

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

2.為網(wǎng)頁的標志部分應用重復

首先先回顧一下運用過對比的標志

下面開始運用重復來改善這部分的設計。

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

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

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

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

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

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

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

4.再為網(wǎng)頁設計增加重復元素

讓我們再增加一些重復的設計元素。

我們?yōu)槊總€H2標題下方添加一條粗黑線，同樣黑線稍微向右移動一些，這樣就變成logo部分設計元素的重復運用。

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

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

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

5.總結

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

在設計網(wǎng)頁時，思考哪些地方應該運用重復，以讓網(wǎng)頁的設計元素有一個視覺聯(lián)系，通常網(wǎng)頁標題部分是運用重復的地方。

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

下一次我們在網(wǎng)頁設計時，將運用對比準則。對比和對齊一樣可以明顯改善網(wǎng)頁設計的整體效果。