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

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

前言

表格弛秋，又稱(chēng)為表器躏，既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段蟹略。人們?cè)谕ㄓ嵔涣鞯鞘А⒖茖W(xué)研究以及數(shù)據(jù)分析活動(dòng)當(dāng)中廣泛采用著形形色色的表格。表的結(jié)構(gòu)如下圖：

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

• 展現(xiàn)信息全面性挖炬。很多圖表類(lèi)型無(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ò)交互和視覺(jué)對(duì)冗雜的信息進(jìn)行優(yōu)化捶障，從而更直觀形象地對(duì)比。比如隔行使用斑馬線增強(qiáng)橫向?qū)б暋?/li>
• 更精準(zhǔn)地計(jì)算纲刀。對(duì)于大數(shù)據(jù)量的表格项炼，數(shù)據(jù)的精準(zhǔn)度非常重要。比如根據(jù)提供的精準(zhǔn)度要求示绊，定義展示數(shù)據(jù)的小數(shù)位數(shù)锭部。
• 更快速地決策。比如在行列末尾增加匯總信息（總計(jì)或平均值）面褐，在每個(gè)分類(lèi)里增加小計(jì)拌禾，可以讓管理者一目了然地了解數(shù)據(jù)，快速?zèng)Q策展哭。

功能

• 添加數(shù)據(jù)湃窍。用戶(hù)在原有的表結(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)：主次分明剥悟，搜索框可滿(mǎn)足大部分用戶(hù)需求灵寺，更高的要求有較深的入口，減少干擾区岗。
  缺點(diǎn)：如果搜索不能滿(mǎn)足大部分用戶(hù)需求而需要高級(jí)篩選略板，必然增加了用戶(hù)的操作步驟。
  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ì)值或平均值）讥电，可以減少用戶(hù)的計(jì)算，達(dá)到快速?zèng)Q策的目的轧抗。

  
  
  
  

  1.行總計(jì)和行小計(jì)恩敌。在每個(gè)匯總類(lèi)別的左側(cè)或右側(cè)增加一條總計(jì)列。
  2.列總計(jì)和列小計(jì)横媚。在每個(gè)匯總類(lèi)別的頂部或底部增加一條總計(jì)行纠炮。如上圖月趟。

