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

一、數(shù)據(jù)展示

數(shù)據(jù)展示類組件可以讓界面的信息更合理、更有序地展現(xiàn)，有助于用戶閱讀。

1.?設(shè)計原則

1）合理展現(xiàn)

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

2）低頻收納

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

3）狀態(tài)提示

數(shù)據(jù)會存在一定的狀態(tài)，合理的狀態(tài)提示，使用戶的下一步操作目標更明確。

2. 徽標數(shù)

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

3. 折疊面板

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

4. 時間軸

以縱向信息流的方式組織和展現(xiàn)信息。

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

5. 時間軸（帶操作）

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

6. 文字提示

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

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

7. 氣泡提示

當(dāng)目標元素有進一步的描述和相關(guān)操作時，可以收納到卡片中，根據(jù)用戶的操作行為進行展現(xiàn)。

8. 走馬燈

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

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

9. 日歷

當(dāng)數(shù)據(jù)是日期或按照日期劃分時，使用日歷組件。

10. 空狀態(tài)

當(dāng)目前沒有數(shù)據(jù)時，用很直觀的方式告知用戶。

11. 標簽

當(dāng)需將事物進行標記時，使用標簽。

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

12. 彩色標簽

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

13. 動態(tài)標簽

用數(shù)組生成一組標簽，可以動態(tài)添加和刪除。

14. 卡片

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

二、其他

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

1. 設(shè)計原則

1）合理取用

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

2）觀察細節(jié)

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

2. 文件直接導(dǎo)入

點擊“文件導(dǎo)入”直接將系統(tǒng)中的文件導(dǎo)入到界面。

3. 文件手動導(dǎo)入

點擊“文件導(dǎo)入”后，用戶選擇系統(tǒng)中要導(dǎo)入的文件，此時文件并未開始導(dǎo)入，只是呆在待導(dǎo)入?yún)^(qū)，需要用戶手動觸發(fā)文件導(dǎo)入。

4. 文件導(dǎo)出

當(dāng)表格等數(shù)據(jù)需要被導(dǎo)出查看時，可以選擇導(dǎo)出本頁或?qū)С鋈俊?/p>

5. 回到頂部

當(dāng)頁面內(nèi)容區(qū)域比較長，用戶瀏覽頁面信息時到達了頁面的底部區(qū)域，可點擊返回頂部查看相關(guān)內(nèi)容。

6. 直達底部

當(dāng)頁面內(nèi)容區(qū)域比較長，用戶想快速查看頁面底部區(qū)域的信息時，可點擊直達底部查看相關(guān)內(nèi)容。

7. 分割線

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

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

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

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

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