編輯導(dǎo)語(yǔ)：無(wú)論是在學(xué)校還是公司，我們每個(gè)人應(yīng)該都接觸過(guò)表格。表格不僅可以迅速的收集信息，還是一種高效的信息展示方式。本文作者基于過(guò)去的創(chuàng)業(yè)經(jīng)驗(yàn)，為我們分析總結(jié)了數(shù)據(jù)表格設(shè)計(jì)的一些關(guān)鍵點(diǎn)，希望看后能夠?qū)δ阌兴鶈l(fā)。

過(guò)去的創(chuàng)業(yè)經(jīng)歷中，我接觸了不少 SaaS（Software as a Service，軟件服務(wù)化）平臺(tái)，如 Mailchimp 、 Shopify 、 Klaviyo 、 Zendesk 等。

它們雖功能各異，但是ToB 管理后臺(tái)中有一個(gè)共同點(diǎn)——大量使用表格，這可能是效率最高的信息展示方式了。表格可以高效組織信息和數(shù)據(jù)，讓用戶方便閱覽、對(duì)比和分析。

這篇文章將會(huì)根據(jù)我的經(jīng)驗(yàn)，總結(jié)一下數(shù)據(jù)表格設(shè)計(jì)的關(guān)鍵要點(diǎn)。

一、長(zhǎng)表格凍結(jié)表頭

超過(guò)30行時(shí)，用戶就必須向下滾動(dòng)查看信息了。此時(shí)如果沒(méi)有固定的表頭就會(huì)很難閱讀。固定的表頭可以讓用戶閱讀起來(lái)更加輕松，不至于翻著翻著就忘記自己在看什么了。

設(shè)計(jì)技巧：我喜歡用8點(diǎn)網(wǎng)格系統(tǒng)，因此通常將表頭的內(nèi)邊距設(shè)置為16px，這樣整體看起來(lái)不會(huì)太擁擠。

二、寬表格凍結(jié)首列

當(dāng)我們查閱表格時(shí)，有2類信息是統(tǒng)領(lǐng)全局的：

1. 每種數(shù)據(jù)類型，即首行/表頭（例如狀態(tài)、結(jié)果、預(yù)算等）；
2. 每項(xiàng)數(shù)據(jù)的標(biāo)題，即首列（名稱、ID等）。

數(shù)據(jù)項(xiàng)太多可以凍結(jié)首行，那么數(shù)據(jù)類型太多可以凍結(jié)首列。

設(shè)計(jì)技巧：對(duì)于凍結(jié)首列的表格，建議可以加一個(gè)陰影效果，給一個(gè)“可以滑動(dòng)”的視覺(jué)隱喻。

三、分步展示

我從一位程序員朋友說(shuō)，只要縮減單次加載的數(shù)據(jù)量，就可以縮短等待加載的時(shí)間，從而達(dá)到少量多次的高效體驗(yàn)。這就是為什么哪怕是移動(dòng)時(shí)代了，很多表格還是使用分頁(yè)組件。

少量多次的加載還有一種——滾動(dòng)加載，用戶滑到頁(yè)底時(shí)，自動(dòng)加載下一批數(shù)據(jù)，更加符合移動(dòng)時(shí)代的輕量交互趨勢(shì)。

然而我個(gè)人還是更加喜歡第一種分頁(yè)組件，因?yàn)槲铱梢杂盟S查看數(shù)據(jù)，靈活性更高、步驟更短。

第二種滾動(dòng)加載，也許更加適合 ToC 的快速閱讀場(chǎng)景。

設(shè)計(jì)技巧：如果每頁(yè)數(shù)據(jù)高度可能超過(guò)用戶屏幕，而分頁(yè)有沒(méi)有吸頂/底，可以將表格的首尾都放上分頁(yè)組件，這樣用戶就不需要為了翻頁(yè)而上下滾來(lái)滾去。

四、自定義列展示

當(dāng)數(shù)據(jù)類型過(guò)多時(shí)，簡(jiǎn)單粗暴地凍結(jié)首列并不能夠長(zhǎng)久地解決用戶體驗(yàn)問(wèn)題，畢竟無(wú)論是PC還是手機(jī)，我們都不習(xí)慣橫滑。

此時(shí)自定義列展示就成了一種不錯(cuò)的解決方式，讓用戶根據(jù)自己的喜好來(lái)定制表格的信息。

這個(gè)功能的運(yùn)用挺廣的（尤其是廣告投放系統(tǒng)），例如 Facebook Ad Manager 、 Google Ads 、 AdRoll 等，在太多數(shù)據(jù)類型的情況下，允許用戶自行選擇需要的部分。

五、篩選（自定義行展示）

既然可以自定義列展示，那肯定也可以自定義行展示，或者說(shuō)就是篩選功能。最基本是如果是數(shù)字類型的數(shù)據(jù)，就可以根據(jù)數(shù)據(jù)范圍來(lái)篩選（例如價(jià)格范圍：100~200元）。

