設(shè)計(jì)太“散”怎么破芹缔?“ 親密性”原則拯救你!

重復(fù)瓶盛、對比最欠、對齊以及親密性是版式設(shè)計(jì)中的四大原則,各種排版形式與規(guī)則都是基于這四大原則衍生而來惩猫,而掌握這些具有指導(dǎo)性的設(shè)計(jì)原則芝硬,能夠幫助我們在短時(shí)間內(nèi),更快更好的達(dá)成設(shè)計(jì)目標(biāo)轧房。本期給大家講解四大原則之一一親密性原則拌阴。


親密性指彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近,歸組在一起锯厢,如果多個(gè)項(xiàng)目之間存在很近的親密性皮官,他們就會成為一個(gè)視覺單元,而不是?多個(gè)孤立的元素实辑。這有助于組織信息捺氢,減少混亂,為讀者提供清晰的結(jié)構(gòu)剪撬。

聽起來有些抽象摄乒,先來看一個(gè)簡單的案例:

3秒鐘分辨出圖中有幾種水果?各有多少個(gè)?

在短時(shí)間回答出來的確有些困難馍佑,難道是因?yàn)楫嬅嬷械男畔⑻鄬?dǎo)致你記不住這些信息嗎斋否?

同樣的問題:

3秒鐘分辨出圖中有幾種水果?各有多少個(gè)拭荤?


相信你能得出答案:“6種水果茵臭、各有兩個(gè)”。

好了舅世,問題來了旦委,為什么同樣的兩張圖片,內(nèi)容一樣雏亚,只是換了擺放的位置缨硝,卻能影響到我們的判斷?

這就是親密性原則起來作用罢低。

第一張圖中的水果雖然擺放很整齊查辩,但是沒有規(guī)律的混在一起,短時(shí)間內(nèi)很難分辨出水果的種類和數(shù)量网持。

而第二張圖片中的水果宜岛,按照親密性原則,把相同的水果放在一起翎碑,相同的水果就會成為一個(gè)視覺單元谬返,而不是多個(gè)孤立的元素。這樣我們可以很快的組織信息日杈,減少混亂遣铝,形成清晰的結(jié)構(gòu)。

親密性的根本目的是實(shí)現(xiàn)組織性莉擒。盡管其他原則也能達(dá)到這個(gè)目的酿炸,不過利用親密性原則,只需將相關(guān)的元素分在一組建立更近的親密性涨冀,就能自動(dòng)實(shí)現(xiàn)條理性和組織性填硕。如果信息很有條理,將更容易閱讀鹿鳖,也更容易被記住扁眯。

在生活中我們也經(jīng)常能看到利用親密性原則,提高效率的做法翅帜。比如超市中的商品的擺放姻檀,就是把相同屬性的商品放置的同一個(gè)區(qū)域,一樣的商品會放置在一起涝滴,方便客戶挑選绣版,從而提高購買效率胶台。



親密性原則在設(shè)計(jì)領(lǐng)域中的應(yīng)用隨處可見,在版面大大小小元素的排版當(dāng)中都遵循著這一原則杂抽。在文字的排版中诈唬,一旦親密性原則出現(xiàn)問題,就會產(chǎn)生出各種閱讀上的障礙缩麸,沒有辦法正確解讀版面上的信息铸磅。


親密性原則在文字排版中的作用主要表現(xiàn)在梳理信息組織關(guān)系,建立起完整的閱讀邏輯和視覺引導(dǎo)杭朱。

如這段文字愚屁,當(dāng)沒有經(jīng)過親密性處理時(shí),無法看出他們之間的組織關(guān)系痕檬,閱讀性和信息傳遞效果非常差:


按照親密性原則,把版面中相關(guān)的文字相互靠近送浊,而不相關(guān)的相互遠(yuǎn)離梦谜,重新進(jìn)行分組,使他們各自成為一個(gè)視覺單元袭景,這樣建立起條理性和組織性唁桩,形成了清晰的結(jié)構(gòu)。


我們來看看這個(gè)案例是如何通過距離建立親密性的耸棒。


字間距應(yīng)該是版面所有元素距離中最小單位荒澡,這樣視線才能從一個(gè)字移動(dòng)到距它最近的另一個(gè)字上,從而正確的去閱讀信息与殃。

字距一般使用設(shè)計(jì)軟件中默認(rèn)值“0”单山,也可以調(diào)整為“-20”或“-40”,使文字間距更緊湊幅疼。


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


可以通過增加一些裝飾元素?來彌補(bǔ)空白過大所帶來的的視覺問題悴晰。



? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 行間距推薦使用字體大小的1.4-1.6倍。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小于1倍或大于2倍會影響正常的閱讀逐工。



段間距需大于行間距铡溪,

這樣文字信息才能區(qū)分開形成為單獨(dú)的段落。



元素與元素之間要體現(xiàn)距離的近泪喊,組間距要體現(xiàn)距離的遠(yuǎn)棕硫。所以只有行間距和段間距要比組間距小,我們才會下意識的認(rèn)為他們是一組的窘俺。



接下來進(jìn)行:“茶葉品測會”海報(bào)排版解構(gòu)分析


此版面文字信息主要分為標(biāo)題饲帅、時(shí)間地點(diǎn)复凳、正文三個(gè)信息組,通過下圖的標(biāo)注可以看到:每個(gè)信息組間距大于元素與元素之間的段間距灶泵,形成了清晰的結(jié)構(gòu)育八。


標(biāo)題的親密性解構(gòu):

此標(biāo)題采用豎排形式,為了讓觀者產(chǎn)生清晰的閱讀順序赦邻,排版遵循著行間距大于字間距的原則髓棋,引導(dǎo)讀者的視覺從左上→左下→右上→右下的閱讀順序,能清晰的了解到標(biāo)題要傳達(dá)的信息為“茶葉品測會”惶洲。


