編輯導(dǎo)語：大家在日常排版過程中，有沒有遇到過這樣的問題，當(dāng)面對各種信息時(shí)，不知道如何對這些信息進(jìn)行分層排版，常常會(huì)陷入比較糾結(jié)的場面。作者總結(jié)了信息層級排列的方法，與你分享，希望能夠?qū)δ阌兴鶐椭?/p>

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

老規(guī)矩，先看目錄，按需取用，已經(jīng)將重點(diǎn)標(biāo)記出來了。

01 寫在前面

大家有沒有遇到這樣的問題，當(dāng)你面對非常復(fù)雜的信息時(shí)，在進(jìn)行信息整理設(shè)計(jì)時(shí)，往往會(huì)陷入比較糾結(jié)的場面，不知道怎么把這一堆信息進(jìn)行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續(xù)閱讀。

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

02 信息層級的作用

信息層級存在于我們目前看到的每一個(gè)畫面。它本質(zhì)上是信息組織的一種方式，通過信息的放大縮小和對應(yīng)的位置，能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。

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

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

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

03 如何做好信息層級

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

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

即使我對排版四個(gè)原則非常熟悉，在面對復(fù)雜層級排版時(shí)仍會(huì)面對困惑。因此我對目前頁面上比較好的頁面排版進(jìn)行了進(jìn)一步的探索：

經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn)，他們在遵循排版原則的基礎(chǔ)上，本質(zhì)上都存在一個(gè)簡單的邏輯：那些優(yōu)秀的頁面設(shè)計(jì)都把主內(nèi)容的層級控制在了三層左右，如下圖所示。

因?yàn)槿龑幼笥业膶蛹壥亲钊菀妆挥脩舾兄?，且視覺上不易混亂。超過三層后隨著層級越多復(fù)雜性會(huì)相對增加。

比如我們看下面這兩個(gè)例子，左邊層級因?yàn)樘貏e復(fù)雜，造成用戶獲取信息效率變低，而通過層級的轉(zhuǎn)換，我們可以將其變得更簡單且易讀。

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

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

有同學(xué)看到這肯定要問了，這個(gè)道理我也懂啊，可是在實(shí)際業(yè)務(wù)中大部分時(shí)間拿到的信息太多，根本做不到保持在三層以內(nèi)。

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

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

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

04 信息層級前置處理

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

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

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

比如當(dāng)你在進(jìn)行打車的時(shí)候，當(dāng)你輸入目的地之前，一切其他的信息都無需呈現(xiàn)。當(dāng)你輸入目的地后。

車輛的相關(guān)信息和價(jià)格才會(huì)進(jìn)行呈現(xiàn)，當(dāng)你打車后，司機(jī)的相關(guān)信息才會(huì)進(jìn)行呈現(xiàn)。這些都是按照用戶的使用場景來進(jìn)行對應(yīng)的呈現(xiàn)。

2. 當(dāng)前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現(xiàn)

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

比如當(dāng)你瀏覽新聞的時(shí)候，標(biāo)題永遠(yuǎn)是最關(guān)注的，而評論，作者，簡介等都是可以忽略的信息。

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

05 信息層級排布處理

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

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

1. 信息分組

信息分組是大家在設(shè)計(jì)時(shí)都能夠想到的形式，分組能夠?qū)?fù)雜的信息打散，從而降低頁面整體的復(fù)雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。

那么這三種方式有沒有區(qū)分呢，VIVO設(shè)計(jì)團(tuán)隊(duì)曾經(jīng)就這個(gè)問題展開過用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來講，對其變化感知不大。

但這三種分割方式會(huì)影響我們在呈現(xiàn)信息時(shí)的整體視覺觀感，因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則：

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

2. 利用組件拆分

組件其實(shí)是目前大部分設(shè)計(jì)師在進(jìn)行信息排布時(shí)必備的部分，因此對于這部分設(shè)計(jì)師的熟練度也是最高的。而本篇想要強(qiáng)調(diào)的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項(xiàng)卡。

▍樹形結(jié)構(gòu)：對于有關(guān)聯(lián)性的多層級非常適合，可以將復(fù)雜的層級結(jié)構(gòu)進(jìn)行收攏，從而能夠顯著降低信息的復(fù)雜度。

▍表格結(jié)構(gòu)：對于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來進(jìn)行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場景來進(jìn)行選擇。

▍步驟條：步驟條則對場景要求非常明確，我們可以將多個(gè)場景通過分布的形式進(jìn)行呈現(xiàn)，從而減少當(dāng)前頁面的復(fù)雜度。

▍選項(xiàng)卡：選項(xiàng)卡更適合于同級的數(shù)據(jù)，對于同類型的結(jié)構(gòu)可以更好地將頁面進(jìn)行拆分，從而讓當(dāng)前頁面更簡潔。

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

