Point 01　設計思維整理

設計中最重要也是最基本的四大基本原則，指引著大家快速地掌握設計版面的排列。下面，將會對各原則進行介紹，當你知道這些原則后，會發現在生活中它是無處不在的，每一個優秀的設計中都應用了這些原則，你要學會掌握它、使用它，并且擁有它，使它在你的控制之中。

下圖（左）所示為沒有經過設計的文字版面。下圖（右）所示為經過學習后設計的文字版面，可以從下圖（左）中看出凌亂，而下圖（右）中卻有主次、干凈、整潔，下面將會介紹這是如何做到的。

●對齊：任何東西都不能在頁面上隨意安放。每一個元素都應當與頁面中的另一個元素有著視覺上的聯系。這樣，才能建立一種清晰、精巧、清爽的外觀。

●對比：頁面上的元素應避免它們太相似。例如字體、顏色、大小、線寬、形狀、空間等，要讓它們之間截然不同，才能引人注目，才能使讀者快速地看到這個頁面。

●重復：讓有相同屬性的元素在整個作品中重復出現。可重復顏色、形狀、材質、空間關系、線寬、字體、大小和圖片等。即增加條理性，還可加強統一性。

●親密：彼此相關的元素應靠在一起，歸為一個組。如果多個元素之間存在相關性，那么它們就可以成為一個視覺單元，而不是多個單一的個體組成頁面。這樣有助于將信息進行歸類，減少混亂，為讀者提供清晰的結構。

1.親密

也許僅從字面上來說，版式設計中的“親密性”似乎不太好理解，在正常的情況下，我們都會把“親密性”理解為人與人之間關系的一種表現，事實上在版式設計中的“親密性”也確實有類似人與人之間關系的意思。

也正是印證了那句話——物以類聚，人以群分！

“親密性”的原則是指將邏輯上存在關聯的元素排列組合在一起，使其被看作是一個密切相關的整體，而不是一堆雜亂無章的元素。

如下圖所示，可以看出版式設計中的“親密性”實際上是對信息的分類整理，下圖中的這個頁面，我們一看就知道在整個頁面中有4個版塊，而每一個版塊中的元素是因為它們有一定的聯系所以被組合到一起。即是通過“親密性”原則，對頁面中出現雜亂無章的元素進行重新組合，使其有一個清晰明了的結構，可以讓讀者在最短的時間內獲取頁面中的正確內容。

進行“親密性”原則設計的第一步，即是對元素的歸類組合，將頁面中所需要出現的元素按某種邏輯進行劃分歸類，對于同一組合內的元素在物理位置上賦予其更近的距離，而不同組合之間的物理位置顯然要更遠。這也是設計頁面留白的一個核心。

然而對于整個頁面的設計來說，僅是依靠“親密性”原則并不能解決所有的問題，除了“親密性”之外，在頁面的設計中還需要使用對齊、對比、重復等原則，“親密性”只是版式設計的第一步，更多的意義是在對元素的組織性上。

如果多個項之間存在很近距離的親密性，那么它們將成為一個視覺單元，而不是多個孤立的元素。彼此相關的項應當歸在一組。要注意你是如何閱讀的，你的視線是如何移動：開始→路徑→結束；讀完后，接下來應看哪里？整個過程應當是一個合理的過程，要有確定的開始，而且也要有確定的結束。

如下圖所示，頁面內容會有一種讓人想繼續看下去的效果，這是為什么呢？就是因為設計了親密性在里面，頁面中使用顏色色塊元素將頁面展示的信息一直向下延伸，讓顧客在看到時，會認為我就應該跟著這個軌跡看下去。

●親密性的根本目的：實現組織性，將相關的元素建立起親密性，這樣會更容易閱讀，也更容易被記住，還可以使空白更美觀。

●親密性如何實現：閉起眼睛，統計眼睛停頓的次數，來數頁面上有多少元素。

●親密性要避免的問題：不要僅因為有空白就把元素放在角落或者中間；避免整個頁面上出現太多的孤立元素；不要在元素之間留出同樣大小的空白，除非各組屬于同一個子集；要在有很近親密性的元素之間建立關系；不屬于同一組的元素不要建立關系應分開。

2.對齊

