從基礎講起，教你多種B端表格設計方式

一、表格的元素設計要點

表格雖然長得都挺像，但并不是完全一樣的，不同的需求會設計出功能、交互不一的細節，下面我們就直接開始解釋對于表格最重要的幾個細節的樣式設計思路。

1. 表格外框樣式

表格作為組件就有邊緣的表現形式，一種是有邊框，另一種是無邊框。

有邊框就是把表格主體區域被框起來進行突出，可以使用有色的描邊，也可以是和背景色不同的卡片。

無邊框則是表格沒有明顯的外邊框進行突出，僅靠元素的組合來形成視覺的區塊。

這是表格在樣式上最基礎也是最優先的決定的細節，雖然很簡單，但對表格的影響卻非常大。因為表格作為一個組件，需要和其它組件的樣式配合，尤其在表格被嵌入到其它模塊內作為二級模塊時，有框的設計就會讓界面看起來“套娃”感嚴重。

所以表格必須先確定置入的環境和所處層級，來判斷具體應用使用哪種模式。

2. 表格選項卡設計

部分表格會應用選項卡控件來切換不同的數據類型，比如一個采購任務表格，應用進行中、歸檔、中止三個選項。

這時候在表格設計中就先要把選項卡控件設計出來，而它可以有很多種做法，主流的一種是做成類似頁簽的切換，另一種是使用橫線加文字選項按鈕。

使用一級選項卡的案例很常見，但還有不少場景使用的選項不止一級，還包含二級、三級，而多級選項設計中最容易出現的問題就是使用了相同或完全無法表現包含關系的樣式。

表格如果要應用多級選項卡，設計的要點就是保證不同級之間樣式的差異，如果一級用頁簽的樣式，二級就可以用文字按鈕或矩形標簽。

3. 表格的篩選表單

表格頁面通常都會有篩選表格數據的表單，如果篩選項太多，那么篩選控件就會單獨聚合成一個表單組件。如果篩選項很少，那么往往就可以直接和表格組件進行結合。

和表格結合的篩選表單通常出現在表格主體的上方，可以整體左對齊排列也可以右對齊。通?？赐恍兄惺欠襁€要包含其它元素，比如左側要放選項卡控件，那么篩選內容就右對齊，如果右邊要放一些操作按鈕，那么就左對齊。

除了對齊外，這種篩選表單通常就包含三種操作類型，輸入、下拉菜單、開關，而不會應用滑塊、多選項等很占空間的類型。

既然省空間，自然使用的矩形邊框也要使用較小的規格。項目中的輸入框通常會包含 2-4 種高度，常規高度通常在 36-44 之間，而在表格上方的篩選輸入框高度要使用 32 及以下的規格。同時，下拉菜單不是必須要使用矩形框框起來的，可以使用無框的設計來增加層次感和進一步節省空間。

4. 表頭的設計

再往下，就到了表頭的設計。表頭設計主要關注表頭的高度、背景色、屬性列的寬、單元格內的布局邏輯四個要素。

表頭內的信息可以理解成是 “標題”，在常規設計邏輯下標題尺寸是較大的，但表格中它們的尺寸是反過來的。即表頭高度會較小，而且文字字號也可能更小，不對下方更重要的數據信息形成干擾，且提供更多的顯示空間。表頭區域的高度通常在 28-36 之間。

整個表頭是否要加背景色則由設計風格和場景決定，如果需要比較好的和上下內容形成區分就使用淺灰的背景色，如果使用無背景色的設計，那么表頭下方和數據行之間使用的分割線就會更粗、更黑。

表格內每個單元格的寬度設置就復雜了，主要由內容決定，可以參考前文對單元格寬度設置的詳細說明。

然后就是單元格內的布局設計了，表格的單元格通常都是滿足自動布局規則的，即定義單元格左右內間距，然后里面的元素左或右對齊，正常內容文本都是左對齊，而表現數值尤其是價格的通常右對齊。

單元格的設計中除了文本，還可能包含排序或篩選圖標，這兩個功能通常只能包含一個，因為它們有互斥屬性。如果是添加了這兩個操作，那么就要提供不同狀態的設計，即默認和激活狀態。狀態的區分可以使用字重和灰度對比，但不建議加入太突出的色相。

表頭還有一些極端的情況，就是類似真實表格制作一樣使用了多級表頭，用樹狀的結構拆分不同子類成列。這類需求中要重點區分不同的大類的信息，所以建議要在不同大類之間增加縱向或更深的分割線。

