中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、表格

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

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è)計(jì)原則

1）清晰

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

2）靈活

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

3）完整

數(shù)據(jù)是表格的主體，表格數(shù)據(jù)不能被截?cái)啵蛘咧匾獢?shù)據(jù)用戶看不全。例如時(shí)間數(shù)據(jù)要保持視覺(jué)完整。

2. 斑馬紋表格

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

3. 無(wú)斑馬紋表格

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

4. 縱線分隔表格

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

5. 帶排序表格

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

6. 帶篩選表格

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

7. 合并單元格表格

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

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

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

8. 帶匯總行表格

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

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

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

9. 單選行表格

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

10. 多選行表格

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

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

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

12. 自定義列表格

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

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

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

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

13. 行編輯表格

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

14. 列編輯表格

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

15. 全表可編輯表格

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

16. 分組表格

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

17. 樹(shù)表格

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

二、樹(shù)形控件

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

1. 設(shè)計(jì)原則

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

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

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

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

3）節(jié)點(diǎn)文字長(zhǎng)度合理

一般樹(shù)形控件會(huì)占據(jù)頁(yè)面中的某一塊區(qū)域，因此節(jié)點(diǎn)文字不宜過(guò)長(zhǎng)，文字過(guò)長(zhǎng)會(huì)被區(qū)域遮擋且不利于用戶閱讀。

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

基礎(chǔ)樹(shù)形控件支持樹(shù)節(jié)點(diǎn)無(wú)限制向下展示。

3. 可拖拽樹(shù)形控件

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

4. 連接線樹(shù)形控件

帶縱向連接線的樹(shù)形控件可以幫助用戶快速定位到某節(jié)點(diǎn)，并且不會(huì)因?yàn)闃?shù)節(jié)點(diǎn)層級(jí)多而導(dǎo)致看錯(cuò)節(jié)點(diǎn)層級(jí)。建議在樹(shù)節(jié)點(diǎn)層級(jí)較深的情況下使用。

5. 帶操作樹(shù)形控件

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

6. 篩選型樹(shù)形控件

篩選型樹(shù)形控件在用戶進(jìn)行搜索時(shí)，會(huì)將匹配的內(nèi)容直接過(guò)濾出來(lái)。

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

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

作者：知果；公眾號(hào)：知果日記

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

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