二級信息“時(shí)間地點(diǎn)”的親密性解構(gòu):

此信息雖然為同一信息組按声,但是又可以分為三個(gè)小信息組:地點(diǎn)、開始時(shí)間恬吕、結(jié)束時(shí)間签则。通過下圖的標(biāo)注可以看到:每個(gè)信息段間距>元素與元素之間的行間距,形成了清晰的結(jié)構(gòu)铐料。


通過以上的分析解構(gòu)可以得到文字信息間距規(guī)律為:

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

無論版面的信息多少渐裂、位置如何變化,只要保證各個(gè)間距組合之間的相對性比例钠惩,就能更好的控制版面柒凉,讓信息更高效的傳達(dá),符合邏輯又滿足視覺感知的要求篓跛,還能使排版具有節(jié)奏感和美感膝捞。


通過前文的案例可以知道,使用間距進(jìn)行信息關(guān)系的區(qū)分是最常用和有效的方法:


除了通過間距控制進(jìn)行信息關(guān)系的劃分愧沟,還可以通過其他分割形式建立組合關(guān)系蔬咬,常用的分割形式有:線條分割、形狀分割與色彩分割等沐寺。將這些分割的形式引入設(shè)計(jì)中计盒,得到的效果比單一的間距控制要好很多:

應(yīng)用案例



應(yīng)用案例



為了讓大家加深對親密性原則的理解,提取本期文章的主要內(nèi)容做為原始資料芽丹,運(yùn)用親密性原則進(jìn)行設(shè)計(jì)示范北启。


按照親密性原則,把版面中的文字信息進(jìn)行分組拔第,使它們各自成為一個(gè)視覺單元咕村,建立起條理性和組織性,形成清晰的結(jié)構(gòu)蚊俺,做出清晰的閱讀引導(dǎo)懈涛。


按照總結(jié)出來的規(guī)律進(jìn)行親密性設(shè)置,保證各個(gè)間距組合之間的相對性比例泳猬,控制好版面批钠,讓信息更高效的傳達(dá)宇植。

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


嘗試采用非常新潮的孟菲斯風(fēng)格來進(jìn)行設(shè)計(jì),孟菲斯風(fēng)格的特點(diǎn)是激烈的色彩碰撞埋心,幾何結(jié)構(gòu)的點(diǎn)線面的隨機(jī)拼貼指郁,有非常強(qiáng)烈的視覺沖擊力。按此風(fēng)格特點(diǎn)給各信息組加入色彩明快的色塊拷呆,使信息的分割更明顯闲坎。


1、增加字型對比茬斧,標(biāo)題改為“優(yōu)設(shè)標(biāo)題黑”腰懂,正文改為圓體;2项秉、給各個(gè)色塊加入偽立體效果的外框绣溜,形成有趣的空間感;3娄蔼、加入小圓點(diǎn)當(dāng)做背景肌理涮毫,使此風(fēng)格特點(diǎn)更明顯。


最后加入點(diǎn)綴元素來豐富畫面贷屎,增加活潑感和趣味性。

設(shè)計(jì)完成:

本期知識點(diǎn)總結(jié):

1艘虎、元素的關(guān)聯(lián)性越大唉侄,間距就越小野建;無關(guān)聯(lián)的元素不要太靠近属划,讓讀者產(chǎn)生誤解;親密性原則在間距對比中才會產(chǎn)生效果候生,距離的對比要足夠強(qiáng)烈同眯,才能夠清晰的被感知;

2唯鸭、在文字信息排版中要遵循:字間距 <? 行間距 <? 段間距? <? 組間距的規(guī)則须蜗。保證各個(gè)間距組合之間的相對性比例,就能讓信息更高效的傳達(dá)目溉,還能使排版具有節(jié)奏感和美感明肮;

3、除了通過間距控制進(jìn)行信息關(guān)系的劃分缭付,還可以通過線條分割柿估、形狀分割與色彩分割等建立組合關(guān)系。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末陷猫,一起剝皮案震驚了整個(gè)濱河市秫舌,隨后出現(xiàn)的幾起案子的妖,更是在濱河造成了極大的恐慌,老刑警劉巖足陨,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嫂粟,死亡現(xiàn)場離奇詭異,居然都是意外死亡钠右,警方通過查閱死者的電腦和手機(jī)赋元,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來飒房,“玉大人搁凸,你說我怎么就攤上這事『萏海” “怎么了护糖?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長嚼松。 經(jīng)常有香客問我嫡良,道長,這世上最難降的妖魔是什么献酗? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任寝受,我火速辦了婚禮,結(jié)果婚禮上罕偎,老公的妹妹穿的比我還像新娘很澄。我一直安慰自己,他們只是感情好颜及,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布甩苛。 她就那樣靜靜地躺著,像睡著了一般俏站。 火紅的嫁衣襯著肌膚如雪讯蒲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天肄扎,我揣著相機(jī)與錄音墨林,去河邊找鬼。 笑死犯祠,一個(gè)胖子當(dāng)著我的面吹牛萌丈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播雷则,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼辆雾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了月劈?” 一聲冷哼從身側(cè)響起度迂,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤藤乙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后惭墓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坛梁,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年腊凶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了划咐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,021評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钧萍,死狀恐怖褐缠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布糕伐,位于F島的核電站,受9級特大地震影響胡桨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瞬雹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一昧谊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酗捌,春花似錦呢诬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽膛虫。三九已至草姻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間稍刀,已是汗流浹背撩独。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留账月,地道東北人综膀。 一個(gè)月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像局齿,于是被迫代替她去往敵國和親剧劝。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容