在B端產品中，信息設計的合理程度很大程度上決定了用戶在操作、使用過程中的難易程度，也影響到后續的用戶留存。那么作為設計人員，你要如何搭建好B端產品的信息設計策略？本篇文章里，作者針對信息設計做了經驗分享，一起來看一下。

你有沒有遇到在梳理B端產品界面信息的時候，不知道該如何開始？

在梳理到一半的時候，覺得前面整理得不對，想從頭開始？

不知道怎么把這一堆信息進行比較好的排版？

到底是用分割線還是留白來分隔？

用卡片還是色塊分組？

我曾經都有過，尋找了很多方法，期望盡可能整理出相對好用，又不反復修改的信息設計方法論。如果你剛好也有這部分疑問，這篇文章適合你繼續閱讀。

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

一、信息設計

在日常生活中，說明書、指路牌、做ppt、設計網站、繪制海報中等都需要信息設計?？梢哉f，信息設計已經滲透到了人們生活的方方面面，信息設計存在于我們目前看到的每一個畫面。

對于B端產品來說，信息設計的好壞，一方面決定了用戶在使用產品中的難易程度；另一方面也影響著后續當產品功能添加時，產品的延展性如何。

1. 什么是信息設計？

信息設計是我一直較為關注的設計領域，從早期設計感性的純粹視覺思考，到現在越來越趨向于邏輯理性化的設計思維，這是一種設計提升的思維模式。

從古至今，設計師們主要關注的一直都是將信息如何視覺化的呈現，信息設計是人們對信息數據進行視圖化處理的方式和實踐，通過信息設計可以提高人們應用信息的性能，在眾多信息中能夠迅速找到自己所需要的，并且使得信息能被有效地理解。

——百科

2. 信息設計來源

在二十世紀七十年代，英國倫敦的平面設計師特格拉姆第一次使用了“信息設計”這一術語。

當時使用該術語的目的僅為區別于傳統的平面設計以及產品設計等平行設計專業。從那時起，信息設計就真正地從平面設計中脫離出來，廣泛應用在其他領域。

信息設計的主旨是什么？

是進行有效能的信息傳遞”，與提倡“精美的藝術表現”的平面設計確立了不同的發展方向。

通過對信息圖表設計的基礎認識,從信息的收集篩選、應用情景構思方式、視覺表現到信息圖表的設計模式、制作流程等方法，設計出符合閱讀順序，使觀眾清晰有效閱讀的設計方案。這種準確、形象、快捷的傳達方式已經顯示出信息設計方法獨特的優勢。

3. 信息設計的意義

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

二、信息設計的基本思路

1. 用戶如何獲取信息？

試想一下，如果我們想要買一個手機，那么我們會如何買到手機呢？

首先，我們會收集相關手機的信息，例如，先上網搜索最新的手機信息（向朋友詢問或者平時就有想好的品牌機型），然后我們的大腦會把這些信組合起來，得出買什么品牌什么型號的判斷。最后，我們在一堆信息中，提取出有效信息，進而指導自己的下一步行動。

由此可見，我們獲取信息的步驟：

因此，我們在信息設計時可以借鑒以下基本思路。

1）根據自己的經驗與用戶需求收集盡可能全面的信息。

2）分析信息池中哪部分信息是用戶最關注的。

但是，當產品的目標用戶不止一類時，我們就需要考慮多方案滿足不同的用戶對信息的需求。例如，在電商平臺搜索商品，我們既可以通過店鋪搜索或商品搜索，也可以通過天貓提供的商品目錄樹直接查找。

3）思考如何信息呈現，設計師更是需要思考如何呈現信息才能讓用戶更容易接受和理解，只有會組織信息，才可能打造一款用戶喜愛的產品。

2. 如何分析判斷用戶行為？

檢測頁面的設計是否有效，需要我們對用戶的行為做分析。我們可以將用戶瀏覽頁面的行為也分為三個層次：

1. 核心行為層：是指用戶首先關注這個頁面核心重點，觸發到的用戶首要、核心行為，對應信息分層的重點核心層。
2. 了解行為層：是指用戶產生了解的意愿，繼續了解內容的行為，對應信息分層的次要輔助層。
3. 查看更多行為層：是指用戶接收到信息后尋求更多信息的行為，如行動按鈕、文字鏈接等交互行為，對應信息分層的詳細信息層。

所以，如果頁面設計質量高、信息層級傳達得準確，那么用戶的行為層次應該會恰好和頁面的信息層次相對應，這也是我們進行頁面設計質量檢測的標準之一。

三、如何做好信息設計

既然信息層級設計對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級設計則顯得尤為重要。

我發現網上的資料也是參差不齊，查閱到的資料幾乎都在講排版設計的四個基本設計原則：親密、對齊、對比、重復。

