什么是表格？

表格頁是公認為展示數據最為清晰和高效的形式，它的信息密度極高，就像是一個家庭衣柜，里面很多抽屜，我們需要把衣物整潔擺放收納，提高空間利用率。

表格頁由三個部分，如下圖所示：

一、數據查看

數據查看可通過四個維度去自檢設計是否合理，分別為信息降噪、呼吸適中、高效易讀、詳情查看。

1、信息降噪-內容

通過對表頭內容刪減，我們一眼就可以看到表格的重要信息，從而幫助用戶能快速進行數據決策。因此，列數控制在7+-2，列表表頭展示更為關注的數據，更多信息在詳情中展示。

另外，如果不同用戶想看到的信息側重不同，我們還可以做自定義設置項，讓用戶自己去選擇想要看到的表格內容。

用最少字數給表頭做精簡，精簡到少一字不可。

另外，當遇到少一字都不可的長標題，我們可以定義專有名詞，并且給一個解釋專有名詞的icon，便于第一次使用的用戶易于理解。

2、 信息降噪-視覺

去掉不必要的分割線和斑馬紋，用對齊和間距來區分列和行，可以鼠標滑上去給斑馬紋，增強交互體驗。

分割線的樣式盡量輕盈，不要搶視覺，突出內容。

去掉不必要的裝飾和顏色，為了防止視覺負擔，少用面性圖標，使用顏色保持克制，刪除如果不是點擊即可刪除，可以不用預警色。

不要出現襯線字體，比如宋體，保持字體統一。

3、 呼吸適中-單元格

定義單元格高度。字號、行高、上下間距進行規范，這里有一個比較常見的規范，將字號設為N，那文字行高就是

1.5N，上下間距為1.2N，單元格高度=內容高度+上間距+下間距。

4、 呼吸適中-列寬

我們將首列和尾列定義為N1，列與列之間定義為N2，隨著頁面收縮和拉伸，N1保持不變，N2自適應變寬變窄，這樣頁面會看起來會更均衡，這樣會顯得有呼吸感。一般定義一個最小值，當表格寬度大于頁面寬度時候，固定首尾列，左右滑動。

5、 高效易讀-對齊方式

標題和內容一般采用左對齊，更高效的瀏覽順序，有長短不一的數字時，右對齊方便比較。操作項一般放在尾列右對齊。

6、高效易讀-不做無意義留白

當數據為零時就寫上“零”，當沒有數據時候就寫上“-”。比如開發取不到的后臺數據，我們就可以給“-”作為顯示，如果得到的數據就是零，我們也要讓它顯示出來。

7、高效易讀-選擇合適的翻頁器

選擇合適的翻頁器，利用分頁可以緩解服務器的加載壓力。無限瀏覽如果數據過多很容易使頁面崩掉，使用功能較為強大的翻頁器，每一頁默認10行以上，減少翻頁次數，增強用戶體驗，給出默認行數后，可以讓用戶自定義每頁行數，相比跨屏翻頁，向下滑動更便利。

8、高效易讀-收起低頻操作項

超過四項操作項收起來，可以用圖標指引下一步操作。關于哪些可以操作項可以折疊起來，可以與產品經理溝通收起低頻鏈接，或者埋點一個月時間查看點擊量也可以做出決策。

9、高效易讀-默認行數

當單元格內容長度不固定的時候，定義好內容的寬度和行數以及字數，超出顯示的字數可以用省略號代替。

10、高效易讀-行的排序

默認最近創建的在表格中第一行顯示，使用戶感知最新情況。也可以帶排序的表頭，讓用戶自定義排序。

11、詳情查看-入口

入口可以在操作里加詳情，也可以把發起人做成可以點擊樣式，跳轉詳情，并且可以避免視覺干擾，也就是降噪，當鼠標Hover上去時候，發起人才顯示出跳轉色，提示可點擊狀態。

12、詳情查看-交互方式

