從業(yè)余到專業(yè)系列--04:網(wǎng)頁設計理論的相似準則
我們已經(jīng)講解完網(wǎng)頁設計的對齊、重復、對比準則,現(xiàn)在回顧一下。
- 對齊可以使網(wǎng)頁整潔、有規(guī)劃。
- 重復可以增強網(wǎng)頁設計元素的視覺聯(lián)系。
- 對比可以區(qū)分網(wǎng)頁內容并突出重點,引起注意。
今天開始講述相似:相似是將網(wǎng)頁中相同的內容打組。通過運用相似準則,訪客很容易清楚網(wǎng)頁中哪些內容是同一類的。不同間隔空間指示了網(wǎng)頁內容之間不同的相似度。
1.先看上次的網(wǎng)頁
目前為止,這個網(wǎng)頁的設計已經(jīng)改善了不少。而且現(xiàn)在還沒有使用一些精美的圖片來增強視覺效果,只是運用網(wǎng)頁設計的幾個簡單準則,就使得網(wǎng)頁變得專業(yè)。你可以很容易分清這個網(wǎng)頁的布局,同時網(wǎng)頁上也有一些要突出的重點。
現(xiàn)在開始運用相似準則,這會進一步改善網(wǎng)頁的設計,同時使網(wǎng)頁更具實用性。
2.運用相似到網(wǎng)頁的側邊欄
看看上面的網(wǎng)頁,你會發(fā)現(xiàn)網(wǎng)頁已經(jīng)有一部分內容運用了相似,網(wǎng)頁主要內容組成了一個部分,連接和網(wǎng)站介紹組成了一個部分。
網(wǎng)頁側邊欄還有一些問題。側邊欄有兩大塊的鏈接區(qū)域,這兩塊是通過一行空白隔開的。這樣造成訪客會疑惑,這兩塊鏈接區(qū)域是否是一個組的,如果是,為什么中間還有空白。
為網(wǎng)頁側邊欄增加新的標題,讓訪客清楚兩塊鏈接區(qū)域是屬于不同的內容,如下圖:
注意比較前后的效果,通過使用相似準則,兩塊鏈接已經(jīng)很容易區(qū)分出來了,一方面是為網(wǎng)頁添加了新的標題,另一方面是增大了它們之間的空白間隔。這樣即使我們把網(wǎng)頁標題移除,訪客也可以清楚網(wǎng)頁鏈接是屬于不同的區(qū)域。同時要注意,標題和組內容的間隔要比標題和其他組的間隔來得小。
把文字部分和鏈接的間隔也加大,這樣就很容易分出文字和鏈接不是屬于一組的。
3.運用相似到網(wǎng)頁的主要內容
我們可以用同樣的方法來改善網(wǎng)頁的主要內容部分。
看上圖可以發(fā)現(xiàn),網(wǎng)頁主要內容部分的問題在于,標題及組內的間隔和標題和其他組的間隔過于平均,很難分清標題和文字哪些是一個組的。
1.縮小標題和文字的間隔,加大標題和其他組之間的間隔。這樣就就很清楚網(wǎng)頁標題是指向哪些文字的。
2.改變最后網(wǎng)頁兩段文字(列表)的組織結構。
我們讓兩個列表水平分布,分別為它們增加一個標題,并將它們放入一個大標題中,這樣訪客可以清楚,網(wǎng)頁的兩個列表是不一樣的組,但是又有一定聯(lián)系的。如網(wǎng)頁中第一個列表介紹公司服務。第二個列表介紹公司產(chǎn)品。它們都屬于標題“服務和產(chǎn)品”的一部分。
4.結論
網(wǎng)頁設計的相似準則很容易被忽視,它對整個設計的改變不如其他準則來得明顯,它的改變很細微,但是相似準則同樣很重要。
現(xiàn)在,開始對比之前網(wǎng)頁的設計和現(xiàn)在設計,之前網(wǎng)頁的設計很明顯是業(yè)余水準,網(wǎng)絡上到處充斥著這樣的網(wǎng)頁?,F(xiàn)在則可以談得上專業(yè)的設計了,雖然看上去還很簡陋,這是因為還沒為網(wǎng)頁使用圖片等增加視覺效果的手段。通過運用這四個網(wǎng)頁設計的基本準則,已經(jīng)為這個網(wǎng)頁打好了基礎,只要再花些功夫就能設計出一個精美專業(yè)的網(wǎng)頁。
這個系列教程已經(jīng)完成,讀者應該在平時瀏覽網(wǎng)頁和設計網(wǎng)頁中注意這四個基本準則,觀察其他網(wǎng)頁設計師如何使用這些準則的,相信之前沒有專門學過網(wǎng)頁設計的初學者學習完本教程后,也能輕松設計出專業(yè)網(wǎng)頁。
本文地址:http://m.likemindfilms.com/tutorial/di1068.html