版式設計四大原則之親密性原則

  • A+
所屬分類:經驗思維

本文來源: 鄧海貝(公眾號: 藝海拾貝Design), 共 2648 字

重復、對比、對齊以及親密性是版式設計中的四大原則,各種排版形式與規則都是基于這四大原則衍生而來,而掌握這些具有指導性的設計原則,能夠幫助我們在短時間內,更快更好的達成設計目標。本期給大家講解四大原則之——親密性原則。

版式設計四大原則之親密性原則

親密性指彼此相關的項應當靠近,歸組在一起,如果多個項目之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助于組織信息,減少混亂,為讀者提供清晰的結構。

聽起來有些抽象,先來看一個簡單的案例:3秒鐘分辨出圖中有幾種水果?各有多少個?

版式設計四大原則之親密性原則

在短時間回答出來的確有些困難,難道是因為畫面中的信息太多導致你記不住這些信息嗎?

同樣的問題:3秒鐘分辨出圖中有幾種水果?各有多少個?

版式設計四大原則之親密性原則

相信你能得出答案:“6種水果”、“各有兩個”。

好了,問題來了,為什么同樣的兩張圖片,內容一樣,只是換了擺放的位置,卻能影響到我們的判斷?這就是親密性原則起了作用。

第一張圖中的水果雖然擺放很整齊,但是沒有規律的混在一起,短時間內很難分辨出水果的種類和數量。

而第二張圖片中的水果,按照親密性原則,把相同的水果放在一起,相同的水果就會成為一個視覺單元,而不是多個孤立的元素。這樣我們可以很快的組織信息,減少混亂,形成清晰的結構。

親密性的根本目的是實現組織性。盡管其他原則也能到達這個目的,不過利用親密性原則,只需要將相關的元素分在一組建立更近的親密性,就能自動實現條理性和組織性。如果信息很有條理,將更容易閱讀,也更容易被記住。

在生活中我們也經常能看到利用親密性原則,提高效率的做法。比如超市中的商品的擺放,就是把相同屬性的商品放置的同一個區域,一樣的商品會放置在一起,方便客戶挑選,從而提高購買效率。

版式設計四大原則之親密性原則

版式設計四大原則之親密性原則

親密性原則在設計領域中的應用隨處可見,在版面大大小小元素的排版當中都遵循著這一原則。在文字的排版中,一旦親密性原則出現問題,就會產生出各種閱讀上的障礙, 沒有辦法正確解讀版面上的信息。

版式設計四大原則之親密性原則

親密性原則在文字排版中的作用主要表現在梳理信息組織關系,建立起完整的閱讀邏輯和視覺引導。

如這段文字,當沒有經過親密性處理時,無法看出它們之間的組織關系,閱讀性和信息傳遞效果非常差:

版式設計四大原則之親密性原則

按照親密性原則,把版面中相關的文字相互靠近,而不相關的文字相互遠離,重新進行分組,使它們各自成為一個視覺單元,這樣建立起條理性和組織性,形成了清晰的結構。

版式設計四大原則之親密性原則

我們來看看這個案例是如何通過距離建立親密性的。

間距設置

字間距應該是版面所有元素距離中最小單位,這樣視才能從一個字移動到距它最近的另一個字上,從而正確的去閱讀信息。字距一般使用設計軟件中默認值“0”,也可以調整為“-20”或“-40”,使文字間距更緊湊。

版式設計四大原則之親密性原則

如果需要通過增加字間距來獲得更好的視覺效果,那么字間距不要超過當前字體大小的一半,否則文字就會顯得散亂。

版式設計四大原則之親密性原則

可以通過增加一些裝飾元素來彌補空白過大所帶來的視覺問題。

版式設計四大原則之親密性原則

行間距設置

行間距推薦使用字體大小的1.4-1.6倍,小于1倍或大于2倍會影響正常的閱讀。

版式設計四大原則之親密性原則

段間距設置

段間距需大于行間距,這樣文字信息才能區分開成為單獨的段落。

版式設計四大原則之親密性原則

組間距設置

元素與元素之間要體現距離的「近」,組間距要體現出距離的「遠」。所以只有行間距和段間距要比組間距小,我們才會下意識的認為它們是一組的。

版式設計四大原則之親密性原則

錯誤示范1:

所有元素相互間距都一樣,視覺感知此版面有五個信息組,顯得過于散亂。

版式設計四大原則之親密性原則

