2023年B端交互組件之表格篇

B端交互組件之表格篇B端項目或產(chǎn)品中，表格應(yīng)當(dāng)是被利用的最多的了，許多主體界面基本都會用到表格組件。我們常說一個基本的功能是包含增刪改查的，為了完整的表達這一功能，常見的就是用表格組件。

B端產(chǎn)品中數(shù)據(jù)是關(guān)鍵，而表格主要是用于展現(xiàn)和管理數(shù)據(jù)，如何用好表格，對產(chǎn)品整體的用戶體驗起到重要作用。

目前有許多數(shù)據(jù)也可以用可視化圖表來展現(xiàn)，但僅僅只是用于最終的數(shù)據(jù)輸出，數(shù)據(jù)管理還是傾向于用表格組件。

下面我將表格拆分成多個細(xì)節(jié)，并具體講解各部分如何來設(shè)計，另外還會談?wù)労唵螛I(yè)務(wù)場景下如何利用表格。

一、查詢

常見的就是查詢區(qū)域在頭部，下面緊接著一個表格組件。

當(dāng)數(shù)據(jù)量小的時候，打開該頁面時，應(yīng)當(dāng)是可以看到全量數(shù)據(jù)的，并通過分頁器來部分加載數(shù)據(jù)；假如數(shù)據(jù)量很大，例如億級單位的數(shù)據(jù)量，系統(tǒng)估量會直接崩潰，所以需要對查詢結(jié)果做條件限制。

1.

沒有必輸條件

這種模式就是常見的，打開頁面可以看到全部數(shù)據(jù)，通過查詢條件進一步縮小搜尋范圍。

值得留意的是查詢條件都是非必填項，當(dāng)你輸入一個或多個條件查出結(jié)果后，點擊重置按鈕后再點查詢，即可恢復(fù)為全量查詢結(jié)果。

如下圖所示：

2.

有必輸條件

本次說的重點是這種有必填查詢條件的狀況，打開頁面時看不到數(shù)據(jù)，查詢條件含有必填項，一個或多個；不輸入查詢條件，直接點擊查詢按鈕會提示必填字段必需輸入，此方式主要用于縮小查詢范圍。

必填查詢條件輸入后，其他非必填查詢條件也可以搭配輸入，進一步縮小查詢范圍。

如下圖所示：

3.

反顯查詢條件

有些系統(tǒng)，依據(jù)權(quán)限掌握要求，一些查詢條件需要反顯，并依據(jù)業(yè)務(wù)要求掌握是否可以修改，不行修改的可以置灰。

反顯固定值，如下圖所示：

反顯值可修改，如下圖所示：

許多時候是系統(tǒng)在用戶輸入沒權(quán)限的條件時再做校驗，好的用戶體驗就是容錯，可以避開用戶去犯錯。

這里涉及到權(quán)限的條件可以固定反顯某個值，或者反顯可以修改的一些值，用戶不管怎么選，都有權(quán)限來查，這樣可以避開用戶被提示無權(quán)限查詢時的焦慮感。

二、按鈕

B端產(chǎn)品使用按鈕的地方許多，本文主要談?wù)劚砀竦念^部按鈕和右側(cè)按鈕。

1.

頭部按鈕

頭部按鈕主要是用于不需要選擇表格數(shù)據(jù)的操作按鈕，最常用的就是新建功能。

另外就是支持批量操作的功能按鈕，例如導(dǎo)出和刪除，勾選一條或多條導(dǎo)出；不勾選時導(dǎo)出全部，勾選多條數(shù)據(jù)，批量刪除。批量操作時，表格最左側(cè)需要搭配復(fù)選框元件。

如下圖所示：

2.

右側(cè)按鈕

右側(cè)按鈕主要是針對單條數(shù)據(jù)操作的按鈕，例如查看、修改、刪除等。

假如放在頭部，需要勾選一條數(shù)據(jù)來操作，勾選多條或者不勾選數(shù)據(jù)點擊按鈕時，系統(tǒng)都需要校驗；其實也提高了用戶的認(rèn)知成本，所以我覺得這類操作按鈕可以全部放到右側(cè)來。

對于不同數(shù)據(jù)，功能按鈕依據(jù)權(quán)限不同來設(shè)計，可以免去校驗的認(rèn)知成本，用戶可以直接上手操作，也可避開犯錯時的焦慮感。

例如有些數(shù)據(jù)不能修改和刪除時，就可以直接在右側(cè)不顯示，避開點擊后再去提示用戶。

如下圖所示：

另外這里有個關(guān)鍵點，當(dāng)表格中的字段許多或者數(shù)據(jù)內(nèi)容許多時，會消失橫向滾動條，用戶很有可能看不到右側(cè)的操作列，這種體驗是很糟糕的。

這里需要將操作列固定在最右側(cè)，另外左側(cè)的復(fù)選框也可以協(xié)作固定在最左側(cè)，由于當(dāng)滾動條往右拖動時，也會看不到左側(cè)復(fù)選框區(qū)域，不便于用戶去操作導(dǎo)出或者其他功能操作。

三、表頭

正常的表頭都是單層，有時候也會有多層的表頭，另外還可以對表頭進行配置，有的是直接在表頭處配置，有的是去系統(tǒng)管理單獨配置。

1.

一般表頭

這種狀況是最常見的，表頭字段都是單獨排列，有的會把排序直接放在表頭操作，例如下拉箭頭，可以選擇降序或者升序等。

如下圖所示：

假如需要對字段進行組合排序，也可以將排序功能單獨做成一個功能按鈕來操作。

2.

簡單表頭

簡單表頭主要是指有多層結(jié)構(gòu)的表頭，有時候表頭是一般的，但是數(shù)據(jù)內(nèi)容是多層的，就看詳細(xì)業(yè)務(wù)狀況了，我們的設(shè)計主要是為了提高業(yè)務(wù)操作效率。

如下圖所示：

3.

表頭篩選

詳細(xì)展現(xiàn)哪些表頭，也不是一成不變的，可能有些系統(tǒng)是固定的值，這也是在前期需求分析時，跟業(yè)務(wù)確定下來的；就是該業(yè)務(wù)場景下，這些字段不存在變化，當(dāng)然就不需要對表頭內(nèi)容修改了。

但是也才存在一些需要對表頭內(nèi)容修改的場景，比如默認(rèn)有一套表頭字段，但是依據(jù)不同用戶，可以選擇不同的表頭字段配置。這種是由用戶選擇不同模式，還有一種就是由用戶自定義來配置。

依據(jù)用戶不同配置不同的表頭字段，主要是考慮到不同崗位的用戶，查看數(shù)據(jù)的視角不一樣，對應(yīng)的關(guān)懷的字段也會不一樣。假如前期需求分析階段，可以很清楚的確定這些，可以設(shè)計成讓用戶選擇崗位來展現(xiàn)不同的表頭字段。

如下圖所示：

假如不是很確定，也可以全部讓用戶自定義，或者兩者結(jié)合起來用。比如：可以依據(jù)崗位先選擇一套表頭字段，另外用戶也可以自定義再調(diào)整。

如下圖所示：

另外還有種狀況，就是把表頭字段的設(shè)置放到系統(tǒng)管理中來配置，也可以理解為不讓一般用戶來配置，只讓系統(tǒng)管理員來掌握表頭字段。

如下圖所示：

可以批量選擇表頭字段，也可以批量刪除掉。

四、行

行主要是針對數(shù)據(jù)而言，比如行數(shù)據(jù)展現(xiàn)、選擇行、鼠標(biāo)滑過行等，同時需要協(xié)作左側(cè)選擇框來使用。

1.

行數(shù)據(jù)展現(xiàn)

當(dāng)數(shù)據(jù)許多時，密密麻麻積累在表格內(nèi)，用戶很簡單看錯位，把A行的數(shù)據(jù)看成B行的。為了有效解決這種問題，最常用的就是用間隔行背景色，就是間隔行設(shè)置一個不同的背景色。

如下圖所示：

2.

滑過行

滑過行主要是鼠標(biāo)滑過某行數(shù)據(jù)時，給一個滑過顏色，也是幫助便利用戶查看數(shù)據(jù)的一種手段。

如下圖所示：

3.

選擇行

選擇行主要是針對選中某行時的背景色變化，這里可以協(xié)作左側(cè)選擇框來使用。

假如只支持單行選擇，左側(cè)可以用單選框，選中某行時，除了背景色變化外，左側(cè)單選框也是選中狀態(tài)；選中其他行時，選中狀態(tài)即可切換過來。

如下圖所示：

假如支持多行選擇，左側(cè)可以用復(fù)選框，選中某行時，除了背景色變化外，左側(cè)復(fù)選框也是選中狀態(tài)，連續(xù)選擇其他行后，可以增加這種選中狀態(tài)。

如下圖所示：

五、數(shù)據(jù)對齊

數(shù)據(jù)對齊也是一種便利用戶查看數(shù)據(jù)的手段，包含三種對齊方式：左對齊、居中對齊、右對齊，另外表頭一般是采納居中對齊方式。

下面我將具體講解下三種對齊方式主要用于哪種場景下：

1.

左對齊

左對齊一般針對字符串類型的數(shù)據(jù)，例如賬號、文件名等。這種數(shù)據(jù)長度不固定的，為了有一個良好的展現(xiàn)效果，一般是左對齊，并且給一個左側(cè)間距。

