一、表格的元素設(shè)計(jì)要點(diǎn)

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

1. 表格外框樣式

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

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

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

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

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

2. 表格選項(xiàng)卡設(shè)計(jì)

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

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

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

表格如果要應(yīng)用多級選項(xiàng)卡，設(shè)計(jì)的要點(diǎn)就是保證不同級之間樣式的差異，如果一級用頁簽的樣式，二級就可以用文字按鈕或矩形標(biāo)簽。

3. 表格的篩選表單

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

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

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

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

4. 表頭的設(shè)計(jì)

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

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

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

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

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

單元格的設(shè)計(jì)中除了文本，還可能包含排序或篩選圖標(biāo)，這兩個(gè)功能通常只能包含一個(gè)，因?yàn)樗鼈冇谢コ鈱傩?。如果是添加了這兩個(gè)操作，那么就要提供不同狀態(tài)的設(shè)計(jì)，即默認(rèn)和激活狀態(tài)。狀態(tài)的區(qū)分可以使用字重和灰度對比，但不建議加入太突出的色相。

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

5. 表格主體列表設(shè)計(jì)

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

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

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

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

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

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

6. 表格的多選和操作

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

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

部分表格因?yàn)閱雾撜故镜臄?shù)據(jù)量很多，放頂部底部都容易夠不著，所以會使用懸浮面板來放置批量操作的選項(xiàng)。但這種懸浮層不會直接顯示在當(dāng)前選擇的行上方或下方，因?yàn)闀绊懹^看數(shù)據(jù)，所以它們通常是吸頂或吸底的設(shè)計(jì)。

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

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

7. 頁碼控件

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

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

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

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

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

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

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

結(jié)尾

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

我們下篇再賤！

超人的電話亭