在之前我們分享過(guò)一篇關(guān)于表格設(shè)計(jì)的詳解，比較系統(tǒng)的分享了表格設(shè)計(jì)的思路和流程。

但表格設(shè)計(jì)細(xì)節(jié)太多了，光靠一篇系統(tǒng)性的分享肯定無(wú)法覆蓋所有場(chǎng)景和問(wèn)題，所以本篇內(nèi)容主要集中在表格設(shè)計(jì)中面臨的常見(jiàn)問(wèn)題展開(kāi)。

1. 單元格的組成和內(nèi)間距應(yīng)用

2. 單元格尺寸設(shè)置和響應(yīng)邏輯

3. 單元格的內(nèi)容類(lèi)型

4. 單元格內(nèi)的文字樣式

5. 單元格的內(nèi)容堆疊

6. 單元格的對(duì)齊模式處理

7. 表格中的批量操作

8. 表格內(nèi)容的修改

9. 堆疊表頭的設(shè)計(jì)要點(diǎn)

10. 序號(hào)和 ID 的認(rèn)識(shí)

    
    

每個(gè)表格都是由若干矩形單元格組成的，單元格內(nèi)可以包含對(duì)應(yīng)的圖片、圖標(biāo)、按鈕、文字內(nèi)容。當(dāng)我們?cè)O(shè)計(jì)一個(gè)表格的時(shí)候，不管你有沒(méi)有使用線段來(lái)分割出每個(gè)單元格，都需要用這種網(wǎng)格模式完成表格的布局。

這意味著，單元格之間是沒(méi)有間距的，它們相互之間是緊密貼合在一起的，而不是通過(guò)外邊距控制布局的。

在此基礎(chǔ)上，為了防止單元格內(nèi)容和其它單元格內(nèi)容貼到一起，或在有格線的時(shí)候和格線貼在一起，我們就需要為每個(gè)單元格添加內(nèi)間距，可以使用4的倍數(shù)設(shè)置。

內(nèi)間距主要應(yīng)用在左右兩側(cè)，但實(shí)際上上下也需要設(shè)置，在一些多行或者堆疊的場(chǎng)景中，單元格的高度就要隨內(nèi)容增加。

不過(guò)，內(nèi)間距的使用也不是完全一致的，在部分單元格上可以忽略，比如表格中最左側(cè)的選擇列，和最右側(cè)的操作列，都可以忽略內(nèi)間距和邊緣貼合。

在上面的邏輯中，單元格的寬/高= 單元格橫豎間距 + 內(nèi)容寬/高，看起來(lái)很靈活，但是它不能完全解決表格的列寬分配問(wèn)題。

如果列數(shù)特別多，得做表格的左右視圖滾動(dòng)還好理解，但如果表格列數(shù)特別少怎么辦？強(qiáng)行添加間距來(lái)完成列的布局嘛？

這肯定是不合理的，所以我們需要在前面的基礎(chǔ)上添加新的條件，就是單元格的最小寬度和響應(yīng)邏輯。

首先說(shuō)最小寬度，單元格雖然可以在響應(yīng)模式下被拉伸，但可以肯定的是縮小到 10px 以內(nèi)的單元格根本就沒(méi)有存在的必要。所以每個(gè)單元格都是有最小尺寸的，而最小尺寸需要根據(jù)內(nèi)容決定。

這時(shí)候新的問(wèn)題又出現(xiàn)了，如果單元格內(nèi)容寬度不一致怎么辦？比如地址有的長(zhǎng)有的短。

那就要根據(jù)我們自己對(duì)內(nèi)容的判斷，制定出這類(lèi)單元格最小的寬度是多少，最少支持多少個(gè)字符。字?jǐn)?shù)比這少的留白，字?jǐn)?shù)比這多的用省略號(hào)或換行。

所以，當(dāng)我們排列表格的時(shí)候，就是先將所有單元格的最小列寬組合起來(lái)，然后對(duì)比表格的整個(gè)視圖區(qū)域。如果寬度無(wú)法達(dá)到，我們就使用等比的方式對(duì)它們進(jìn)行放大，適配視圖的寬度。

這就是表格響應(yīng)式布局的底層邏輯，視圖區(qū)域大于單元格最小的尺寸總和，單元格寬度等比放大（高度基本不變），小于則使用視圖左右滾動(dòng)模式。

很多 B端項(xiàng)目的表格只是從 Excel 表格直接照搬進(jìn)來(lái)的，只有一系列的字符串文本。

