我們在進行設(shè)計排版的時候，如果不考慮任何規(guī)律，很多情況下會產(chǎn)生一些奇怪的設(shè)計。

如果有一定的理論作為基礎(chǔ)和標(biāo)準(zhǔn)，并且以此為大致的方向和目標(biāo)，那么在設(shè)計的過程中就會比較容易進行判斷。

△ by Adrián Somoza

即使是在無理論基礎(chǔ)支撐的設(shè)計上，按照理論作出適當(dāng)調(diào)整，也能夠向出色的設(shè)計邁出一大步。

對于設(shè)計本身而言，感性也是非常重要的因素，但這并不等于單純依靠感性就能做出美觀的設(shè)計。

在開始「版式系列」文章之前，我想先推薦一本《寫給大家看的設(shè)計書》。

不管你是需要設(shè)計頁面，卻苦于沒有設(shè)計背景；或者你從來沒有接受過正規(guī)的設(shè)計培訓(xùn)；甚至于你從事著和設(shè)計毫無相關(guān)的工作，這本書都會讓你對設(shè)計有一個煥然一新的認(rèn)知。

4大基本原則

1. 親密性原則

親密性（物理位置的接近）意味著存在關(guān)聯(lián)。

將相關(guān)的項組織在一起，移動這些項，使它們的物理位置更加靠近，相關(guān)的項將被看作一個視覺單元，而不是多個孤立的元素。

△ by Ryan Bataillon

類似的元素組織為一個單元，使得頁面變得有條理，清楚的知道視線的移動軌跡。

△ by Romain Briaux

利用親密性原則，還可以使得留白變得更加有條理。

△ by IceBear_Panda

通過把類似的項歸類在一起來建立親密性，有時需要做一些調(diào)整，調(diào)整文本的大小或字體粗細(xì)，或者改變圖片的大小或位置等。

△ by Jenny Johannesson

親密性原則并不是說畫面上所有的元素都要更靠近，真正含義是：如果某些元素之間在理解上存在關(guān)聯(lián)，那么這些元素在視覺上也應(yīng)當(dāng)有關(guān)聯(lián)。而元素組之間則需要有適當(dāng)?shù)牧舭?，來體現(xiàn)相互之間的關(guān)系。

在此之前你可能也會很自然的利用位置的緊密程度，來反映元素之間的關(guān)系，而親密性實際上就是更有意識的這樣做，并把這個概念更向前推進一步。在充分理解頁面上各元素之間的關(guān)系，就會注意到親密性的效果，一旦開始注意到這種效果，就會利用它，掌握它，并充分控制它。

2. 對齊原則

任何元素都不能在頁面上隨意擺放。

頁面上的任何元素都應(yīng)該與頁面上的某個元素存在某種視覺關(guān)系，不能簡單的認(rèn)為頁面上剛好有空間就把元素隨意的扔到那里。

△ by Outcrowd

如果頁面上的某幾個元素是對齊的，即使在物理位置上是彼此分離的，但是在觀者看來，它們之間有一條看不見的線把彼此連接在一起。

△ by Johny vino?

盡管你應(yīng)用親密性原則來指示它們之間的關(guān)系，但是對齊原則卻告訴你，即使它們并不靠近，但是它們屬于同一組。

常用的對齊方式有：左對齊、右對齊、居中對齊。

△ by Ali Sayed

左、右對齊會讓文本塊出現(xiàn)一條硬的豎邊，使得文本看起來外觀更加清晰、效果更分明；而居中對齊的邊界卻是軟的，實在看不出來那條對齊線的強度。

△ by Axel Herrmann

居中對齊是一種很安全的對齊方式，感覺上很舒服，而安全也就意味著中規(guī)中矩，顯得乏味。

△ by Alex Banaga

在這里并不是建議你絕對不要居中，我們可以嘗試讓文本居中，但是文本塊本身不居中，也不失為一種有趣的表達。

△ by Parham Marandi

在運用對齊原則時，一定要堅持一個原則：只使用一種對齊方式。即使你在不同的文本上運用了不同的對齊方式，也要確保大的整體上以某一種方式對齊。

在設(shè)計中，統(tǒng)一性是一個重要的概念，要讓頁面上的所有元素看上去統(tǒng)一、有聯(lián)系而且彼此相關(guān)，需要在各個獨立的視覺元素之間存在某種視覺紐帶。對齊的根本目的就是使得頁面統(tǒng)一而且有條理。

3. 重復(fù)原則

設(shè)計的某些元素需要在整個作品中重復(fù)。

