這是轉(zhuǎn)載的文章力九。

文章來(lái)源：http://www.woshipm.com/data-analysis/701630.html

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

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

前言

表格颅眶，又稱為表蜈出，既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段帚呼。人們?cè)谕ㄓ嵔涣魈投小⒖茖W(xué)研究以及數(shù)據(jù)分析活動(dòng)當(dāng)中廣泛采用著形形色色的表格。表的結(jié)構(gòu)如下圖：

這是轉(zhuǎn)載的文章煤杀。

http://www.woshipm.com/data-analysis/701630.html

那表格的使用場(chǎng)景：

展現(xiàn)信息全面性眷蜈。很多圖表類型無(wú)法展示數(shù)據(jù)特點(diǎn)。表格無(wú)疑是組織大量信息通用性最高的一種表達(dá)方式沈自，既可陳列信息酌儒，又可以表達(dá)信息之間的關(guān)系。

編輯性大于易讀性枯途。需要對(duì)數(shù)據(jù)進(jìn)行增刪改查忌怎。

需要對(duì)比數(shù)據(jù)。比如對(duì)比行與行之間的數(shù)據(jù)酪夷，了解兩者差異榴啸。

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

更直觀地對(duì)比。通過(guò)交互和視覺對(duì)冗雜的信息進(jìn)行優(yōu)化坦报，從而更直觀形象地對(duì)比库说。比如隔行使用斑馬線增強(qiáng)橫向?qū)б暋?/p>

更精準(zhǔn)地計(jì)算。對(duì)于大數(shù)據(jù)量的表格片择，數(shù)據(jù)的精準(zhǔn)度非常重要潜的。比如根據(jù)提供的精準(zhǔn)度要求，定義展示數(shù)據(jù)的小數(shù)位數(shù)字管。

更快速地決策啰挪。比如在行列末尾增加匯總信息（總計(jì)或平均值），在每個(gè)分類里增加小計(jì)嘲叔，可以讓管理者一目了然地了解數(shù)據(jù)脐供，快速?zèng)Q策。

功能

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

導(dǎo)出數(shù)據(jù)掏愁。根據(jù)業(yè)務(wù)對(duì)數(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ù)回挽。

顯示字段没咙。列數(shù)過(guò)多時(shí)，可以隱藏重要性低的列千劈，更好的突出重要性高的列祭刚，主次分明，減少干擾墙牌。

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

1.簡(jiǎn)易搜索捉捅。適合篩選條件不明確和篩選頻率不高的表格。盡量采用模糊搜索虽风，降低操作成本锯梁。

優(yōu)點(diǎn)：靈活選擇關(guān)鍵詞，節(jié)省空間焰情。

缺點(diǎn)：可篩選信息不明顯陌凳。

2.高級(jí)篩選器。適合篩選條件明確和篩選頻率高的表格内舟。

優(yōu)點(diǎn)：曝光度高合敦，操作成本低。

缺點(diǎn)：占用空間大验游，不易擴(kuò)展充岛。

3.組合篩選器。適合篩選條件不明確但篩選頻率高的表格耕蝉。

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

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

4.列篩選器谈为。適合篩選條件單一的表格。

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

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

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

1.文本排序。以首字母A-Z規(guī)則進(jìn)行升序或降序吠架。

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

匯總信息诵肛。在原始數(shù)據(jù)上增加匯總信息（合計(jì)值或平均值）屹培，可以減少用戶的計(jì)算默穴，達(dá)到快速?zèng)Q策的目的怔檩。

1.行總計(jì)和行小計(jì)。在每個(gè)匯總類別的左側(cè)或右側(cè)增加一條總計(jì)列蓄诽。

2.列總計(jì)和列小計(jì)薛训。在每個(gè)匯總類別的頂部或底部增加一條總計(jì)行。如上圖仑氛。

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

