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

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

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

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

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

2.應(yīng)用對齊準(zhǔn)則

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

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

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

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

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

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

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

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

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

3.標(biāo)志Logo部分的對齊

讓我們關(guān)注一下標(biāo)志的對齊。

之前的設(shè)計

之后的設(shè)計

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

4.總結(jié)

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

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

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