但時(shí)代是在發(fā)展的，現(xiàn)代表格對(duì)單元格內(nèi)容的需求并不只局限在文本而已，不管是飛書(shū)、語(yǔ)雀、石墨還是 Notion、Clickup、Coda 等云端工具，都拓展了單元格內(nèi)容的支持范圍。

所以我們首先要確定一件事，就是一個(gè)成熟的表格就不該只有文本一種單元格類(lèi)型，而是有多種數(shù)據(jù)類(lèi)型共存的，不同數(shù)據(jù)類(lèi)型就應(yīng)該有不同的表現(xiàn)形式，來(lái)增加區(qū)分度。

比如一般文本、價(jià)格、日期、標(biāo)簽、鏈接、附件、縮略圖、內(nèi)鏈、用戶、百分比、價(jià)格等數(shù)據(jù)類(lèi)型。

雖然很多時(shí)候我們獲得的需求是只有文本，但我們要學(xué)會(huì)自己去判斷背后的數(shù)據(jù)類(lèi)型是哪種，從而延伸出對(duì)應(yīng)的設(shè)計(jì)類(lèi)型出來(lái)。因只使用文本的表格不僅可讀性極差，往往也并不能帶來(lái)更高的效率和使用體驗(yàn)。

所以盡量去積累不同的數(shù)據(jù)類(lèi)型展示形式，比如過(guò)去 QQ 使用彩色的圓形來(lái)表示在線、忙碌、離線等不同狀態(tài)，在同樣簡(jiǎn)單反映設(shè)備狀態(tài)的表格中，我們也可以使用同類(lèi)的方法。或者對(duì)包含百分比進(jìn)度的數(shù)據(jù)，使用進(jìn)度條而不是單純放數(shù)字。

當(dāng)然具體使用什么樣式，需要結(jié)合具體場(chǎng)景做判斷，不能純粹為了差異性和視覺(jué)效果做改變，任何優(yōu)化都需要在最后和用戶做確認(rèn)確保它們的有效性。

前面提的是我們要讓單元格的不同數(shù)據(jù)類(lèi)型被表現(xiàn)出來(lái)，而這里我們要講的就是純文本樣式了。

雖然很多表格中確實(shí)主要以文本為主，不適合將內(nèi)容替換成不同的數(shù)據(jù)類(lèi)型，但文本和文本之間，也是有區(qū)別的。

首先就是很多表格都包含一個(gè)核心字段，比如班級(jí)學(xué)生、執(zhí)勤醫(yī)生表格，那么這個(gè)表格中最重要的信息必然是姓名。雖然可能也會(huì)有重名的情況，姓名不具有唯一屬性，但作為數(shù)據(jù)主鍵（數(shù)據(jù)庫(kù)概念）中的用戶 ID，是沒(méi)有任何可讀性的，所以不應(yīng)該被凸顯。

如果我們判斷不出來(lái)什么文本重要，但至少我們應(yīng)該可以判斷哪些字符是不重要的，這種不重要不一定是數(shù)據(jù)本身的價(jià)值，而是它對(duì)于我們的瀏覽、檢索沒(méi)有太大的價(jià)值。比如前面例舉的復(fù)雜的 User_id 號(hào)，或者沒(méi)有任何規(guī)律的商品編碼，再或者一長(zhǎng)串的哈希值……

我們就可以通過(guò)最基本的字重、灰度來(lái)適當(dāng)調(diào)節(jié)它們的對(duì)比即可，弱化那些對(duì)于瀏覽而言不重要的信息，才能提高整個(gè)表格的查看效率。

如果要為文本增加色彩，那么該文本的字段意義要符合用戶的心智。比如鏈接是藍(lán)色的，上漲是紅色（可能是綠色），狀態(tài)正常是綠色，警示文本是橙色，以此類(lèi)推……

同時(shí)，針對(duì)一些比較特殊的文本類(lèi)型，尤其是和數(shù)字相關(guān)的，是可以切換數(shù)字字體類(lèi)型的。比如財(cái)務(wù)、金融、虛擬貨幣類(lèi)平臺(tái)，對(duì)金額、百分比的數(shù)據(jù)展示異常關(guān)注，雖然不一定要在樣式上做的非常特別，但往往會(huì)獨(dú)立使用一個(gè)字體顯示金額和百分比。