第一種是用彈窗的形式。第二種是第一種的延伸，當內容過多時候可以考慮抽屜樣式。這些交互的共同有點就是沒有脫離原頁面。當詳情內容較多且需要編輯時候，我們就考慮跳新頁面，使用新頁面進行承載。(這里有個細節，新開tab頁可以打開多個詳情頁，如果覆蓋原頁面則只能打開一個詳情頁，并且不能同時查看原頁面和詳情頁。所以我們要根據具體場景、業務需求去設計)

二、數據過濾

數據過濾由搜索，篩選和標簽頁構成。

1、搜索

搜索可分為模糊搜索和帶標簽的搜索。工作中常用的搜索為模糊搜索，優點是只要有相關的內容都會搜索出來，減少了精準搜索帶來的記憶負擔。缺點是容易把不相關的信息也帶出來，例如搜索手機號，把相關編碼也匹配了出來。帶標簽的搜索優點是搜索匹配精準度高。缺點是每次只能對單一條件進行搜索，當用戶要搜索的時候都要去切換選擇信息，多了一個步驟。另外，在實際工作中，可以通過埋點或者調研，如果搜索框搜索手機號頻率較大，我們可以把手機號設置為默認選項。

2、篩選

篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優點是空間利用率高，起到了很好的收納作用。缺點是無法直觀看到所有篩選項。平鋪篩選優點是操作效率高，篩選項一目了然，支持輸入更多篩選條件，可以自定義輸入。缺點是空間利用率低，不適合選項太多的情況。如果用戶點擊其中一個選項概率最多，我們就可以將點擊率高的一項作為默認項，然后選擇第一種下拉篩選框。如果用戶點擊每個選項概率相等，在空間允許情況下我們可以平鋪出來。

當篩選項過多時，信息排序應是用戶目標優于業務邏輯，即排序應該考慮用戶的使用習慣。例如當用戶查找訂單時候，第一反應都是搜索框輸入，而一般通過價格過濾較少的應該放在末尾。

當然，我們還有更多優化空間，當篩選項過多時，我們可以默認折疊低頻篩選項。折疊哪些篩選項還是得基于用戶習慣，可以通過數據埋點或者用戶調研得到用戶使用場景。

當通過數據埋點或者用戶調研發現絕大多數用戶只需要用到搜索項，那么我們就可以只保留搜索框，其他選項全部折疊到高級搜索里面，當點擊高級搜索時候出現一個彈窗，既可以保留更多篩選內容，又可以使頁面不會看起來很擁擠。

(當彈窗內容選擇完畢時候，高級搜索按鈕會呈現高亮顏色，未選擇更多篩選內容時候則呈現默認態。）

3、標簽頁

標簽頁是比較常用的數據過濾方式，切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時間、狀態的流轉有關。

同樣我們可以通過數據埋點或者調研，將用戶最關注的選項設置為默認選項，減少用戶的選擇，提高用戶體驗。例如下圖，用戶更關注的是銷售中的商品，即將到店的客戶，以及即將發貨的商品，所以我們將這些選項作為默認項。

三、數據操作

數據操作從控制范圍可以分為單行操作、批量操作和全局操作。從操作屬性可以分為新增數據、編輯數據和刪除數據。

當從產品那里拿來一個原型圖堆疊很多操作項，我們就可以根據控制范圍來區分判斷，從而明確擺放位置。單行操作可以放到表格里，批量操作根據親密性原則放在左上方，這樣可以離打勾矩形近一些，如果有利于用戶操作，也可以放在左下方。全局操作則可以放單獨一行，使得層級更加清晰。

調整后，我們發覺雖然解決了多個操作放一塊的行為，但是層級還是不夠清晰，我們可以通過割裂板塊或者板塊顏色不同來調整，使得識別性更強。

后記

B端設計強調的是在好用的基礎上讓頁面變好看，所以更考慮用戶體驗。所有設計方式不局限與一種，只要操作上是順手，業務上是合理的，都是優秀的設計。如果一個頁面占據半屏都是篩選項，那么我們就得好好反思，因為所有篩選項不可能都是高頻操作，接下來就需要去做數據埋點并進行頁面優化了。另外，一張只有篩選項和表格的頁面，表格數據查看區域建議占整個頁面的百分之六十到百分之七十，這個時候瀏覽起來是比較舒適的。

文章來源：UI中國    推薦：最多三分糖

藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務