錯誤示范2:

元素彼此無關就不要建立關系,而需要把它們分開。如2和3、4和5不屬于同一信息組,而距離過于靠近,會讓觀者產生誤讀。

版式設計四大原則之親密性原則

案例分析

接下來進行“茶葉品測會”海報排版解構分析。

版式設計四大原則之親密性原則

此版面文字信息主要分為標題、時間地點、正文三個信息組,通過下圖的標注可以看到:每個信息組間距>元素與元素之間的段間距,形成了清晰的結構。

版式設計四大原則之親密性原則

標題的親密性解構:

此標題采用豎排形式,為了讓觀者產生清晰的閱讀順序,排版遵循著行間距>字間距的原則,引導讀者的視覺從左上→?左下→右上→?右下的閱讀順序,能清晰的了解到標題要傳達的信息為“茶葉品測會”。

版式設計四大原則之親密性原則

錯誤示范

一旦行間距>字間距規則被打破,字與字之間的閱讀順序就會被破壞,將產生出閱讀上的障礙,無法正確解讀版面上的信息,很容易讓觀者誤讀為“測茶葉品會”。

版式設計四大原則之親密性原則

二級信息“時間地點”的親密性解構:

此信息雖然為同一信息組,但是又可以分為三個小信息組:地點、開始時間、結束時間。通過下圖的標注可以看到:每個信息段間距>元素與元素之間的行間距,形成了清晰的結構。

版式設計四大原則之親密性原則

通過以上的分析解構可以得到文字信息間距規律為:

字間距 <? 行間距 <? 段間距? <? 組間距

無論版面的信息多少、位置如何變化,只要保證各個間距組合之間的相對性比例,就能更好的控制版面,讓信息更高效的傳達,符合邏輯又滿足視覺感知的要求,還能使排版具有節奏感和美感。

版式設計四大原則之親密性原則

通過前文的案例可以知道,使用間距進行信息關系的區分是最常用和有效的方法:

版式設計四大原則之親密性原則

除了通過間距控制進行信息關系的劃分,還可以通過其他分割形式建立組合關系,常用的分割形式有:線條分割、形狀分割與色彩分割等。將這些分割的形式引入設計中,得到的效果比單一的間距控制要好很多:

版式設計四大原則之親密性原則

版式設計四大原則之親密性原則

版式設計四大原則之親密性原則

版式設計四大原則之親密性原則

為了讓大家加深對親密性原則的理解,提取本期文章的主要內容做為原始資料,運用親密性原則進行設計示范。

版式設計四大原則之親密性原則

按照親密性原則,把版面中的文字信息進行分組,使它們各自成為一個視覺單元,建立起條理性和組織性,形成清晰的結構,做出清晰的閱讀引導。

版式設計四大原則之親密性原則

按照總結出來的規律進行親密性設置,保證各個間距組合之間的相對性比例,控制好版面,讓信息更高效的傳達。

A 字間距?<?B 行間距?<?C 段間距?<?D 組間距?

版式設計四大原則之親密性原則

嘗試采用非常新潮的孟菲斯風格來進行設計,孟菲斯風格的特點是激烈的色彩碰撞,幾何結構的點線面的隨機拼貼,有非常強烈的視覺沖擊力。按此風格特點給各信息組加入色彩明快的色塊,使信息的分割更明顯。

版式設計四大原則之親密性原則

1、增加字型對比,標題改為“優設標題黑”,正文改為圓體;2、給各個色塊加入偽立體效果的外框,形成有趣的空間感;3、加入小圓點當做背景肌理,使此風格特點更明顯。

版式設計四大原則之親密性原則

最后加入點綴元素來豐富畫面,增加活潑感和趣味性。

設計完成:

版式設計四大原則之親密性原則

做個樣機效果:

版式設計四大原則之親密性原則

本期知識點總結:

1、元素的關聯性越大,間距就越??;無關聯的元素不要太靠近,讓讀者產生誤解;親密性原則在間距對比中才會產生效果,距離的對比要足夠強烈,才能夠清晰的被感知;

2、在文字信息排版中要遵循:字間距 <? 行間距 <? 段間距? <? 組間距的規則。保證各個間距組合之間的相對性比例,就能讓信息更高效的傳達,還能使排版具有節奏感和美感;

3、除了通過間距控制進行信息關系的劃分,還可以通過線條分割、形狀分割與色彩分割等建立組合關系。

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: