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

我將從功能、交互、UI三個(gè)維度對表格設(shè)計(jì)進(jìn)行全方位總結(jié)分析。

前言

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

那表格的使用場景：

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

一個(gè)簡簡單單的表格功能其實(shí)非常強(qiáng)大，也是非常復(fù)雜的。但是不管怎么樣，我們不變的原則是：

• 更直觀地對比。通過交互和視覺對冗雜的信息進(jìn)行優(yōu)化，從而更直觀形象地對比。比如隔行使用斑馬線增強(qiáng)橫向?qū)б暋?/li>
• 更精準(zhǔn)地計(jì)算。對于大數(shù)據(jù)量的表格，數(shù)據(jù)的精準(zhǔn)度非常重要。比如根據(jù)提供的精準(zhǔn)度要求，定義展示數(shù)據(jù)的小數(shù)位數(shù)。
• 更快速地決策。比如在行列末尾增加匯總信息（總計(jì)或平均值），在每個(gè)分類里增加小計(jì)，可以讓管理者一目了然地了解數(shù)據(jù)，快速決策。

功能

1、添加數(shù)據(jù)

用戶在原有的表結(jié)構(gòu)中，增加一行數(shù)據(jù)。

2、導(dǎo)出數(shù)據(jù)

根據(jù)業(yè)務(wù)對數(shù)據(jù)精準(zhǔn)度的需求，定義一個(gè)導(dǎo)出規(guī)則。

1. 不保留數(shù)據(jù)格式化。比如該數(shù)值有五位小數(shù)，導(dǎo)入我們系統(tǒng)格式化為兩位小數(shù)，這種方式導(dǎo)出后還是五位小數(shù)。
2. 保留數(shù)據(jù)格式化。比如該數(shù)值有五位小數(shù)，導(dǎo)入我們系統(tǒng)格式化為兩位小數(shù)，這種方式導(dǎo)出后還是兩位小數(shù)。

3、顯示字段

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

4、搜索和篩選

按預(yù)定目標(biāo)過濾出某種具有特定性質(zhì)的數(shù)據(jù)的操作過程，幫助我們實(shí)現(xiàn)對信息的快速分析。

（1）簡易搜索

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

• 優(yōu)點(diǎn)：靈活選擇關(guān)鍵詞，節(jié)省空間。
• 缺點(diǎn)：可篩選信息不明顯。

（2）高級篩選器

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

• 優(yōu)點(diǎn)：曝光度高，操作成本低。
• 缺點(diǎn)：占用空間大，不易擴(kuò)展。

（3）組合篩選器

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

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

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

（4）列篩選器

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

優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀。

缺點(diǎn)：只能選擇單列篩選。

5、排序

設(shè)置查看數(shù)據(jù)優(yōu)先級順序，快速發(fā)掘最關(guān)注的信息。

（1）文本排序

以首字母A-Z規(guī)則進(jìn)行升序或降序。

（2）數(shù)值排序

以數(shù)值大小規(guī)則進(jìn)行升序或降序。

6、匯總信息

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

（1）行總計(jì)和行小計(jì)

在每個(gè)匯總類別的左側(cè)或右側(cè)增加一條總計(jì)列。

（2）列總計(jì)和列小計(jì)

在每個(gè)匯總類別的頂部或底部增加一條總計(jì)行。如上圖。

7、加載方式

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

（1）復(fù)雜分頁條

可以設(shè)置每頁顯示條數(shù)，適合大數(shù)據(jù)量。

• 優(yōu)點(diǎn)：用戶不僅對于數(shù)據(jù)量有宏觀上的把握，還可以靈活設(shè)置每頁顯示條數(shù)。
• 缺點(diǎn)：分頁條占用空間大。

（2）簡單分頁條

不可以設(shè)置每頁顯示條數(shù)，適合較大數(shù)據(jù)量。

• 優(yōu)點(diǎn)：用戶對于數(shù)據(jù)量有宏觀上的把握。
• 缺點(diǎn)：分頁條占用空間較大。

