后臺產品經理在工作中常常會遇到表格，表格的合理設計才能給用戶帶來更高的獲取信息的效率、更快捷的計算。所以本文就總結了一些表格設計的方法。

表格長啥樣

首先，我們先來看看一般的表格是長什么樣的。

表格各區域介紹

表格主要分為五大區域，分別是：

1. 篩選區：主要負責篩選和搜索。
2. 操作區：是指針對表格整體進行的操作。
3. 表頭：主要包括標題，排序功能等。
4. 正文：數據展示區域。
5. 底欄：主要用于統計數據總條數和記錄當前位置。

下面我對表格的各個區域進行說明。

1. 篩選區

篩選區主要的功能是篩選和搜索，表格數據類型多于兩種時，就需要篩選功能了。合理設計篩選區可以大大提高用戶的效率。設計篩選區時，應該考慮如下幾點。

（1）手動查詢還是自動查詢

如果常用的查詢條件是組合幾個條件，那么這種情況下，一般是填好全部條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的某類個體具有多個屬性，組合條件的查詢顯然是更合理的。

如下圖所示：

如果篩選操作通常是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么一般設計是填好一個條件便自動查詢。

如下圖所示：

（2）單選框or下拉框？

篩選條件有些需要匯總數據的，有些只需看單一條件下的數據。

比如狀態包含“已開啟、已暫停和已歸檔”，除了需要統計各狀態的數據，還需匯總數據，此時則是做成單選框比較好，如下圖所示。

如果不需要匯總數據，則可以是下拉框或者Tab顯示，如下圖。這里有個小Tip，如果篩選值少于5個，則一般是Tab顯示；多于5個，則是下拉框比較好；如果多于10個，那么下拉框最好也加上搜索功能。

（3）關于常用組合

如果用戶的篩選條件比較復雜，而且條件的值比較固定時，則可以考慮添加常用組合功能。常用組合篩選主要幫助用戶解決繁瑣的輸入問題，可以快捷的進行查詢。

下圖是一種常用組合設計：

用戶可以通過點擊常用組合，自動生成篩選條件，自動查詢。如果要添加條件組合，可以通過保存當前的搜索條件實現。復雜的條件篩選時，還需要添加重置按鈕，允許用戶一次清除所有篩選條件。如下圖。

（4）模糊搜索還是精確搜索

這里的模糊搜索是指根據用戶輸入的字符，模糊匹配數據。比如說，SKU編碼輸入“K1234”，則系統需要搜出SKU編碼中包含“1234”，諸如“K123402、K123403、L123401”等等；如果要完全匹配“1234”，那則是精確匹配。

模糊匹配一般用于標題、自定義的字符串，篩選出相似結果的場景，因為用戶對于自定義的字符串不會記得那么清楚，模糊匹配會更加方便。

所以，精確匹配一般用于標準編碼、唯一標識的字符串，篩選出精確結果的場景。比如，商品ID，廣告關鍵詞等，因為用戶只需要關心的是精確匹配的結果。

2. 表格操作區

表格操作區主要承載對表格的功能操作，比如增刪改查或者表格結構的修改，如下圖。

一般來說，功能操作是遵從連續性原則，使整個操作過程流暢，符合邏輯。比如：“批量操作”是位于復選框上方，是為了讓用戶勾選完后，很自然的移到上方繼續操作；另外，重要的操作最好用顏色加以區分，并設置在視線容易抵達處，比如“新建Campaign”是核心功能，所以用橙色標識，并放在左邊，用戶一打開頁面，視線很容易便落到該處。

3. 表格標題區

表格標題區也叫表頭，主要包括字段名稱、排序、伸展表格等功能。表頭的重要作用之一就是對數據進行解釋，所以表頭的信息傳遞要清晰準確。

（1）字段名稱

表頭的字段名稱應當符合用戶思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加以說明。

一般來說，字段不超過10個的時候，可以在一屏顯示完全；當字段大于10個時，則建議使用自定義列功能。如非必要，不建議設計左右滾動，列表的作用滾動對于用戶來講，體驗不好，操作也不方便。

