介面沒層次，到底哪裡出了問題？
最近有兩個朋友讓我幫忙看看作品的問題，發現其實沒什麼大問題，只是層次上稍微還有點不清晰，於是想著要不寫下來……
感謝「海鹽社」的小夥伴：@火火奐 @大甜甜 對於這篇分享文章給予的幫助，也希望對大家有用。
剛入行的新手設計師容易出現一個問題，接到需求就開始設計，最後出現的介面和原型幾乎一模一樣，唯一的區別就是上了色，加了圖片和圖示，最後提交稽核時老闆反饋，“這個介面看上去太“平”了，你在這裡加個背景色吧；這個圖示太小，你再放大一點；這個位置你在加點裝飾……”。
這主要原因還是介面沒層次導致的，雖然老闆對設計不太清楚，但是關於業務邏輯我們的設計稿是否表達清楚，重點是否突出這個他最清楚了。
那麼如何才能提高介面層次呢？我們可以從兩個方面入手，在設計前我們需要考慮突出內容層次的方法；在設計中需要考慮突出視覺層次的方法。
目錄
一、突出內容層次的方法
1. 將相關聯的元素進行組合
2. 確認內容優先順序，將優先順序高的放在前面
3. 確認重要內容，將其差異化設計
二、提高視覺層次的方法
1. 利用線、面、留白將模組進行分割
2. 利用大小、投影、背景圖突出視覺層次
3. 利用顏色對比提高視覺感受
4. 利用文字對比提高介面的可閱讀性
一、突出內容層次的方法
當一個介面資訊量比較大時，層次感好的介面使用者進來能快速的獲得想要的資訊，同時最終達到產品的目的。而層次感差的介面使用者看半天也不知道要做什麼，看一會也就走了。因此良好的視覺層級是介面成功的關鍵。在設計前我們需要將相關聯的元素進行組合；確認內容優先順序，將優先順序高的放在前面；確認重要內容，並將其差異化設計。
1.將相關聯的元素進行組合
在設計前，產品原型圖已經將我們的元素進行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的內容層次呢？設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起，不相關的拉開距離，同時形成一定的規律和節奏，這樣會讓使用者閱讀起來更輕鬆。
需要注意的是，介面中的間距需要滿足一定的規律和節奏，比如模組之間的間距大於標題到內容的間距；在內容中不相關聯的內容間距大於相關聯的間距，如下圖所示。
京東金融的保險頁面，從左圖可以看出模組之間的距離是48px，標題和內容之間的間距是32px；右圖是為您定製的卡片中的標題、價格、標籤、投保記錄等不相關的內容間距大於價格下方的65歲爸媽也能保的輔助文字的間距。
另外，從上圖我們也注意到他的間距都遵循一定的規律和節奏。比如間距都是8的倍數，另外從標註可以看出間距有一定的梯度16px、32px、40px、48px，這些細節都是可以提高介面的層次，幫助使用者理解。
2.確認內容優先順序，將優先順序高的放在前面
將相關聯的資訊整理之後就需要確認模組的優先順序了，由於使用者的瀏覽順序是自上而下的，因此我們需要將優先順序高的模組放到前面。
那麼優先順序如何判斷呢？大家可以從三個方面去考慮，第一是遵循使用者的瀏覽習慣；第二是使用者想看的內容；第三是產品想要使用者看的內容，如下圖所示。
天貓個人主頁的個人資訊區排在最前面就是遵循了使用者的瀏覽習慣；其次是我的訂單和物流資訊排在了第二的位置這是使用者想看到的內容；最後是我的福利排在了第三位這是產品想給使用者看的內容。
京東金融的我的頁面使用者的資產資訊排在最前面，他首先是遵循了使用者的瀏覽習慣，同時也是使用者想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給使用者看的內容，最後是福利大禮包排在第三位這也是產品想個使用者看的內容。
3.確認重要內容，將其差異化設計
在設計時我們需要知道，優先順序高的模組不一定重要程度就高，因此我們還需要確認模組的重要層級，同時利用背景、佈局等方式進行差異化設計，用起使用者注意，如下圖所示。
網易嚴選中的新人專享禮和品牌製造商直供就採用了差異化設計，職工類模組採用的是普通的宮格式佈局，新人專享禮採用新增背景的方式，加深了模組的縱深感，對比其他模組更加突出。
大麥網中的特色模組和其他模組也採用了差異化設計，特色模組採用拼圖的方式設計，其他模組採用列表的方式進行設計，使用者進入頁面首先就能夠看到這個模組，提高使用者接受資訊的效率。
土豆視訊個人主頁的列表部分也採用了差異化設計，訊息提醒、我的收藏、觀看記錄、我的快取這四個使用者常用的功能採用宮格式佈局，其他不常用的我的會員、客戶與反饋、設定採用列表式結構，這樣也能夠提高使用者操作速度。
二、提高視覺層次的方法
當然內容層級確定了顯然不夠，我們還需要考慮突出介面的視覺層次，這樣使用者才能夠清晰舒適的瀏覽我們的介面。那麼提高視覺層次的方法有哪些呢？在設計中，我們可以利用線、面、留白將模組進行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高介面的可閱讀性。
1.利用線、面、留白將模組進行分割
大家記得在設計前我們已經對介面中相關聯的元素進行了組合，組合之後就可以利用線、面、留白的方式，將不相關聯的元素進行分割，提高介面的視覺層次，從而提高使用者的瀏覽和操作效率。
線分割：是最為基礎的分割方式，其優勢是佔用空間小、分割感弱，多用於列表、Feed流中。需要注意的是，分割線顏色設定需要非常淺，避免模組之間強烈的分割感，比如橘子娛樂的列表就是採用若隱若現的線，讓列表中的內容更規整。
面分割：也可叫背景欄分割，其優勢是佔用空間小、可操作性高，同時能夠更好的區分不同模組之間的關係，多用於模組和模組之間的分割，比如轉轉個人主頁的模組採用面分割瀏覽性更強。
留白分割：是iOS11釋出之後興起的以留白或間距的方式進行分割，其優勢是無強烈的分割感，介面清爽，多用於比較有規律或以大圖為主的模組之間的分割，比如轉轉主頁下方的賣二手還錢、買實惠好貨等，其內容部分都較為規則，採用該方式較為合適。
2.利用投影、大小、背景圖突出視覺層次
為了突出介面的視覺層次，我們還可以通過投影、大小、佈局等增加介面的對比，從而突出重要資訊。
投影：是介面對比較常用的一種方式，其優勢是提升介面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關係，多用於卡片風格的設計中，比如Keep均是採用卡片風格的設計，新增投影后讓介面視覺層次更突出了。
大小：是大眾最為熟知的對比方式，其優勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導使用者瀏覽路徑，比如ofo黃色的大按鈕遠遠都能看見，該頁面就一個目的掃碼用車。
背景圖：往往不如投影和大小常用，但是它的使用可以將模組從其他樣式中年凸現出來，多用於banner、推薦等重要模組中，比如美圖秀秀的推薦模組，該模組可以說是美圖的核心模組。
3.利用顏色對比提高視覺感受
顏色是最容易感知到的對比方式，通過顏色我們可以明確哪些是重要資訊，在使用中我們可以通過色相、明暗、飽和度上進行對比，其多用在按鈕、重要資訊、導航、背景板中。
自如首頁上的租房、服務、旅行採用對比色進行強調對比，進入頁面使用者就能夠清楚這三塊是是介面的核心功能，同時引導使用者關注右側的具體服務資訊。
淘票票首頁中的按鈕、引導提示、標籤欄選中均用了紅色進行強調對比，很容易引起使用者的注意，讓使用者看一眼就知道如何操作。
招商銀行首頁中的話題PK採用對比色進行強調對比，很容易引起使用者操作的興趣。
4.利用文字對比提高介面的可閱讀性
文字的層次感往往和字型大小和明暗有關，其中字型大小是提高文字資訊層級的重要手段，在文字排版中如果文字之間的層次不清晰，那麼一定是大小的對比不夠，在UI中字型大小對比往往在4-8px較為適合，如下圖所示。
當字型大小對比適合之後就需要通過通過字型的明暗突出主要資訊，弱化次要資訊，從而提高介面的可閱讀性，如下圖所示。
在UI設計中我們往往都設定了字型規範，這樣不僅能夠達到設計統一，同時也有很好的對比性，常用字號為40, 36, 32,28,24, 22(px)，比如優酷的星球頁面，通過字型大小，顏色深淺的對比，讓使用者首先看到重要資訊，弱化次要資訊。
三、總結
在介面設計中為了降低使用者的理解成本，突出重點內容，讓使用者使用起來舒適，就需要有個清晰的內容層次和視覺層次。
在設計前我們需要考慮將相關聯的元素進行組合；確認內容優先順序，將優先順序高的放在前面；確認重要內容，將其差異化設計。
在設計中我們可以利用線、面、留白將模組進行分割；利用投影、大小、背景圖突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高介面的可閱讀性。
參考引文：
學這三招讓你的UI設計更有層次感http://t.cn/EtJg9KB
格式塔原理在 UI 設計中的運用http://t.cn/EtJglhz
如何提高介面設計中的層次感？來看這篇超全面的總結！http://t.cn/EyB5I5H
6個小技巧，讓你的視覺層次“蹭蹭蹭”提升！http://t.cn/EAY8jPl
《破繭成蝶》劉津 李月 人民郵電出版社 2017年出版 第6章 第二節 設計友好而易用的介面
微信公眾號： 海鹽社