網(wǎng)站風(fēng)格設(shè)計(jì)的方向需要通過網(wǎng)頁(yè)排版設(shè)計(jì)來(lái)落地，其中版式設(shè)計(jì)與品牌文案是概念落地的直接因素。而我們通過設(shè)計(jì)一種或2種文字與圖片、圖像視頻的對(duì)齊規(guī)律來(lái)規(guī)劃整站的內(nèi)容布局和閱讀方式。網(wǎng)站排版中的對(duì)齊方式，能給界面有效增加設(shè)計(jì)感和高端感。今天我們繼續(xù)第三期講解界面中的對(duì)齊技巧。

01.

第一個(gè)網(wǎng)站設(shè)計(jì)案例是建筑設(shè)計(jì)行業(yè)。有公司網(wǎng)站項(xiàng)目設(shè)計(jì)經(jīng)驗(yàn)的同學(xué)應(yīng)該都知道，對(duì)于版面設(shè)計(jì)中的排版和對(duì)齊最講究的為品牌、平面、包裝和建筑設(shè)計(jì)行業(yè)為最了。他們不需要花里胡哨的元素，卻對(duì)版面中的每個(gè)視覺元素追求極致，保留最核心最必要的，且對(duì)文字與圖片的對(duì)齊關(guān)系極其講究。

02.

首先不得不說(shuō)這個(gè)網(wǎng)站設(shè)計(jì)案例的用色非常純粹，高亮色品牌主色印象深刻但又不突兀。在網(wǎng)頁(yè)排版對(duì)齊方面非常簡(jiǎn)單，就是根據(jù)主要內(nèi)容區(qū)域的寬度來(lái)左右對(duì)齊，中間不管是采用一行三列還是兩列布局，都是居左對(duì)齊。

03.

這個(gè)網(wǎng)站設(shè)計(jì)作品跟上一個(gè)很相似。一行三列、兩列或一列占滿布局，都是左右對(duì)齊，單個(gè)模塊左對(duì)齊。同時(shí)對(duì)于模塊浮動(dòng)在底圖上的，增加模塊外邊距，以確保文字易讀性的同時(shí)，也能保證通篇下來(lái)左右對(duì)齊這個(gè)規(guī)律不變。

04.

這個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品藝術(shù)氛圍很濃。無(wú)論是從選圖還是到版式布局，都彰顯個(gè)極強(qiáng)的個(gè)性。在文字對(duì)齊方面非常有特色，留白給版式呼吸的空間更多。

05.

這個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品基本上采用了虛實(shí)結(jié)合的內(nèi)容呈現(xiàn)節(jié)奏。對(duì)于主體內(nèi)容部分，保留通篇不變，相對(duì)寬度固定的左右對(duì)齊方式。

06.

主體內(nèi)容區(qū)域?qū)挾认鄬?duì)固定，左右對(duì)齊。單個(gè)塊狀元素是圖文左對(duì)齊的排版方式。

07.

通篇下來(lái)，這個(gè)作品采用了主要內(nèi)容區(qū)域左對(duì)齊方式，其中部分標(biāo)題處采用了益處的處理手法。且圖片與文字，文字的段落之間的間距基本保持一致。

08.

這是一個(gè)常見的左右對(duì)齊的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。

09.

這個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品的底部的三列布局與上面的基本保持對(duì)齊。

10.

最后這個(gè)作品的頁(yè)頭是滿屏布局，左右預(yù)留適當(dāng)間距。而主要內(nèi)容區(qū)域的寬度相對(duì)固定。通篇下來(lái)，除了個(gè)別模塊的標(biāo)題采用了居中之外，其他的基本是居左對(duì)齊。

網(wǎng)頁(yè)排版設(shè)計(jì)中的對(duì)齊關(guān)系，反映了一個(gè)設(shè)計(jì)師對(duì)整體內(nèi)容規(guī)劃的把控能力。如果把設(shè)計(jì)工作理解為是對(duì)內(nèi)容進(jìn)行梳理、精簡(jiǎn)和歸納的話，就更容易理解排版中的對(duì)齊關(guān)系對(duì)網(wǎng)頁(yè)風(fēng)格以及版式的美感產(chǎn)生的重要作用了。關(guān)于SUMAART CHRIS分享的這三期的網(wǎng)站排版設(shè)計(jì)中的對(duì)齊技巧，希望對(duì)大家的設(shè)計(jì)工作有啟發(fā)作用。