設計初學者往往喜歡將所有的信息全部放在頁面中，放得亂七八糟卻不理會它們到底應該如何放，只是想到這里還有空間就往這里放，這就好像沒有整理的房間，衣服、襪子、書籍、茶杯等到處亂放。

對齊原則要求我們在放置元素時應特別小心，不能像以前一樣，只要頁面上有空間就把元素隨意地“扔”到那里。

如果頁面上的元素是對齊的，會得到一個更內聚的單元。即使對齊元素的物理位置離得很遠，但在你眼里，它們之間會有一條看不見的線把它們連在一起。

如下圖（左）所示，這張名片中所有的元素都沒有與其他元素對齊，看上去，這張名片上的元素就像隨意扔上去并被黏住一樣，每一個元素和其他元素都沒有關聯。

如下圖（右）所示，名片中將所有元素都移到了右側進行左對齊，使它們按同一種方式對齊，現在里面的信息立刻就變得有條理了，這些文本有了一個共同的邊界，這個邊界把它們聯系在了一起，盡管這是一條看不見的線，但它很明確，正是這個邊界的強度為布局提供了力度。

技能拓展

使用對齊原則的要點

在使用對齊原則時，一定要堅持一個原則：頁面上只使用一種文本對齊。所有文本都應左對齊，或右對齊，或者全部居中對齊，并且在沒有完全熟練的情況下，盡量少用居中對齊，因為居中對齊會創建一種更正式、更穩重的外觀，這種外觀顯得更為中規中矩，但通常也顯得很乏味，大多數精致的設計都沒有采用居中對齊。

在設計中，統一性是一個重要的概念。要讓頁面看上去統一、有聯系且彼此相關，需要在各個單獨的元素之間存在著某種視覺紐帶。

●對齊的根本目的：使頁面統一且有條理，就是要把四處亂放的書放在一個架子上的意思。

●如何實現對齊：每一個元素都能找到與之對齊的元素。

●對齊要避免的問題：不要用混合對齊，就是如果用了右對齊就不要用居中對齊。

3.重復

通過親密性原則，可以將一個頁面中的元素按某種邏輯理解上的差異來劃分成不同的元素組合；再通過對齊原則，使這些不同的元素組合在視覺上看起來彼此相關。

不同的元素組合之間的關系可以是平等的、從屬的或是毫不相關的，這些元素組合之間的關系在視覺上僅靠親密性原則及對齊原則并不能完整地呈現。比如兩個平等關系的元素組合，雖然通過親密性原則使其之間保持了一定的距離，再通過對齊原則使其在一個頁面中看起來彼此相關，但如果這兩個元素組合使用了不同的字體及字號，我們依然無法從視覺上辨別出它們之間的關系。

擁有良好的組織性，同時保證了元素之間的統一性，但很有可能缺乏一致性。這樣的頁面設計會成為妨礙讀者通過視覺來快速獲取頁面正確內容的關鍵。這就需要使用到第三個原則——重復原則。

重復原則并不僅只是表現在字體上，頁面中任何一個元素都可以成為設計中重復的對象：字體、字號、顏色、圖案，甚至是版式。

原則是可以打破的，在設計中使用到的重復元素并沒有規定必須要保證高度的一致性，高度的一致性很有可能會導致頁面設計得呆板無趣。

如下圖所示，同樣的紫色文字、紫色多邊形、網格狀文字序號。這幾個頁面有太多相同的東西，所以從視覺上很容易便快速判斷出這幾張紙是屬于同一本書里面的內容。這就是重復的力量！

同樣的字體及字號，可以使用不同的顏色；同樣的形狀，可以使用不同的大小等這些都是可以使重復性在頁面上的運用不會那么枯燥的方法。

就如同大部分單一的設計都會讓人感到無趣一樣，在設計中使用單一的重復元素，仍然會讓設計顯得枯燥無味，然而物極必反的道理也是通用的，過多地使用重復元素則會讓頁面顯得凌亂。這里就涉及一個對比度的問題。

使作品具有一致性的方法是指對形狀、顏色或某些數值進行重復。當你看到一個設計元素在一個平面里，其不同部分被反復應用，我們的眼睛自然就會跟隨它們，有時就算它們并不是放在一起，但我們的視覺仍是會將它們視作為一個整體，會潛意識地在它們之間畫上連線。

