剛入行的你是否經常被吐槽界面設計沒層次？其實，想要提高界面設計層次感，可以從以下兩方面入手：

剛入行的新手設計師容易出現一個問題，接到需求就開始設計，最后出現的界面和原型幾乎一模一樣，唯一的區別就是上了色，加了圖片和圖標。

最后提交審核時老板反饋：

“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標太小，你再放大一點；這個位置你在加點裝飾……”

這主要原因還是界面沒層次導致的，雖然老板對設計不太清楚，但是關于業務邏輯我們的設計稿是否表達清楚，重點是否突出這個他最清楚了。

那么如何才能提高界面層次呢？我們可以從兩個方面入手，在設計前我們需要考慮突出內容層次的方法；在設計中需要考慮突出視覺層次的方法。

突出內容層次的方法

當一個界面信息量比較大時，層次感好的界面用戶進來能快速的獲得想要的信息，同時最終達到產品的目的。而層次感差的界面用戶看半天也不知道要做什么，看一會也就走了。

因此良好的內容層級是界面成功的關鍵。在設計前我們需要將相關聯的元素進行組合；確認內容優先級，將優先級高的放在前面；確認重要內容，并將其差異化設計。

1. 將相關聯的元素進行組合

在設計前，產品原型圖已經將我們的元素進行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的視覺層次呢？

設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起，不相關的拉開距離，同時形成一定的規律和節奏，這樣會讓用戶閱讀起來更輕松。

需要注意的是，界面中的間距需要滿足一定的規律和節奏，比如模塊之間的間距大于標題到內容的間距；在內容中不相關聯的內容間距大于相關聯的間距，如下圖所示：

京東金融的保險頁面，從左圖可以看出模塊之間的距離是48px，標題和內容之間的間距是32px；右圖是為您定制的卡片中的標題、價格、標簽、投保記錄等不相關的內容間距大于價格下方的65歲爸媽也能保的輔助文字的間距。

另外，從上圖我們也注意到他的間距都遵循一定的規律和節奏。比如間距都是8的倍數，另外從標注可以看出間距有一定的梯度16px、32px、40px、48px，這些細節都是可以提高界面的層次，幫助用戶理解。

2. 確認內容優先級，將優先級高的放在前面

將相關聯的信息整理之后就需要確認模塊的優先級了，由于用戶的瀏覽順序是自上而下的，因此我們需要將優先級高的模塊放到前面。

那么優先級如何判斷呢？大家可以從三個方面去考慮：

第一是遵循用戶的瀏覽習慣；

第二是用戶想看的內容；

第三是產品想要用戶看的內容。

如下圖所示：

天貓個人主頁的個人信息區排在最前面就是遵循了用戶的瀏覽習慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容；最后是我的福利排在了第三位這是產品想給用戶看的內容。

京東金融的我的頁面用戶的資產信息排在最前面，他首先是遵循了用戶的瀏覽習慣，同時也是用戶想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給用戶看的內容，最后是福利大禮包排在第三位這也是產品想個用戶看的內容。

3. 確認重要內容，將其差異化設計

在設計時我們需要知道，優先級高的模塊不一定重要程度就高，因此我們還需要確認模塊的重要層級，同時利用背景、布局等方式進行差異化設計，用起用戶注意，如下圖所示：

網易嚴選中的新人專享禮和品牌制造商直供就采用了差異化設計，職工類模塊采用的是普通的宮格式布局，新人專享禮采用添加背景的方式，加深了模塊的縱深感，對比其他模塊更加突出。

大麥網中的特色模塊和其他模塊也采用了差異化設計，特色模塊采用拼圖的方式設計，其他模塊采用列表的方式進行設計，用戶進入頁面首先就能夠看到這個模塊，提高用戶接受信息的效率。

土豆視頻個人主頁的列表部分也采用了差異化設計，消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局，其他不常用的我的會員、客戶與反饋、設置采用列表式結構，這樣也能夠提高用戶操作速度。

提高視覺層次的方法

當然內容層級確定了顯然不夠，我們還需要考慮突出界面的視覺層次，這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢？

在設計中，我們可以利用線、面、留白將模塊進行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高界面的可閱讀性。

1. 利用線、面、留白將模塊進行分割

大家記得在設計前我們已經對界面中相關聯的元素進行了組合，組合之后就可以利用線、面、留白的方式，將不相關聯的元素進行分割，提高界面的視覺層次，從而提高用戶的瀏覽和操作效率。

線分割：是最為基礎的分割方式，其優勢是占用空間小、分割感弱，多用于列表、Feed流中。需要注意的是，分割線顏色設置需要非常淺，避免模塊之間強烈的分割感，比如橘子娛樂的列表就是采用若隱若現的線，讓列表中的內容更規整。

面分割：也可叫背景欄分割，其優勢是占用空間小、可操作性高，同時能夠更好的區分不同模塊之間的關系，多用于模塊和模塊之間的分割，比如轉轉個人主頁的模塊采用面分割瀏覽性更強。

留白分割：是iOS11發布之后興起的以留白或間距的方式進行分割，其優勢是無強烈的分割感，界面清爽，多用于比較有規律或以大圖為主的模塊之間的分割，比如轉轉主頁下方的賣二手還錢、買實惠好貨等，其內容部分都較為規則，采用該方式較為合適。

2. 利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次，我們還可以通過投影、大小、布局等增加界面的對比，從而突出重要信息。

投影：是界面對比較常用的一種方式，其優勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關系，多用于卡片風格的設計中，比如Keep均是采用卡片風格的設計，添加投影后讓界面視覺層次更突出了。

大?。?/strong>是大眾最為熟知的對比方式，其優勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導用戶瀏覽路徑，比如ofo黃色的大按鈕遠遠都能看見，該頁面就一個目的掃碼用車。