將近一年，我都浸泡在設計數據表格的相關需求中，踩過很多坑；深深地體會到建立完整的知識體系的重要性，不然就是這個坑踩著上一個坑，萬劫不復。在這里，我總結并分享自己的經驗，希望助各位完美避開各種坑。

我將從功能、交互、UI三個維度對表格設計進行全方位總結分析。

前言

表格，又稱為表，既是一種可視化交流模式，又是一種組織整理數據的手段。人們在通訊交流、科學研究以及數據分析活動當中廣泛采用著形形色色的表格。表的結構如下圖：

那表格的使用場景：

• 展現信息全面性。很多圖表類型無法展示數據特點。表格無疑是組織大量信息通用性最高的一種表達方式，既可陳列信息，又可以表達信息之間的關系。
• 編輯性大于易讀性。需要對數據進行增刪改查。
• 需要對比數據。比如對比行與行之間的數據，了解兩者差異。

一個簡簡單單的表格功能其實非常強大，也是非常復雜的。但是不管怎么樣，我們不變的原則是：

• 更直觀地對比。通過交互和視覺對冗雜的信息進行優化，從而更直觀形象地對比。比如隔行使用斑馬線增強橫向導視。
• 更精準地計算。對于大數據量的表格，數據的精準度非常重要。比如根據提供的精準度要求，定義展示數據的小數位數。
• 更快速地決策。比如在行列末尾增加匯總信息（總計或平均值），在每個分類里增加小計，可以讓管理者一目了然地了解數據，快速決策。

功能

1、添加數據

用戶在原有的表結構中，增加一行數據。

2、導出數據

根據業務對數據精準度的需求，定義一個導出規則。

1. 不保留數據格式化。比如該數值有五位小數，導入我們系統格式化為兩位小數，這種方式導出后還是五位小數。
2. 保留數據格式化。比如該數值有五位小數，導入我們系統格式化為兩位小數，這種方式導出后還是兩位小數。

3、顯示字段

列數過多時，可以隱藏重要性低的列，更好的突出重要性高的列，主次分明，減少干擾。

4、搜索和篩選

按預定目標過濾出某種具有特定性質的數據的操作過程，幫助我們實現對信息的快速分析。

（1）簡易搜索

適合篩選條件不明確和篩選頻率不高的表格。盡量采用模糊搜索，降低操作成本。

• 優點：靈活選擇關鍵詞，節省空間。
• 缺點：可篩選信息不明顯。

（2）高級篩選器

適合篩選條件明確和篩選頻率高的表格。

• 優點：曝光度高，操作成本低。
• 缺點：占用空間大，不易擴展。

（3）組合篩選器

適合篩選條件不明確但篩選頻率高的表格。

優點：主次分明，搜索框可滿足大部分用戶需求，更高的要求有較深的入口，減少干擾。

缺點：如果搜索不能滿足大部分用戶需求而需要高級篩選，必然增加了用戶的操作步驟。

（4）列篩選器

適合篩選條件單一的表格。

優點：篩選當前列，更直觀。

缺點：只能選擇單列篩選。

5、排序

設置查看數據優先級順序，快速發掘最關注的信息。

（1）文本排序

以首字母A-Z規則進行升序或降序。

（2）數值排序

以數值大小規則進行升序或降序。

6、匯總信息

在原始數據上增加匯總信息（合計值或平均值），可以減少用戶的計算，達到快速決策的目的。

（1）行總計和行小計

在每個匯總類別的左側或右側增加一條總計列。

（2）列總計和列小計

在每個匯總類別的頂部或底部增加一條總計行。如上圖。

7、加載方式

避免全部鋪開大量信息而影響頁面的加載速度，影響用戶體驗。

（1）復雜分頁條

可以設置每頁顯示條數，適合大數據量。

• 優點：用戶不僅對于數據量有宏觀上的把握，還可以靈活設置每頁顯示條數。
• 缺點：分頁條占用空間大。

（2）簡單分頁條

不可以設置每頁顯示條數，適合較大數據量。

• 優點：用戶對于數據量有宏觀上的把握。
• 缺點：分頁條占用空間較大。

（3）加載更多

適合小數據量。