1.復(fù)雜分頁(yè)條介袜。可以設(shè)置每頁(yè)顯示條數(shù)出吹，適合大數(shù)據(jù)量遇伞。

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

缺點(diǎn)：分頁(yè)條占用空間大鸠珠。

2.簡(jiǎn)單分頁(yè)條。不可以設(shè)置每頁(yè)顯示條數(shù)秋麸，適合較大數(shù)據(jù)量渐排。

優(yōu)點(diǎn)：用戶對(duì)于數(shù)據(jù)量有宏觀上的把握。

缺點(diǎn)：分頁(yè)條占用空間較大灸蟆。

3.加載更多驯耻。適合小數(shù)據(jù)量。

優(yōu)點(diǎn)：節(jié)省空間炒考，沉浸式閱覽吓歇。

缺點(diǎn)：對(duì)數(shù)據(jù)量難以把握，操作不靈活票腰。

交互

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

1.固定行。行數(shù)過(guò)多轰胁，出現(xiàn)縱向滾動(dòng)條時(shí)谒主，用戶需要了解行中每個(gè)數(shù)據(jù)對(duì)應(yīng)的列字段名。

2.固定列赃阀。列數(shù)過(guò)多霎肯，出現(xiàn)橫向滾動(dòng)條時(shí)，用戶需要了解列中每個(gè)數(shù)據(jù)對(duì)應(yīng)的行字段名榛斯。

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

1.記錄條數(shù)驮俗。適用于所選數(shù)據(jù)較多懂缕，不重要的數(shù)據(jù)。

優(yōu)點(diǎn)：節(jié)省空間王凑，直觀了解所選條數(shù)搪柑。

缺點(diǎn)：無(wú)法直觀查看所選項(xiàng)。

2.記錄所選項(xiàng)索烹。適用于所選數(shù)據(jù)較少工碾，重要的數(shù)據(jù)。

優(yōu)點(diǎn)：可以直觀查看所選項(xiàng)百姓。

缺點(diǎn)：占用空間渊额，無(wú)法直觀了解所選條數(shù)。

查看詳情瓣戚。創(chuàng)建信息層級(jí)端圈，只展現(xiàn)核心內(nèi)容，非重點(diǎn)內(nèi)容需要用戶通過(guò)更深的入口查看子库。主次分明地展示信息舱权，方便用戶快速定位所需信息。

1.跳轉(zhuǎn)仑嗅。把 ID宴倍、名稱等唯一性標(biāo)志的指加上超鏈接，點(diǎn)擊可以查看該條記錄的詳情仓技。

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

編輯阔逼。對(duì)表格內(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)：遮擋部分界面瓦灶，無(wú)法看到上下文。

3.彈窗編輯迫卢。點(diǎn)擊操作列的“編輯”按鈕倚搬，彈出編輯窗口冶共。

優(yōu)點(diǎn)：聚焦操作乾蛤，可編輯內(nèi)容多的數(shù)據(jù)。

缺點(diǎn)：遮擋全部頁(yè)面捅僵，無(wú)法看到其他內(nèi)容家卖。

反饋。鼠標(biāo)懸停高亮底色庙楚，使得該行與行界限分明上荡。強(qiáng)化了橫向?qū)б暎鉀Q列數(shù)過(guò)多引起數(shù)據(jù)錯(cuò)行的問(wèn)題馒闷。

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

顯示長(zhǎng)內(nèi)容逛薇。當(dāng)前頁(yè)面信息無(wú)法展示完全。

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)容，操作成本高蚯涮。

空單元格治专。要避免空單元格會(huì)給用戶帶來(lái)困惑焊唬，是零值還是空值呢？

1.數(shù)據(jù)為零值看靠，則單元格顯示為0赶促，而且數(shù)據(jù)格式（小數(shù)位數(shù)等）要與同列數(shù)據(jù)相同處理，方便與其他數(shù)據(jù)進(jìn)行計(jì)算挟炬。

2.數(shù)據(jù)為空值鸥滨，則單元格顯示為短橫線“-”，表示空值谤祖。

