編輯導語：在B端產品中，數據展示類組件也是常見組件之一，它可以更有效地展示頁面信息，使得用戶更順利地閱讀，進而提升用戶體驗。在前面文章里，作者對導航類和反饋類組件做了介紹。本篇文章中，作者繼續對B端產品的數據展示類組件進行介紹，讓我們一起來看一下。

一、數據展示

數據展示類組件可以讓界面的信息更合理、更有序地展現，有助于用戶閱讀。

1.?設計原則

1）合理展現

使用合理的數據展示方式，可以幫助用戶高效獲取信息。

2）低頻收納

中后臺系統數據量很大，設計者要考慮將用戶低頻使用的數據進行收納，給予高頻數據更充分地展示空間。

3）狀態提示

數據會存在一定的狀態，合理的狀態提示，使用戶的下一步操作目標更明確。

2. 徽標數

一般出現在通知圖標或頭像的右上角，用于顯示需要處理的消息條數，通過醒目視覺形式吸引用戶處理。

3. 折疊面板

折疊面板通過對界面信息的分組和收納，提高界面的使用率。

4. 時間軸

以縱向信息流的方式組織和展現信息。

1. 通常這一系列信息具有很強的時間屬性，可正序或者倒序排列。
2. 時間通常為主要字段，重點展示，順著時間，引導用戶查閱信息。

5. 時間軸（帶操作）

時間軸中單個時間節點上的信息內容較多，不適合全部展示給用戶，可以將不太重要的信息置入操作內。

6. 文字提示

簡單的文字提示框，當鼠標移入則顯示提示，移出則消失，通常會在以下情況使用。

1. 當文字太長，被隱藏顯示。
2. 當操作被禁用，需要告知用戶如何啟用禁用的操作。
3. 當圖標代替文字展示的時候晦澀難懂。

7. 氣泡提示

當目標元素有進一步的描述和相關操作時，可以收納到卡片中，根據用戶的操作行為進行展現。

8. 走馬燈

作為一組平級內容的并列展示模式，常用于圖片或卡片輪播。

1. 輪播的數量不宜過多，控制在 3~5 個之間為最佳。
2. 在設計上提供暗示，讓用戶對輪播的數量和方向保持清晰的認知。
3. 用戶主動觸發或者系統自動輪播。

9. 日歷

當數據是日期或按照日期劃分時，使用日歷組件。

10. 空狀態

當目前沒有數據時，用很直觀的方式告知用戶。

11. 標簽

當需將事物進行標記時，使用標簽。

1. 用于對事物進行分類。
2. 用于標注事物的屬性或維度。

12. 彩色標簽

在不同場景中，需要區分標簽的類型，可使用彩色標簽。

13. 動態標簽

用數組生成一組標簽，可以動態添加和刪除。

14. 卡片

卡片可以承載信息，且對信息的內容類型無過多限制，但系列類型的卡片中體現的信息為一類?？ㄆǔＲ詵鸥裥问脚帕?，一行建議不超過四個?？ㄆ涂ㄆg的間距要保持視覺合適。

二、其他

其他類組件協助用戶達成頁面上的其他操作行為。

1. 設計原則

1）合理取用

界面上任何組件都有其使用場景，需合理取用，幫助用戶高效完成界面行為。

2）觀察細節

組件使用是充分考慮用戶在界面上的行為細節而做的決定，例如在頁面不長，一屏就可以展示完信息的情況下，無需給用戶提供回到頂部組件。

2. 文件直接導入

點擊“文件導入”直接將系統中的文件導入到界面。

3. 文件手動導入

點擊“文件導入”后，用戶選擇系統中要導入的文件，此時文件并未開始導入，只是呆在待導入區，需要用戶手動觸發文件導入。

4. 文件導出

當表格等數據需要被導出查看時，可以選擇導出本頁或導出全部。

5. 回到頂部

當頁面內容區域比較長，用戶瀏覽頁面信息時到達了頁面的底部區域，可點擊返回頂部查看相關內容。

6. 直達底部

當頁面內容區域比較長，用戶想快速查看頁面底部區域的信息時，可點擊直達底部查看相關內容。

7. 分割線

當頁面信息需要被區分，但通過間距等方式很難達到目的時，可使用分割線。

接下來將送出：B端通用組件設計法則（五）。

作者：知果；公眾號：知果日記

本文由 @知果 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。