• 加載方式。避免全部鋪開(kāi)大量信息而影響頁(yè)面的加載速度恢口，影響用戶(hù)體驗(yàn)孝宗。

  
  
  
  

  1.復(fù)雜分頁(yè)條「纾可以設(shè)置每頁(yè)顯示條數(shù)因妇，適合大數(shù)據(jù)量。
  優(yōu)點(diǎn)：用戶(hù)不僅對(duì)于數(shù)據(jù)量有宏觀上的把握看疗，還可以靈活設(shè)置每頁(yè)顯示條數(shù)沙峻。
  缺點(diǎn)：分頁(yè)條占用空間大。
  2.簡(jiǎn)單分頁(yè)條两芳。不可以設(shè)置每頁(yè)顯示條數(shù)摔寨，適合較大數(shù)據(jù)量。
  優(yōu)點(diǎn)：用戶(hù)對(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ì)使用戶(hù)遺忘信息菜职。

  
  
  
  

  1.固定行青抛。行數(shù)過(guò)多，出現(xiàn)縱向滾動(dòng)條時(shí)酬核，用戶(hù)需要了解行中每個(gè)數(shù)據(jù)對(duì)應(yīng)的列字段名蜜另。
  2.固定列。列數(shù)過(guò)多嫡意，出現(xiàn)橫向滾動(dòng)條時(shí)举瑰，用戶(hù)需要了解列中每個(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)容需要用戶(hù)通過(guò)更深的入口查看。主次分明地展示信息拟枚，方便用戶(hù)快速定位所需信息薪铜。

  
  
  
  

  1.跳轉(zhuǎn)。把 ID恩溅、名稱(chēng)等唯一性標(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ì)給用戶(hù)帶來(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ù)客戶(hù)需求和場(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ì)齊贴硫。可以方便用戶(hù)進(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

• 信息可視化相味。視覺(jué)元素能提高閱讀速度。

  
  
  
  

  1.狀態(tài)顯示殉挽。根據(jù)“7±2”原則丰涉，狀態(tài)個(gè)數(shù)不能太多，不然人的記憶負(fù)擔(dān)超負(fù)荷會(huì)適得其反此再。
  2.告警顯示昔搂。超出閾值需要突出顯示，提醒用戶(hù)超標(biāo)输拇。
  3.變動(dòng)顯示摘符。比如同步環(huán)比的正負(fù)值。
  4.感受顯示。有些表達(dá)用戶(hù)的感官評(píng)價(jià)逛裤，用icon更符合用戶(hù)的心智模型瘩绒，比如“滿(mǎn)意”用笑臉icon，“不滿(mǎn)意”用苦臉icon带族，總比用文字闡述直觀吧锁荔。

• 構(gòu)建F型視覺(jué)流。通過(guò)視覺(jué)重量和視覺(jué)方向的組合來(lái)引導(dǎo)用戶(hù)查看信息的軌跡蝙砌。

  
  
  
  

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

• 打造頁(yè)面呼吸感。有利于控制用戶(hù)的閱讀速度肚邢，做到張弛有度壹堰，好像正在“呼吸”。避免大量信息毫無(wú)差異的堆積骡湖，從而使用戶(hù)在閱讀時(shí)視覺(jué)疲勞贱纠。

  
  
  
  

  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)用戶(hù)的視覺(jué)炮车。
  缺點(diǎn)：在少量數(shù)據(jù)的表格中運(yùn)用斑馬線設(shè)計(jì)舵变，用戶(hù)可能會(huì)對(duì)高亮顯示行產(chǎn)生困惑酣溃。
  3.留白。通過(guò)加大留白區(qū)域割據(jù)內(nèi)容纪隙。
  優(yōu)點(diǎn)：舒適自然赊豌，閱讀流暢。
  缺點(diǎn)：留白區(qū)域不好控制绵咱，太小達(dá)不到效果碘饼，太大浪費(fèi)空間。

• 保證字體的可讀性悲伶。

  
  
  
  

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

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

  
  
  
  

  1.避免不必要的視覺(jué)元素晦雨，無(wú)關(guān)的邊框和底色。
  2.避免不必要的視覺(jué)效果隘冲，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)中常見(jiàn)的類(lèi)型覆旱，屬于基本的報(bào)表蘸朋，是行、列方向都有分組的報(bào)表扣唱。

  
  
  
  

  在大多數(shù)產(chǎn)品中藕坯，我們見(jiàn)到的都是直聯(lián)表（只在行方向有分組）团南，基本可以滿(mǎn)足大部分用戶(hù)。交叉表出現(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ō)的：

• 沒(méi)有絕對(duì)的規(guī)范膜楷，只有相對(duì)的規(guī)范。要適應(yīng)自己產(chǎn)品的場(chǎng)景贞奋，選擇最適合自己的規(guī)范赌厅。比如我的產(chǎn)品要考慮交叉表，然而制定對(duì)齊規(guī)范的文章作者從頭到尾沒(méi)講到交叉表轿塔，我就要重新考慮這個(gè)規(guī)則的可用性特愿。
• 沒(méi)有完全的規(guī)范，只有基本的原則勾缭。任何文章都不可能把所有的情況羅列出來(lái)揍障，所以我們要理解規(guī)范背后的原則，推導(dǎo)出適應(yīng)其他場(chǎng)景的規(guī)范俩由，要知道很多事“萬(wàn)變不離其宗”毒嫡。
• 沒(méi)有組合的規(guī)范，只有總結(jié)的規(guī)范幻梯。規(guī)范向來(lái)都是有理有據(jù)兜畸，比如“搜索和篩選”功能，很多人會(huì)將遇到的篩選的情況羅列出來(lái)作為類(lèi)別碘梢，比如“時(shí)間篩選器+簡(jiǎn)易搜索”作為一類(lèi)咬摇，下次遇到“時(shí)間篩選+下拉框”就分為一類(lèi)，其實(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