數(shù)據(jù)格式化婿滓。絕對(duì)精確的數(shù)據(jù)影響人們的閱讀。我們可以根據(jù)客戶需求和場(chǎng)景決定數(shù)據(jù)精確度范圍粥喜。

1.顯示為數(shù)值凸主，設(shè)置小數(shù)位數(shù)，千分位和數(shù)值單位（比如萬(wàn)）等额湘。

2.顯示為百分比卿吐，設(shè)置小數(shù)位數(shù)。

對(duì)齊規(guī)范锋华。信息更加規(guī)整嗡官，方便對(duì)比同列數(shù)據(jù)，提高閱讀速度毯焕。

1.文本左對(duì)齊衍腥。符合從左到右的閱讀文字習(xí)慣。

2.數(shù)值右對(duì)齊纳猫。符合從右到左的對(duì)比數(shù)字習(xí)慣找颓。有小數(shù)點(diǎn)按小數(shù)點(diǎn)對(duì)齊屯伞〔ず欤可以方便用戶進(jìn)行心算簸喂，不需要轉(zhuǎn)換閱讀思維。

3.固定操作按鈕居中物遇。

4.表頭與信息內(nèi)容一致乖仇。（視情況而定，比如筆者設(shè)計(jì)的表格要考慮交叉表询兴，選擇了表頭居中乃沙，交叉表的定義請(qǐng)看“復(fù)雜表格-交叉表”部分。）

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

UI

信息可視化边琉。視覺元素能提高閱讀速度。

1.狀態(tài)顯示记劝。根據(jù)“7±2”原則变姨，狀態(tài)個(gè)數(shù)不能太多，不然人的記憶負(fù)擔(dān)超負(fù)荷會(huì)適得其反厌丑。

2.告警顯示定欧。超出閾值需要突出顯示，提醒用戶超標(biāo)怒竿。

3.變動(dòng)顯示砍鸠。比如同步環(huán)比的正負(fù)值。

4.感受顯示耕驰。有些表達(dá)用戶的感官評(píng)價(jià)爷辱，用icon更符合用戶的心智模型，比如“滿意”用笑臉icon朦肘，“不滿意”用苦臉icon饭弓，總比用文字闡述直觀吧。

構(gòu)建F型視覺流厚骗。通過(guò)視覺重量和視覺方向的組合來(lái)引導(dǎo)用戶查看信息的軌跡示启。

1.突出表頭兢哭。

2.突出匯總信息领舰。

3.增加合適的對(duì)比度，區(qū)分行與行之間的數(shù)據(jù)迟螺。

打造頁(yè)面呼吸感冲秽。有利于控制用戶的閱讀速度，做到張弛有度矩父，好像正在“呼吸”锉桑。避免大量信息毫無(wú)差異的堆積，從而使用戶在閱讀時(shí)視覺疲勞窍株。

1.網(wǎng)格民轴。通過(guò)物理實(shí)線割據(jù)內(nèi)容。

優(yōu)點(diǎn)：更加直觀球订，節(jié)省空間后裸。

缺點(diǎn)：物理割據(jù)顯得不自然流暢。

1）強(qiáng)調(diào)行冒滩。隱藏了縱向的線微驶，不強(qiáng)調(diào)同列數(shù)據(jù)的上下對(duì)比，更加關(guān)注同條記錄的閱讀。

2）強(qiáng)調(diào)列因苹。隱藏了橫向的線苟耻，不強(qiáng)調(diào)同行數(shù)據(jù)的左右對(duì)比，更加關(guān)注同個(gè)屬性的對(duì)比扶檐。

3）強(qiáng)調(diào)組凶杖。隱藏了同組的線，不強(qiáng)調(diào)同行和同列數(shù)據(jù)的對(duì)比款筑，更加關(guān)注同組數(shù)據(jù)的對(duì)比官卡。

