前面的視覺體系和大家簡單提到過傳統(tǒng)平面排版的四大原則：親密性洛巢、對比、重復(fù)次兆、對齊稿茉。那界面排版有什么原則呢？今天菜心就來用實例分享一下界面排版中需要注意哪些原則芥炭。
大綱如下：
一漓库、親密原則
二、對比原則
三园蝠、平衡原則
四渺蒿、相似原則
五、簡潔原則
六彪薛、封閉原則
七茂装、情感原則
由于篇幅原因，今天先來介紹前四個原則陪汽，剩下的我們下期再分享训唱。
一褥蚯、親密原則
空間上接近的內(nèi)容挚冤，我們更容易將之歸類到一組，這就是我們所說的親密原則赞庶。
如下圖：
我們很容易將唐僧训挡、孫悟空、沙僧分成一組歧强，而將豬八戒單獨分離出來澜薄，因為前三者離的更近。
我們來看下面這張圖：
你能分清標(biāo)題是屬于上面還是下面嗎摊册？
當(dāng)你了解了親密原則后肤京，就知道為什么分不清，這也就是我們學(xué)習(xí)理論知識的原因，當(dāng)我們看到錯誤的設(shè)計時忘分，可以說出哪里不對棋枕，而不是憑感覺。
那這個原則如何運用到我們界面設(shè)計上呢妒峦？
看下圖：
上圖是簡書文章列表中的一條重斑，我們在平時工作中也經(jīng)常會遇到這種信息排版。首先我們需要清楚肯骇，上圖的內(nèi)容有三個：上分割線窥浪、內(nèi)容區(qū)和下分割線。此時我們可以判斷笛丙，內(nèi)容區(qū)內(nèi)的所有間距一定小于內(nèi)容區(qū)與分割線的間距漾脂，因為根據(jù)親密性原則，有關(guān)聯(lián)的內(nèi)容會離的更近胚鸯，內(nèi)容區(qū)的內(nèi)容相對分割線來說符相，就是關(guān)聯(lián)性比較強的，所以它們的間距就會相對較小蠢琳。
這樣的間距規(guī)律還可以讓我們清晰的區(qū)分開每一條信息啊终，不會導(dǎo)致信息干擾。
親密性原則是我們在界面排版中最常用的原則之一傲须，大家一定要牢牢的記住并大量實踐蓝牲，為我們后期的排版設(shè)計打下堅實的基礎(chǔ)！
二泰讽、對比原則
我們經(jīng)常會遇到界面看著混亂的情況例衍，但又不知道為什么，其實大部分情況都是因為界面內(nèi)容對比不明顯而造成的已卸。
例如下圖：
雖然上圖符合親密原則佛玄，但似乎看著還是有些凌亂，其中一個很重要的原因就是因為界面信息內(nèi)容的對比不夠強烈累澡，我們不知道該看哪里梦抢！
而我們來看一下今日頭條的信息排版：
你會發(fā)現(xiàn)重要信息和次要信息的大小對比非常強烈，使我們聚焦在主要信息（標(biāo)題）上愧哟，這樣看著就不會那么散亂奥吩。
看完這個排版后再去解決上面那個散亂的問題，會不會更容易些呢蕊梧？大家不妨自己嘗試排一下霞赫，這樣會讓你的印象更加深刻。
我們平時也要多去研究一些排版肥矢，好的排版你需要去分析它為什么好端衰，不好的排版你需要分析它為什么不好，你能否排的更好，只有通過這樣不斷地刻意練習(xí)旅东，你才能扎扎實實的前進惕味。
回到正題，其實關(guān)于對比的方式還遠不止大小層面玉锌，還有顏色對比名挥、粗細對比、形狀對比主守、疏密對比等等禀倔，所以大家在進行對比排版的時候，不妨多維度考慮参淫，一定可以找到合適的解決方案救湖。
三、平衡原則
平衡原則是界面排版布局的首要原則涎才，大到整個官網(wǎng)鞋既，小到一張圖文，都需要我們對視覺平衡有一個良好的把控耍铜。
舉幾個例子
看上圖邑闺，我們可以發(fā)現(xiàn)，圖片下方的文字是左對齊棕兼，為了達到視覺上的平衡陡舅，設(shè)計師將VIP 圖標(biāo)和更新集數(shù)放在圖片右側(cè)。
再來看下圖：
我們會感覺整個頁面怪怪的伴挚，好像在向右上角傾斜靶衍，就是因為沒有遵循平衡原則，而當(dāng)我們將最下方的按鈕移動到右側(cè)時茎芋，如下圖：
整個頁面看著就會平衡很多颅眶。
這里需要注意一點，一些藝術(shù)類的海報排版為了達到某些效果田弥，可能會有意打破平衡涛酗，但那是特殊的平面藝術(shù)設(shè)計，而對于我們UI設(shè)計來說皱蹦，在進行界面排版的時候煤杀，大多數(shù)情況還是要遵循平衡原則眷蜈，這樣才能讓用戶感覺整個界面更加協(xié)調(diào)沪哺、舒服。
四酌儒、相似原則
我們需要對相似的內(nèi)容賦予相同的屬性辜妓，例如同一級別的標(biāo)題文字大小相同，相同顏色(如藍色等)的字體都可以點擊等等。
例如下圖：
上圖文字有兩處是藍色的籍滴，藍色使二者具有一定的相似性酪夷，而我們需要將相似性的內(nèi)容賦予相同的屬性：可點擊。
相反我們看下圖：
雖然設(shè)計者為了統(tǒng)一和強調(diào)孽惰，將電話和地址都作成藍色晚岭，但如果電話可點擊，而地址不可點擊勋功，就會給用戶產(chǎn)生困擾坦报，以致于整個頁面的交互都存在一定的問題。這一點也是我們必須要注意的內(nèi)容狂鞋，在進行設(shè)計的時候不要犯這種低級的錯誤片择。
當(dāng)然相似原則的因素也不只有文字顏色，還有背景色骚揍、方向字管、大小等等，有興趣的同學(xué)可以多多總結(jié)積累信不，大家一起交流嘲叔。
以上就是今天分享的界面排版的前四個原則，下一期會將后面的內(nèi)容補充完整抽活。
希望你能夠多多練習(xí)借跪，完善自己的排版知識體系，早日成為一名合格的資深視覺設(shè)計師酌壕。
