每天打開手機，各式各樣的信息紛至沓來，每個 App 每個頁面都有好多話要說。當信息匯集在一起的時候，如何能讓用戶一打開頁面就能輕松理解各個信息元素之間的關系與差異呢？這就要靠我們設計師在設計之初構建合理的視覺層次了。一個頁面的信息層級是不是清晰明了，很大程度上影響到用戶的信息獲取效率和使用體驗。

在平面和網頁設計中，視覺層次一般分為三層：主層（Primary）、副層（Secondary）和三層（Tertiary）。其中主層一般是指頭條標題等核心信息，也是要讓用戶第一眼就注意到的信息。副層可以是小標題等信息，展示出主要內容與提綱。最后的三層一般由正文或其他額外信息構成，展示全部的內容，可以用較小的字號。

△ 圖片來自網絡

不過當我們在設計移動端頁面的時候，因為屏幕尺寸的限制，有時候需要酌情減少頁面的層級，這樣才能讓信息不會過于繁雜。

一般一個頁面會根據功能分為多個模塊，下面我們就從「模塊內」和「模塊之間」兩個角度來談談如何構建合理的視覺層次。

一、一個模塊中的層次感

我們所說的「模塊」指的是什么呢？可以是一張卡片里面的內容，也可以是一個信息列表等等，總而言之是一個信息組。當我們拿到需求的時候，應該理解每個信息組里面的每條信息的價值，并且給他們分一個類。

比如有時候，PM 同學跑過來說：「我想加個大按鈕」，「不想讓用戶注意到刪除功能，但是一定要有」 ，或者「這次就想試一試，展示了這條信息點擊率會不會漲」 ，又或是「這條信息展不展示都行，你設計的時候自己看吧……」 好好好，需求我都懂，那么該如何分類呢？

四象限法則相信大家都聽說過，那么我們就改編一下這個法則，給每個信息組中的信息按「重要——不重要」「必要——不必要」來分個類吧。

面對又重要又必要的信息還等什么，一定要大要明顯，讓用戶第一眼看到。

重要卻不必要的信息，一般是從產品或流程本身來講不是一定要有的信息，但是因為某種原因想要突顯給用戶，比如在信用卡的產品列表中加入每張卡的推薦理由，或者在餐廳列表中展示某某名人去過這家店……這些信息在列表中不是必須有的，但是對于引導用戶判斷又十分的重要，所以我們可以次一級的來展示，要讓用戶可以注意到，但也不能搶了風頭。

哪種信息是必要但不重要的呢？比如一個活動彈窗的關閉按鈕，一個訂單的刪除功能，一條免責聲明等等，我們不希望用戶注意到他們，但是這些功能又不得不存在，那么就要弱化展示這些信息。

不必要又不重要的信息，一般情況是要去掉的，除非在設計中信息太少了空蕩蕩的，為了排版美觀才會把這種邊緣信息留下占位。

接下來，當我們整理好信息層級之后，要靠什么手段來展示這些層級呢？答案是加大對比。

1. 大小

對比的第一步就是大小的對比，在大家的認知中，大的東西比小的東西更顯眼、更重要。用戶會自然而然地關注到尺寸較大的文本和尺寸較大的圖，比如下圖中一張足夠大的信用卡卡面圖片，一秒吸引目光。再比如頁面中的大標題，都是這樣的效果。

△ 截圖來自查查公積金

在內容列表中，標題名字類的信息一般會使用14-17dp左右，補充說明內容一般使用11-12dp左右，具體的使用情況要根據信息的多少、信息的重要程度、上下對比等情況來進行具體的設計。

△ 圖片來自融360、微信

2. 重量

有時候由于空間的限制，字號不能再大了？字號大了也沒拉開層次？試試增加字重量吧。iOS&Android 由于字體不同，加粗的效果也不同，請酌情增減。

3. 顏色

顏色對于用戶的感知有著巨大的影響。所以在進行視覺層次構建的時候，不同的顏色可以輕松構成層次結構，強烈的顏色比如紅色、橙色都很容易引人注意。白色和淺灰通常可以用來作為大面積的背景色，和其他的顏色構成對比。在設計的時候可以運用 App 的主色和輔助色來拉開視覺層次。

△ 圖片來自查查公積金、融360視覺規范

4. 對比

我們以上圖這個貸款列表舉一個綜合的例子，四條信息從最突出到最弱化分別標為了1、2、3、4，這幾條信息中的字號以至少6px的差值進行遞減，并且只有前兩條信息進行了加粗處理，同時顏色的選擇上也是從強到弱：

大小、重量、顏色的運用，歸根結底就是制造對比，這也是創建層次結構依靠的核心。一個元素和另外一個元素構成對比，才能有層次的展示他們之間重要程度上的差異，讓用戶更加容易獲取到信息。

二、模塊之間的層次感

當我們已經合理的排布了一個模塊內的視覺層次，接下來要做的就是把多個模塊組合起來。

心理學家基于格式塔原理來檢測用戶對于元素之間關系的視覺感知，發現人們傾向于將視覺關系靠近的元素群視作為有關系的一組。值得說明的是，位置接近的元素，即使色彩形狀大小都不一致，但只要他們足夠靠近，都會被人們視為一組。

△ 圖片來自網絡

視覺層次的建立很大程度上是基于格式塔原理，所以我們要關注 UI 元素之間的靠近性。

基于這種認知，即使每個模塊之中的內容有對比有強弱，但是只要每個信息組之間的元素的距離較近，并與其他信息組之間的距離拉遠，留下足夠的留白空間，就可以清晰的將整個頁面的層次拉開。留白和元素本身之間構成的疏密對比，會更好的讓用戶注意到留白包圍下的內容。

△ 圖片來自網絡

現在很多 App 都是通過對比與留白來進行頁面中的「無形分割」，減少了很多線和塊的運用，讓頁面更為簡潔?；旧显瓌t為：文字與圖片對齊，與相關內容的間距要小于其他內容，標題要大。

△ 圖片來自 Airbnb

當字體足夠大的時候，會比小字符更有「圖形感」，更加突出，可以更明確的告訴用戶從這里開始是下一段了，字號一般在20-24dp之間，根據內容和整體風格來決定，顏色一般選擇比較深的顏色 ，必要的時候可以加粗。當其他內容都是比較小的文字的時候，欄目標題也要控制一下大小。如果圖片較多，標題就可以再大一些。

具體多大，就要在頁面和諧的基礎上多試幾次……

△ 圖片來自查查公積金

如上圖，在查查公積金 App 中，當我們設計信用卡詳情頁的時候，由于整個頁面里圖形比較突出，看起來用加粗的「辦卡禮」、「專享特權」標題更合適一些?？墒窃谕瑐€ App 的公積金詳情頁里面，整個頁面用色都比較清淡，內容都是一些文字信息，如果內容標題加粗的話會顯得比較突兀。所以綜合整個 App 的頁面風格權衡之后，還是選擇了左側沒有加粗字體的設計。

總體來講，UI 設計是沒有公式的，只能有經驗之談和大體上的建議，很多時候都要設計師一次次的去嘗試、去對比、去感受，才能給出針對當下頁面需求最合理的層次構建與解決方案。