復(fù)雜一點(diǎn)，可以根據(jù)將單列中重復(fù)出現(xiàn)的字段整成幾個(gè)選項(xiàng)（例如訂單狀態(tài)：審核中/進(jìn)行中/已完成）。如果選項(xiàng)過(guò)多，可以考慮用復(fù)選框?qū)崿F(xiàn)多選。

六、排序

和篩選類似，排序也是根據(jù)用戶需求展示信息。通常我們要預(yù)判用戶的可能需求，提供一個(gè)默認(rèn)排序方式。

如果用戶不滿意，可以通過(guò)點(diǎn)擊表頭來(lái)選擇不同的排序方式。

你可以默認(rèn)給大部分表頭加一個(gè)排序功能，不過(guò)也沒(méi)有必要每個(gè)都加。例如：根據(jù)首字字母排列類型、狀態(tài)之類的文本信息實(shí)在不太有必要。

設(shè)計(jì)技巧：建議不要用單線箭頭，而是使用實(shí)心的，這樣更容易辨識(shí)。最好把整個(gè)表頭作為點(diǎn)擊和鼠標(biāo)懸浮反饋區(qū)域，而不僅僅是圖標(biāo)那一小塊。

七、批量操作

復(fù)選框可用于允許用戶選擇多個(gè)條目并對(duì)所有條目執(zhí)行操作，這使用戶可以節(jié)省時(shí)間和精力，而不必一次又一次地重復(fù)相同的步驟。

如果把相同的按鈕放在每一行的尾部，如果少量還好，多了一不小心就會(huì)顯得復(fù)雜冗余。

設(shè)計(jì)技巧：我一般使用至少邊長(zhǎng)24px的復(fù)選框，以確保點(diǎn)擊的可用性。選中時(shí)，整列會(huì)用不同的背景色來(lái)高亮展示。

八、簡(jiǎn)約至上

雖然“極簡(jiǎn)主義”一詞已被大量使用，并且留白似乎已成設(shè)計(jì)趨勢(shì)，但在表格設(shè)計(jì)中，肯定少即是多。

設(shè)計(jì)數(shù)據(jù)表單時(shí)，重點(diǎn)應(yīng)該是數(shù)據(jù)本身而不是界面。試想一下，用戶已經(jīng)全身心投入大量的數(shù)字和信息中時(shí)，界面太過(guò)復(fù)雜只會(huì)增加沒(méi)有必要的認(rèn)知負(fù)擔(dān)。

設(shè)計(jì)技巧：去除沒(méi)必要的視覺(jué)干擾，例如不必要的圖標(biāo)、背景斑馬線，無(wú)規(guī)律的色彩等。

九、無(wú)襯線字體

在產(chǎn)品的品牌設(shè)計(jì)中，字體是規(guī)范中的重要一環(huán)。然而在設(shè)計(jì)表格時(shí)，簡(jiǎn)約至上才是關(guān)鍵，盡量避免任何裝飾性字體。

設(shè)計(jì)技巧：雖然不能夠建議你具體使用哪種字體，但最好不要使用任何襯線字體（serif fonts），因?yàn)楹苋菀装讶说淖⒁饬ξ讲恢匾牡胤剑斐梢曈X(jué)干擾。然后英文的話，也要避免過(guò)多的大寫(xiě)字母。

十、文字鏈接

有些表格會(huì)把項(xiàng)目名稱做成鏈接，這也是符合用戶習(xí)慣的的場(chǎng)景交互方式，用戶不用猜就可以知道鏈接的跳轉(zhuǎn)目標(biāo)。

設(shè)計(jì)技巧：請(qǐng)使用不同的顏色來(lái)標(biāo)明文字鏈接——加粗和下劃線是不太夠的。

十一、懸停操作

通常來(lái)說(shuō)，我們會(huì)把操作按鈕放在最右側(cè)。但如果表格需要左右滑動(dòng)才能完整顯示，這種布局就不方便理解和使用了。

如果表格過(guò)寬，可以將操作按鈕放在首列或第二列展示。為了保持表格在大部分情況下的整潔性，可以默認(rèn)隱藏操作按鈕，鼠標(biāo)懸停時(shí)才出現(xiàn)。

十二、總結(jié)

本文給表格設(shè)計(jì)提供了一個(gè)基本的指南，在具體項(xiàng)目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。

如果你還有什么好的想法和建議，可以在評(píng)論里留言討論。

本文提供的是表格樣式設(shè)計(jì)的建議，對(duì)于如何整理表格信息，之前寫(xiě)過(guò)一篇文章獲得了不錯(cuò)的反饋，提供給大家《手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法》

原文作者：Jeremiah Lam

原文地址：https://uxdesign.cc/11-table-design-guidelines-adb27ac01c8e

譯者：圓子，公眾號(hào)：體驗(yàn)進(jìn)階。

本文由 @Z Yuhan 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。