作為UI設(shè)計(jì)師，如何讓界面有規(guī)律有節(jié)奏地去展示信息內(nèi)容？今天分享的這6個(gè)技巧或許可以幫助到你！

一. 親密原則

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

我們很容易將1、2分成一組，而將3、4分成一組，因?yàn)?、2離得更近。

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

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

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

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

二. 對(duì)比原則

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

這些App都是通過(guò)字號(hào)、粗細(xì)以及間距大小進(jìn)行對(duì)比來(lái)區(qū)分信息和信息之間關(guān)系，讓整個(gè)頁(yè)面動(dòng)線看起來(lái)更加流暢，閱讀節(jié)奏更舒適。

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

△（右圖）重要信息和次要信息對(duì)比強(qiáng)烈，通過(guò)字體大小、字重來(lái)突出標(biāo)題的信息，讓用戶焦點(diǎn)聚焦在標(biāo)題上。

三. 平衡原則

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

△ Fancy為了避免左側(cè)視覺重點(diǎn)過(guò)多導(dǎo)致畫面不平衡，設(shè)計(jì)師將分享按鈕放置于頁(yè)面右側(cè)達(dá)到左右平衡

△ Pinterest為了保持平衡，將用戶頭像放置左邊作為視覺焦點(diǎn)，右側(cè)放置入口按鈕，起到互相平衡的作用

△ Ebay為了避免信息過(guò)多導(dǎo)致沒有視覺重點(diǎn)，設(shè)計(jì)師在設(shè)計(jì)列表時(shí)，采用加大右側(cè)信息間距以及顏色、字重來(lái)保持平衡。

△ 嚴(yán)選在設(shè)計(jì)時(shí)為了保持平衡，在標(biāo)題上方兩側(cè)加上線條，讓頁(yè)面感覺更舒適。

四. 相似原則

△ Fancy頁(yè)面中所有與點(diǎn)擊相關(guān)的控件，比如，氣泡、按鈕還有鏈接都采用品牌藍(lán)色作為行動(dòng)點(diǎn)。

△ Airbnb頁(yè)面中，只要是可以點(diǎn)擊的都是綠色文字。

△ Ebay的頁(yè)面中，所有能操作的頁(yè)面、按鈕、圖標(biāo)、行動(dòng)點(diǎn)，全部采用藍(lán)色做為行動(dòng)點(diǎn)。

△ Facebook的頁(yè)面中，能點(diǎn)擊的圖標(biāo)、文字按鈕都是灰藍(lán)色來(lái)協(xié)調(diào)統(tǒng)一。

五. 簡(jiǎn)單原則

注意Sketch中對(duì)齊參數(shù)中的小數(shù)點(diǎn)，尤其是位置參數(shù)。我們經(jīng)常在執(zhí)行過(guò)程中不愛看圖層和大小，所以會(huì)導(dǎo)致位置的數(shù)值出現(xiàn)小數(shù)點(diǎn)或者奇數(shù)，從而使整個(gè)界面元素的間距、位置都不夠規(guī)范，如下圖：

1. 數(shù)字簡(jiǎn)單

△ （左圖）間距的小數(shù)點(diǎn)，會(huì)讓頁(yè)面不嚴(yán)謹(jǐn)

△ （右圖）正確做法對(duì)齊每個(gè)像素，位置

2. 規(guī)則簡(jiǎn)單

一張平面設(shè)計(jì)的字體種類不宜太多、對(duì)齊方式不宜太多.....因?yàn)橐?guī)則太過(guò)繁瑣會(huì)讓設(shè)計(jì)變得復(fù)雜，甚至臃腫不堪。而UI設(shè)計(jì)師也是一樣的，能用一個(gè)規(guī)則解決的問(wèn)題，就盡量不要使用兩個(gè)。

△ 間距規(guī)則簡(jiǎn)單一致，復(fù)用

△ 間距規(guī)則統(tǒng)一

△ 由于親密原則，我們知道上下間距（紅色高度）一定大于內(nèi)容區(qū)間距（綠色高度），但是為了規(guī)則的簡(jiǎn)潔，內(nèi)容區(qū)的所有間隔（綠色高度）可以采用同一個(gè)規(guī)則，而上下間距（紅色高度）也可以相同。

這樣四個(gè)距離，我們僅僅只用了兩個(gè)規(guī)則就解決了問(wèn)題。比如，F(xiàn)acebook為了保持頁(yè)面簡(jiǎn)潔，間距都采用一個(gè)規(guī)則解決，并且不失美感。

△ （左圖）4個(gè)間距規(guī)則，繁瑣缺乏統(tǒng)一

△ （右圖）簡(jiǎn)化規(guī)則，從4個(gè)調(diào)整為2個(gè)