（3）加載更多

適合小數(shù)據(jù)量。

• 優(yōu)點(diǎn)：節(jié)省空間，沉浸式閱覽。
• 缺點(diǎn)：對數(shù)據(jù)量難以把握，操作不靈活。

交互

1、固定行列

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

（1）固定行

行數(shù)過多，出現(xiàn)縱向滾動條時(shí)，用戶需要了解行中每個(gè)數(shù)據(jù)對應(yīng)的列字段名。

（2）固定列

列數(shù)過多，出現(xiàn)橫向滾動條時(shí)，用戶需要了解列中每個(gè)數(shù)據(jù)對應(yīng)的行字段名。

2、批量操作

批量選擇記錄進(jìn)行操作。

（1）記錄條數(shù)

適用于所選數(shù)據(jù)較多，不重要的數(shù)據(jù)。

• 優(yōu)點(diǎn)：節(jié)省空間，直觀了解所選條數(shù)。
• 缺點(diǎn)：無法直觀查看所選項(xiàng)。

（2）記錄所選項(xiàng)

適用于所選數(shù)據(jù)較少，重要的數(shù)據(jù)。

• 優(yōu)點(diǎn)：可以直觀查看所選項(xiàng)。
• 缺點(diǎn)：占用空間，無法直觀了解所選條數(shù)。

3、查看詳情

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

（1）跳轉(zhuǎn)

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

（2）查看

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

4、編輯

對表格內(nèi)容進(jìn)行編輯。

（1）直接編輯

點(diǎn)擊內(nèi)容直接編輯，適合易編輯性大于易讀性的數(shù)據(jù)。

• 優(yōu)點(diǎn)：編輯時(shí)不影響查看其他內(nèi)容。
• 缺點(diǎn)：編輯空間有限，不適合編輯內(nèi)容較多的數(shù)據(jù)。

（2）懸浮層編輯

點(diǎn)擊單元格的“編輯”按鈕，編輯該項(xiàng)內(nèi)容。

• 優(yōu)點(diǎn)：編輯空間較大，編輯內(nèi)容的自由度比直接編輯高一點(diǎn)。
• 缺點(diǎn)：遮擋部分界面，無法看到上下文。

（3）彈窗編輯

點(diǎn)擊操作列的“編輯”按鈕，彈出編輯窗口。

• 優(yōu)點(diǎn)：聚焦操作，可編輯內(nèi)容多的數(shù)據(jù)。
• 缺點(diǎn)：遮擋全部頁面，無法看到其他內(nèi)容。

5、反饋

鼠標(biāo)懸停高亮底色，使得該行與行界限分明。強(qiáng)化了橫向?qū)б?，解決列數(shù)過多引起數(shù)據(jù)錯(cuò)行的問題。

6、精簡表頭

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

7、顯示長內(nèi)容

當(dāng)前頁面信息無法展示完全。

（1）浮層查看

適合查看較少內(nèi)容。

• 優(yōu)點(diǎn)：靈活查看內(nèi)容，操作成本低。
• 缺點(diǎn)：影響查看其他內(nèi)容。

（2）下拉查看

適合查看較多內(nèi)容。

優(yōu)點(diǎn)：不影響查看其他內(nèi)容。

缺點(diǎn)：不能靈活查看內(nèi)容，操作成本高。

8、空單元格

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

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

9、數(shù)據(jù)格式化

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

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

10、對齊規(guī)范

信息更加規(guī)整，方便對比同列數(shù)據(jù)，提高閱讀速度。

（1）文本左對齊

符合從左到右的閱讀文字習(xí)慣。

（2）數(shù)值右對齊

符合從右到左的對比數(shù)字習(xí)慣。有小數(shù)點(diǎn)按小數(shù)點(diǎn)對齊?？梢苑奖阌脩暨M(jìn)行心算，不需要轉(zhuǎn)換閱讀思維。

