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

我們已經(jīng)講解完網(wǎng)頁設(shè)計(jì)的對(duì)齊、重復(fù)、對(duì)比準(zhǔn)則，現(xiàn)在回顧一下。

• 對(duì)齊可以使網(wǎng)頁整潔、有規(guī)劃。
• 重復(fù)可以增強(qiáng)網(wǎng)頁設(shè)計(jì)元素的視覺聯(lián)系。
• 對(duì)比可以區(qū)分網(wǎng)頁內(nèi)容并突出重點(diǎn)，引起注意。

今天開始講述相似：相似是將網(wǎng)頁中相同的內(nèi)容打組。通過運(yùn)用相似準(zhǔn)則，訪客很容易清楚網(wǎng)頁中哪些內(nèi)容是同一類的。不同間隔空間指示了網(wǎng)頁內(nèi)容之間不同的相似度。

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

目前為止，這個(gè)網(wǎng)頁的設(shè)計(jì)已經(jīng)改善了不少。而且現(xiàn)在還沒有使用一些精美的圖片來增強(qiáng)視覺效果，只是運(yùn)用網(wǎng)頁設(shè)計(jì)的幾個(gè)簡(jiǎn)單準(zhǔn)則，就使得網(wǎng)頁變得專業(yè)。你可以很容易分清這個(gè)網(wǎng)頁的布局，同時(shí)網(wǎng)頁上也有一些要突出的重點(diǎn)。

現(xiàn)在開始運(yùn)用相似準(zhǔn)則，這會(huì)進(jìn)一步改善網(wǎng)頁的設(shè)計(jì)，同時(shí)使網(wǎng)頁更具實(shí)用性。

2.運(yùn)用相似到網(wǎng)頁的側(cè)邊欄

看看上面的網(wǎng)頁，你會(huì)發(fā)現(xiàn)網(wǎng)頁已經(jīng)有一部分內(nèi)容運(yùn)用了相似，網(wǎng)頁主要內(nèi)容組成了一個(gè)部分，連接和網(wǎng)站介紹組成了一個(gè)部分。

網(wǎng)頁側(cè)邊欄還有一些問題。側(cè)邊欄有兩大塊的鏈接區(qū)域，這兩塊是通過一行空白隔開的。這樣造成訪客會(huì)疑惑，這兩塊鏈接區(qū)域是否是一個(gè)組的，如果是，為什么中間還有空白。

為網(wǎng)頁側(cè)邊欄增加新的標(biāo)題，讓訪客清楚兩塊鏈接區(qū)域是屬于不同的內(nèi)容，如下圖：

注意比較前后的效果，通過使用相似準(zhǔn)則，兩塊鏈接已經(jīng)很容易區(qū)分出來了，一方面是為網(wǎng)頁添加了新的標(biāo)題，另一方面是增大了它們之間的空白間隔。這樣即使我們把網(wǎng)頁標(biāo)題移除，訪客也可以清楚網(wǎng)頁鏈接是屬于不同的區(qū)域。同時(shí)要注意，標(biāo)題和組內(nèi)容的間隔要比標(biāo)題和其他組的間隔來得小。

把文字部分和鏈接的間隔也加大，這樣就很容易分出文字和鏈接不是屬于一組的。

3.運(yùn)用相似到網(wǎng)頁的主要內(nèi)容

我們可以用同樣的方法來改善網(wǎng)頁的主要內(nèi)容部分。

看上圖可以發(fā)現(xiàn)，網(wǎng)頁主要內(nèi)容部分的問題在于，標(biāo)題及組內(nèi)的間隔和標(biāo)題和其他組的間隔過于平均，很難分清標(biāo)題和文字哪些是一個(gè)組的。

1.縮小標(biāo)題和文字的間隔，加大標(biāo)題和其他組之間的間隔。這樣就就很清楚網(wǎng)頁標(biāo)題是指向哪些文字的。

2.改變最后網(wǎng)頁兩段文字（列表）的組織結(jié)構(gòu)。

我們讓兩個(gè)列表水平分布，分別為它們?cè)黾右粋€(gè)標(biāo)題，并將它們放入一個(gè)大標(biāo)題中，這樣訪客可以清楚，網(wǎng)頁的兩個(gè)列表是不一樣的組，但是又有一定聯(lián)系的。如網(wǎng)頁中第一個(gè)列表介紹公司服務(wù)。第二個(gè)列表介紹公司產(chǎn)品。它們都屬于標(biāo)題“服務(wù)和產(chǎn)品”的一部分。

4.結(jié)論

網(wǎng)頁設(shè)計(jì)的相似準(zhǔn)則很容易被忽視，它對(duì)整個(gè)設(shè)計(jì)的改變不如其他準(zhǔn)則來得明顯，它的改變很細(xì)微，但是相似準(zhǔn)則同樣很重要。

現(xiàn)在，開始對(duì)比之前網(wǎng)頁的設(shè)計(jì)和現(xiàn)在設(shè)計(jì)，之前網(wǎng)頁的設(shè)計(jì)很明顯是業(yè)余水準(zhǔn)，網(wǎng)絡(luò)上到處充斥著這樣的網(wǎng)頁?，F(xiàn)在則可以談得上專業(yè)的設(shè)計(jì)了，雖然看上去還很簡(jiǎn)陋，這是因?yàn)檫€沒為網(wǎng)頁使用圖片等增加視覺效果的手段。通過運(yùn)用這四個(gè)網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則，已經(jīng)為這個(gè)網(wǎng)頁打好了基礎(chǔ)，只要再花些功夫就能設(shè)計(jì)出一個(gè)精美專業(yè)的網(wǎng)頁。

這個(gè)系列教程已經(jīng)完成，讀者應(yīng)該在平時(shí)瀏覽網(wǎng)頁和設(shè)計(jì)網(wǎng)頁中注意這四個(gè)基本準(zhǔn)則，觀察其他網(wǎng)頁設(shè)計(jì)師如何使用這些準(zhǔn)則的，相信之前沒有專門學(xué)過網(wǎng)頁設(shè)計(jì)的初學(xué)者學(xué)習(xí)完本教程后，也能輕松設(shè)計(jì)出專業(yè)網(wǎng)頁。