B端通用組件使用法則(四)

1 評論 5106 瀏覽 27 收藏 9 分鐘

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

一、數據展示

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

1.?設計原則

1)合理展現

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

2)低頻收納

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

3)狀態提示

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

2. 徽標數

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

B端通用組件使用法則(四)-數據展示、其他

3. 折疊面板

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

B端通用組件使用法則(四)-數據展示、其他

4. 時間軸

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

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

B端通用組件使用法則(四)-數據展示、其他

5. 時間軸(帶操作)

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

B端通用組件使用法則(四)-數據展示、其他

6. 文字提示

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

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

B端通用組件使用法則(四)-數據展示、其他

7. 氣泡提示

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

B端通用組件使用法則(四)-數據展示、其他

8. 走馬燈

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

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

B端通用組件使用法則(四)-數據展示、其他

9. 日歷

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

B端通用組件使用法則(四)-數據展示、其他

10. 空狀態

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

B端通用組件使用法則(四)-數據展示、其他

11. 標簽

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

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

B端通用組件使用法則(四)-數據展示、其他

12. 彩色標簽

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

B端通用組件使用法則(四)-數據展示、其他

13. 動態標簽

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

B端通用組件使用法則(四)-數據展示、其他

14. 卡片

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

B端通用組件使用法則(四)-數據展示、其他

二、其他

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

1. 設計原則

1)合理取用

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

2)觀察細節

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

2. 文件直接導入

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

B端通用組件使用法則(四)-數據展示、其他

3. 文件手動導入

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

B端通用組件使用法則(四)-數據展示、其他

4. 文件導出

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

B端通用組件使用法則(四)-數據展示、其他

5. 回到頂部

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

B端通用組件使用法則(四)-數據展示、其他

6. 直達底部

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

B端通用組件使用法則(四)-數據展示、其他

7. 分割線

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

B端通用組件使用法則(四)-數據展示、其他

接下來將送出:B端通用組件設計法則(五)。

 

作者:知果;公眾號:知果日記

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 7個月過去了,還有五嗎~

    來自北京 回復