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

本教程結(jié)合案例介紹分析網(wǎng)頁設計理論中的對齊準則。是系列文章網(wǎng)頁設計四個準則之一，幫助讀者提高網(wǎng)頁設計水平。

1.先看業(yè)余的設計

在講解之前讓我們先看一個沒有用到網(wǎng)頁設計制作四個準則的頁面，我們稱之為業(yè)余設計。

在這個設計里面，各種信息被雜亂地放置在了一起。這是一個普通的網(wǎng)頁布局，有頭部、尾部，內(nèi)容分為兩個欄，但是各個欄目布置得很隨意，沒有目的性。文字是居中對齊的。整體看屬業(yè)余水準。

2.應用對齊準則

在隨后的教程中，我都將以本頁面作為例子講解，在改善這個網(wǎng)頁的頁面設計時，逐步將網(wǎng)頁設計的四個基本準則對齊、重復、對比、相似運用進去。

讓我們先應用對齊準則，將網(wǎng)頁頁面上的各個元素對齊起來。

看看現(xiàn)在的效果，雖然還談不上是優(yōu)秀的設計，但是對比之前沒有對齊的頁面感覺要好多了，這只是設計時簡單運用對齊而已。

現(xiàn)在的頁面看上去更加工整，有設計規(guī)劃感，各個元素不像之前顯得那么隨意。

下圖，我將網(wǎng)頁對齊的地方用紅線標示出來。

注意網(wǎng)頁中，不僅僅是主要內(nèi)容的文字對齊了，而且左邊欄還和上面的logo部分對齊了。右邊欄和尾部的導航欄也對齊了。

左邊欄和logo并不是絕對對齊的，而是和logo圖形里邊的元素對齊，這是可以根據(jù)網(wǎng)頁設計的具體需要進行安排。不應太拘泥。

頭部的元素是水平頂部對齊的。所以這里將聯(lián)系信息的文字對齊方式從原來的左對齊改成居中。

當然，進行網(wǎng)頁設計時，可以為設計元素選擇不一樣的對齊方式，設計沒有絕對的對或錯。關鍵在于布置設計元素時要讓它們看上去有規(guī)劃感，如果可以做到這點，有時候?qū)R準則也是可以打破的。

3.標志Logo部分的對齊

讓我們關注一下標志的對齊。

之前的設計

之后的設計

原來的logo里的文字沒有經(jīng)過太多的考慮，我將公司描述放在名字下面，這樣不僅兩個文字左對齊起來了，而且還和左邊logo圖形里的三條白線在水平上也對齊了，在視覺上就將它們聯(lián)系起來了。

4.總結(jié)

現(xiàn)在再重新看看新的頁面設計，經(jīng)過簡單對齊之后，是不是要比原來的設計專業(yè)的多了。

當然這還是一個未完成的設計，不過有對齊和沒對齊的網(wǎng)頁設計是有顯著的不同的。對齊就是網(wǎng)頁設計師從業(yè)余進階到專業(yè)的一大利器！

現(xiàn)在瀏覽網(wǎng)頁時，開始注意其他設計師是如何運用對齊的。在看到一些沒有運用對齊的網(wǎng)頁時，注意分析它們是偶然的還是有意打破規(guī)則，有時候有目的性的打破規(guī)則能夠讓頁面顯得有趣。