前面的視覺(jué)體系和大家簡(jiǎn)單提到過(guò)傳統(tǒng)平面排版的四大原則：親密性、對(duì)比、重復(fù)、對(duì)齊。那界面排版有什么原則呢？今天菜心就來(lái)用實(shí)例分享一下界面排版中需要注意哪些原則。

大綱如下：

一、親密原則

二、對(duì)比原則

三、平衡原則

四、相似原則

五、簡(jiǎn)潔原則

六、封閉原則

七、情感原則

由于篇幅原因，今天先來(lái)介紹前四個(gè)原則，剩下的我們下期再分享。

一、親密原則

空間上接近的內(nèi)容，我們更容易將之歸類到一組，這就是我們所說(shuō)的親密原則。

如下圖：

我們很容易將唐僧、孫悟空、沙僧分成一組，而將豬八戒單獨(dú)分離出來(lái)，因?yàn)榍叭唠x的更近。

我們來(lái)看下面這張圖：

你能分清標(biāo)題是屬于上面還是下面嗎？

當(dāng)你了解了親密原則后，就知道為什么分不清，這也就是我們學(xué)習(xí)理論知識(shí)的原因，當(dāng)我們看到錯(cuò)誤的設(shè)計(jì)時(shí)，可以說(shuō)出哪里不對(duì)，而不是憑感覺(jué)。

那這個(gè)原則如何運(yùn)用到我們界面設(shè)計(jì)上呢？

看下圖：

上圖是簡(jiǎn)書文章列表中的一條，我們?cè)谄綍r(shí)工作中也經(jīng)常會(huì)遇到這種信息排版。首先我們需要清楚，上圖的內(nèi)容有三個(gè)：上分割線、內(nèi)容區(qū)和下分割線。此時(shí)我們可以判斷，內(nèi)容區(qū)內(nèi)的所有間距一定小于內(nèi)容區(qū)與分割線的間距，因?yàn)楦鶕?jù)親密性原則，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近，內(nèi)容區(qū)的內(nèi)容相對(duì)分割線來(lái)說(shuō)，就是關(guān)聯(lián)性比較強(qiáng)的，所以它們的間距就會(huì)相對(duì)較小。

這樣的間距規(guī)律還會(huì)讓我們清晰的區(qū)分開每一條信息，不會(huì)導(dǎo)致信息干擾。

親密性原則是我們?cè)诮缑媾虐嬷凶畛Ｓ玫脑瓌t之一，大家一定要牢牢的記住并大量實(shí)踐，為我們后期的排版設(shè)計(jì)打下堅(jiān)實(shí)的基礎(chǔ)！

二、對(duì)比原則

我們經(jīng)常會(huì)遇到界面看著混亂的情況，但又不知道為什么，其實(shí)大部分情況都是因?yàn)榻缑鎯?nèi)容對(duì)比不明顯而造成的。

例如下圖：

雖然上圖符合親密原則，但似乎看著還是有些凌亂，其中一個(gè)很重要的原因就是因?yàn)榻缑嫘畔?nèi)容的對(duì)比不夠強(qiáng)烈，我們不知道該看哪里！

而我們來(lái)看一下今日頭條的信息排版：

你會(huì)發(fā)現(xiàn)重要信息和次要信息的大小對(duì)比非常強(qiáng)烈，使我們聚焦在主要信息（標(biāo)題）上，這樣看著就不會(huì)那么散亂。

看完這個(gè)排版后再去解決上面那個(gè)散亂的問(wèn)題，會(huì)不會(huì)更容易些呢？大家不妨自己嘗試排一下，這樣會(huì)讓你的印象更加深刻。

我們平時(shí)也要多去研究一些排版，好的排版你需要去分析它為什么好，不好的排版你需要分析它為什么不好，你能否排的更好，只有通過(guò)這樣不斷地刻意練習(xí)，你才能扎扎實(shí)實(shí)的前進(jìn)。

回到正題，其實(shí)關(guān)于對(duì)比的方式還遠(yuǎn)不止大小層面，還有顏色對(duì)比、粗細(xì)對(duì)比、形狀對(duì)比、疏密對(duì)比等等，所以大家在進(jìn)行對(duì)比排版的時(shí)候，不妨多維度考慮，一定可以找到合適的解決方案。

三、平衡原則

平衡原則是界面排版布局的首要原則，大到整個(gè)官網(wǎng)，小到一張圖文，都需要我們對(duì)視覺(jué)平衡有一個(gè)良好的把控。

舉幾個(gè)例子：

看上圖，我們可以發(fā)現(xiàn)，圖片下方的文字是左對(duì)齊，為了達(dá)到視覺(jué)上的平衡，設(shè)計(jì)師將VIP 圖標(biāo)和更新集數(shù)放在圖片右側(cè)。

再來(lái)看下圖：

我們會(huì)感覺(jué)整個(gè)頁(yè)面怪怪的，好像在向右上角傾斜，就是因?yàn)闆](méi)有遵循平衡原則，而當(dāng)我們將最下方的按鈕移動(dòng)到右側(cè)時(shí)，如下圖：

整個(gè)頁(yè)面看著就會(huì)平衡很多。

這里需要注意一點(diǎn)，一些藝術(shù)類的海報(bào)排版為了達(dá)到某些效果，可能會(huì)有意打破平衡，但那是特殊的平面藝術(shù)設(shè)計(jì)，而對(duì)于我們UI設(shè)計(jì)來(lái)說(shuō)，在進(jìn)行界面排版的時(shí)候，大多數(shù)情況還是要遵循平衡原則，這樣才能讓用戶感覺(jué)整個(gè)界面更加協(xié)調(diào)、舒服。

四、相似原則

我們需要對(duì)相似的內(nèi)容賦予相同的屬性，例如同一級(jí)別的標(biāo)題文字大小相同，相同顏色(如藍(lán)色等)的字體都可以點(diǎn)擊等等。

例如下圖：

上圖文字有兩處是藍(lán)色的，藍(lán)色使二者具有一定的相似性，而我們需要將相似性的內(nèi)容賦予相同的屬性：可點(diǎn)擊。

相反我們看下圖：

雖然設(shè)計(jì)者為了統(tǒng)一和強(qiáng)調(diào)，將電話和地址都作成藍(lán)色，但如果電話可點(diǎn)擊，而地址不可點(diǎn)擊，就會(huì)給用戶產(chǎn)生困擾，以致于整個(gè)頁(yè)面的交互都存在一定的問(wèn)題。這一點(diǎn)也是我們必須要注意的內(nèi)容，在進(jìn)行設(shè)計(jì)的時(shí)候不要犯這種低級(jí)的錯(cuò)誤。

當(dāng)然相似原則的因素也不只有文字顏色，還有背景色、方向、大小等等，有興趣的同學(xué)可以多多總結(jié)積累，大家一起交流。

以上就是今天分享的界面排版的前四個(gè)原則，下一期會(huì)將后面的內(nèi)容補(bǔ)充完整。

希望你能夠多多練習(xí)，完善自己的排版知識(shí)體系，早日成為一名合格的資深視覺(jué)設(shè)計(jì)師。

作者：菜心（微信號(hào)：410628210 ?微信公眾號(hào)：菜心設(shè)計(jì)鋪），華為ITUX用戶體驗(yàn)設(shè)計(jì)師（主視覺(jué)），3年工作經(jīng)驗(yàn)，參與華為Welink、3MS、連長(zhǎng)社區(qū)等多個(gè)項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。

本文由 @菜心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。