一、表格的元素設計要點

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

1. 表格外框樣式

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

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

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

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

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

2. 表格選項卡設計

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

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

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

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

3. 表格的篩選表單

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

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

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

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

4. 表頭的設計

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

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

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

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

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

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

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

5. 表格主體列表設計

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

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

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

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

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

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

6. 表格的多選和操作

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

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

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

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

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

7. 頁碼控件

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

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

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

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

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

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

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

結(jié)尾

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

我們下篇再賤！

超人的電話亭