作為UI設計師，如何讓界面有規律有節奏地去展示信息內容？今天分享的這6個技巧或許可以幫助到你！

一. 親密原則

設計前對內容進行信息分層，屬于一個層級分為一組，有關聯的內容會離得更近，這樣的間距規律還會讓我們清晰地區分開每一條信息，不會導致信息干擾。

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

圖中內容有三個模塊：上間距、內容區域、下間距。

因此我們可以判斷內容區內間距一定小于上下間距，因為根據親密性原則，有關聯內容會離得更近，標題和價格又分為2個模塊，其中價格優惠之間信息屬于一個內容，所以他們的間距相對就比較小。

△（左圖）我們就無法弄清楚標題是區分上面圖片還是下面圖片

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

二. 對比原則

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

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

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

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

三. 平衡原則

平衡原則是界面排版布局的首要原則，大到整個官網，小到一張圖文，都需要我們對頁面的視覺平衡有很好的節奏控制。

△ Fancy為了避免左側視覺重點過多導致畫面不平衡，設計師將分享按鈕放置于頁面右側達到左右平衡

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

△ Ebay為了避免信息過多導致沒有視覺重點，設計師在設計列表時，采用加大右側信息間距以及顏色、字重來保持平衡。

△ 嚴選在設計時為了保持平衡，在標題上方兩側加上線條，讓頁面感覺更舒適。

四. 相似原則

△ Fancy頁面中所有與點擊相關的控件，比如，氣泡、按鈕還有鏈接都采用品牌藍色作為行動點。

△ Airbnb頁面中，只要是可以點擊的都是綠色文字。

△ Ebay的頁面中，所有能操作的頁面、按鈕、圖標、行動點，全部采用藍色做為行動點。

△ Facebook的頁面中，能點擊的圖標、文字按鈕都是灰藍色來協調統一。

五. 簡單原則

注意Sketch中對齊參數中的小數點，尤其是位置參數。我們經常在執行過程中不愛看圖層和大小，所以會導致位置的數值出現小數點或者奇數，從而使整個界面元素的間距、位置都不夠規范，如下圖：

1. 數字簡單

△ （左圖）間距的小數點，會讓頁面不嚴謹

△ （右圖）正確做法對齊每個像素，位置

2. 規則簡單

一張平面設計的字體種類不宜太多、對齊方式不宜太多.....因為規則太過繁瑣會讓設計變得復雜，甚至臃腫不堪。而UI設計師也是一樣的，能用一個規則解決的問題，就盡量不要使用兩個。

△ 間距規則簡單一致，復用

△ 間距規則統一

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

這樣四個距離，我們僅僅只用了兩個規則就解決了問題。比如，Facebook為了保持頁面簡潔，間距都采用一個規則解決，并且不失美感。

△ （左圖）4個間距規則，繁瑣缺乏統一

△ （右圖）簡化規則，從4個調整為2個

△ （左圖）優化前，間距規則冗余

△ （右圖）簡單規則優化后，簡單統一

3. 樣式簡單

今年流行一個趨勢就是「無線化分隔」。將分隔線去掉，成為一種樣式上的簡潔，這種技法分場景使用。

△ 韓國29CM、Airbnb、Pinterest 都采取了這種簡潔的分隔樣式

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

4. 起伏邊緣簡單

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

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

△（左圖）右側鋸齒嚴重

△（右圖）左右兩側對齊，減少鋸齒

△（左圖）右側鋸齒嚴重，參差不齊

△（右圖）左右兩側對齊，減少鋸齒

六. 封閉原則

將兩個部分的內容用線框封閉起來后，就更容易區分了。在移動端界面進行排版時，最常使用的封閉表現形式就是「卡片」，它用來區分各部分獨立的信息。

△ 同一組信息用卡片封閉

△（左圖）這張列表，由于間隔和顏色的原因，導致我們更傾向于縱向閱讀，這時候我們也可以使用封閉原則，將內容封閉起來。

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

設計策略

親密原則：先對內容進行信息分層，屬于一個層級分為一組，有關聯的內容會離的更近。

對比原則：通過顏色對比、粗細對比、形狀對比、疏密對比、大小對比，使我們聚焦在需要關注的信息上，在進行對比排版的時候，需要多維度考慮。

平衡原則：平衡原則是界面排版布局的首要原則。大到整個官網，小到一張圖文，都需要我們對頁面視覺平衡有很好的節奏控制。

相似原則：對相似的內容賦予相同的屬性。例如同一級別的標題文字大小相同，相同顏色(如藍色等)的字體都可以點擊等等，相似原則的因素也不只有文字顏色，還有背景色、方向、大小等等。

簡單原則：對頁面所有元素避免小數點。頁面間距規則簡單通用、視覺樣式輕量化、無線化分割，同時，注意頁面右邊邊緣對齊。

封閉原則：用于區分兩個獨立的模塊部分時一般采用封閉原則。封閉原則一般使用卡片、線框或間隔的顏色來封閉內容。

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

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

歡迎關注作者的微信公眾號：我們的設計日記，每周分享最新設計趨勢和設計經驗，科學設計方法。

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com