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

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

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

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

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

超過30行時，用戶就必須向下滾動查看信息了。此時如果沒有固定的表頭就會很難閱讀。固定的表頭可以讓用戶閱讀起來更加輕松，不至于翻著翻著就忘記自己在看什么了。

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

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

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

每種數(shù)據(jù)類型，即首行/表頭(例如狀態(tài)、結(jié)果、預(yù)算等)；

每項數(shù)據(jù)的標(biāo)題，即首列(名稱、ID等)。

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

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

三、分步展示

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

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

然而我個人還是更加喜歡第一種分頁組件，因為我可以用它跳躍查看數(shù)據(jù)，靈活性更高、步驟更短。

第二種滾動加載，也許更加適合 ToC 的快速閱讀場景。

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

四、自定義列展示

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

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

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

五、篩選(自定義行展示)

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

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

六、排序

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

如果用戶不滿意，可以通過點擊表頭來選擇不同的排序方式。

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

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

七、批量操作

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

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

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

八、簡約至上

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

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

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

九、無襯線字體

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

設(shè)計技巧：雖然不能夠建議你具體使用哪種字體，但最好不要使用任何襯線字體(serif fonts)，因為很容易把人的注意力吸引到不重要的地方，造成視覺干擾。然后英文的話，也要避免過多的大寫字母。

十、文字鏈接

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

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

十一、懸停操作

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

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

十二、總結(jié)

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

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

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

原文作者：Jeremiah Lam

總結(jié)

以上是生活随笔為你收集整理的如何让整个表格高度固定_Saas产品中，表格设计有哪些要点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。