編輯導語：大家在日常排版過程中，有沒有遇到過這樣的問題，當面對各種信息時，不知道如何對這些信息進行分層排版，常常會陷入比較糾結的場面。作者總結了信息層級排列的方法，與你分享，希望能夠對你有所幫助。

這篇文章從另外一種維度去闡述信息層級，個人認為有效地解決了自己大部分排版的問題。希望對大家有所幫助。

老規矩，先看目錄，按需取用，已經將重點標記出來了。

01 寫在前面

大家有沒有遇到這樣的問題，當你面對非常復雜的信息時，在進行信息整理設計時，往往會陷入比較糾結的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續閱讀。

本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。

02 信息層級的作用

信息層級存在于我們目前看到的每一個畫面。它本質上是信息組織的一種方式，通過信息的放大縮小和對應的位置，能夠將復雜的信息分為不同的模塊呈現在我們的視野中。

大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。

不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優秀的信息層級就像右圖一樣能夠讓我們快速且準確地識別出畫面想要傳遞的信息。

因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰傳遞業務價值，合理的信息層級劃分也是提高產品體驗的重要部分，好的信息層級則意味著更好的使用體驗。

03 如何做好信息層級

既然信息層級對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。

但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。

即使我對排版四個原則非常熟悉，在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：

經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，本質上都存在一個簡單的邏輯：那些優秀的頁面設計都把主內容的層級控制在了三層左右，如下圖所示。

因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。

比如我們看下面這兩個例子，左邊層級因為特別復雜，造成用戶獲取信息效率變低，而通過層級的轉換，我們可以將其變得更簡單且易讀。

再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：

因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內容層級控制在三層左右。且這三層內有比較明顯的對比關系。

有同學看到這肯定要問了，這個道理我也懂啊，可是在實際業務中大部分時間拿到的信息太多，根本做不到保持在三層以內。

別急，這篇文章的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。

其實我們在實際中的大部分優秀頁面，在本身的信息層級上可能都非常復雜，但我們可以通過一系列的方法，去減輕這種多層級的影響。

從而讓我們的頁面即使承載了很多復雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。

04 信息層級前置處理

這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。

源頭降低的本質就是判斷我們當前所要呈現的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。

1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響

比如當你在進行打車的時候，當你輸入目的地之前，一切其他的信息都無需呈現。當你輸入目的地后。

車輛的相關信息和價格才會進行呈現，當你打車后，司機的相關信息才會進行呈現。這些都是按照用戶的使用場景來進行對應的呈現。

2. 當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現

當你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。

比如當你瀏覽新聞的時候，標題永遠是最關注的，而評論，作者，簡介等都是可以忽略的信息。

上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。

05 信息層級排布處理

信息排布的本質是通過我們對信息進行排列上的調整，來將多余的層級融入到三層以內。從而讓我們整體的頁面顯得更加簡潔。

通過目前的實踐總結，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。

1. 信息分組

信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息打散，從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。

那么這三種方式有沒有區分呢，VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。

但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：

通過這三種場景的區別，我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。

2. 利用組件拆分

組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。

▍樹形結構：對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。

▍表格結構：對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。

▍步驟條：步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現，從而減少當前頁面的復雜度。

▍選項卡：選項卡更適合于同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。

由于組件這一塊大家的認知已經比較全了，在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。

3. 更改布局

通過改變布局的方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這句話什么意思呢，舉個簡單的例子：

從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：

當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，比如上述的兩欄結構，甚至三欄結構，從而讓整體變得更加簡潔。

4. 信息融入

我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產品設計中將標題與tab利用分割排列在一起，從而變為同一層級，這個時候就不會出現四層的復雜結構，頁面還是保持三層結構，通過這種方式有效降低了頁面的復雜度。

信息融入這個方法，當我們在進行B端布局時，用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。

但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。

5. 信息弱化

信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，我們再看一個例子：

可以看到TAPD將「另存為視圖功能」與「缺陷統計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。

在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：

因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。

通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化在三層以內，從而讓我們最終的頁面呈現不會太過復雜，更容易被用戶理解。

但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。

06 信息層級小細節

在研究的過程中，也總結了目前在進行信息層級排布過程中比較糾結的一些細節點，也分享給大家。希望對遇到相同問題的同學一些幫助。

1. 被忽略的沿著字的軸線對齊

大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節點，那就是沿著字的軸線對齊。比如下圖兩個例子：

在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經過對比過后明顯發現右邊的圖整體相比于左側會更整齊，而這就是說的沿著字的軸線對齊。

這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。

而左側因為標題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現中顯得更整齊。

2. 卡片是用線框還是背景

這是我平時在做設計呈現時也會糾結的一個問題。當你想用卡片來呈現視覺時，你有沒有糾結過到底是用線框卡片還是背景色填充呢。

我就曾陷入這種糾結，但在去搜索查閱時，發現目前其實關于這塊相關的資料，因此在大部分情況下都是由設計師自行決定的。但經過線上產品的調研發現，這塊內容其實也包含著一定的規則：

（1）取決于卡片的數量

對于卡片少的其實可以用色塊來呈現，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現，舉個簡單的例子：

通過coding和飛書的卡片對比，你會發現卡片過多時線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。右側整體的呈現會顯得更好一些。

（2）取決于頁面的視覺重心

這里頁面視覺重心的含義是當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調，可以看到下圖的例子，右側的頁面會相對更穩重一點。

3. 底色用灰色塊還是彩色塊

在進行色塊時，時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢，我們應該何時使用這兩種色彩呢。

我們先看一下案例：

可以看出目前這兩種顏色的運用更多的是功能上的區分：

• 彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。
• 而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。

所以我們可以根據當前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結。

07 寫在最后

本期的內容到這里就結束了。關于這期的信息層級內容，真正需要深入了解的是控制信息層級背后的方法。

很多時候我們看見的優秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現上顯得不復雜，這其實也是我們在實際工作中需要注意的很重要的一個點。

本文重點內容再回顧，當我們遇見復雜的信息層級時，需要分三步：

1. 明確當前所有信息的必要性和重要分級，需要從源頭去深入了解；
2. 運用五個方法可以有效降低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3. 同時在運用過程中需要注意影響層級的小細節

以上是本文關于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。

本文由 @蒙東東東 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議