• 優點：節省空間，沉浸式閱覽。
• 缺點：對數據量難以把握，操作不靈活。

交互

1、固定行列

根據7±2的原則，隨著行列數增加，如果表頭不固定，超負荷記憶信息會使用戶遺忘信息。

（1）固定行

行數過多，出現縱向滾動條時，用戶需要了解行中每個數據對應的列字段名。

（2）固定列

列數過多，出現橫向滾動條時，用戶需要了解列中每個數據對應的行字段名。

2、批量操作

批量選擇記錄進行操作。

（1）記錄條數

適用于所選數據較多，不重要的數據。

• 優點：節省空間，直觀了解所選條數。
• 缺點：無法直觀查看所選項。

（2）記錄所選項

適用于所選數據較少，重要的數據。

• 優點：可以直觀查看所選項。
• 缺點：占用空間，無法直觀了解所選條數。

3、查看詳情

創建信息層級，只展現核心內容，非重點內容需要用戶通過更深的入口查看。主次分明地展示信息，方便用戶快速定位所需信息。

（1）跳轉

把 ID、名稱等唯一性標志的指加上超鏈接，點擊可以查看該條記錄的詳情。

（2）查看

在操作列中增加“查看”功能，點擊可以查看該條記錄的詳情。

4、編輯

對表格內容進行編輯。

（1）直接編輯

點擊內容直接編輯，適合易編輯性大于易讀性的數據。

• 優點：編輯時不影響查看其他內容。
• 缺點：編輯空間有限，不適合編輯內容較多的數據。

（2）懸浮層編輯

點擊單元格的“編輯”按鈕，編輯該項內容。

• 優點：編輯空間較大，編輯內容的自由度比直接編輯高一點。
• 缺點：遮擋部分界面，無法看到上下文。

（3）彈窗編輯

點擊操作列的“編輯”按鈕，彈出編輯窗口。

• 優點：聚焦操作，可編輯內容多的數據。
• 缺點：遮擋全部頁面，無法看到其他內容。

5、反饋

鼠標懸停高亮底色，使得該行與行界限分明。強化了橫向導視，解決列數過多引起數據錯行的問題。

6、精簡表頭

簡明扼要的列名可以節省表頭空間，避免“頭重腳輕”的表格布局。

7、顯示長內容

當前頁面信息無法展示完全。

（1）浮層查看

適合查看較少內容。

• 優點：靈活查看內容，操作成本低。
• 缺點：影響查看其他內容。

（2）下拉查看

適合查看較多內容。

優點：不影響查看其他內容。

缺點：不能靈活查看內容，操作成本高。

8、空單元格

要避免空單元格會給用戶帶來困惑，是零值還是空值呢？

• 數據為零值，則單元格顯示為0，而且數據格式（小數位數等）要與同列數據相同處理，方便與其他數據進行計算。
• 數據為空值，則單元格顯示為短橫線“-”，表示空值。

9、數據格式化

絕對精確的數據影響人們的閱讀。我們可以根據客戶需求和場景決定數據精確度范圍。

1. 顯示為數值，設置小數位數，千分位和數值單位（比如萬）等。
2. 顯示為百分比，設置小數位數。

10、對齊規范

信息更加規整，方便對比同列數據，提高閱讀速度。

（1）文本左對齊

符合從左到右的閱讀文字習慣。

（2）數值右對齊

符合從右到左的對比數字習慣。有小數點按小數點對齊?？梢苑奖阌脩暨M行心算，不需要轉換閱讀思維。

（3）固定操作按鈕居中

（4）表頭與信息內容一致

（視情況而定，比如筆者設計的表格要考慮交叉表，選擇了表頭居中，交叉表的定義請看“復雜表格-交叉表”部分。）

由于交叉表會在數值上套上好幾層表頭，所以下圖錯誤示例中頁面重量往右下角拉扯，造成頁面不平衡，而且這個情況會隨著套的表頭層數越來越嚴重，所以我們選擇了統一所有表頭居中。

UI

信息可視化

視覺元素能提高閱讀速度。

（1）狀態顯示

根據“7±2”原則，狀態個數不能太多，不然人的記憶負擔超負荷會適得其反。

（2）告警顯示

超出閾值需要突出顯示，提醒用戶超標。