如下圖所示：

2.

居中對齊

居中對齊一般針對固定長度類型的數(shù)據(jù)，比較常見的就是含下拉值的字段，并且下拉值不太多的狀況，例如性別、狀態(tài)等。

如下圖所示：

3.

右對齊

右對齊一般針對金額類數(shù)值型數(shù)據(jù)，有的可能還固定含有兩位小數(shù)點，可以依據(jù)詳細(xì)業(yè)務(wù)狀況來設(shè)計。

如下圖所示：

六、分頁器

分頁器一般在表格底部，只要是數(shù)據(jù)量不是太少的狀況，一般都會有分頁器的，主要是對數(shù)據(jù)進行分段刷新。

分頁器樣式有許多種，在此就不具體舉例了。

如下圖所示：

七、簡單表格

以上說的都是正常單層表格的各種細(xì)節(jié)問題，在一些簡單的業(yè)務(wù)場景下，常常會消失多層表格，可以設(shè)計成多層結(jié)構(gòu)或聯(lián)動結(jié)構(gòu)。

1.

多層表格

多層表格常消失于有父子級關(guān)系的場景，并且父子級都包含新建、修改、刪除等功能。

另外子級表格需要關(guān)聯(lián)父級表格，假如父級表格目前數(shù)據(jù)為空，子級表格是不能新建的；假如父子級的字段都是獨立的，這里可以在子級中加一個用于關(guān)聯(lián)父級的字段，這樣就將父子級串聯(lián)起來了。

兩層的比較好設(shè)計，就是兩個表格上下擺或者左右擺即可。

如下圖所示：

多層可能不止兩層，可能是三層或者四層，還有的系統(tǒng)為了擴展性，可以無限地增加層級。這樣業(yè)務(wù)結(jié)構(gòu)就看著很簡單了，作為設(shè)計師而言，我們就是要將簡單的業(yè)務(wù)給簡潔化，提高業(yè)務(wù)人員操作效率。

多層的正好之前有過經(jīng)受，我將父級和子級拆分開了，父級和中間子級放一起，最終子級單獨放，詳細(xì)怎么拆，要看業(yè)務(wù)狀況了。

我之前設(shè)計的是命題系統(tǒng)，從產(chǎn)品那里獵取的用戶操作習(xí)慣，一般是先把大題命好，就是總分多少、每個題型多少分、題型層級如何等。

感覺就是先搭好框架，然后再把小題命好。依據(jù)這種業(yè)務(wù)規(guī)章，我就將父級與中間子級放一起了，作為大題，最終子級作為小題。

比如語文試卷中，首先分為基礎(chǔ)語言部分、閱讀理解部分、寫作部分，然后基礎(chǔ)語言部分又分好幾種題型，每個題型下面又有多個小題，這樣看差不多就是三層結(jié)構(gòu)了。

實際狀況可能比這簡單，子級題型可能又分為A部分和B部分，所以命題系統(tǒng)的層級關(guān)系是要支持無限拓展的。

如下圖所示：

小結(jié)：B端產(chǎn)品設(shè)計有時候并沒有所謂的標(biāo)準(zhǔn)答案，究竟如何設(shè)計，的確要依據(jù)實際的業(yè)務(wù)場景來定；我們的使命原來就是賦能業(yè)務(wù)，提高業(yè)務(wù)的操作效率。

假如說業(yè)務(wù)線下的操作習(xí)慣，你不去遵循，違反了業(yè)務(wù)的心理模型，這樣設(shè)計出來的產(chǎn)品才真叫不好用，并且也加大了業(yè)務(wù)培訓(xùn)成本。

2.

聯(lián)動表格

多層表格假如不設(shè)置關(guān)聯(lián)字段，也可以采納聯(lián)動的方式。

比如選中父級表格中某行數(shù)據(jù)，子級表格數(shù)據(jù)會跟著變動，這里子級表格的數(shù)據(jù)是依據(jù)父級表格選中的行來變化的，每次只展現(xiàn)某個父級行的子級數(shù)據(jù)。

如下圖所示：

這里要區(qū)分下多層表格，多層表格的子級表格是展現(xiàn)的全量子級數(shù)據(jù)，所以當(dāng)數(shù)據(jù)量很大時，可以采納聯(lián)動表格方式，詳細(xì)還是看實際業(yè)務(wù)狀況了。

回到前面說的命題系統(tǒng)，小題部分我就是設(shè)計成聯(lián)動的模式，選中大題或者子級可以看到對應(yīng)的小題。由于大題層級可以無限拓展，設(shè)計成多層表格，到小題這里看著就會很亂了，所以我采納聯(lián)動表格，小題每次只展現(xiàn)對應(yīng)大題的。