5. 表格主體列表設計

表格主體列表的設計就是最核心的內容了，主要關注點包括列表形式、行高、單元格內排版。

列表形式指的就是展示列表的主要樣式，包括基礎的網格型、分割線型、斑馬紋型，還有比較特殊的每行做成獨立卡片的卡片型。

第二個就是行高的設置，行高和寬度類似由上下間距加內容高度決定，而單行的行高是由行內最高的元素決定，比如行內放了商品圖，或是多行文本、標簽，就要先完成這些單元格的設計，來確定整行的高度。

常規的表格內行高應該是統一的，但不排除一些極端的情況，就是行內有元素的高度不統一，且不同數據之間差異極大，不能被省略掉。比如一個展示用戶反饋的表格，反饋可能有一行也可能十行，肯定不能全部默認十行高，所以就應用自適應行高排列。

最后單元格內的排版設計，對齊的模式在表頭設計的過程就已經確定，如果內容只是簡單的文本、標簽、圖片、數值，直接填充就行。而復雜、設計感更強的表格，就會在單元格內做比較多的突破。比如合并關聯度極高的數據，增加裝飾型圖標，引入簡易圖表類型等。

內容布局和設計的核心目標不是就為了視覺效果，而是要提升信息的識別效率，因為統一的單元格內樣式內容辨識度太差，會形成負面的效果。

6. 表格的多選和操作

表格除了展示數據外，往往也會包含對數據進行多選并批量操作的需求。支持操作的表格在第一列就會放一個多選框用于選擇，而選擇完成后還要有提供操作選項的地方。

常規的做法，是在表格上方或底部有批量操作的選項，但通常表格頭部會放其它內容所以操作經常放在下方，默認置灰或是不顯示。

部分表格因為單頁展示的數據量很多，放頂部底部都容易夠不著，所以會使用懸浮面板來放置批量操作的選項。但這種懸浮層不會直接顯示在當前選擇的行上方或下方，因為會影響觀看數據，所以它們通常是吸頂或吸底的設計。

但也有特例，就是有一些批量操作的權重非常高，比如審批列表中批量通過或者不通過，還是一些財務數據要導出下載到本地。很多設計會把這些權重高的操作按鈕化，然后開始胡亂擺放和其它操作湊在一起……

表格數據操作的選項首先要獨立放置不能和其它操作混合，并且多選通常在左側，如果操作按鈕在右側那么鼠標移動的距離其實非常長，批量操作頻次越高的表格中，這種設計帶來的負面影響越大。最后，就是如果操作選項多，那么權重就肯定是要分配的，不可能每個按鈕都很重要全用不同的顏色去呈現，只能以一到兩個按鈕作為最高權重，其它按鈕使用弱化樣式進行組合，否則會嚴重影響用戶的使用體驗。

7. 頁碼控件

完成了主體以后，就是底部的頁碼控件。這個控件的設計就沒有太多的知識點能說。但從以往經驗來看，如果換頁操作較頻繁的話，那么使用帶框按鈕的設計會遠比文字按鈕體驗好的多。

可以到 Ant 里體驗無框的頁碼操作再用一用百度下方的頁碼操作進行對比，確定哪種操作體驗更好，再進行后續的設計。

在有框的設計中，每個頁碼即一個獨立按鈕，那么這個按鈕的高就可以使用和上方篩選輸入框相同的尺寸，而不要單獨定義它。

表格的設計，就是對上面 7 個元素設計的規劃和定義。而優秀的表格設計并不是有完全標準的設計，而是根據不同場景和思路會組合不同的細節類型成為新的、獨立的樣式。

想要具備這種獨立設計它的能力，既要先了解完它們的做法，才能更細致的去分析線上成熟/優秀案例的設計手法，獲得有效的積累。

最后，就是表格只是一個組件，表格的設計不代表整個表格頁面的設計。如果一個項目表格頁面多，感覺項目做出來的東西完全一樣，作品集根本沒法輸出，就要積累表格頁面設計的樣式，有目的性的去做調整實現更好的視覺效果。

所以在我們自己課程內會專門準備不同樣式的表格頁讓學員臨摹，有對不同樣式的認知以后才能在自己的設計中輸出。

查看課程?? https://pro.uisdc.com

只有能分析細節的能力，才有自己產出的可能~

結尾

下一篇可能會繼續找表格有關的案例做改版，有目前項目真實案例的可以給我們私發~

我們下篇再賤！

歡迎關注作者的微信公眾號：「超人的電話亭」