在自定義列設置時，可以根據字段的屬性進行分類，用戶檢索信息效率更高。

（2）排序

排序是一個非常重要的功能，如何從海量數據中篩選出符合要求的數據，排序是一個必不可缺的步驟。產品經理前期可收集用戶需求，得知哪些字段需要排序。

（3）表頭固定

隨著表格的行和列都增加，這時候用戶的瞬時記憶會遭遇閾限，根據7±2的原則，超過這個范圍時，用戶需要增加工具來幫助瀏覽表格內的數據，不然一滾動，用戶都不知道這列數據代表什么。此時固定表頭是一個很好的方法。

4. 表格正文

表格正文需要注意的點比較多，包括：對齊、分割、行高、信息完整、行內操作、空白單元格、匯總計算、高亮與提示、信息層級等。下面一一說明。

（1）對齊

對齊的數據能大大提高瀏覽效率，人的視線也比較順暢自然。一般來說，文字靠左對齊，符合人的閱讀習慣；數字靠右對齊，方便比較大??；對于固定長度的按鈕或文字，一般可以居中對齊。

（2）分割

正確使用斑馬線和鼠標懸停高亮底色可以很好的引導用戶瀏覽數據，避免出現錯行、迷失的情況。 斑馬線是幫助用戶區分行與行之間的數據，避免混淆；鼠標懸停高亮底色是用戶交互時的輔助工具，輔助用戶明確數據所在行。

（3）行高

正文的行高也是重要參數之一，如果強調在一屏盡可能顯示多一點數據的話，行高可以設置小一點；如果強調行內信息比較多的話，行高可以設置大一點。

（4）信息完整

由于表格寬度有限，有些字段的數據比較長時，會無法完整顯示在表格內，此時需要省略部分信息，用戶鼠標懸停時可以查看完整信息。

（5）行內操作

行內操作對比彈窗編輯或新打開標簽頁編輯有非常高的效率，所以對于頻繁修改的數據，建議使用行內編輯。

編輯的內容比較少時，

可以直接編輯修改，如下圖：

如果需要同時編輯的內容比較多時，為提高效率，可以采用批量填寫再保存，如下圖：

（6）空白單元格

最好不要留空白格，會使用戶迷惑，是程序出Bug了，還是數據為空。建議產品經理跟開發協商好空數據的顯示方式，一般不為了引起歧義，空數據用“-”顯示，為零數據使用“0”表示。

（7）匯總計算

表格字段多、數據之間需要計算時，為了減少用戶心算的負擔，應該在表格中幫助用戶匯總計算對應的數據。

（8）高亮與提示

對重點信息進行高亮顯示，提示用戶注意，幫助用戶快速找到重點是提高用戶體驗的手段之一。

（9）信息層級

表格數據有些是具有深度的，可以進行分析的，這類數據的信息層級應該在設計表格的時候體現出來。比如下圖中的“花費”，還可以對單條數據的“花費”進行分析，體現了信息的層級。

5. 底欄

最后是表格的底欄，底欄也是不可缺少的一部分，承載的作用主要是告訴用戶數據條數以及當前位置。

合理的設置每頁的顯示條數需要產品經理前期去調研，我們之前做了一個顯示店鋪所有商品的表格，默認每頁顯示15條，最多可設置每頁顯示50條?？墒呛竺嬗脩舴答佌f，即使每頁顯示50條也是太少了，因為他的店鋪有上千個商品，頁數多的話，翻頁效率太低了。后面我們改成每頁最多可以顯示200條，這才算解決他的問題。

總結

至此，關于表格設計就大概講完了，表格不只是簡單的呈現數據，如何設計表格，使表格內容可理解性強、用戶瀏覽效率高也是產品經理需要關心的問題。

關于表格設計，如果你有更好的建議，歡迎在評論留下你的建議哦~

本文由 @hao_4857 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議