又到了 B 端干貨分享的環(huán)節(jié)了，今天我們來分享的是 B 端項目復(fù)雜組件中出現(xiàn)頻率最高(沒有之一)的——表格組件。

掌握表格的設(shè)計，就掌握 B 端設(shè)計的半壁江山，我們趕緊開始吧!

PART 01 表格的基本認(rèn)識

1. 表格是什么，為什么重要?

表格已經(jīng)是現(xiàn)代電子計算機系統(tǒng)中重要的組成部分之一，從小學(xué)開始，我們就已經(jīng)在電腦課上學(xué)習(xí)如何使用 Office Excel 來制作電子表格。

那么我們?yōu)槭裁葱枰褂帽砀衲?因為我們有記錄和查詢數(shù)據(jù)的需求。

在任何商業(yè)活動中，都會產(chǎn)生大量的數(shù)據(jù)信息，雖然我們發(fā)明了 SQL、Mysql 等數(shù)據(jù)庫語言記錄數(shù)據(jù)，但最原始的數(shù)據(jù)記錄是沒有可讀性的。

所以，為了讓數(shù)據(jù)可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構(gòu)建的網(wǎng)格系統(tǒng)，將數(shù)據(jù)有序、清晰地羅列出來。

表格的重要性就體現(xiàn)在企業(yè)日常工作中對這些數(shù)據(jù)進(jìn)行管理的需求和頻次上。

例如為電商 APP 開發(fā)了一套管理系統(tǒng)，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數(shù)據(jù)打轉(zhuǎn)，也就是圍繞著表格展開工作。

對于多數(shù)管理系統(tǒng)而言，數(shù)據(jù)查詢、管理都是非常重要且高頻使用的功能，所以常規(guī)項目中會包含大量的表格頁面。甚至，有的中小型項目的所有導(dǎo)航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優(yōu)劣對用戶工作效率和平臺體驗可以產(chǎn)生決定性的影響。

而優(yōu)秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據(jù)具體情況具體分析。

所以，這也是 B 端設(shè)計師的價值之一。一個優(yōu)秀的 B 端設(shè)計師勢必投入大量精力來提升對表格的認(rèn)識和表格設(shè)計能力。

2. 表格的主要構(gòu)成模塊

表格雖然細(xì)節(jié)設(shè)計上千差萬別，但在表現(xiàn)形式和閱讀順序上卻是基本一致的。

常規(guī)的表格必然包含表頭欄、列表、翻頁器三個部分，根據(jù)需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。

第 1，搜索欄，主要是用來進(jìn)行簡單的數(shù)據(jù)搜索和篩選的，當(dāng)搜索項較少的時候，就可以將搜索結(jié)合到表格組件內(nèi)。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。

第 2，表頭欄，每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型數(shù)量。

通常，表頭的設(shè)計會和下方列表設(shè)計有一定的區(qū)分，標(biāo)頭文字有一定的標(biāo)題屬性，所以會通過背景色、分割線、文字加粗來做區(qū)分。

第 3，列表，則是縱向排列數(shù)據(jù)對象的模塊。每個數(shù)據(jù)對象占一行，行的高度根據(jù)內(nèi)容來制定。橫向列表高度和縱向表頭寬度重疊的區(qū)域稱為單元格，每個單元格展示表頭對應(yīng)的數(shù)據(jù)明細(xì)。

常規(guī) B 端項目表格都會限制單頁列表的行數(shù)，極少使用無限滾動加載的模式。因為很多列表的數(shù)據(jù)有成千上萬條，加載帶來的系統(tǒng)性能消耗較大，且無法有效根據(jù)序列精準(zhǔn)定位指定數(shù)據(jù)對象。

第 4，多選和操作欄，如果數(shù)據(jù)對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的操作選項放進(jìn)操作欄中。

第 5，翻頁器，則是切換列表頁數(shù)的控件。通常大數(shù)據(jù)量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉(zhuǎn)的功能。

除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實際需求應(yīng)用。任何表格設(shè)計的第一步都是制定大框架，即包含的模塊和對應(yīng)分布位置，再展開后續(xù)的細(xì)節(jié)設(shè)計。

PART 02 表格的響應(yīng)式設(shè)計原則

B 端項目支持響應(yīng)式是今天行業(yè)的普遍需求，也就是頁面內(nèi)容隨著瀏覽器視圖寬度變更而變更。

不同頁面類型的響應(yīng)式邏輯各不相同，而表格是其中邏輯最復(fù)雜，也最難理解的一種。

