B端通用組件使用法則(四)
編輯導語:在B端產品中,數據展示類組件也是常見組件之一,它可以更有效地展示頁面信息,使得用戶更順利地閱讀,進而提升用戶體驗。在前面文章里,作者對導航類和反饋類組件做了介紹。本篇文章中,作者繼續對B端產品的數據展示類組件進行介紹,讓我們一起來看一下。
一、數據展示
數據展示類組件可以讓界面的信息更合理、更有序地展現,有助于用戶閱讀。
1.?設計原則
1)合理展現
使用合理的數據展示方式,可以幫助用戶高效獲取信息。
2)低頻收納
中后臺系統數據量很大,設計者要考慮將用戶低頻使用的數據進行收納,給予高頻數據更充分地展示空間。
3)狀態提示
數據會存在一定的狀態,合理的狀態提示,使用戶的下一步操作目標更明確。
2. 徽標數
一般出現在通知圖標或頭像的右上角,用于顯示需要處理的消息條數,通過醒目視覺形式吸引用戶處理。
3. 折疊面板
折疊面板通過對界面信息的分組和收納,提高界面的使用率。
4. 時間軸
以縱向信息流的方式組織和展現信息。
- 通常這一系列信息具有很強的時間屬性,可正序或者倒序排列。
- 時間通常為主要字段,重點展示,順著時間,引導用戶查閱信息。
5. 時間軸(帶操作)
時間軸中單個時間節點上的信息內容較多,不適合全部展示給用戶,可以將不太重要的信息置入操作內。
6. 文字提示
簡單的文字提示框,當鼠標移入則顯示提示,移出則消失,通常會在以下情況使用。
- 當文字太長,被隱藏顯示。
- 當操作被禁用,需要告知用戶如何啟用禁用的操作。
- 當圖標代替文字展示的時候晦澀難懂。
7. 氣泡提示
當目標元素有進一步的描述和相關操作時,可以收納到卡片中,根據用戶的操作行為進行展現。
8. 走馬燈
作為一組平級內容的并列展示模式,常用于圖片或卡片輪播。
- 輪播的數量不宜過多,控制在 3~5 個之間為最佳。
- 在設計上提供暗示,讓用戶對輪播的數量和方向保持清晰的認知。
- 用戶主動觸發或者系統自動輪播。
9. 日歷
當數據是日期或按照日期劃分時,使用日歷組件。
10. 空狀態
當目前沒有數據時,用很直觀的方式告知用戶。
11. 標簽
當需將事物進行標記時,使用標簽。
- 用于對事物進行分類。
- 用于標注事物的屬性或維度。
12. 彩色標簽
在不同場景中,需要區分標簽的類型,可使用彩色標簽。
13. 動態標簽
用數組生成一組標簽,可以動態添加和刪除。
14. 卡片
卡片可以承載信息,且對信息的內容類型無過多限制,但系列類型的卡片中體現的信息為一類??ㄆǔR詵鸥裥问脚帕?,一行建議不超過四個。卡片和卡片之間的間距要保持視覺合適。
二、其他
其他類組件協助用戶達成頁面上的其他操作行為。
1. 設計原則
1)合理取用
界面上任何組件都有其使用場景,需合理取用,幫助用戶高效完成界面行為。
2)觀察細節
組件使用是充分考慮用戶在界面上的行為細節而做的決定,例如在頁面不長,一屏就可以展示完信息的情況下,無需給用戶提供回到頂部組件。
2. 文件直接導入
點擊“文件導入”直接將系統中的文件導入到界面。
3. 文件手動導入
點擊“文件導入”后,用戶選擇系統中要導入的文件,此時文件并未開始導入,只是呆在待導入區,需要用戶手動觸發文件導入。
4. 文件導出
當表格等數據需要被導出查看時,可以選擇導出本頁或導出全部。
5. 回到頂部
當頁面內容區域比較長,用戶瀏覽頁面信息時到達了頁面的底部區域,可點擊返回頂部查看相關內容。
6. 直達底部
當頁面內容區域比較長,用戶想快速查看頁面底部區域的信息時,可點擊直達底部查看相關內容。
7. 分割線
當頁面信息需要被區分,但通過間距等方式很難達到目的時,可使用分割線。
接下來將送出:B端通用組件設計法則(五)。
作者:知果;公眾號:知果日記
本文由 @知果 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
7個月過去了,還有五嗎~