編輯導語：無論是在學校還是公司，我們每個人應該都接觸過表格。表格不僅可以迅速的收集信息，還是一種高效的信息展示方式。本文作者基于過去的創業經驗，為我們分析總結了數據表格設計的一些關鍵點，希望看后能夠對你有所啟發。

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

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

這篇文章將會根據我的經驗，總結一下數據表格設計的關鍵要點。

一、長表格凍結表頭

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

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

二、寬表格凍結首列

當我們查閱表格時，有2類信息是統領全局的：

每種數據類型，即首行/表頭(例如狀態、結果、預算等)；

每項數據的標題，即首列(名稱、ID等)。

數據項太多可以凍結首行，那么數據類型太多可以凍結首列。

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

三、分步展示

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

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

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

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

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

四、自定義列展示

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

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

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

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

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

復雜一點，可以根據將單列中重復出現的字段整成幾個選項(例如訂單狀態：審核中/進行中/已完成)。如果選項過多，可以考慮用復選框實現多選。

六、排序

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

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

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

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

七、批量操作

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

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

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

八、簡約至上

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

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

設計技巧：去除沒必要的視覺干擾，例如不必要的圖標、背景斑馬線，無規律的色彩等。

九、無襯線字體

在產品的品牌設計中，字體是規范中的重要一環。然而在設計表格時，簡約至上才是關鍵，盡量避免任何裝飾性字體。

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

十、文字鏈接

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

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

十一、懸停操作

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

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

十二、總結

本文給表格設計提供了一個基本的指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。

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

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

原文作者：Jeremiah Lam

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。