也許你在設(shè)計工作中無意用過重復(fù)元素，可能是一種粗字體、一條粗線、某一個項目符號、顏色、設(shè)計要素、某種格式、空間關(guān)系等，這些都是重復(fù)的例子。我們只要把這種無意變?yōu)橛幸?，利用重?fù)原則，將畫面整體從視覺上變?yōu)橐惑w。

△ by T U B I K

在確定重復(fù)元素后，我們需要讓元素效果更強、更生動，通過重復(fù)表現(xiàn)的更加明顯，這樣不僅頁面看上去更有趣，還能在視覺上增強其條理性和一致性。

△ by damith premakumara

如果頁面中一切都是一致的，觀者又怎么會知道哪些是特殊的呢？這時候就需要一個與眾不同的元素，使觀者真正注意到你希望他們關(guān)注的內(nèi)容。

△ by damith premakumara

重復(fù)有助于組織信息，可以幫助觀者解讀各個頁面，也有利于將設(shè)計中單獨的部分統(tǒng)一起來。

△ by Jakub Krzanowski

有時候為了實現(xiàn)重復(fù)，完全可以為此增加一些全新的元素，或者選擇一個簡單的元素，以多種不同的方式加以使用。重復(fù)元素的項并不一定完全相同，而只是存在明確的緊密相關(guān)的對象。

△ by ann

重復(fù)元素并不必須是圖形，可以是空白、線、字體、對齊，或者任何有意重復(fù)的東西。

△ by Mike

重復(fù)還會為你的作品帶來一種專業(yè)性和權(quán)威性，不管它看起來多有趣，都會讓觀者感覺有人在負(fù)責(zé)，重復(fù)元素顯然是一種經(jīng)過深思熟慮的設(shè)計決策。

重復(fù)的目的就是統(tǒng)一，并增強視覺效果。重復(fù)原則可以把畫面原有的一致性更向前推進一步，當(dāng)然，我們也要避免太多的重復(fù)一個元素，重復(fù)太多會讓人產(chǎn)生厭倦感。

4. 對比原則

要實現(xiàn)有效的對比，就必須讓兩個項截然不同。

對比是為頁面增強視覺效果最有效的途徑，也是在不同元素之間建立一種有組織的層次結(jié)構(gòu)最有效的辦法。

△ by Mike

對比不僅可以用來吸引眼球，還可以用來組織信息、清晰層級、在頁面上指引讀者，并且制造焦點。

△ by uixNinja

對比的首要原則就是不要畏首畏尾。如果兩個元素雖然不同，但是區(qū)別不大，這時候就不是對比，而是沖突了。

△ by uixNinja

字體的對比是最容易實現(xiàn)的方法，除此之外，還可以利用顏色、線、元素之間的間隔、材質(zhì)等形成對比。

對比的兩個目的：增強頁面的效果，組織頁面的信息，兩個目的相輔相成。不過最重要的還是要記住，不要猶豫。想要運用對比原則，就徹底加大力度，想要兩個元素不同，就干脆讓它們截然不同。

小結(jié)

最后復(fù)習(xí)下四大原則。

1. 對比

避免頁面的元素太過相似，如果不同，就干脆讓它們截然不同。

2. 重復(fù)

讓設(shè)計的視覺要素在整個作品中重復(fù)出現(xiàn)，增加條理性、加強統(tǒng)一度。

3. 對齊

任何東西都不能在頁面上隨意擺放。

4. 親密性

讓有聯(lián)系的項靠近一起，形成視覺單元，有助于信息的組織，給觀者清晰的結(jié)構(gòu)。

△ by tubik

在每一個優(yōu)秀的設(shè)計作品里，四大原則都不是單獨存在的，它們相互影響，對比元素可以作為重復(fù)元素，對齊元素里也包含親密性的運用。不要把關(guān)于設(shè)計的內(nèi)容看的太過嚴(yán)肅，放松一點，在設(shè)計的時候，有意識的遵循四個原則，就一定能夠創(chuàng)造出生動、有趣、有條理的頁面。

歡迎關(guān)注作者的微信公眾號：「設(shè)計師的私人日記」

「應(yīng)對甲方的配色方法」

• 《甲方竟敢說你的配色丑！ 我來教你懟回去（一）》
• 《甲方竟敢說你的配色丑！ 我來教你懟回去（二）》
• 《甲方竟敢說你的配色丑！ 我來教你懟回去（三）》
• 《甲方竟敢說你的配色丑！ 我來教你懟回去（四）》