在一般的表格設(shè)計(jì)中，我們默認(rèn)一個(gè)單元格包含一行的內(nèi)容，因?yàn)檫@符合傳統(tǒng) Execel 的設(shè)計(jì)邏輯，每一個(gè)單元格要匹配表頭的內(nèi)容。

但是，這個(gè)邏輯顯然在復(fù)雜的 B 端項(xiàng)目中是不成立的，因?yàn)楹芏嘁?guī)定只是死的，但設(shè)計(jì)師是活得……

在一些長(zhǎng)表格中，很多近似、前后關(guān)聯(lián)、前后從屬的數(shù)據(jù)，是可以進(jìn)行合并的。比如頭像、用戶名、ID 編號(hào)，或者專(zhuān)業(yè)和所屬院系，左右眼視力狀況，體重、體脂率和肌肉含量，都是能夠進(jìn)行合并的數(shù)據(jù)類(lèi)型。

再或者，直接將同類(lèi)數(shù)據(jù)合并進(jìn)一個(gè)單元格中，在單元格另外添加每個(gè)數(shù)據(jù)的標(biāo)題，也不會(huì)直接影響查看。比如 Coding 中的列表案例：

對(duì)單元格內(nèi)容進(jìn)行堆疊合并，是需要設(shè)計(jì)師去判斷可行性的，這可以很好的減少表格的長(zhǎng)度，降低次要信息的占比，加快同類(lèi)數(shù)據(jù)信息的識(shí)別速度，提升整體的使用效率和體驗(yàn)。

但是，它同樣存在局限性，就是被合并后會(huì)難以進(jìn)行排序，因?yàn)橐粋€(gè)單元格內(nèi)包含好幾項(xiàng)內(nèi)容，精確排序的結(jié)果就難以呈現(xiàn)出對(duì)應(yīng)的規(guī)律結(jié)果。

所以合并信息內(nèi)容必須添加一個(gè)條件，就是被合并對(duì)象沒(méi)有排序的需求，或者整個(gè)單元格有個(gè)明確的主體字段，排序只以它為標(biāo)準(zhǔn)。

單元格的對(duì)齊上，很多人一直沒(méi)搞明白怎么處理，因?yàn)閷?shí)用性是高于美觀度的，所以只需要遵循幾個(gè)固定的邏輯做判斷，其實(shí)特別簡(jiǎn)單。

首先，因?yàn)槿搜?F 型的瀏覽習(xí)慣，可以直接默認(rèn)單元格是左對(duì)齊，然后找出不符合左對(duì)齊條件的那些信息數(shù)據(jù)，對(duì)它們進(jìn)行居中或右對(duì)齊的處理。下面一項(xiàng)項(xiàng)解釋。

最右操作列右對(duì)齊：

最右側(cè)操作列查看邏輯和左側(cè)內(nèi)容不同，我們要找操作選項(xiàng)的時(shí)候視線是從右側(cè)開(kāi)始向左看起 （F型反轉(zhuǎn)）的，所以作為操作項(xiàng)右對(duì)齊的模式效率更高。

但如果最右側(cè)的內(nèi)容不是常見(jiàn)的操作而是長(zhǎng)文本，比如地址、郵箱，那么依舊只能左對(duì)齊，因?yàn)槲谋镜拈喿x是有連續(xù)性的，只適合從左側(cè)讀起。

價(jià)格類(lèi)數(shù)字右對(duì)齊：

對(duì)于價(jià)格或一些統(tǒng)計(jì)總數(shù)，我們也需要使用右對(duì)齊。因?yàn)檫@些數(shù)字位數(shù)較多，我們?cè)诒砀裰胁榭此鼈兊闹饕樞蚓褪窍却_定位數(shù)，再看具體數(shù)值。比如 82000000000，那我們要做的第一件事必然是數(shù) “0”。

因?yàn)槲粩?shù)長(zhǎng)度不同，再通過(guò)千位分隔符，還可以對(duì)上下單元格進(jìn)行數(shù)額大小的對(duì)比，提升查看效率。

但是，不是所有長(zhǎng)數(shù)字都要右對(duì)齊，因?yàn)橛行?shù)字組合是沒(méi)有位數(shù)價(jià)值的，比如手機(jī)號(hào)、數(shù)字 ID、年月日等等，它們依舊只適合左對(duì)齊。

固定長(zhǎng)度的短數(shù)據(jù)居中：

