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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

之前的設(shè)計(jì)

之后的設(shè)計(jì)

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

4.總結(jié)

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

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

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