表格響應(yīng)式規(guī)則通常在確定好框架以后制定，優(yōu)于視覺、交互設(shè)計，因為它對視覺和交互產(chǎn)生的影響非常大，是前置條件而不是通過設(shè)計稿逆推出來的。

表格的響應(yīng)式規(guī)則比較細(xì)碎，我根據(jù)下面的順序展開解釋：

• 表格的總寬響應(yīng)
• 表格的最小寬度
• 單元格的響應(yīng)邏輯
• 內(nèi)容的響應(yīng)邏輯

1. 表格的總寬響應(yīng)

表格的響應(yīng)主要是寬度上的響應(yīng)，整個表格的寬度區(qū)域隨父集元素的放大而放大。比如父級元素左右內(nèi)邊距為 20px，則表格整體寬度保持和父級 20px 的左右間距。

2. 表格的最小寬度

在上方邏輯下，表格可以無限延長。但是，反之它卻不能無限的縮短，你不可能做一個只有 10px，20px 的表格。

過窄的表格不僅支持不了內(nèi)容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。

最小的寬度可以結(jié)合前端柵格系統(tǒng)使用的 Breakpoint (斷點)來制定，如 SM：576px，或 MD：768px。

如果不了解柵格的段落規(guī)則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當(dāng)然，不管怎么定，一定要提前和前端溝通，確定尺寸方案。

當(dāng)表格內(nèi)容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當(dāng)表格內(nèi)容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內(nèi)容。

3. 單元格的響應(yīng)邏輯

單元格響應(yīng)這是整個表格最復(fù)雜的一環(huán)，橫向內(nèi)容會超出最小寬度的情況，就是由單元格規(guī)則決定的。

首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據(jù)需要，制定多個等級的最小單元格寬度，應(yīng)用在不同的數(shù)據(jù)類型中。

假設(shè)表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。

所以當(dāng)父級整個表格視圖小于 1040px 的時候，內(nèi)容就會不夠顯示從而觸發(fā)左右滾動的條件。

當(dāng)上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應(yīng)邏輯，就是為單元格寬設(shè)置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。

只要確保百分比的總和是 100%，不管你單元格是比例均分(5 個單元格每個 20%寬)，還是獨立制定(上面案例)，單元格寬都是等比縮放的狀態(tài)。

雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現(xiàn)在第一列的多選框，或者部分標(biāo)簽單元格、固定操作按鈕單元格。

于是，為了預(yù)留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續(xù)使用等比，只是計算的方法要減去定寬元素。

比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：

• (1000px – 2*48) * 20% = 180px

4. 內(nèi)容的響應(yīng)邏輯

作為單元格的子級，內(nèi)容也可以獨立定義響應(yīng)的規(guī)則。主要包含 3 種情況：

• 無響應(yīng)
• 隱藏多余
• 換行顯示

無響應(yīng)就是顯示的內(nèi)容是固定的，比如多選框、縮略圖、單按鈕等單元格內(nèi)容，它們沒有大小變動的必要。

隱藏多余，則是主要應(yīng)用在文本內(nèi)容上，當(dāng)單元格寬度小于當(dāng)前文本所需寬度時，就會把多余的文字進(jìn)行省略，這種做法適合應(yīng)用在一些原本就不是太重要的信息上。

比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標(biāo)懸浮彈出文字氣泡框的方式顯示所有文本。

而換行顯示，則是文本或多標(biāo)簽狀態(tài)下，一行不夠顯示就換行的做法。除非一開始單行行高預(yù)留了多行顯示的高度，否則多行內(nèi)容就會撐高單元格。

表格的響應(yīng)式也就先解釋到這里，制定表格的響應(yīng)邏輯需要從底層認(rèn)識它們的層級和響應(yīng)規(guī)則，然后再和開發(fā)溝通如何制定合理的方案。

隨著經(jīng)驗的積累，實戰(zhàn)經(jīng)驗豐富的 B 端設(shè)計師，就會在前期的規(guī)范環(huán)節(jié)制定出完整的表格響應(yīng)邏輯，應(yīng)用到前端框架開發(fā)和后續(xù)的設(shè)計，而不是做到哪定到哪。

PART 3 結(jié)尾

今天的分享就到這里結(jié)束，響應(yīng)式解釋還是太繁瑣了，我也只能寫到這個分上了，能理解多少要看大家的造化了!

目前想做一篇響應(yīng)式規(guī)則的濃縮短視頻，大家要想看，記得在下面留言~