編輯導(dǎo)語：B端產(chǎn)品里，表格和樹形控件無疑都是常用組件。在上篇文章中，作者介紹了B端產(chǎn)品中的基礎(chǔ)類組件和表單。今天，作者便接著介紹了表格和樹形控件。讓我們一起了解一下吧。

一、表格

表格類組件為中后臺界面數(shù)據(jù)展示提供了用戶快速瀏覽和定位數(shù)據(jù)的方式。表格組件的使用要注意以下幾點：

1. 將重要的數(shù)據(jù)和用戶操作頻率較高的數(shù)據(jù)放置靠前的位置；
2. 將關(guān)聯(lián)性較高的數(shù)據(jù)鄰近排列；
3. 重要字段和數(shù)據(jù)保證讓用戶可以看完整；
4. 數(shù)據(jù)格式保持合理展現(xiàn)，如使用千分位幫助用戶閱讀，脫敏部分的數(shù)據(jù)用 “*”展現(xiàn)。

1. 設(shè)計原則

1）清晰

使用表格呈現(xiàn)大量數(shù)據(jù)的時候，要保持界面排版清晰，例如文字左對齊，數(shù)字右對齊，長度一樣的數(shù)據(jù)居中對齊。

2）靈活

針對不同用戶對表格數(shù)據(jù)使用的不同需求，表格提供合理的篩選、排序等功能。

3）完整

數(shù)據(jù)是表格的主體，表格數(shù)據(jù)不能被截斷，或者重要數(shù)據(jù)用戶看不全。例如時間數(shù)據(jù)要保持視覺完整。

2. 斑馬紋表格

當(dāng)表格數(shù)據(jù)量大，且需快速掃描瀏覽并定位獲取所需數(shù)據(jù)時，使用斑馬紋表格樣式。

3. 無斑馬紋表格

當(dāng)表格數(shù)據(jù)量不大，且數(shù)據(jù)很容易定位時，可使用無斑馬紋表格樣式。

4. 縱線分隔表格

當(dāng)數(shù)據(jù)較為密集，且相鄰列數(shù)據(jù)左右緊挨著，很難區(qū)分時，使用縱線分隔表格。

5. 帶排序表格

當(dāng)某列數(shù)據(jù)需要根據(jù)某個維度排序時，使用帶排序表格。

6. 帶篩選表格

當(dāng)某列數(shù)據(jù)需要篩選時，使用帶篩選表格。

7. 合并單元格表格

當(dāng)表格單元格需要被合并，使用合并單元格表格。

1）表頭單元格合并，字段居中展示。

2）表體內(nèi)數(shù)據(jù)單元格合并，合并數(shù)據(jù)展示依照原來列數(shù)據(jù)對齊方式，靠左、居中或靠右。

8. 帶匯總行表格

當(dāng)表格某些列需要被匯總時，使用帶匯總行表格。

1）帶匯總的數(shù)據(jù)列建議進行集中排列，方便用戶查找。

2）建議第一列數(shù)據(jù)不做匯總，而是放置編號、名稱等數(shù)據(jù)列。

9. 單選行表格

當(dāng)表格數(shù)據(jù)只允許被單行選中時，使用單選行表格。

10. 多選行表格

當(dāng)表格數(shù)據(jù)允許被多行選中時，使用復(fù)選行表格。

11. 數(shù)據(jù)行可展開表格

當(dāng)單行數(shù)據(jù)內(nèi)容太多，建議先采取數(shù)據(jù)行展開模式，而非跳轉(zhuǎn)頁面，保證用戶在不離開當(dāng)前頁的情況下瀏覽數(shù)據(jù)，維持用戶的工作心流。

12. 自定義列表格

當(dāng)表格列數(shù)量太多，使用自定義列表格。

1）不同角色可根據(jù)自身的需求，定義常用列的展示，隱藏不常用列。

2）用戶可以選擇將被對比的列進行凍結(jié)。

3）用戶可以對數(shù)據(jù)列進行排序，將重要列在表格中靠前展示。

13. 行編輯表格

當(dāng)需要對表格數(shù)據(jù)啟用整行編輯時，使用行編輯表格。當(dāng)不啟用行編輯功能時，表格展示為基礎(chǔ)表格樣式。

14. 列編輯表格

當(dāng)需要對表格數(shù)據(jù)啟用整列編輯時，使用列編輯表格，并且可編輯列的表頭具有明顯的編輯圖標(biāo)提示。當(dāng)不啟用列編輯功能時，表格展示為基礎(chǔ)表格樣式。

15. 全表可編輯表格

表格單元格皆可編輯，且表格默認(rèn)處于正常展示狀態(tài)，方便用戶查看和對比數(shù)據(jù)。當(dāng)用戶將鼠標(biāo)移到表格單元格時，會提示用戶可點擊編輯單元格數(shù)據(jù)。

16. 分組表格

當(dāng)表格數(shù)據(jù)需要被分組展示時，使用分組表格，表格中被歸為一組的數(shù)據(jù)具有相似性。

17. 樹表格

表格數(shù)據(jù)具有樹形層級結(jié)構(gòu)，使用樹表格。

二、樹形控件

樹形控件通過逐級大綱的形式來展現(xiàn)信息的層級關(guān)系，是用戶在信息查看和瀏覽時的一種高效模式。使用樹形控件組織信息的時候，用戶可以在不同節(jié)點間來回切換。

1. 設(shè)計原則

1）層級數(shù)量合理

通過建立合理的層級數(shù)量，使得用戶可以快速地找到目標(biāo)節(jié)點。建議樹的層級在3級以內(nèi)。

2）節(jié)點數(shù)量合理

每一層級的節(jié)點數(shù)量不宜過多，過多會導(dǎo)致用戶很難同時瀏覽與處理多個樹狀層級的內(nèi)容。

3）節(jié)點文字長度合理

一般樹形控件會占據(jù)頁面中的某一塊區(qū)域，因此節(jié)點文字不宜過長，文字過長會被區(qū)域遮擋且不利于用戶閱讀。

2. 基礎(chǔ)樹形控件

基礎(chǔ)樹形控件支持樹節(jié)點無限制向下展示。

3. 可拖拽樹形控件

當(dāng)樹節(jié)點可被拖拽更改位置的時候，使用可拖拽樹形控件。

4. 連接線樹形控件

帶縱向連接線的樹形控件可以幫助用戶快速定位到某節(jié)點，并且不會因為樹節(jié)點層級多而導(dǎo)致看錯節(jié)點層級。建議在樹節(jié)點層級較深的情況下使用。

5. 帶操作樹形控件

若樹節(jié)點可被操作，如編輯、刪除等，使用帶操作樹形控件。

6. 篩選型樹形控件

篩選型樹形控件在用戶進行搜索時，會將匹配的內(nèi)容直接過濾出來。

接下來將陸續(xù)送出：

• B端通用組件使用法則（三）——導(dǎo)航、反饋
• B端通用組件使用法則（四）——數(shù)據(jù)展示、其他

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

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

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