一. 親密原則

設(shè)計前對內(nèi)容進行信息分層，屬于一個層級分為一組，有關(guān)聯(lián)的內(nèi)容會離得更近，這樣的間距規(guī)律還會讓我們清晰地區(qū)分開每一條信息，不會導(dǎo)致信息干擾。

我們很容易將1、2分成一組，而將3、4分成一組，因為1、2離得更近。

圖中內(nèi)容有三個模塊：上間距、內(nèi)容區(qū)域、下間距。

因此我們可以判斷內(nèi)容區(qū)內(nèi)間距一定小于上下間距，因為根據(jù)親密性原則，有關(guān)聯(lián)內(nèi)容會離得更近，標(biāo)題和價格又分為2個模塊，其中價格優(yōu)惠之間信息屬于一個內(nèi)容，所以他們的間距相對就比較小。

△(左圖)我們就無法弄清楚標(biāo)題是區(qū)分上面圖片還是下面圖片

△(右圖)我們采用親密原則，將1.2放一起，加上間距區(qū)分上下文關(guān)系

二. 對比原則

重要信息和次要信息通過顏色對比、粗細對比、形狀對比、疏密對比、大小對比，使我們聚焦在我們需要關(guān)注的信息上，在進行對比排版的時候，需要多維度考慮，找到合適的解決方案。

這些App都是通過字號、粗細以及間距大小進行對比來區(qū)分信息和信息之間關(guān)系，讓整個頁面動線看起來更加流暢，閱讀節(jié)奏更舒適。

△(左圖)雖然運用了親密原則但是看起來還是很混亂，原因是界面信息內(nèi)容看起來對比不強烈。

△(右圖)重要信息和次要信息對比強烈，通過字體大小、字重來突出標(biāo)題的信息，讓用戶焦點聚焦在標(biāo)題上。