2022-8-12 純純
大家有沒有遇到這樣的問題，當(dāng)你面對非常復(fù)雜的信息時，在進(jìn)行信息整理設(shè)計時，往往會陷入比較糾結(jié)的場面，不知道怎么把這一堆信息進(jìn)行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續(xù)閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質(zhì)上是信息組織的一種方式，通過信息的放大縮小和對應(yīng)的位置，能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認(rèn)知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進(jìn)行視覺上的識別。而優(yōu)秀的信息層級就像右圖一樣能夠讓我們快速且準(zhǔn)確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復(fù)雜場景，我們不僅需要考慮清晰傳遞業(yè)務(wù)價值，合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關(guān)鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網(wǎng)上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復(fù)。不可否認(rèn)的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復(fù)雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進(jìn)行了進(jìn)一步的探索：
經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn)，他們在遵循排版原則的基礎(chǔ)上，本質(zhì)上都存在一個簡單的邏輯：那些優(yōu)秀的頁面設(shè)計都把主內(nèi)容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復(fù)雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復(fù)雜，造成用戶獲取信息效率變低，而通過層級的轉(zhuǎn)換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內(nèi)容層級控制在三層左右。且這三層內(nèi)有比較明顯的對比關(guān)系。
有同學(xué)看到這肯定要問了，這個道理我也懂啊，可是在實際業(yè)務(wù)中大部分時間拿到的信息太多，根本做不到保持在三層以內(nèi)。別急，這篇文章的重點當(dāng)然不是告訴你這么簡單的道理，而是在面對復(fù)雜層級的時候，我們應(yīng)該怎樣去控制它的層級表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優(yōu)秀頁面，在本身的信息層級上可能都非常復(fù)雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復(fù)雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復(fù)雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復(fù)雜導(dǎo)致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進(jìn)行第一層的判斷。
源頭降低的本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產(chǎn)品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當(dāng)前頁面的業(yè)務(wù)場景去進(jìn)行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設(shè)計的一致性。
1. 當(dāng)前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當(dāng)你在進(jìn)行打車的時候，當(dāng)你輸入目的地之前，一切其他的信息都無需呈現(xiàn)。當(dāng)你輸入目的地后，車輛的相關(guān)信息和價格才會進(jìn)行呈現(xiàn)，當(dāng)你打車后，司機(jī)的相關(guān)信息才會進(jìn)行呈現(xiàn)。這些都是按照用戶的使用場景來進(jìn)行對應(yīng)的呈現(xiàn)。
2.當(dāng)前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現(xiàn)。
當(dāng)你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當(dāng)你瀏覽新聞的時候，標(biāo)題永遠(yuǎn)是最關(guān)注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認(rèn)，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質(zhì)是通過我們對信息進(jìn)行排列上的調(diào)整，來將多余的層級融入到三層以內(nèi)。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結(jié)，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設(shè)計時都能夠想到的形式，分組能夠?qū)?fù)雜的信息打散，從而降低頁面整體的復(fù)雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區(qū)分呢，VIVO設(shè)計團(tuán)隊曾經(jīng)就這個問題展開過用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現(xiàn)信息時的整體視覺觀感，因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則：
通過這三種場景的區(qū)別，我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式，讓界面的表達(dá)清晰明確。
組件其實是目前大部分設(shè)計師在進(jìn)行信息排布時必備的部分，因此對于這部分設(shè)計師的熟練度也是最高的。而本篇想要強(qiáng)調(diào)的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項卡。
▍樹形結(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)行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進(jìn)行呈現(xiàn)，從而減少當(dāng)前頁面的復(fù)雜度。
▍選項卡
選項卡更適合與同級的數(shù)據(jù)，對于同類型的結(jié)構(gòu)可以更好地將頁面進(jìn)行拆分，從而讓當(dāng)前頁面更簡潔。
由于組件這一塊大家的認(rèn)知已經(jīng)比較全了，在這里就不進(jìn)行更深入的講解了。如果有需要的同學(xué)可以通過瀏覽各大廠的組件文檔去進(jìn)行更細(xì)致的查閱。
通過改變布局的方式，我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達(dá)到從視覺上簡化層級的作用：
當(dāng)然以上只是舉了一個簡單的例子。這里底層邏輯就是當(dāng)遇到相對比較復(fù)雜邏輯時，我們可以考慮通過改變結(jié)構(gòu)來減少其復(fù)雜度，比如上述的兩欄結(jié)構(gòu)，甚至三欄結(jié)構(gòu)，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產(chǎn)品設(shè)計中將標(biāo)題與tab利用分割排列在一起，從而變?yōu)橥粚蛹墸@個時候就不會出現(xiàn)四層的復(fù)雜結(jié)構(gòu)，頁面還是保持三層結(jié)構(gòu)，通過這種方式有效降低了頁面的復(fù)雜度。
信息融入這個方法，當(dāng)我們在進(jìn)行B端布局時，用得比較多。比如我們最常見的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復(fù)雜度。
但在進(jìn)行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應(yīng)的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進(jìn)行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過3層我們也不會覺得其特別復(fù)雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統(tǒng)計」進(jìn)行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復(fù)雜度：
因此我們需要學(xué)會對信息分級，不重要的信息就進(jìn)行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復(fù)雜信息簡化在三層以內(nèi)，從而讓我們最終的頁面呈現(xiàn)不會太過復(fù)雜，更容易被用戶理解。但不可否認(rèn)仍會有更復(fù)雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結(jié)了目前在進(jìn)行信息層級排布過程中比較糾結(jié)的一些細(xì)節(jié)點，也分享給大家。希望對遇到相同問題的同學(xué)一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細(xì)節(jié)點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經(jīng)過對比過后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側(cè)因為標(biāo)題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現(xiàn)中顯得更整齊。
這是我平時在做設(shè)計呈現(xiàn)時也會糾結(jié)的一個問題。當(dāng)你想用卡片來呈現(xiàn)視覺時，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結(jié)，但在去搜索查閱時，發(fā)現(xiàn)目前其實關(guān)于這塊相關(guān)的資料，因此在大部分情況下都是由設(shè)計師自行決定的。但經(jīng)過線上產(chǎn)品的調(diào)研發(fā)現(xiàn)，這塊內(nèi)容其實也包含著一定的規(guī)則：
1.取決于卡片的數(shù)量
對于卡片少的其實可以用色塊來呈現(xiàn)，對于卡片多的可以考慮用線框來進(jìn)行。這其實主要是從一個視覺的維度來進(jìn)行呈現(xiàn)，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發(fā)現(xiàn)卡片過多時線性設(shè)計會讓頁面顯得更整潔和清新，色塊設(shè)計就會讓頁面顯得更厚重。右側(cè)整體的呈現(xiàn)行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當(dāng)你整個頁面都全是線框時，你可以利用色塊的卡片來達(dá)到突出頁面重心的效果，讓整體頁面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁面會相對更穩(wěn)重一點。
在進(jìn)行色塊時，時常會糾結(jié)用灰色底還是彩色底來進(jìn)行。那么這兩者到底有沒有界限的區(qū)分呢，我們應(yīng)該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導(dǎo)或者營銷性質(zhì)的頁面。從表現(xiàn)性質(zhì)上來講更重。
2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。
所以我們可以根據(jù)當(dāng)前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結(jié)。
本期的內(nèi)容到這里就結(jié)束了。關(guān)于這期的信息層級內(nèi)容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優(yōu)秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現(xiàn)上顯得不復(fù)雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內(nèi)容再回顧，當(dāng)我們遇見復(fù)雜的信息層級時，需要分三步：
1.明確當(dāng)前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細(xì)節(jié)
以上是本文關(guān)于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進(jìn)行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進(jìn)行反饋。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945
作者：進(jìn)擊的M 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com