關于排版，給你幾個甲方不懟你的理由?。ㄒ唬?/h2>
3 評論 6280 瀏覽 31 收藏 14 分鐘

設計師在進行設計排版的時候，如果沒有一定的原則和理論作為基礎和標準，就難以形成大致的方向和目標。本文將詳細介紹排版4個基本原則，enjoy~

我們在進行設計排版的時候，如果不考慮任何規律，很多情況下會產生一些奇怪的設計。

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Adrián Somoza

即使是在無理論基礎支撐的設計上，按照理論作出適當調整，也能夠向出色的設計邁出一大步。

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

在開始“版式系列”文章之前，我想先推薦一本《寫給大家看的設計書》。

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p>不管你是需要設計頁面，卻苦于沒有設計背景；或者你從來沒有接受過正規的設計培訓，甚至于你從事著和設計毫無相關的工作，<strong>這本書都會讓你對設計有一個煥然一新的認知。</strong></p> <h2 class=一、4大基本原則

1. 親密性原則

親密性（物理位置的接近）意味著存在關聯：

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p>將相關的項組織在一起，移動這些項，使它們的<strong>物理位置更加靠近，相關的項將被看作一個視覺單元，而不是多個孤立的元素。</strong></p> <p><img data-action=by Ryan Bataillon

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Romain Briaux

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=byIceBear_Panda

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Jenny Johannesson

親密性原則并不是說畫面上所有的元素都要更靠近，真正含義是：如果某些元素之間在理解上存在關聯，那么這些元素在視覺上也應當有關聯。而元素組之間則需要有適當的留白，來體現相互之間的關系。

在此之前你可能也會很自然的利用位置的緊密程度，來反映元素之間的關系，而親密性實際上就是更有意識的這樣做，并把這個概念更向前推進一步。

在充分理解頁面上各元素之間的關系，就會注意到親密性的效果，一旦開始注意到這種效果，就會利用它，掌握它，并充分控制它。

2. 對齊原則

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p>頁面上的<strong>任何元素都應該與頁面上的某個元素存在某種視覺關系</strong>，不能簡單的認為頁面上剛好有空間就把元素隨意的仍到那里。</p> <p><img data-action=by Outcrowd

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Johny vino?

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

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Ali Sayed

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Axel Herrmann

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Alex Banaga

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

關于排版，給你幾個甲方不懟你的理由！（一）

by Parham Marandi

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

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

3. 重復原則

設計的某些元素需要在整個作品中重復：

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p>也許你在設計工作中無意用過重復元素，可能是一種粗字體、一條粗線、某一個項目符號、顏色、設計要素、某種格式、空間關系等，這些都是重復的例子。我們只要把這種無意變為有意，利用重復原則，將畫面整體從視覺上變為一體。</p> <p><img data-action=by TUBIK

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by damith premakumara

如果頁面中一切都是一致的，觀者又怎么會知道哪些是特殊的呢？

這時候就需要一個與眾不同的元素，使觀者真正注意到你希望他們關注的內容。

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by damith premakumara

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Jakub Krzanowski

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by ann

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by Mike

重復還會為你的作品帶來一中專業性和權威性，不管它看起來多有趣，都會讓觀者感覺有人在負責，重復元素顯然是一種經過深思熟慮的設計決策。

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

3. 對比原則

要實現有效的對比，就必須讓兩個項截然不同：

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p>對比是為頁面增強視覺效果最有效的途徑，也是在不同元素之間建立一種有組織的層次結構最有效的辦法。</p> <p><img data-action=by Mike

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by uixNinja

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

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by uixNinja

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

對比的兩個目的：增強頁面的效果，組織頁面的信息，兩個目的相輔相成。

不過最重要的還是要記住，不要猶豫。想要運用對比原則，就徹底加大力度，想要兩個元素不同，就干脆讓它們截然不同。

小結

最后復習下四大原則：

1.?對比

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

2. 重復

讓設計的視覺要素在整個作品中重復出現，增加條理性、加強那個統一度。

3. 對齊

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

4. 親密性

讓有聯系的項靠近一起，形成視覺單元，有助于信息的組織，給觀者清晰的結構。

關于排版，給你幾個甲方不懟你的理由?。ㄒ唬? /></p> <p style=by tubik

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

推薦閱讀

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

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

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

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

 

作者：設計師日記，公眾號：設計師的私人日記

本文由 @設計師日記 原創發布于人人都是產品經理?，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
設計師日記
《設計師的私人日記》公眾號博主
15篇作品 79505總閱讀量
06-012173 瀏覽
今年618，淘寶、京東、拼多多誰最便宜？
09-271849 瀏覽
Denim復興，貨架與內容的雙向奔赴
04-235145 瀏覽
如何設計銷售CRM×運營CRM×社交化SCRM系統？（六） 如何設計用戶畫像系統？
11-281178 瀏覽
寫給數據產品后浪們的修煉指南（二）能力篇
03-032921 瀏覽
ChatGPT思考：探索智能的極限
評論
評論請登錄

  1. “任何元素都應該與頁面上的某個元素存在某種視覺關系” 說進我心里

    來自北京 回復

  2. 棒

    來自上海 回復