（3）變動顯示

比如同步環比的正負值。

（4）感受顯示

有些表達用戶的感官評價，用icon更符合用戶的心智模型，比如“滿意”用笑臉icon，“不滿意”用苦臉icon，總比用文字闡述直觀吧。

構建F型視覺流

通過視覺重量和視覺方向的組合來引導用戶查看信息的軌跡。

1. 突出表頭。
2. 突出匯總信息。
3. 增加合適的對比度，區分行與行之間的數據。

打造頁面呼吸感

有利于控制用戶的閱讀速度，做到張弛有度，好像正在“呼吸”。避免大量信息毫無差異的堆積，從而使用戶在閱讀時視覺疲勞。

（1）網格

通過物理實線割據內容。

• 優點：更加直觀，節省空間。
• 缺點：物理割據顯得不自然流暢。

1. 強調行。隱藏了縱向的線，不強調同列數據的上下對比，更加關注同條記錄的閱讀。
2. 強調列。隱藏了橫向的線，不強調同行數據的左右對比，更加關注同個屬性的對比。
3. 強調組。隱藏了同組的線，不強調同行和同列數據的對比，更加關注同組數據的對比。

（2）斑馬線

通過填充底色割據內容。

• 優點：在大量數據的表格中可以引導用戶的視覺。
• 缺點：在少量數據的表格中運用斑馬線設計，用戶可能會對高亮顯示行產生困惑。

（3）留白

通過加大留白區域割據內容。

• 優點：舒適自然，閱讀流暢。
• 缺點：留白區域不好控制，太小達不到效果，太大浪費空間。

保證字體的可讀性

1. 避免全大寫字體，因為它很難讀，需要轉化思維。
2. 避免使用襯線字體，因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
3. 避免使用斜體。易引起視線疲勞，影響閱讀。
4. 避免使用多種字體。保持風格統一。

消除視覺噪音

用戶在處理數據時已接收大量的信息，多余的視覺符號容易對用戶造成干擾。

1. 避免不必要的視覺元素，無關的邊框和底色。
2. 避免不必要的視覺效果，3D效果，陰影等酷炫效果。

復雜表格

圖表結合

1. 在表格內嵌入圖表，可實現部分數據可視化。
2. 在表格旁增加圖表，根據表格數據與圖表聯動。

交叉表

交叉報表是報表當中常見的類型，屬于基本的報表，是行、列方向都有分組的報表。

在大多數產品中，我們見到的都是直聯表（只在行方向有分組），基本可以滿足大部分用戶。交叉表出現的場景很少，復雜度極高，只要你的系統出現交叉表，很多規則要重新考慮。

后記

表格的內容其實我才講了一點點，只是給予各位一點啟發，還有大多場景需要各位隨機應變了，這里有幾點想說的：

• 沒有絕對的規范，只有相對的規范。要適應自己產品的場景，選擇最適合自己的規范。比如我的產品要考慮交叉表，然而制定對齊規范的文章作者從頭到尾沒講到交叉表，我就要重新考慮這個規則的可用性。
• 沒有完全的規范，只有基本的原則。任何文章都不可能把所有的情況羅列出來，所以我們要理解規范背后的原則，推導出適應其他場景的規范，要知道很多事“萬變不離其宗”。
• 沒有組合的規范，只有總結的規范。規范向來都是有理有據，比如“搜索和篩選”功能，很多人會將遇到的篩選的情況羅列出來作為類別，比如“時間篩選器+簡易搜索”作為一類，下次遇到“時間篩選+下拉框”就分為一類，其實這是很片面的排列組合規范，而不是總結性的規范。

參考資料

• http://md.maxoxo.design/components/data-tables.html#data-tables-interaction
• https://design-nation.icons8.com/intro-to-data-tables-design-349f55861803
• https://ux.shopify.com/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf
• https://ant.design/docs/pattern/table-cn
• https://www.biaodianfu.com/guidelines-for-designing-tables.html

作者：安琪Angela，公眾號：idatadesign?；ヂ摼W數據行業UX&PM，參與過數據分析saas平臺和商業智能平臺等產品設計。關注商業智能、人工智能和互聯網金融。歡迎大家一起交流~

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