（3）固定操作按鈕居中

（4）表頭與信息內(nèi)容一致

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

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

UI

信息可視化

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

（1）狀態(tài)顯示

根據(jù)“7±2”原則，狀態(tài)個(gè)數(shù)不能太多，不然人的記憶負(fù)擔(dān)超負(fù)荷會適得其反。

（2）告警顯示

超出閾值需要突出顯示，提醒用戶超標(biāo)。

（3）變動顯示

比如同步環(huán)比的正負(fù)值。

（4）感受顯示

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

構(gòu)建F型視覺流

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

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

打造頁面呼吸感

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

（1）網(wǎng)格

通過物理實(shí)線割據(jù)內(nèi)容。

• 優(yōu)點(diǎn)：更加直觀，節(jié)省空間。
• 缺點(diǎn)：物理割據(jù)顯得不自然流暢。

1. 強(qiáng)調(diào)行。隱藏了縱向的線，不強(qiáng)調(diào)同列數(shù)據(jù)的上下對比，更加關(guān)注同條記錄的閱讀。
2. 強(qiáng)調(diào)列。隱藏了橫向的線，不強(qiáng)調(diào)同行數(shù)據(jù)的左右對比，更加關(guān)注同個(gè)屬性的對比。
3. 強(qiáng)調(diào)組。隱藏了同組的線，不強(qiáng)調(diào)同行和同列數(shù)據(jù)的對比，更加關(guān)注同組數(shù)據(jù)的對比。

（2）斑馬線

通過填充底色割據(jù)內(nèi)容。

• 優(yōu)點(diǎn)：在大量數(shù)據(jù)的表格中可以引導(dǎo)用戶的視覺。
• 缺點(diǎn)：在少量數(shù)據(jù)的表格中運(yùn)用斑馬線設(shè)計(jì)，用戶可能會對高亮顯示行產(chǎn)生困惑。

（3）留白

通過加大留白區(qū)域割據(jù)內(nèi)容。

• 優(yōu)點(diǎn)：舒適自然，閱讀流暢。
• 缺點(diǎn)：留白區(qū)域不好控制，太小達(dá)不到效果，太大浪費(fèi)空間。

保證字體的可讀性

1. 避免全大寫字體，因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。
2. 避免使用襯線字體，因?yàn)閭€(gè)性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考。
3. 避免使用斜體。易引起視線疲勞，影響閱讀。
4. 避免使用多種字體。保持風(fēng)格統(tǒng)一。

消除視覺噪音

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

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

復(fù)雜表格

圖表結(jié)合

1. 在表格內(nèi)嵌入圖表，可實(shí)現(xiàn)部分?jǐn)?shù)據(jù)可視化。
2. 在表格旁增加圖表，根據(jù)表格數(shù)據(jù)與圖表聯(lián)動。

交叉表

交叉報(bào)表是報(bào)表當(dāng)中常見的類型，屬于基本的報(bào)表，是行、列方向都有分組的報(bào)表。

在大多數(shù)產(chǎn)品中，我們見到的都是直聯(lián)表（只在行方向有分組），基本可以滿足大部分用戶。交叉表出現(xiàn)的場景很少，復(fù)雜度極高，只要你的系統(tǒng)出現(xiàn)交叉表，很多規(guī)則要重新考慮。

后記

表格的內(nèi)容其實(shí)我才講了一點(diǎn)點(diǎn)，只是給予各位一點(diǎn)啟發(fā)，還有大多場景需要各位隨機(jī)應(yīng)變了，這里有幾點(diǎn)想說的：

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

參考資料

• 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?；ヂ?lián)網(wǎng)數(shù)據(jù)行業(yè)UX&PM，參與過數(shù)據(jù)分析saas平臺和商業(yè)智能平臺等產(chǎn)品設(shè)計(jì)。關(guān)注商業(yè)智能、人工智能和互聯(lián)網(wǎng)金融。歡迎大家一起交流~

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