B端產品信息具有：信息量大、關聯關系復雜，最終達到目的是用戶高效率的理解信息并完成任務。本文借鑒佐藤可士的超級整理術，幫你梳理好復雜的B端信息。

上期回顧：

組裝、排序

承載畫布：對于pc端，組裝設計原則是避免有橫向滾動條，筆記本、臺式。所有信息最小寬度適配在 1366px 內；響應適配考慮到 1920px 尺寸。考慮到瀏覽器右側滾動條10px 留足安全距離。

首屏信息高度考慮768-110=658px內

移動端一般使用750*1334 px，其中H5頁面要減去考慮到瀏覽器的高度。

將信息作為一個單元進行組裝。信息組裝的形式一方面要符合用戶的認知習慣。常見有列表、矩陣式卡片、線性卡片、時間軸、樹形組件等，亦可參考Ant Design、element UI等規范

小技巧：注重視覺秩序性、信息整體性、保持對齊、簡潔、克制

1. 列表：對比、高效

應用場景和特點

雛形為excel表格。適用大量信息，一個對象為一行，多個對象同類數據為列。分割明確，信息間易于對比，閱覽效率高。常和搜索、排序、篩選、操作、分頁等元素協同。

用戶瀏覽習慣

• 首先通過縱向瀏覽快速對比列獲知關鍵信息
• 然后橫向對單條目了解并執行相關操作

展示處理技巧

垂直方向對齊：

• 一般數字類右對齊，如金額、數量，
• 信息左對齊，如商品名、編號、時間、狀態、操作等
• 標題與對象垂直對齊

水平方向-頂部對齊。前端使用組件默認是水平居中對齊，對于復雜信息展示會錯亂，需要調整

不能跨列超出。當字段過長可定義換行，信息對于用戶不必要完整展示，超出2行或1行省略，鼠標懸浮氣泡展示全部，如商品標題

字段過多。一行展示不下，需將信息分類每類分列。將動態信息，如狀態、操作單獨列出，一般置于列表右側。右側主要適用右利人群，使用鼠標和手機右手居多，用戶距離近方便操作

2. 線性卡片：「十」形瀏覽、

應用場景和特點

兼具卡片和表格的特性。既有利于展示各個對象的特性，又可高效縱向閱讀或對比。

用戶瀏覽習慣

• 首選會縱向瀏覽關鍵信息進行對比
• 人后鎖定目標對象后查看詳情

行與行展示小技巧

• 單卡片內一般無縱向分割線
• 行之間間距分割需明顯，線或卡片間距
• 垂直對齊，對齊方式與表格一致
• 需對比的信息可突出，且對齊
• 行高度克制，過高閱讀效率會降低

3. 矩陣式卡片：「F」形瀏覽

應用場景和特點

適用于富文本信息，網格布局，一行超過2個。用于突出各個對象的服務和特點，對比其次或不需要對比。

用戶瀏覽習慣

• 首段距離小范圍內橫向瀏覽
• 在內容區的左側做快速的縱向瀏覽
• 用戶并不會瀏覽頁面上所有內容
• 營銷場景中，頭圖使用戶聚焦于某卡片

展示小技巧

• 建議一行不要超過5個
• 若有將重要的信息放在頭兩行
• 每個卡片內容布局模式保持一致，居左
• 卡片內將關鍵詞和信息放在段首

4. 時間軸「十」形瀏覽、

應用場景

垂直展示時間流信息，以時間為主軸，內容可有主題、用戶名、圖片、類型、詳細內容等等。比如用戶操作日志、物流軌跡、待辦事項等

用戶閱讀習慣

從上到下縱向閱覽，一般第一條用戶重點關注

展示小技巧

• 已發生的事情為時間倒序展示
• 將要發生的時間正序，如待辦事項
• 第一條重點展示
• 時間縱向對齊

5. 樹形組件「十」形瀏覽、

應用場景

通過逐級大綱的來展現信息的層級關系，高效、整體框架一目了然。適用于任何需要通過層級組織的信息場景，如文件夾、組織架構、生物分類、國家地區、功能權限等等。

用戶閱覽習慣

用戶可同時瀏覽與處理多個樹狀層級的內容。

6。 更多創意展示提高信息獲取效率

根據信息的特性，從信息展示閱讀高效性出發，充分發揮設計師的創意。

• 多學習數據圖表展示形式，如antv；
• 各類網站搜索「數據可視化」拓展思維庫

如亨利設計的倫敦地鐵路線圖，一直沿用至今。

△ 地理模式的地鐵路線圖

△?電路板抽象模式的地鐵路線圖

信息有主次

將信息組裝排序好后，「分主次」這一步很多設計師會忽略。當用戶看到頁面，需要頁面會「自己說話」，除考慮用戶的F型視覺閱覽習慣外，設計師有意識的引導設計：

• 視覺焦點在哪里？
• 主次關系邏輯順序是什么？

1. 主次方法：主要、次要、焦點

通過文字的大小、粗細變化、深淺變化、顏色變化等來表現文字之間的信息層次。用戶在短時間內獲取關鍵信息。

主次注意點

• 避免顏色過多，強調重點多反而無重點
• 主次對比層級不能過多，最多3個層級：主要、次要、焦點信息
• 區分采用的形式不能過多

2. 狀態顏色使用實例狀態類

事件狀態分為

to do-即將要做的事eg：待發貨、待處理退款等 ，若需要優先及時處理的可置頂

doing-正在執行的事 eg：退款中、申請中

done-已經發生的事，分為

• 已成功的-是否需要后續的操作，不需則勿強化，如使用灰色的成功
• 已失敗-告知失敗原因、該怎么做解決
• 已過期-系統原因導致的需要警示用戶，如店鋪授權過期；不需關注可置灰置底
• 已停用-系統原因導致的需要警示用戶；用戶手動觸發，不再關注,使用淺灰色，或整個條目都置灰置底

△ B端常用色彩原理（勿轉載）

色彩使用要克制，可以將信息準確傳達給用戶即可。不一定以上5個色都用到，盡量用最少的顏色表達。減少色彩的方法：將差異不大的狀態使用相同顏色

總結

1. B端信息特點

信息量大、關聯關系復雜、用戶需要理解成本

2. 信息設計目的

用戶高效率的理解信息并完成任務

• 這是什么？（信息與角色）
• 對應我要做什么？（狀態+操作）
• 會達成怎樣的結果？(信息引導)

3. B端信息的「超級整理術」六步走

第一步：信息顯性化

主要是產品經理輸出。設計師需要了解用戶原聲、需求評審、五要素（場景/角色/目的/工具/行為），便于后續設計

第二步：羅列

「工匠死磕」精神，將信息全面羅列，并理解每個信息，有理有據

第三步：分類

除根據業務信息屬性分類，可重點考慮將靜態、動態信息分開，便于用戶get到重點信息。

動態信息包括：狀態、操作、數據、相關字段信息、標簽類。

第四步：組裝 第五步：排序

明確畫布尺寸，避免出現橫向滾動條

形式主要有：表格、線性卡片、矩陣式卡片、時間軸、樹形組件、更多創意形式

第六步.確定主次

信息有主次，且重點突出。文字信息通過大小、粗細變化、深淺變化、顏色變化 層次。

歡迎關注作者微信公眾號：「Aber UX設計」