從業(yè)余到專業(yè)系列--04：網頁設計理論的相似準則

我們已經講解完網頁設計的對齊、重復、對比準則，現在回顧一下。

• 對齊可以使網頁整潔、有規(guī)劃。
• 重復可以增強網頁設計元素的視覺聯系。
• 對比可以區(qū)分網頁內容并突出重點，引起注意。

今天開始講述相似：相似是將網頁中相同的內容打組。通過運用相似準則，訪客很容易清楚網頁中哪些內容是同一類的。不同間隔空間指示了網頁內容之間不同的相似度。

1.先看上次的網頁

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

現在開始運用相似準則，這會進一步改善網頁的設計，同時使網頁更具實用性。

2.運用相似到網頁的側邊欄

看看上面的網頁，你會發(fā)現網頁已經有一部分內容運用了相似，網頁主要內容組成了一個部分，連接和網站介紹組成了一個部分。

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

為網頁側邊欄增加新的標題，讓訪客清楚兩塊鏈接區(qū)域是屬于不同的內容，如下圖：

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

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

3.運用相似到網頁的主要內容

我們可以用同樣的方法來改善網頁的主要內容部分。

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

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

2.改變最后網頁兩段文字（列表）的組織結構。

我們讓兩個列表水平分布，分別為它們增加一個標題，并將它們放入一個大標題中，這樣訪客可以清楚，網頁的兩個列表是不一樣的組，但是又有一定聯系的。如網頁中第一個列表介紹公司服務。第二個列表介紹公司產品。它們都屬于標題“服務和產品”的一部分。

4.結論

網頁設計的相似準則很容易被忽視，它對整個設計的改變不如其他準則來得明顯，它的改變很細微，但是相似準則同樣很重要。

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

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