這四個方法雖然有用，但在面對復雜層級排版時仍會面對困惑。因此我對頁面排版進行了進一步的探索及思考，今天我們來說說除去上面四大設計原則以外的方法：

1. 信息設計的前置處理

平時我們很容易被忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，來來回回多次修改設計總是不滿意，但卻忽略了這些信息是否真實地被需要。

信息前置處理本質就是判斷我們當前所要呈現的信息是不是必要的。這也是日常工作中經常遇到的場景，比如有時候產品給到了我們很多信息，可能僅僅是信息全部展開，所以我們在設計的時候就不能直接開始，需要通過當前頁面的業務場景去進行判斷，確定每個信息的合理性，兩個步驟進行判斷：

1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
2. 當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏，移動等的方式展現。

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

那么如何進行信息前置的處理呢？

我們在進行B端產品信息設計時，可以圍繞“簡約四策略”進行設計。

英國易用性專家協會主席賈爾斯 ?科爾伯恩 ( Giles Colbore ）的《簡約至上》一書詳細講解了簡約的四策略：刪除、組織、隱藏和轉移。

1）刪除

刪除是指將界面上不重要的內容及元素刪掉，只保留對用戶來說重要的內容。這樣不僅可以讓設計師在設計界面時只專注于重要的問題，也有利于用戶專心完成目標。設計目的是聚焦可用信息，去掉分散用戶精力的信息，從而為用戶提供價值。

我們在刪除的過程中，切記不要隨意刪除。刪除信息非?？简炁袛嘈畔⒅匾潭鹊哪芰?，畢竟刪除了不該刪除的信息會給用戶造成不好的體驗。

那么，如何判斷哪些信息可以刪除呢？

① 從用戶使用場景考慮

有些信息是否被展示，并不會對用戶起到實質性的決定作用，反而會擾亂用戶的多余信息，這時就可以考慮刪除。

② 從產品目標考慮

從產品目標考慮，有些信息對產品目標沒有起到實質性的決定作用，把這類信息刪除，只留下對用戶重要的信息，這些信息可以幫助用戶做決策或者進行下一步操作。

2）組織

組織是指對確定下來的信息進行有層次的整理。如果我們不對篩選出來的重要信息進行有序的整理，那么用戶在使用過程中就會覺得很復雜，抓不住重點。

信息組織的要求是以產品定位和用戶需求為線索，先考慮信息展示的主題，再考慮信息的分類方式（如時間、 顏色、大小、字母等），最后將松散的信息組織起來，并保證信息間界限明確。

右圖進行了信息組織，明顯會比左圖看上去體驗更好

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

3）隱藏

隱藏是指將用戶不常用的信息隱藏起來，在用戶需要時才出現。

但是，我們要注意隱藏策略的使用方式。

第一，隱藏與刪除不一樣，刪除的信息是用戶不需要的、多余的，但隱藏的信息是用戶需要的，只是比較不常用而已。

第二，在設計信息隱藏時，要考慮清楚使用隱藏是否給用戶帶來了不必要的麻煩。例如，信息隱藏時沒有給用戶應有的提示，用戶就很難發現該信息。

成功的隱藏是什么呢？

首先，徹底隱藏需要隱藏的信息，只在合適的時機出現相關內容。

其次，能在界面中給出細微的提示，讓用戶順利地找到隱藏信息。

最后，提示要在用戶的視線范圍內，如果超出了用戶的視線范圍，即使提示再明顯，用戶也看不到。

在B端產品設計中，有一個永恒的爭論話題：表格操作欄需不需要隱藏。

關于這個話題，一部分人認為不應該隱藏，原因在于隱藏了操作欄，用戶就會以為表格數據是不能操作的。另一部分人認為應該隱藏，因為每條致據都把操作欄展示山來，感覺太多余。

筆者認為這需要仔細分析，不能一概而論：

1. 需要隱藏的情況：當表格列數很多、已經出現橫向滾動條且操作欄的功能不常用時，可隱藏操作欄。當用戶將鼠標移到數據行上時，就會顯示操作欄的功能。
2. 不需要隱藏的情況：當表格操作欄的功能都比較重要，一旦用戶操作頻率較高，無須隱藏操作欄。這時隱藏會導致用戶在操作時不直接。
3. 隱藏一部分操作功能當表格列數很多、已經出現橫向滾動條，但操作欄的部分功能很常用時，這部分常用的功能就無須隱藏。當用戶將鼠標移到數據行上，就會顯示操作欄中不常用的功能。

4）轉移

轉移就是將合適的信息放到合適的地方。

例如，我們在設計一個 B端產品注冊界面時，期望用戶除了填寫賬號、密碼、驗證碼以外，還期望用戶填寫生日信息。因為產品經理希望在用戶生日時給用戶發送生日祝福，讓他們感受到產品的溫暖。想要再做用戶分層的時候，用年齡分層。但是，生日信息放在注冊界面顯然不合適，這時可以將生日信息填寫步驟轉移至用戶注冊完成后進行。

例如，當用戶完成注冊時，系統可以給予溫馨提示，告訴用戶 “你已完成注冊，當你填寫了生日，你將在生日的時候收到神秘禮物”。

注意：B端產品經理在設計界面信息轉移時，要清楚該信息被轉移的原因，如果盲目地轉移，反而會讓用戶無法在合適的位置找到合適的信息，降低了用戶獲取信息的效率。

確定了信息設計的前置的信息處理以后，就到了設計師的主場，信息的排版設計。

2. 如何信息分層設計

在信息量較大的頁面中，設計師需要充分了解產品功能和用戶所需，對頁面的內容進行劃分，明確各部分內容的優先級，建立信息層級。

通常我們可以從產品設計的角度，可以將頁面信息劃分為3個層次：

1）重點核心層（吸引用戶）

是指用戶在短暫的 3-5 秒內瀏覽頁面后，最能夠吸引他的核心內容。這部分也是頁面的核心功能、是頁面最想展示給用戶的內容，必須少而精，在設計中需要突出展示。

2）次要輔助層（幫助理解）

是指用戶被重點核心信息吸引后，進一步在頁面中停留 3 – 5 分鐘，就會閱讀相關的、幫助了解核心內容的輔助信息，如說明信息或其他相關功能，這部分信息比較重要，但不需要強化展示。

3）詳細信息層（詳細了解）

是指更多的信息或補充信息，詳細信息層會以更多的交互方式展示信息。這部分信息并不十分重要，但也需要展示。

3. 信息設計的排版處理

B端產品業務比較復雜，頁面內容也會較多，信息的有效組織尤其重要。信息設計不是簡單的內容堆砌，需要根據用戶場景和需求做出優化處理，構建有效的信息的層級幫助用戶去理解業務內容。

總結出以下五種方法來幫助我們更合理地進行信息設計：

1）信息分組

信息分組是最常用的設計形式，能夠將復雜的信息打散重組，聚合相似信息，分割差異化信息，有助于降低信息的復雜性，幫助用戶快速定位信息、瀏覽內容，從而降低頁面整體的復雜度。常用的分組方式有三種方式：間距、分割線、卡片。

我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。

1. 復雜程度低，優先選用留白分隔，視覺清爽無干擾。
2. 當留白效果不明顯時，建議采用分割線，讓信息層次更清晰且屏效高。
3. 如果需要進一步強化條目本身的邊界感，可以采用卡片，這樣可以強化條目信息的視覺層次和可操作性。

2）組件拆分

面對復雜的信息內容，用戶容易產生退縮情緒，組件是目前大部分設計師在進行信息排布時必備的部分，包含：

1. 樹形結構：對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。
2. 表格結構：對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。
3. 分步驟：將復雜內容分步拆解，把用戶的關注點從頁面內容轉移到步驟進度上，可以減少用戶的心理壓力。另外節點信息頁也可以幫助用戶更好地理解業務流程。
4. tab標簽：更適合同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。

3）頁面整體布局設計

通過改變布局的設計方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，如下圖：

4）信息融合

我們可以利用信息融合的形式來減弱其對層級的影響。信息融合從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。

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

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

5）信息弱化

信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，如下圖：銷氪平臺就對數據和視圖切換行進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。

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

四、常見的信息設計技巧

1. 減少頁面元素設計

不同于C端產品，B端產品更強調效率。正如奧卡姆剃刀原則所說“如無必要，勿增實體”。

頁面內容需要以簡潔為主，避免無關要素形成信息干擾。而設計師更加感性，擔心設計過于平淡，會在界面中添加各種視覺元素，反而會增加用戶的認知成本。

體驗設計行業需要創新，但是B端產品設計需要更加謹慎，尊重用戶的習慣，完整表達業務邏輯性、保證內容的可理解性，是設計師必須去關注的。

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

當你想用卡片來對信息分組時，你有沒有糾結過到底是用線框卡片還是背景色填充呢？經過多次糾結和多次的設計對比，我發現分組方式其實也包含著一定的規則：

1）取決于卡片的數量

如果卡片少，用色塊；

如果卡片多，用線框，你會發現卡片過多時，線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。

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

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

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

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

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

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

4. 可視化設計

在某些特定的場景下，內容頁面也可以通過可視化展示幫助用戶理解信息，例如常見的身份證圖片上傳等，很多用戶無法分清楚正面反面，借助圖片可視化提示，便于用戶更好地理解信息。

五、最后

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

文中如果有不嚴謹、錯誤的地方希望大家給予指正，希望大家可以多多點贊評論鼓勵下，最后感謝您的耐心閱讀。

參考資料：

1. 《B端思維-產品經理的自我修煉》張靜晨
2. B端產品信息設計的3個原則（子牧UXD）
3. 想做好信息設計，先回答這5個問題（陳睿婷）