重復應用最簡單的方法就是在畫面背景中創造一個圖案然后重復應用。在背景中這些重復的圖案會產生一種很有趣的視覺及構圖效果，然后將背景與前景的元素連接起來。下圖所示為一個完整的頁面，但頁面中每一個部分都出現了正方形，這就讓讀者在無意中認可這是在一個頁面中的內容。

另一個重復應用的方法是一行重復的元素引導讀者的眼睛到一個重要的信息、標志或圖片上。重復的元素能夠產生一條引導我們視線的路徑，使讀者創造出一種好奇心——另一端是如何來的？這其實是以一種講故事的方式，來吸引觀眾繼續往下看，如下圖所示。

如下圖（左）所示，重復的毛蟲圖案引導讀者的視線到INNU標志上。經過這個標志后又是一些蝴蝶的重復圖案，表示你去了這家美容院后的前后區別，構思巧妙。

如下圖（右）所示，這些小點是采用標志中的元素，而我們在圖中再次重復應用——就產生了一致性，吸引別人的注意，并且強化了品牌的宣傳。

在設計中視覺元素的重復可以將作品中的各個部分連接在一起，從而統一并增強了整個作品，否則這些部分只是彼此孤立的單元。重復不僅對只有一頁的作品很有用，還對于多頁文檔的設計更顯重要（對此通常稱之為保持一致）。

重復的目的就是統一，并增強視覺效果。不要低估頁面視覺效果的影響，如果一個作品看起來很有趣，它往往也更易于閱讀。

重復可以認為是保持一致性，而且我相信你早已經這樣做過。現在，需要把現有的一致性更向前推進一步。可不可以專門做一張圖片設計，并且將某些一致元素（如標題）作為這張圖片設計的一部分？在每個頁面底部或每個標題下面使用一條粗細為1點的線嗎？或者是不是使用一條更粗的線（4點），使重復元素顯得更明顯，更生動？

再看有沒有可能增加一些純粹為建立重復而設計的元素。是不是有一個編號列表？可不可以使用另一種字體或逆序數字，然后對出版物中的每一個編號列表都重復同樣的處理？最初，可以只是找出現有重復的，然后將其加強。熟悉了這種思想后，再開始創建新的重復元素，來增強設計的效果并提高信息的清晰度。

●重復的根本目的：重復就如同強調你的衣著。如果一位女士穿著一件可愛的黑色晚禮服，戴著一頂別致的帽子，她可能會用紅色高跟鞋、紅色口紅和一朵紅色小花來突出她的晚禮服。

●重復要避免的問題：要避免太多的重復一個元素，重復太多會讓人感到厭煩。要注意對比的價值，太多的重復將混淆重點。

4.對比

假如一個頁面中的文本采用的都是同樣的字體、同樣的字號、同樣的顏色，作為讀者的你能輕易地區分出哪里是標題，哪里是正文內容嗎？所以在通常情況下，設計師都會對標題采用加大字號、加粗字體、改變字體、更換顏色等方式進行處理以使其區別于正文內容，這就是對比原則的一個表現。如下圖所示，標題明顯要大于其他元素，在第一時間吸引了視線。

沒有對比的頁面，在讀者的眼里就像是平靜的海面，視線可及之處沒有一個焦點；當出現了對比后，突出了視覺重點，也就意味著在平靜的海面上有一個小島之類的可以吸引住視覺的焦點。

對比要強烈！其本意應該是通過視覺上的強烈差異化來增強頁面的效果，以及強調元素之間的差異性。可是這個強烈依然涉及一個度的問題，過于強烈的對比，很有可能導致讀者對在頁面中處于對比弱的那些元素的忽視。

在頁面上增加對比能吸引人的眼球。我們的眼睛喜歡看到對比的事物，如果頁面上放兩個不完全相同的元素（比如有兩種不同的字體，或者有兩種不同的線寬），它們就不能類似。要實現有效的對比，這兩個元素必須截然不同。

對比的根本目的有兩個方面，這兩個方面是相輔相成，無法分開的。一個方面是為了增強頁面的效果，如果一個頁面看起來很有意思，往往更有可讀性。另一個方面是有助于信息的組織。讀者應當能立即了解信息以何種方式組織，以及從一項到另一項的邏輯流程。對比元素不能讓讀者混淆，也不能錯誤地強調重點。