排版初步：對齊原則
點擊這裡查看上一期推送哦~
半平米工坊：排版初步:總論和親密性原理
01
很久沒清理的專教總是亂七八糟，PVC和木板的碎片散落在地板和桌面上，美工刀和鉛筆掩埋在層層疊疊的板材下，U膠的蓋子不知被扔在了哪裡，透明的膠水慢慢滲出凝固在了桌面上......
初學者的設計類似於雜亂的教室，文字圖片在頁面上隨意擺放，胡亂地佔滿了各處空間。
載入超時，點擊重試
稍微花些時間，清理一個專教並不是什麼難事。整理一個隨意擺放元素的草率設計也並不難，只要我們能用好第二個基本原則——對齊。
對齊原則指的是：任何元素都不能在頁面上隨意安放，每一項都應與頁面上的某個元素存在某種視覺聯繫。類似於把專教里四處散落的美工刀、502膠、鉛筆等收拾到一個工具箱里，對齊的根本目的是讓頁面充滿秩序和條理。
對齊原則要求我們不能再像從前那樣，只要頁面上剛好有空間就將元素隨意「扔」到一旁。元素之間不能是孤立的，相互之間要有聯繫。
02
常見的對齊方式有以下三種：左對齊，居中對齊和右對齊
PS:還有一種常用的是「左右邊界同時對齊」，例如你現在看到的這篇"左對齊"的知乎文章，文欄位落的左右兩邊也有著隱藏的邊界
上面面這張名片是不是很眼熟？
我們在上一篇推送中見過它的原版。這張名片中的信息排布的很混亂，讀者要很費力才能找到他想要的信息。名片上的所有元素好像是隨手扔在了紙上。各個元素間沒有任何對齊，也沒有關聯。
讓我們花些時間思考下，如何將親密性法則運用在這張名片中。
整理好信息層級和閱讀順序後，我們把所有元素都移至右側，使他們按照同一種方式對齊，現在信息立刻就變得很有條理。
修改後的名片通過右對齊的方式讓設計變得更有秩序，現在你閱讀起來更加輕鬆，也不會感到視線飄忽不定。所有的元素沿著一條看不見的直線排布，我們把這條直線稱為軸線。
而上面這張名片採用的是居中對齊。這同樣是一個不錯的布局，居中對齊同樣使得整張名片很有秩序，沿著設計好的視覺路線，讀者能很好地接收到名片的信息。
與前一張右對齊的名片不同的是，居中對齊的軸線比較「軟」，看起來並不明確。
軸線是可以起到視覺紐帶的作用，相互對齊的元素通過軸線，會在視覺上發生關聯。
這個特點常常搭配親密性一起使用，用親密性把信息打包成一個個「盒子」，幾個「盒子」又通過對齊相互關聯。
03
如果兩個元素在頁面上離得有點遠（也許你考慮到了親密性），但你又想讀者把兩個元素聯繫起來時該怎麼辦？應用對齊原則，軸線會像鎖鏈一樣將各個元素綁在一起。
這一應用在生活中非常常見。在看到網頁的大標題後，你的視線首先會往哪裡移動？
現在你稍微了解了些對齊原則，不過這還不夠，初學者往往有一個共同的問題，就是對齊方面稍有欠缺。
下面是兩張內容相同的報紙，它們的排版有著微妙的不同。迅速翻看一下，哪張報紙能給你留下更突出，更清晰的印象？
也許你說不出個所以然，但第二張報紙看起來往往更舒服，更有秩序。為什麼我們會有這樣的感受？
在第一張報紙中，存在著多種對齊方式。大標題和長篇文本是左對齊，小標題和插圖卻是居中對齊。
這樣一來，原本沿著左邊線嚴格對齊的長篇文本，在小標題和插圖處莫名被切出了一大塊空白，讓本應鋒利的邊界變得軟綿綿。
而文本的右邊界原本就很雜亂，像鋸齒一樣參差不齊。但再加上報紙的文本被緊緊地塞在一個狹小的版面里，這麼小的空間里還有這麼多參差不齊的雜亂毛邊，看上去自然很混亂。
儘管這些未對齊問題本身並不大，但種種小缺點加在一起，整個版面看起來就不太舒服了。
第二張報紙則迴避了前面提到的問題。所有圖片文字都採用左對齊的方式，在狹小的版面里沿著一條清晰的邊界一溜到底。
初學者階段，我們應盡量避免在頁面上混合使用多種文本對齊方式，找到一條明確的軸線，並以之為基準。如果大片文本左對齊，那讓它的標題和小標題也設置為左對齊。當然若是有圖片，也要記得讓它的邊緣與軸線對齊。
很多精美的設計初看似乎很雜亂，實際上都隱藏著一些軸線。仔細觀察一下這張海報上的元素，你能找出其中隱含的軸線嗎？
04
在剛開始接觸頁面的設計時，並不推薦大家在一個頁面上採用多種對齊方式（左對齊/居中對齊/右對齊）。不過在你操作的比較熟練後，也可以嘗試用多種不同的對齊方式進行設計。
這張封面看起來很彆扭。標題和作者都是左對齊，文字介紹卻是是居中對齊，兩個文本塊之間沒有共同的對齊方式。它們各自為營，相互之間沒有任何聯繫。
修改了一下。儘管兩個文本塊仍然採用兩種不同的對齊方式，但上面的文本塊像是伸出了一根釣魚竿，用一條看不見的魚線把下面的文本釣了起來。兩個文本塊產生了新的軸線，建立起了新秩序！
記住，在頁面上放置其他項時，一定要確保每一項都與頁面上的其他項存在某種聯繫！絕對不要在頁面上隨意擺放元素！
05
對齊在我們設計課的圖紙和作品集中被廣泛的應用。一張圖紙的信息量（一大堆圖+一些字）有時會非常大，如果不考慮對齊，整張版面會變得雜亂無章。
應用對齊可以很方便的讓頁面產生秩序，使各個元素髮生關聯，相關的案例非常常見，這裡就不再過多分析了。
最後，讓我們總結一下今天為大家帶來的排版原理（敲黑板）：
①對齊原則：
任何元素都不能在頁面上隨意擺放。每個元素應當與頁面上的另外一個元素存在某種視覺聯繫
②對齊一般可分為左對齊，居中對齊，右對齊三種。
③對齊產生的軸線可以起到視覺紐帶的作用，把各個元素聯繫在一起。
好了，以上就是我們本期排版原理的內容啦，我們下期見~
推薦閱讀：