最后一個(gè)，就是一些固定長(zhǎng)度的短數(shù)據(jù)類(lèi)型，比如球員號(hào)碼、狀態(tài)標(biāo)簽、百分比、圖標(biāo)，都是適合進(jìn)行居中排列的。

之所以加 “短” 字，就是因?yàn)橹挥袛?shù)據(jù)內(nèi)容短，居中對(duì)齊看起來(lái)就整潔干練。但類(lèi)似手機(jī)號(hào)、長(zhǎng)ID 這些內(nèi)容，雖然長(zhǎng)度也一樣，但居中的效果會(huì)非常違和。

表格往往會(huì)包含批量操作，在復(fù)雜的業(yè)務(wù)場(chǎng)景中確實(shí)可以延伸出非常復(fù)雜的交互邏輯。我們首先來(lái)解釋它的常規(guī)交互形態(tài)，然后再自己根據(jù)實(shí)際場(chǎng)景進(jìn)行優(yōu)化。

首先，批量操作必然要包含兩個(gè)關(guān)鍵的要素，多選框和操作列表。多選框用來(lái)進(jìn)行批量選擇，操作列表則是對(duì)選中的內(nèi)容進(jìn)行處理的按鈕區(qū)域。

建議將可以操作的選項(xiàng)做到表格的左側(cè)，類(lèi)似上方的案例，不管是放在表格上方還是下方都可以。但非常不建議將操作區(qū)域放到表格的右上角去，因?yàn)檫x擇和操作的距離太遠(yuǎn)，不僅操作起來(lái)麻煩，在不熟悉系統(tǒng)的情況下還很難找到操作項(xiàng)。

也建議操作的選項(xiàng)能在選中被激活時(shí)和默認(rèn)狀態(tài)有一定的區(qū)別，讓用戶操作過(guò)程明顯感知到選中后應(yīng)該在哪個(gè)地方進(jìn)行操作選擇，可以參考百度云、阿里云的批量交互。

最后，很多表格高度是超過(guò)一屏的，需要滾動(dòng)的，那么這個(gè)操作欄就需要懸浮在頁(yè)面上而不被滑出屏幕之外，這才能確保批量操作的效率和體驗(yàn)。

表格除了批量操作，也有允許直接在表格中進(jìn)行單元格編輯和修改的需求。雖然這里也存在很不一樣的業(yè)務(wù)需求和操作場(chǎng)景，但我還是要給出一個(gè)套比較萬(wàn)能的解決方案。

首先一定要明確現(xiàn)在做的東西是一個(gè)可以編輯的表格，而不是做一個(gè)長(zhǎng)得像表格的表單，比如下圖千牛的批量裝修頁(yè)，看起來(lái)很像表格，但本質(zhì)上它是個(gè)表單。

既然是表格，那查看、檢索、批量操作才是它的主要功能，不能因?yàn)槲覀兛梢匀ゾ庉嬎阉鼜?qiáng)行表單化。比如將可以修改的文本直接做成輸入框，隨時(shí)可以編輯，頁(yè)面的觀感就會(huì)充滿不確定性（等著你去改）……

而且改完之后怎么將修改的數(shù)據(jù)覆蓋原有的，是添加確認(rèn)按鈕，還是直接光標(biāo)從現(xiàn)有區(qū)域移出后就完成覆蓋？不管哪種操作效果都不好。

所以我一般建議在可修改的表格中，對(duì)允許修改的選項(xiàng)添加操作提示圖標(biāo)。文本必須再點(diǎn)擊后才進(jìn)入編輯模式，且必須有修改后點(diǎn)擊確認(rèn)替換原數(shù)據(jù)的操作過(guò)程。

這么做看起來(lái)確實(shí)操作變長(zhǎng)了，但這是變難用了嘛？再回到前面的要點(diǎn)重復(fù)一遍，這是一個(gè)表格。還要在這個(gè)地方查看信息、復(fù)制現(xiàn)有信息，要防止操作太容易，導(dǎo)致誤操作替換了錯(cuò)誤的信息進(jìn)去……

堆疊表頭，就是表頭類(lèi)似 Excel，包含上下的層級(jí)和從屬關(guān)系，比如在 Ant Design 表格頁(yè)面中有展示的表頭分組效果。

這種情況一般不用，但用的話幾乎都使用在表頭數(shù)量極多的場(chǎng)景，通過(guò)堆疊的方式來(lái)對(duì)不同的表頭進(jìn)行歸類(lèi)，便于在眾多數(shù)據(jù)中理解該數(shù)據(jù)類(lèi)型的歸屬，比如你們可以查看下面我們某學(xué)員的項(xiàng)目需求，接近 80個(gè)字段的表頭：