△ （左圖）優(yōu)化前，間距規(guī)則冗余

△ （右圖）簡(jiǎn)單規(guī)則優(yōu)化后，簡(jiǎn)單統(tǒng)一

3. 樣式簡(jiǎn)單

今年流行一個(gè)趨勢(shì)就是「無(wú)線化分隔」。將分隔線去掉，成為一種樣式上的簡(jiǎn)潔，這種技法分場(chǎng)景使用。

△ 韓國(guó)29CM、Airbnb、Pinterest 都采取了這種簡(jiǎn)潔的分隔樣式

這樣的排版方法使整個(gè)頁(yè)面看著輕量、干凈、大氣、更加突出內(nèi)容，甚至能夠增加用戶的欣賞時(shí)間。

4. 起伏邊緣簡(jiǎn)單

起伏邊是一段文字的邊緣。當(dāng)視線從行尾跳至下一行首時(shí)，大腦最好要能判斷出下一次跳躍的角度和距離，把每次跳躍都想象成跑過(guò)跳板。如果間距保持一致，就會(huì)快很多。

△ 在英文的段落排版中，通常是左側(cè)對(duì)齊，讓右側(cè)自然形成起伏邊（rag）。而Eaby和谷歌卻是保持左右邊緣對(duì)齊，方便閱讀。網(wǎng)易新聞也是采用左右兩側(cè)對(duì)齊，比較協(xié)調(diào)。

△（左圖）右側(cè)鋸齒嚴(yán)重

△（右圖）左右兩側(cè)對(duì)齊，減少鋸齒

△（左圖）右側(cè)鋸齒嚴(yán)重，參差不齊

△（右圖）左右兩側(cè)對(duì)齊，減少鋸齒

六. 封閉原則

將兩個(gè)部分的內(nèi)容用線框封閉起來(lái)后，就更容易區(qū)分了。在移動(dòng)端界面進(jìn)行排版時(shí)，最常使用的封閉表現(xiàn)形式就是「卡片」，它用來(lái)區(qū)分各部分獨(dú)立的信息。

△ 同一組信息用卡片封閉

△（左圖）這張列表，由于間隔和顏色的原因，導(dǎo)致我們更傾向于縱向閱讀，這時(shí)候我們也可以使用封閉原則，將內(nèi)容封閉起來(lái)。

△（右圖）使用封閉原則，將內(nèi)容封閉起來(lái)（每隔一條信息使用深色背景）。這樣，不僅可以讓我們傾向于橫向閱讀，而且能更好的區(qū)分每條獨(dú)立的信息內(nèi)容。

設(shè)計(jì)策略

親密原則：先對(duì)內(nèi)容進(jìn)行信息分層，屬于一個(gè)層級(jí)分為一組，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近。

對(duì)比原則：通過(guò)顏色對(duì)比、粗細(xì)對(duì)比、形狀對(duì)比、疏密對(duì)比、大小對(duì)比，使我們聚焦在需要關(guān)注的信息上，在進(jìn)行對(duì)比排版的時(shí)候，需要多維度考慮。

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

相似原則：對(duì)相似的內(nèi)容賦予相同的屬性。例如同一級(jí)別的標(biāo)題文字大小相同，相同顏色(如藍(lán)色等)的字體都可以點(diǎn)擊等等，相似原則的因素也不只有文字顏色，還有背景色、方向、大小等等。

簡(jiǎn)單原則：對(duì)頁(yè)面所有元素避免小數(shù)點(diǎn)。頁(yè)面間距規(guī)則簡(jiǎn)單通用、視覺樣式輕量化、無(wú)線化分割，同時(shí)，注意頁(yè)面右邊邊緣對(duì)齊。

封閉原則：用于區(qū)分兩個(gè)獨(dú)立的模塊部分時(shí)一般采用封閉原則。封閉原則一般使用卡片、線框或間隔的顏色來(lái)封閉內(nèi)容。

「讓你輕松掌握排版原則」

• 《寫給UI設(shè)計(jì)新人的知識(shí)體系指南》
• 《自學(xué)體系第一課！寫給新人設(shè)計(jì)師的界面排版原則（上）》
• 《自學(xué)體系第二課！寫給新人設(shè)計(jì)師的界面排版原則（下）》
• 《用超多案例，幫你學(xué)會(huì)排版中最基礎(chǔ)的對(duì)比和對(duì)齊原則》

歡迎關(guān)注作者的微信公眾號(hào)：我們的設(shè)計(jì)日記，每周分享最新設(shè)計(jì)趨勢(shì)和設(shè)計(jì)經(jīng)驗(yàn)，科學(xué)設(shè)計(jì)方法。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com