2.斑馬線。通過(guò)填充底色割據(jù)內(nèi)容醋虏。

優(yōu)點(diǎn)：在大量數(shù)據(jù)的表格中可以引導(dǎo)用戶的視覺寻咒。

缺點(diǎn)：在少量數(shù)據(jù)的表格中運(yùn)用斑馬線設(shè)計(jì)，用戶可能會(huì)對(duì)高亮顯示行產(chǎn)生困惑颈嚼。

3.留白毛秘。通過(guò)加大留白區(qū)域割據(jù)內(nèi)容。

優(yōu)點(diǎn)：舒適自然阻课，閱讀流暢叫挟。

缺點(diǎn)：留白區(qū)域不好控制，太小達(dá)不到效果限煞，太大浪費(fèi)空間抹恳。

保證字體的可讀性。

1.避免全大寫字體署驻，因?yàn)樗茈y讀奋献，需要轉(zhuǎn)化思維。

2.避免使用襯線字體旺上，因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音瓶蚂，不利于用戶對(duì)數(shù)據(jù)的理解和思考。

3.避免使用斜體宣吱。易引起視線疲勞窃这，影響閱讀。

4.避免使用多種字體征候。保持風(fēng)格統(tǒng)一杭攻。

消除視覺噪音。用戶在處理數(shù)據(jù)時(shí)已接收大量的信息疤坝，多余的視覺符號(hào)容易對(duì)用戶造成干擾兆解。

1.避免不必要的視覺元素，無(wú)關(guān)的邊框和底色卒煞。

2.避免不必要的視覺效果痪宰，3D效果，陰影等酷炫效果。

復(fù)雜表格

圖表結(jié)合衣撬。

1.在表格內(nèi)嵌入圖表乖订，可實(shí)現(xiàn)部分?jǐn)?shù)據(jù)可視化。

2.在表格旁增加圖表具练，根據(jù)表格數(shù)據(jù)與圖表聯(lián)動(dòng)乍构。

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

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

后記

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

沒有絕對(duì)的規(guī)范，只有相對(duì)的規(guī)范惊楼。要適應(yīng)自己產(chǎn)品的場(chǎng)景玖瘸，選擇最適合自己的規(guī)范。比如我的產(chǎn)品要考慮交叉表胁后，然而制定對(duì)齊規(guī)范的文章作者從頭到尾沒講到交叉表店读，我就要重新考慮這個(gè)規(guī)則的可用性。

沒有完全的規(guī)范攀芯，只有基本的原則。任何文章都不可能把所有的情況羅列出來(lái)文虏，所以我們要理解規(guī)范背后的原則侣诺，推導(dǎo)出適應(yīng)其他場(chǎng)景的規(guī)范，要知道很多事“萬(wàn)變不離其宗”氧秘。

沒有組合的規(guī)范年鸳，只有總結(jié)的規(guī)范。規(guī)范向來(lái)都是有理有據(jù)丸相，比如“搜索和篩選”功能搔确，很多人會(huì)將遇到的篩選的情況羅列出來(lái)作為類別，比如“時(shí)間篩選器+簡(jiǎn)易搜索”作為一類，下次遇到“時(shí)間篩選+下拉框”就分為一類膳算，其實(shí)這是很片面的排列組合規(guī)范座硕，而不是總結(jié)性的規(guī)范。

彩蛋：在微信公眾號(hào)idatadesign后臺(tái)回復(fù)“表格”（防止鏈接失效）涕蜂，可以得到數(shù)據(jù)表格設(shè)計(jì)的Axure源文件华匾，希望能造福大眾吧～

參考資料：

1.http://md.maxoxo.design/components/data-tables.html#data-tables-interaction

2.https://design-nation.icons8.com/intro-to-data-tables-design-349f55861803

3.https://ux.shopify.com/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf

4.https://ant.design/docs/pattern/table-cn

5.https://www.biaodianfu.com/guidelines-for-designing-tables.html