碰到這種情況確實(shí)是很蛋疼，但是沒(méi)辦法，有的項(xiàng)目就希望在表格頁(yè)面查看所有數(shù)據(jù)，而不整理進(jìn)詳情頁(yè)面中。針對(duì)這個(gè)情況就不要考慮美觀的問(wèn)題，而是識(shí)別性的問(wèn)題。

這種情況先完全忽略掉表格的美觀性，就重點(diǎn)考慮數(shù)據(jù)的識(shí)別性。

因?yàn)閿?shù)據(jù)太多，沒(méi)有表頭作為提示是不可能認(rèn)清數(shù)據(jù)是什么的，所以首先要確保表頭是可以始終存在于視圖區(qū)域內(nèi)容不會(huì)被滾動(dòng)走的。

第二點(diǎn)，既然都用堆疊對(duì)表頭做分組了，目的當(dāng)然是為了強(qiáng)調(diào)它們的從屬和上級(jí)分類(lèi)，如果只是像上面案例這樣簡(jiǎn)單的用線段分割，那在實(shí)際查看過(guò)程基本是沒(méi)有多少幫助的。

所以，在這種非常接近 Excel 排列邏輯的表格中，也使用操作 Excel 常用的手法，就是給不同的分類(lèi)添加不同的背景色，讓它們更好被區(qū)分出來(lái)。

雖然我們可以用很淺的背景色防止它們太上頭，但這個(gè)頁(yè)面的視覺(jué)效果基本是和美觀無(wú)緣了。原因于信息的識(shí)別效率，美觀是值得被犧牲的。

這種要羅列大量數(shù)據(jù)的表格，和前面的表格確實(shí)已經(jīng)快變成兩個(gè)物種了。強(qiáng)烈建議大家在 Excel 內(nèi)先創(chuàng)建出一個(gè) 1：1 的數(shù)據(jù)表，并模擬實(shí)際業(yè)務(wù)操作去動(dòng)手，你就會(huì)產(chǎn)生完全不同的認(rèn)識(shí)，而這是用圖文分享沒(méi)辦法詳細(xì)解答的感受。

在表格中，還有一個(gè)很容易糾結(jié)的地方，就是需不需要加 “序號(hào)”，而序號(hào)很多時(shí)候又和ID的理解有沖突。

首先要理解，ID 是表格每個(gè)行的唯一標(biāo)識(shí)符，比如學(xué)生列表，學(xué)生姓名年齡生日都可以完全相同，但I(xiàn)D才是系統(tǒng)區(qū)分他們的唯一指標(biāo)，所以ID的存在是用來(lái)做數(shù)據(jù)對(duì)象的標(biāo)識(shí)的。

而序號(hào)，則是獨(dú)立于數(shù)據(jù)對(duì)象之外，用來(lái)標(biāo)識(shí)表格中數(shù)據(jù)對(duì)象的序列，這在 Excel 中的側(cè)邊欄是必備的顯示內(nèi)容。

本質(zhì)上說(shuō)，這個(gè)序列和數(shù)據(jù)對(duì)象其實(shí)是沒(méi)關(guān)系的，不管你做了什么篩選、排序、修改，序號(hào)1使用就是表格中的第一個(gè)對(duì)象，2就是第2個(gè)，以此類(lèi)推。

它在 B 端項(xiàng)目中的存在價(jià)值并不是特別凸出，常規(guī)情況下我們肯定不需要放。但如果出現(xiàn)了一些對(duì)表格序列、數(shù)量比較敏感的場(chǎng)景，比如要查看排序結(jié)果范圍內(nèi)的對(duì)象數(shù)量，或者設(shè)置表格導(dǎo)出范圍（從某個(gè)序號(hào)到另一個(gè)序號(hào)之間）。

這些例子并不多見(jiàn)，所以想不明白序號(hào)存在的意義，產(chǎn)品業(yè)務(wù)方也給不出理由，那就不需要放！

結(jié)尾

以上就是今天分享的表格相關(guān)知識(shí)點(diǎn)了，下一次分享表格可能就是表格中的層級(jí)折疊說(shuō)明了。有其它的問(wèn)題也可以在留言中提出，有好的問(wèn)題我也會(huì)后面一并進(jìn)行整理。

感謝大家收看！

下篇再賤~