3. 更改布局

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

從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會(huì)顯得稍微有點(diǎn)凌亂。我們可以通過將第二層tab換個(gè)布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達(dá)到從視覺上簡化層級的作用：

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

4. 信息融入

我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個(gè)層級中。比如我們看下面這一個(gè)例子，Coding產(chǎn)品設(shè)計(jì)中將標(biāo)題與tab利用分割排列在一起，從而變?yōu)橥粚蛹?，這個(gè)時(shí)候就不會(huì)出現(xiàn)四層的復(fù)雜結(jié)構(gòu)，頁面還是保持三層結(jié)構(gòu)，通過這種方式有效降低了頁面的復(fù)雜度。

信息融入這個(gè)方法，當(dāng)我們在進(jìn)行B端布局時(shí)，用得比較多。比如我們最常見的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復(fù)雜度。

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

5. 信息弱化

信息弱化的原則是，將某些超出層級的部分進(jìn)行弱化。比如有5個(gè)層級，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過3層我們也不會(huì)覺得其特別復(fù)雜，我們再看一個(gè)例子：

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

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

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

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

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

06 信息層級小細(xì)節(jié)

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

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

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

在看見左圖時(shí)，總覺得哪里會(huì)有點(diǎn)奇怪，但又不知如何表述。而右圖看著就會(huì)相對更舒服。經(jīng)過對比過后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會(huì)更整齊，而這就是說的沿著字的軸線對齊。

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

而左側(cè)因?yàn)闃?biāo)題字和底部字沒有形成對齊，因此會(huì)顯得更加凌亂一點(diǎn)。所以沿著字的軸線對齊會(huì)讓我們在整體的頁面呈現(xiàn)中顯得更整齊。

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

這是我平時(shí)在做設(shè)計(jì)呈現(xiàn)時(shí)也會(huì)糾結(jié)的一個(gè)問題。當(dāng)你想用卡片來呈現(xiàn)視覺時(shí)，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢。

我就曾陷入這種糾結(jié)，但在去搜索查閱時(shí)，發(fā)現(xiàn)目前其實(shí)關(guān)于這塊相關(guān)的資料，因此在大部分情況下都是由設(shè)計(jì)師自行決定的。但經(jīng)過線上產(chǎn)品的調(diào)研發(fā)現(xiàn)，這塊內(nèi)容其實(shí)也包含著一定的規(guī)則：

（1）取決于卡片的數(shù)量

對于卡片少的其實(shí)可以用色塊來呈現(xiàn)，對于卡片多的可以考慮用線框來進(jìn)行。這其實(shí)主要是從一個(gè)視覺的維度來進(jìn)行呈現(xiàn)，舉個(gè)簡單的例子：

通過coding和飛書的卡片對比，你會(huì)發(fā)現(xiàn)卡片過多時(shí)線性設(shè)計(jì)會(huì)讓頁面顯得更整潔和清新，色塊設(shè)計(jì)就會(huì)讓頁面顯得更厚重。右側(cè)整體的呈現(xiàn)會(huì)顯得更好一些。

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

這里頁面視覺重心的含義是當(dāng)你整個(gè)頁面都全是線框時(shí)，你可以利用色塊的卡片來達(dá)到突出頁面重心的效果，讓整體頁面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁面會(huì)相對更穩(wěn)重一點(diǎn)。

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

在進(jìn)行色塊時(shí)，時(shí)常會(huì)糾結(jié)用灰色底還是彩色底來進(jìn)行。那么這兩者到底有沒有界限的區(qū)分呢，我們應(yīng)該何時(shí)使用這兩種色彩呢。

我們先看一下案例：

可以看出目前這兩種顏色的運(yùn)用更多的是功能上的區(qū)分：

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

所以我們可以根據(jù)當(dāng)前的信息場景來選擇合適的色彩，后面再面對時(shí)就可以不用那么糾結(jié)。

07 寫在最后

本期的內(nèi)容到這里就結(jié)束了。關(guān)于這期的信息層級內(nèi)容，真正需要深入了解的是控制信息層級背后的方法。

很多時(shí)候我們看見的優(yōu)秀頁面并不是因?yàn)樗旧砭秃唵危峭ㄟ^我們合理的信息層級控制，讓最終呈現(xiàn)上顯得不復(fù)雜，這其實(shí)也是我們在實(shí)際工作中需要注意的很重要的一個(gè)點(diǎn)。

本文重點(diǎn)內(nèi)容再回顧，當(dāng)我們遇見復(fù)雜的信息層級時(shí)，需要分三步：

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

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

本文由 @蒙東東東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議