掌握表格的設計，就掌握 B 端設計的半壁江山，我們趕緊開始吧！
1. 表格是什么，為什么重要？
表格已經(jīng)是現(xiàn)代電子計算機系統(tǒng)中重要的組成部分之一，從小學開始，我們就已經(jīng)在電腦課上學習如何使用 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ù)進行管理的需求和頻次上。
例如為電商 APP 開發(fā)了一套管理系統(tǒng)，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數(shù)據(jù)打轉(zhuǎn)，也就是圍繞著表格展開工作。
對于多數(shù)管理系統(tǒng)而言，數(shù)據(jù)查詢、管理都是非常重要且高頻使用的功能，所以常規(guī)項目中會包含大量的表格頁面。甚至，有的中小型項目的所有導航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優(yōu)劣對用戶工作效率和平臺體驗可以產(chǎn)生決定性的影響。
而優(yōu)秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據(jù)具體情況具體分析。
所以，這也是 B 端設計師的價值之一。一個優(yōu)秀的 B 端設計師勢必投入大量精力來提升對表格的認識和表格設計能力。
2. 表格的主要構(gòu)成模塊
表格雖然細節(jié)設計上千差萬別，但在表現(xiàn)形式和閱讀順序上卻是基本一致的。
常規(guī)的表格必然包含表頭欄、列表、翻頁器三個部分，根據(jù)需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。
第 1，搜索欄，主要是用來進行簡單的數(shù)據(jù)搜索和篩選的，當搜索項較少的時候，就可以將搜索結(jié)合到表格組件內(nèi)。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。
第 2，表頭欄，每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型數(shù)量。
通常，表頭的設計會和下方列表設計有一定的區(qū)分，標頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗來做區(qū)分。
第 3，列表，則是縱向排列數(shù)據(jù)對象的模塊。每個數(shù)據(jù)對象占一行，行的高度根據(jù)內(nèi)容來制定。橫向列表高度和縱向表頭寬度重疊的區(qū)域稱為單元格，每個單元格展示表頭對應的數(shù)據(jù)明細。
常規(guī) B 端項目表格都會限制單頁列表的行數(shù)，極少使用無限滾動加載的模式。因為很多列表的數(shù)據(jù)有成千上萬條，加載帶來的系統(tǒng)性能消耗較大，且無法有效根據(jù)序列精準定位指定數(shù)據(jù)對象。
第 4，多選和操作欄，如果數(shù)據(jù)對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的操作選項放進操作欄中。
第 5，翻頁器，則是切換列表頁數(shù)的控件。通常大數(shù)據(jù)量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉(zhuǎn)的功能。
除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續(xù)的細節(jié)設計。
B 端項目支持響應式是今天行業(yè)的普遍需求，也就是頁面內(nèi)容隨著瀏覽器視圖寬度變更而變更。
不同頁面類型的響應式邏輯各不相同，而表格是其中邏輯最復雜，也最難理解的一種。
表格響應式規(guī)則通常在確定好框架以后制定，優(yōu)于視覺、交互設計，因為它對視覺和交互產(chǎn)生的影響非常大，是前置條件而不是通過設計稿逆推出來的。
表格的響應式規(guī)則比較細碎，我根據(jù)下面的順序展開解釋：
- 表格的總寬響應
- 表格的最小寬度
- 單元格的響應邏輯
- 內(nèi)容的響應邏輯
1. 表格的總寬響應
表格的響應主要是寬度上的響應，整個表格的寬度區(qū)域隨父集元素的放大而放大。比如父級元素左右內(nèi)邊距為 20px，則表格整體寬度保持和父級 20px 的左右間距。
2. 表格的最小寬度
在上方邏輯下，表格可以無限延長。但是，反之它卻不能無限的縮短，你不可能做一個只有 10px，20px 的表格。
過窄的表格不僅支持不了內(nèi)容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。
最小的寬度可以結(jié)合前端柵格系統(tǒng)使用的 Breakpoint （斷點）來制定，如 SM：576px，或 MD：768px。
如果不了解柵格的段落規(guī)則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當然，不管怎么定，一定要提前和前端溝通，確定尺寸方案。
當表格內(nèi)容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當表格內(nèi)容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內(nèi)容。
3. 單元格的響應邏輯
單元格響應這是整個表格最復雜的一環(huán)，橫向內(nèi)容會超出最小寬度的情況，就是由單元格規(guī)則決定的。
首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據(jù)需要，制定多個等級的最小單元格寬度，應用在不同的數(shù)據(jù)類型中。
假設表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。
所以當父級整個表格視圖小于 1040px 的時候，內(nèi)容就會不夠顯示從而觸發(fā)左右滾動的條件。
當上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應邏輯，就是為單元格寬設置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%，不管你單元格是比例均分（5 個單元格每個 20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態(tài)。
雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現(xiàn)在第一列的多選框，或者部分標簽單元格、固定操作按鈕單元格。
于是，為了預留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續(xù)使用等比，只是計算的方法要減去定寬元素。
比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：
（1000px – 2*48） * 20% = 180px
4. 內(nèi)容的響應邏輯
作為單元格的子級，內(nèi)容也可以獨立定義響應的規(guī)則。主要包含 3 種情況：
- 無響應
- 隱藏多余
- 換行顯示
無響應就是顯示的內(nèi)容是固定的，比如多選框、縮略圖、單按鈕等單元格內(nèi)容，它們沒有大小變動的必要。
隱藏多余，則是主要應用在文本內(nèi)容上，當單元格寬度小于當前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示，則是文本或多標簽狀態(tài)下，一行不夠顯示就換行的做法。除非一開始單行行高預留了多行顯示的高度，否則多行內(nèi)容就會撐高單元格。
表格的響應式也就先解釋到這里，制定表格的響應邏輯需要從底層認識它們的層級和響應規(guī)則，然后再和開發(fā)溝通如何制定合理的方案。
隨著經(jīng)驗的積累，實戰(zhàn)經(jīng)驗豐富的 B 端設計師，就會在前期的規(guī)范環(huán)節(jié)制定出完整的表格響應邏輯，應用到前端框架開發(fā)和后續(xù)的設計，而不是做到哪定到哪。
今天的分享就到這里結(jié)束.
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。