自學(xué)體系第一課！寫給新人設(shè)計(jì)師的界面排版原則（上）

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

視覺自學(xué)體系回顧：《新年自學(xué)計(jì)劃！寫給UI設(shè)計(jì)新人的知識(shí)體系指南》

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

大綱如下：

一、親密原則

二、對(duì)比原則

三、平衡原則

四、相似原則

五、簡(jiǎn)潔原則

六、封閉原則

七、情感原則

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

一、親密原則

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

如下圖：

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

我們來看下面這張圖：

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

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

那這個(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ì)分割線來說，就是關(guān)聯(lián)性比較強(qiáng)的，所以它們的間距就會(huì)相對(duì)較小。

這樣的間距規(guī)律還可以讓我們清晰的區(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)烈，我們不知道該看哪里！

而我們來看一下今日頭條的信息排版：

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

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

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

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

三、平衡原則

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

舉幾個(gè)例子：

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

再來看下圖：

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

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

這里需要注意一點(diǎn)，一些藝術(shù)類的海報(bào)排版為了達(dá)到某些效果，可能會(huì)有意打破平衡，但那是特殊的平面藝術(shù)設(shè)計(jì)，而對(duì)于我們UI設(shè)計(jì)來說，在進(jìn)行界面排版的時(shí)候，大多數(shù)情況還是要遵循平衡原則，這樣才能讓用戶感覺整個(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è)面的交互都存在一定的問題。這一點(diǎn)也是我們必須要注意的內(nèi)容，在進(jìn)行設(shè)計(jì)的時(shí)候不要犯這種低級(jí)的錯(cuò)誤。

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

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

「想掌握排版四原則？3個(gè)海報(bào)設(shè)計(jì)教程滿足你！」

1. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》
2. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)（二）》
3. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？（三）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com