網(wǎng)頁(yè)排版設(shè)計(jì)中對(duì)齊方式通常包含的左（或右）對(duì)齊、居中對(duì)齊三種，其中左對(duì)齊是最常見的方式之一，也是很多網(wǎng)頁(yè)代碼默認(rèn)的對(duì)齊方式。當(dāng)網(wǎng)頁(yè)版式中的圖片、文字、按鈕、組件等等視覺(jué)元素遵循一定的對(duì)齊邏輯后，能讓網(wǎng)站界面產(chǎn)生一種更為清晰、易讀和富有藝術(shù)感的美感。今天我們通過(guò)幾個(gè)網(wǎng)站設(shè)計(jì)作品來(lái)分析這個(gè)原理及其運(yùn)用技巧。

大家都知道，網(wǎng)頁(yè)排版中有這幾種設(shè)計(jì)原則：對(duì)比，重復(fù)，對(duì)齊，和親密性。其中，對(duì)齊是今天我們要詳細(xì)講解的設(shè)計(jì)原則之一。而網(wǎng)頁(yè)視覺(jué)元素對(duì)齊中，通常包含了元素對(duì)齊、文字對(duì)齊、圖片（或視頻）對(duì)齊、區(qū)塊布局對(duì)齊。我們的主要工作就是為這些視覺(jué)元素找到一種對(duì)齊的關(guān)系。（一個(gè)企業(yè)網(wǎng)站界面中，應(yīng)該有幾種對(duì)齊關(guān)系最佳，這個(gè)沒(méi)有一個(gè)標(biāo)準(zhǔn)的說(shuō)法，看情況而定。我們SUMAART CHRIS個(gè)人主張最好控制在三種對(duì)齊關(guān)系之內(nèi)。）

01.

整體上采用了左右對(duì)齊關(guān)系，從頁(yè)頭到頁(yè)尾的對(duì)齊基本上固定了主體內(nèi)容區(qū)域的外輪廓的寬度。有趣的是這個(gè)網(wǎng)站設(shè)計(jì)還有另外一個(gè)內(nèi)容區(qū)域的對(duì)齊關(guān)系。例如頁(yè)頭中的一個(gè)欄目底色與內(nèi)容區(qū)域的最右邊對(duì)齊，而內(nèi)容區(qū)域的左文字與底部的左文字對(duì)齊。這樣對(duì)齊關(guān)系讓整個(gè)界面有一種對(duì)齊的規(guī)律，看起來(lái)很給力。

02.

這個(gè)網(wǎng)站設(shè)計(jì)作品的對(duì)齊關(guān)系中有兩個(gè)值得我們借鑒。一個(gè)是頁(yè)頭菜單導(dǎo)航的高度與標(biāo)志區(qū)域的高度對(duì)齊。導(dǎo)航區(qū)域文字的左側(cè)與內(nèi)容區(qū)域的文字做對(duì)齊。

03.

內(nèi)容區(qū)域的文字、塊，與導(dǎo)航的部分對(duì)齊，形成一個(gè)奇特的視覺(jué)區(qū)域。

04.

這個(gè)網(wǎng)站采用了居中對(duì)齊的方式。

05.

這個(gè)網(wǎng)站設(shè)計(jì)采用了居中對(duì)齊的方式，另外有個(gè)別模塊突破局限，不滿屏，即便如此，整站左右保持對(duì)齊關(guān)系。

06.

logo的區(qū)域與內(nèi)容區(qū)域的右側(cè)保持對(duì)齊

07.

這個(gè)網(wǎng)站設(shè)計(jì)作品對(duì)齊關(guān)系看起來(lái)比較復(fù)雜，其實(shí)最重要的是左對(duì)齊，讓整站看起來(lái)清晰。

08.

這個(gè)網(wǎng)站除了左右對(duì)齊之外，居中的對(duì)齊方式讓這個(gè)網(wǎng)站產(chǎn)生個(gè)性化的布局。

09.

這個(gè)網(wǎng)站設(shè)計(jì)對(duì)齊風(fēng)格，應(yīng)該是我們見過(guò)最多的一種。左右對(duì)齊，中間根據(jù)內(nèi)容的需要進(jìn)行一行二列，三列的布局。

10.

這個(gè)網(wǎng)頁(yè)有2個(gè)重要的對(duì)齊關(guān)系，一個(gè)是外輪廓的內(nèi)容區(qū)域?qū)R關(guān)系，一個(gè)是內(nèi)容區(qū)域左對(duì)齊關(guān)系。

當(dāng)我們?yōu)槠髽I(yè)提供建站服務(wù)時(shí)，能很好運(yùn)用對(duì)齊的技巧，能讓網(wǎng)站界面看起來(lái)更為清晰、精巧、清爽，那么我們無(wú)形中給該品牌官網(wǎng)增強(qiáng)了視覺(jué)上的美感，提升了這個(gè)品牌的氣質(zhì)。