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

表格長啥樣

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

表格各區(qū)域介紹

表格主要分為五大區(qū)域，分別是：

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

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

1. 篩選區(qū)

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

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

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

如下圖所示：

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

如下圖所示：

（2）單選框or下拉框？

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

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

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

（3）關(guān)于常用組合

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

下圖是一種常用組合設(shè)計：

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

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

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

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

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

2. 表格操作區(qū)

表格操作區(qū)主要承載對表格的功能操作，比如增刪改查或者表格結(jié)構(gòu)的修改，如下圖。

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

3. 表格標題區(qū)

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

（1）字段名稱

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

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

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

（2）排序

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

（3）表頭固定

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

4. 表格正文

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

（1）對齊

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

（2）分割

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

（3）行高

正文的行高也是重要參數(shù)之一，如果強調(diào)在一屏盡可能顯示多一點數(shù)據(jù)的話，行高可以設(shè)置小一點；如果強調(diào)行內(nèi)信息比較多的話，行高可以設(shè)置大一點。

（4）信息完整

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

（5）行內(nèi)操作

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

編輯的內(nèi)容比較少時，

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

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

（6）空白單元格

最好不要留空白格，會使用戶迷惑，是程序出Bug了，還是數(shù)據(jù)為空。建議產(chǎn)品經(jīng)理跟開發(fā)協(xié)商好空數(shù)據(jù)的顯示方式，一般不為了引起歧義，空數(shù)據(jù)用“-”顯示，為零數(shù)據(jù)使用“0”表示。

（7）匯總計算

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

（8）高亮與提示

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

（9）信息層級

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

5. 底欄

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

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

總結(jié)

至此，關(guān)于表格設(shè)計就大概講完了，表格不只是簡單的呈現(xiàn)數(shù)據(jù)，如何設(shè)計表格，使表格內(nèi)容可理解性強、用戶瀏覽效率高也是產(chǎn)品經(jīng)理需要關(guān)心的問題。

關(guān)于表格設(shè)計，如果你有更好的建議，歡迎在評論留下你的建議哦~

本文由 @hao_4857 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議