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