編輯導(dǎo)語：一點(diǎn)一點(diǎn)地理清表格的設(shè)計(jì)點(diǎn)，可能會(huì)使得表格更加趨于明朗。今天，本文作者為我們?cè)敿?xì)地介紹了數(shù)據(jù)表格中都有哪些設(shè)計(jì)點(diǎn)，通過這篇文章，可以讓你很清晰地了解數(shù)據(jù)表格有哪些設(shè)計(jì)要點(diǎn)，以及應(yīng)該如何設(shè)計(jì)。

1. 前言

在企業(yè)級(jí)中后產(chǎn)品中，通常大量使用表格來展示結(jié)構(gòu)化的數(shù)據(jù)。合理地設(shè)計(jì)表格能給用戶帶來高效的信息獲取率，但如何言而有物地設(shè)計(jì)表格，相信是絕大數(shù)剛?cè)胄蠦端的設(shè)計(jì)師的困擾。

因此，我結(jié)合了自身在實(shí)際工作中遇到的表格設(shè)計(jì)的問題，針對(duì)web端復(fù)雜業(yè)務(wù)場(chǎng)景下的表格該如何設(shè)計(jì)進(jìn)行了探討，希望能幫大家理清表格設(shè)計(jì)中的一些難點(diǎn)和困惑點(diǎn)。

表格（Table），又稱為表，是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成，其中，內(nèi)部包含表頭、表體、底欄等；外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等，如圖：

• 標(biāo)題：對(duì)表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性（日期、地區(qū)等）；
• 篩選區(qū)域：表格的數(shù)據(jù)檢索區(qū)，方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方；
• 操作按鈕區(qū)：承載表格的增刪改查的功能和業(yè)務(wù)處理操作；
• 表頭：般指列標(biāo)簽，這里也指首列行標(biāo)簽，是對(duì)所屬行或列信息的描述；
• 表體：表格的主體，承載著內(nèi)容信息數(shù)據(jù)，由單元格組成；
• 底欄：主要用于統(tǒng)計(jì)數(shù)據(jù)總條數(shù)和記錄當(dāng)前位置，包含數(shù)據(jù)量、單頁條目、總條目、分頁等。

說完表格的組成，接下來我會(huì)對(duì)每一個(gè)部分進(jìn)行講解，探討表格設(shè)計(jì)要點(diǎn)。

2. 篩選區(qū)域

篩選區(qū)可以看作表格的導(dǎo)航，由搜索和條件篩選兩部分組成。

2.1 搜索

根據(jù)其表現(xiàn)形式，可以分為以下四種類型：單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。類型之間沒有優(yōu)劣之分，根據(jù)業(yè)務(wù)場(chǎng)景使用對(duì)應(yīng)的類型即可。

2.1.1 單屬性搜索

適用場(chǎng)景：通過某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，此特定屬性通常是具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶決策有意義的。

2.1.2 切換屬性搜索

適用場(chǎng)景：有多個(gè)常用的搜索屬性，且對(duì)搜索精確度要求較高，但頁面空間比較局限，可使用切換屬性搜索。

2.1.3?多屬性模糊搜索

適用場(chǎng)景：有多個(gè)常用的搜索屬性，且對(duì)搜索的便捷性要求高于搜索結(jié)果的精確性時(shí)，可選用多屬性模糊搜索。

2.1.4?多屬性組合搜索

適用場(chǎng)景：對(duì)頁面空間要求比較高，無多余空間放置其他篩選項(xiàng)，但需要進(jìn)行多屬性組合搜索，得到精確的搜索結(jié)果。

2.2 條件篩選

條件篩選也可以稱為過濾器，英文名Filter，主要用于內(nèi)容提取，幫助用戶縮小信息范圍。包含了下拉選擇器、單/復(fù)選框、日期選擇器、標(biāo)簽切換等控件。

2.2.1 下拉選擇器

下拉選擇器是后臺(tái)系統(tǒng)中最為常見的一種控件，其形式為彈出一個(gè)下拉菜單給用戶選擇操作。

為了選擇數(shù)據(jù)的方便，還可以加入搜索功能。當(dāng)選項(xiàng)少于5個(gè)時(shí)，建議直接將選項(xiàng)平鋪，使用單選框會(huì)是更好的選擇。

2.2.2 單選框（Radio）

用于在多個(gè)備選項(xiàng)中選中單個(gè)狀態(tài)的場(chǎng)景，其中每個(gè)選項(xiàng)應(yīng)該是互斥的。單選框的數(shù)量至少為2個(gè)，一般少于6個(gè)。要注意的一點(diǎn)，一組單選按鈕應(yīng)該默認(rèn)選擇一個(gè)選項(xiàng)，一般初始狀態(tài)默認(rèn)選擇第一項(xiàng)。

2.2.3 復(fù)選框（Checkbox）

用戶可以在選項(xiàng)列表中選擇一個(gè)或者多個(gè)選項(xiàng)，其中選項(xiàng)的數(shù)量不宜過多，一般來說不要超過7個(gè)，過多的復(fù)選框會(huì)給用戶造成認(rèn)知負(fù)擔(dān)。但如若出現(xiàn)過多的情況，采用下拉選擇器更合適。

2.2.4?日期選擇器

日期選擇器是允許用戶選擇一個(gè)或某個(gè)日期范圍的組件，同樣的根據(jù)業(yè)務(wù)訴求，有時(shí)還可以在上面加入快捷選項(xiàng)。

其中，數(shù)據(jù)格式需要注意以下2點(diǎn)：

第一：使用“-”作為分隔符；日期為個(gè)位數(shù)時(shí)，需要用“0”補(bǔ)齊；表達(dá)時(shí)間范圍時(shí)，用“至”作為連接；如果日期是用中文，則采用“-”作為連接。

第二：日期、星期與時(shí)刻一起使用時(shí)，格式為【日期 星期 時(shí)刻】。

2.2.5?標(biāo)簽切換

提供平級(jí)的區(qū)域?qū)⒋髩K內(nèi)容進(jìn)行收納和展現(xiàn)，保持界面整潔?？筛鶕?jù)業(yè)務(wù)場(chǎng)景改變樣式，會(huì)有更好的使用體驗(yàn)。

2.3 篩選區(qū)域的形式

在表格設(shè)計(jì)中，篩選區(qū)域的形式有哪些？當(dāng)業(yè)務(wù)復(fù)雜時(shí)，篩選區(qū)域又該怎么設(shè)計(jì)？接下來我根據(jù)過往的經(jīng)驗(yàn)為大家總結(jié)了一些篩選區(qū)域的形式，希望能給大家?guī)硪恍﹩⑹尽?/p>

2.3.1 錄入展示式

可以兼容多種數(shù)據(jù)格式（數(shù)字、文本、標(biāo)簽、布爾值、枚舉值等），包含了日期選擇、標(biāo)簽切換、單/復(fù)選框選擇等多個(gè)UI控件。

• 適用場(chǎng)景：適用于從各個(gè)維度篩選的場(chǎng)景，應(yīng)對(duì)各種復(fù)雜的篩選情況。
• 優(yōu)點(diǎn)：篩選條件平鋪展示，便于用戶進(jìn)行快速地篩選選擇。
• 缺點(diǎn)：篩選項(xiàng)隱藏較深，難以知道備選項(xiàng)有什么；當(dāng)篩選過多時(shí)，信息量過于冗雜繁多。

2.3.2 錄入收折疊式

它是錄入展開式的一種變形，高頻篩選字段外露，低頻篩選隱藏。

• 適用場(chǎng)景：當(dāng)篩選條件有高低頻之分，且對(duì)頁面空間要求較高。
• 優(yōu)點(diǎn)：高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷，同時(shí)占用空間較小。
• 缺點(diǎn)：平臺(tái)通用性較差，當(dāng)高頻篩選項(xiàng)過多時(shí)，頁面同樣會(huì)出現(xiàn)信息冗雜、空間占比大等問題。

2.3.3 矩陣式

矩陣式也稱為平鋪式，顧名思義就是將所有篩選項(xiàng)羅列出來平鋪在頁面上。

• 適用場(chǎng)景：多維度篩選且每個(gè)用戶對(duì)信息篩選的顆粒度需求不一致，同時(shí)希望備選項(xiàng)被選中。
• 優(yōu)點(diǎn)：用戶能直接看到選項(xiàng)內(nèi)容，方便用戶識(shí)別選項(xiàng)，且提高了用戶篩選的效率（節(jié)省了篩選操作）。
• 缺點(diǎn)：占據(jù)頁面空間較大，此類型一般配合“勾選即執(zhí)行”使用，因此在執(zhí)行篩選的過程（動(dòng)畫或加載時(shí)長）可能分散用戶精力。

這里就可以很好的理解電商類產(chǎn)品在篩選區(qū)往往采用矩陣式布局，比如：挑選一臺(tái)電腦，有人希望按品牌篩選、有人希望按內(nèi)存容量、有人希望按系統(tǒng)，我們很難判斷哪個(gè)頻率更高。

面對(duì)這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。同時(shí)電商產(chǎn)品將品牌的備選項(xiàng)平鋪出來，可以增加品牌的曝光度，這無疑是一個(gè)可帶來利益的隱形廣告位。

2.4 實(shí)例運(yùn)用 – 篩選區(qū)優(yōu)化

產(chǎn)品現(xiàn)狀：由于業(yè)務(wù)復(fù)雜、數(shù)據(jù)集大、維度多等原因，合同管理頁面所需的篩選條件過多，當(dāng)前的篩選區(qū)采用錄入展開式堆疊在屏幕上，會(huì)嚴(yán)重?cái)D占列表的展示空間，使得首屏留給列表的空間所剩無幾；用戶在尋找具體篩選條件時(shí)，仿佛大海撈針，耗時(shí)費(fèi)力。

改版目標(biāo)：合同管理頁面的內(nèi)容又多又全面（表體），但在操作時(shí)又能支持快速定位（搜索，包含篩選）、準(zhǔn)確處理（操作）。

設(shè)計(jì)策略：

• 用戶可以快速找到篩選條件 —— 控制條件的數(shù)量；
• 能滿足搜索細(xì)致程度上的要求 —— 篩選條件要充足；
• 將展示區(qū)域更多留給表體 —— 避免篩選區(qū)域占用太多屏幕空間。

2.4.1 方案一? ：隱藏篩選條件的標(biāo)題

由于篩選區(qū)存在自定義字段，因此無法掌控篩選條件標(biāo)題的長度，所以原有的標(biāo)題在輸入框上方，因此通過隱藏標(biāo)題可以使篩選條件排布的更緊密，從原來的220px降低到了130px（高度降低60%），給表體騰出空間。

討論結(jié)果：這種設(shè)計(jì)方案其實(shí)挺常見，但前提是輸入框數(shù)量極少，且為用戶所熟知；但在篩選項(xiàng)中存在多個(gè)時(shí)間篩選選項(xiàng)，選擇后用戶只憑選中項(xiàng)，可能回想不出這個(gè)選項(xiàng)對(duì)應(yīng)的是什么篩選條件。

2.4.2 方案二 ：縮短篩選條件寬度

通過縮短輸入框?qū)挾龋瑴p少篩選條件的行數(shù)，將屏幕空間更多的留給表體。

討論結(jié)果：此方案雖能在一定程度上縮減篩選區(qū)的展示區(qū)域，為表體騰出空間。但輸入框的文本只能展示前面幾個(gè)字，會(huì)在一定程度上影響用戶的預(yù)覽和理解。

例如：在選擇房間的輸入框中只能顯示“創(chuàng)維棒導(dǎo)體大廈…”無法看到“層數(shù)”、“房間號(hào)”等更詳細(xì)的重要信息。

2.4.3 方案三：通過權(quán)限控制

由于合同管理頁面由多個(gè)角色共用，通過權(quán)限控制篩選條件的顯隱，則能滿足設(shè)計(jì)需求。例如角色A展示篩選條件1、2、3、4，角色B展示篩選條件5、6、7、8。

討論結(jié)果：此方案雖然能同時(shí)滿足設(shè)計(jì)目標(biāo)，但需要非常細(xì)致的配置工作；若組織架構(gòu)發(fā)生變動(dòng)，維護(hù)的工作量很難預(yù)估。

思考： 只能在錄入展開式的基礎(chǔ)上做優(yōu)化嗎？

遵從設(shè)計(jì)的一致性原則，前三種優(yōu)化方案都是在原有的展示形式上做了相應(yīng)的調(diào)整。遵循一致性是為了讓用戶有更高效的操作和降低學(xué)習(xí)成本，但顯然與事實(shí)不符合。

對(duì)于一個(gè)系統(tǒng)來說把一致性排在比高效性前面，系統(tǒng)也會(huì)因?yàn)閯?chuàng)新被遏制，而止步不前。因此，我們認(rèn)為系統(tǒng)的高效性應(yīng)該在一致性前面，這點(diǎn)在salesforce的設(shè)計(jì)原則中也有所體現(xiàn)，故可以采用其他的展現(xiàn)形式。

注：salesforce是CRM行業(yè)的領(lǐng)導(dǎo)者，將CRM的理念搬到了Web上，引領(lǐng)了SaaS行業(yè)。

2.4.4 方案四：強(qiáng)調(diào)主次關(guān)系

根據(jù)篩選條件的使用頻率的不同，對(duì)不常用的篩選條件進(jìn)行隱藏，采用錄入折疊式，以達(dá)到想要的效果，如下圖：

討論結(jié)果：此方案也是大多數(shù)B端產(chǎn)品中所使用的方案，但并不適用多角色共用的場(chǎng)景。

我們只能從業(yè)務(wù)側(cè)去分析得到共用的篩選條件，對(duì)于角色所特定使用的篩選條件，我們無法得到直觀的數(shù)據(jù) —無法判斷每個(gè)角色的使用時(shí)長，因此從后臺(tái)查看到的數(shù)據(jù)并不能直接反應(yīng)篩選條件的使用頻率。

2.4.5 方案五：可配置篩選條件

通過設(shè)置篩選項(xiàng)，每個(gè)角色都可以根據(jù)自己的需求和習(xí)慣決定展示哪些選項(xiàng)，可以對(duì)選項(xiàng)進(jìn)行排序，甚至可以根據(jù)自己的使用頻率，對(duì)篩選條件進(jìn)行顯隱。

討論結(jié)果：這個(gè)方案較全面的解決了問題，同時(shí)也滿足了我們的設(shè)計(jì)目標(biāo)，對(duì)于多角色的用戶來說，是一個(gè)比較理想的方案。

3. 操作按鈕區(qū)

功能按鈕區(qū)在這里指的是對(duì)于表格數(shù)據(jù)進(jìn)行增刪改查等，包含導(dǎo)出、創(chuàng)建和業(yè)務(wù)處理操作等，首先我們來看看在功能按鈕區(qū)中能存在多少種按鈕類型。

3.1 按鈕類型

雖然按鈕的種類有很多種，但在研究過大量系統(tǒng)之后，發(fā)現(xiàn)功能按鈕區(qū)的按鈕類型無外乎有以下四種類型，分別是普通按鈕、主要按鈕、圖標(biāo)按鈕、文字按鈕，如圖：

• 普通按鈕：也叫做常規(guī)按鈕，是頁面中存在最多的按鈕，其權(quán)重性相對(duì)比較低。在不確定選擇哪種按鈕的情況下，該按鈕永遠(yuǎn)是最安全的選擇。
• 主要按鈕：用于突出，頁面主功能操作。當(dāng)需要突出或者強(qiáng)調(diào)時(shí)使用它。同時(shí)需要注意的是，一個(gè)模塊區(qū)域只允許一個(gè)主要按鈕。
• 文字按鈕：輕量的按鈕樣式，可用于需大面積展示按鈕場(chǎng)景。
• 圖表按鈕：可與常規(guī)按鈕、主按鈕以及文字按鈕結(jié)合，起到強(qiáng)調(diào)的作用。通過對(duì)操作功能的意符化，提供視覺線索引導(dǎo)，避免逐字閱讀按鈕文案，更高效地使用界面?？梢栽谳^小的空間展示更多的按鈕；當(dāng)使用純圖標(biāo)按鈕必須有 Tooltip 提示按鈕含義。

知識(shí)擴(kuò)展：什么是意符？

意符是唐納德·A·諾曼在《設(shè)計(jì)心理學(xué)》中提出的概念，他指出：“‘意符’這個(gè)詞指的是能告訴人們正確操作方式的任何可感知的標(biāo)記或聲音?！蓖ㄟ^設(shè)計(jì)易理解、表意準(zhǔn)確的意符，可將產(chǎn)品操作方法清晰的表達(dá)出來，能更好的指引用戶操作，提高操作效率。

3.2 按鈕樣式

3.2.1 采用圓角矩形

在復(fù)雜系統(tǒng)設(shè)計(jì)中這里建議使用圓角矩形的按鈕樣式，理由如下：在相似的內(nèi)容中，圓角的識(shí)別度比直角更高。

舉個(gè)例子：如下圖，即便間距相同，我們能更容易計(jì)算出圓角矩形的總數(shù)。

這是因?yàn)閳A角矩形中的圓角具有收攏的關(guān)系，視覺聚焦向中心推，使得有更明顯的邊緣，可以引導(dǎo)我們的視覺差異。而直角則看起來彼此一樣，中間找不到斷點(diǎn)，因此不太可能引起我們的注意。

再加上B端產(chǎn)品涉及到功能性按鈕可能會(huì)很多，在網(wǎng)格布局中，圓角矩行能讓用戶更高效地辨別和獲取信息，所以圓角的效果會(huì)更好。

3.2.2 慎用全圓角

圓角并不是越大越好，由于全圓角按鈕無法顯示嵌套選項(xiàng)。

例如：當(dāng)當(dāng)全圓角按鈕帶有可用的嵌套選項(xiàng)時(shí)，通常會(huì)在右側(cè)顯示一個(gè)箭頭icon，觸發(fā)嵌套選項(xiàng)的有效觸控區(qū)域就鎖定到箭頭icon的大小(16或24像素)。但若是換成半圓角按鈕，就可以把整個(gè)按鈕當(dāng)作觸控區(qū)域。通過菲茨定律我們知道，這樣是更有效率的。

知識(shí)擴(kuò)展：什么是菲茨定律？

菲茨定律是用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這項(xiàng)定律尤其適合按鈕等可點(diǎn)擊、可選擇、可交互的元素，目的：易于查找和選擇。

作為一個(gè)數(shù)學(xué)模型，菲茲定律是有表達(dá)式的，表達(dá)式如下：T=a+blog2(D/W+1)，W為其中目標(biāo)的大?。籇為到目標(biāo)的距離；T為移動(dòng)到目標(biāo)所用最短時(shí)間。

結(jié)論： 離目標(biāo)距離越近，所需的時(shí)間越短；目標(biāo)尺寸越大，完成速度越快，時(shí)間就越短。也就是說，預(yù)測(cè)點(diǎn)擊一個(gè)目標(biāo)的時(shí)間，取決于目標(biāo)和當(dāng)前位置的距離+目標(biāo)的大小。

3.3 按鈕順序

關(guān)于順序，我們認(rèn)為需要考慮整個(gè)系統(tǒng)層面，主要從彈窗、表單、表格這3個(gè)典型頁面來推導(dǎo)出適合的按鈕順序。

3.3.1?彈窗

在彈窗中，當(dāng)消息提示我們進(jìn)行下一步操作的時(shí)候，我們會(huì)下意識(shí)的尋找動(dòng)作（action）按鈕。但我們往往會(huì)先閱讀完所有的操作項(xiàng)，在進(jìn)行動(dòng)作指令。

因此「確定」放在左側(cè)，將導(dǎo)致用戶的視線流發(fā)生改變，用戶視線流無意識(shí)的回跳，而放于右側(cè)將保持視線流在一個(gè)方向，減少視線曲折搜索的過程。

3.3.2?表單

表單頁承載著大量的同質(zhì)信息并且平衡分布，所以其用戶的瀏覽路徑遵循古騰堡法制，它描述了用戶的閱讀模式，從頁面的左上方開始瀏覽內(nèi)容，而結(jié)束瀏覽時(shí)視線往往落在右下角，所以合理利用這個(gè)法則可以幫助用戶更好地獲取內(nèi)容并采取行動(dòng)。

3.3.3?表格

在我們系統(tǒng)中，表格頁的按鈕放置在右上角，考慮到頁面的適配問題，若主按鈕放在左側(cè)，雖然眼動(dòng)路徑最短，但其出現(xiàn)的位置，會(huì)隨著屏幕的變化而變化，沒有一種確定感。

最后考慮到，用戶使用web的習(xí)慣，大部分人都是右手用鼠標(biāo)，指針會(huì)更習(xí)慣放在右側(cè)，因此執(zhí)行按鈕放在右側(cè)更容易讓用戶點(diǎn)擊（菲茲定律）。

通過上述幾個(gè)方面探討論述，我們制定出了系統(tǒng)層面的按鈕順序：主按鈕在右，次按鈕在左。

4. 表頭

表頭的作用是解釋當(dāng)前列數(shù)據(jù)，表頭并不是表格的必要元素，當(dāng)數(shù)據(jù)本身能自我表意的時(shí)候（例如郵箱），表頭是可以刪減掉的，畢竟表頭也占據(jù)一定的空間。

4.1 表頭的類型

根據(jù)表頭的構(gòu)成，可以分為以下三類：

1. 純文本表頭：僅起到解釋數(shù)據(jù)屬性的作用
2. 多功能表頭：可以篩選、排序、搜索相關(guān)數(shù)據(jù)
3. 多級(jí)表頭：信息分類層級(jí)較多的情況下使用

4.2 表頭篩選

表頭篩選是一種列表內(nèi)置篩選形式，類似Excel表格的操作。表頭篩選和篩選區(qū)的篩選相比，只能篩選一列數(shù)據(jù)，能節(jié)約一定的空間。

雖然表頭篩選能在一定程度上節(jié)約空間，但對(duì)于復(fù)雜業(yè)務(wù)的產(chǎn)品來說，不推薦使用，原因如下：

原因1：數(shù)據(jù)集龐大，導(dǎo)致數(shù)據(jù)列多，采用列固定的交互方式。這種情況下，高頻的篩選功能可能會(huì)被遮擋，篩選前需進(jìn)行滾動(dòng)，無端增加操作。

原因2：每個(gè)表頭都會(huì)有一個(gè)篩選的icon，影響用戶對(duì)于表頭的識(shí)別；

原因3：表頭中的屬性并不是都可以進(jìn)行篩選，用戶不可感知哪些可以篩選，需要滑動(dòng)表格檢索。

4.3 表頭排序

排序功能讓用戶可以改變數(shù)據(jù)的排序，為純粹以展示為目的的表格增添了活力，豐富了數(shù)據(jù)展示形式。

有兩種形式：一種是使用上下按鈕進(jìn)行排序（只有兩種排序），另一種是使用下拉菜單進(jìn)行排序（適用于多種排序）。

4.4 字段名稱

表頭的字段名稱應(yīng)當(dāng)符合用戶思維習(xí)慣，保證用戶理解。

如果精簡后的生僻字段難以自我解釋，可以跟一個(gè)釋義標(biāo)識(shí)，鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋，同時(shí)滿足新手用戶、普通用戶以及專家用戶的需求。

4.5 可配置列（自定義表頭）

可配置列與配置篩選條件的功能類似，同樣是考慮到不同角色的用戶，查看數(shù)據(jù)的視角不一樣，對(duì)應(yīng)的關(guān)心的字段也會(huì)不一樣。

5. 表體

表體是表格的主體內(nèi)容，具體內(nèi)容的填充區(qū)域，由一個(gè)個(gè)基礎(chǔ)的單元格組成。

表體所需要注意的設(shè)計(jì)點(diǎn)比較多，內(nèi)容包括了數(shù)據(jù)的對(duì)齊方式、字體、分割線、行高、數(shù)據(jù)顯示、空白單元格、數(shù)據(jù)編輯等，下面會(huì)一一的說明。

5.1 對(duì)齊方式

合適的對(duì)齊方式能讓表格更加規(guī)范易理解，營造出良好的視覺引導(dǎo)線，提升數(shù)據(jù)的瀏覽效率，讓用戶快速的捕捉到所需內(nèi)容。其對(duì)齊規(guī)則如下：

• 數(shù)字信息右對(duì)齊，包含金額、長寬高等需要關(guān)聯(lián)比較的字段，這是因?yàn)槲覀冊(cè)趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等。
• 文字信息左對(duì)齊，符合正常的心智模型，一般人們的閱讀方式是從左往右，從上往下。
• 固定字段居中對(duì)齊，比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關(guān)系的文本（是/否、男/女等），這能更好的信息呈現(xiàn)及表格空間的節(jié)省。
• 表頭與數(shù)據(jù)信息對(duì)齊，這能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。

在采用數(shù)字右對(duì)齊時(shí)需要注意，當(dāng)列數(shù)據(jù)太少（比如只有2列時(shí)），由于列與列之間的間距過大，會(huì)導(dǎo)致兩者的關(guān)聯(lián)性減弱，這時(shí)可以通過鼠標(biāo)hover在行的時(shí)候，產(chǎn)生高亮的效果，來增強(qiáng)其相關(guān)性。

5.2 字體選擇

表格數(shù)據(jù)一般包含文本和數(shù)字，良好的字體能提高表格本身的閱讀性。

這里想強(qiáng)調(diào)一下數(shù)字字體的選擇，根據(jù)我們大量地嘗試，以下幾款數(shù)字字體在表格中有更好的呈現(xiàn)效果，分別為：Helvetica Neue、Helvetica、Arial、sans-serif。

如上圖所示，蘋方在數(shù)字字符上，不同數(shù)字寬度不一致，導(dǎo)致千位分隔符不在一條線上。而Helvetica Neue數(shù)字等寬，千位分隔符有序的排列在一條線上。

所以，選擇Helvetica Neue作為數(shù)字字體的首選字體。數(shù)值上下對(duì)比的時(shí)候，相同位置的數(shù)字在同一條豎線上，更加容易對(duì)比。

但如果不能使用上述字體，退而求次，我們還想到了一種辦法來應(yīng)對(duì)這樣的場(chǎng)景。其辦法是：以個(gè)位數(shù)字為基準(zhǔn)，居中對(duì)齊，這樣也是方便做對(duì)比的。

順帶一提，表格中的數(shù)字不是越精確越好，需要多少有效數(shù)字就顯示多少，不必太多，為了方便用戶對(duì)信息的提取，我們可以對(duì)數(shù)值的顯示格式做出一下處理：

5.3 分割線

在表格設(shè)計(jì)中，合理地使用分割線可以實(shí)現(xiàn)對(duì)表格行與列的強(qiáng)調(diào)。按照分割線的分布情況，可以分為4種類型：網(wǎng)格型、水平線型、斑馬條紋型、極簡留白型。

5.3.1?網(wǎng)格型

表格中有均勻而明顯的橫縱分割線，邊框單元格比較明顯。

• 優(yōu)點(diǎn)：縮減空間后仍能區(qū)分不同的元素，有較強(qiáng)的信息對(duì)比性。
• 缺點(diǎn)：視覺噪點(diǎn)大。
• 適用場(chǎng)景：對(duì)于列信息較多而沒有足夠空間用留白來分割信息（數(shù)據(jù)之間的關(guān)系緊密），且有對(duì)比關(guān)系的需求的場(chǎng)景。

5.3.2?水平線型

表格僅顯示水平分割線，利用合理對(duì)齊和留白分割列信息。

• 優(yōu)點(diǎn)：能顯著減輕表格在垂直方向的視覺重量，提升用戶進(jìn)行大量數(shù)據(jù)對(duì)比時(shí)的速度。
• 缺點(diǎn)：需要更大的空間展示信息。
• 適用場(chǎng)景：如果沒有硬性要求（在特定空間內(nèi)展示所以的信息），可以說對(duì)于所有數(shù)據(jù)集大小來說都很適用，也是目前最常見的一種類型。

5.3.3?斑馬條紋型

表格采用隔行交替使用不同底色來區(qū)分?jǐn)?shù)據(jù)：

• 優(yōu)點(diǎn)：很好的引導(dǎo)用戶的視線，避免在閱讀時(shí)出現(xiàn)錯(cuò)行、迷失的情況。
• 缺點(diǎn)：產(chǎn)生較大的視覺噪點(diǎn)。
• 適應(yīng)場(chǎng)景：當(dāng)水平空間較大，導(dǎo)致數(shù)據(jù)之間的關(guān)聯(lián)性減弱時(shí)，可以采用斑馬線，但很多時(shí)候是沒有必要的，水平分割線就能起到視覺引導(dǎo)的作用。

5.3.4?極簡留白型

表格移除所有分割線，通過盡可能減少視覺噪聲來創(chuàng)建極簡外觀。

• 優(yōu)點(diǎn)：讓用戶注意力聚焦在表格信息的核心內(nèi)容上。
• 缺點(diǎn)：需要較大的空間同時(shí)數(shù)據(jù)集不能太大，不然容易造成混亂。
• 適用場(chǎng)景：如果用戶在閱讀時(shí)不需要幫助就可以保持位置，則建議使用此樣式。

5.4 行高

5.4.1 定義

在開發(fā)同學(xué)的眼中，表格的行高是這樣的，如下圖所示，在實(shí)現(xiàn)設(shè)計(jì)稿時(shí)，通常也是按照行高來寫的，而不是像設(shè)計(jì)同學(xué)一樣按照文字的尺寸來計(jì)算間距。

從這張圖我們就可以很明顯的了解到表格行高=文字行高+上下間距。其中，文字行高可以設(shè)定為字號(hào)的1.2~1.8倍，上下間距可以設(shè)定為字號(hào)的1~1.5倍。

5.4.2 確定合適的行高

行高影響著表格中每行信息的易讀性。合適的行高能保證用戶對(duì)獲取信息的效率，除了上述的方法外，目前市面上以下2種做法：

做法1 ：不同分辨率使用不同行高 — 設(shè)計(jì)兩套不同的行高，在大分辨率下顯示較高的行高，給數(shù)據(jù)間提供更多呼吸的空間；在小分辨率下顯示較小的行高，使一屏內(nèi)可以看到更多的行高。

Gmail就是這樣設(shè)計(jì)的，如下圖所示：

做法2：自定義行高 —它為興奮需求，可以提高用戶的用戶體驗(yàn)。所以我們可以視表格的具體情況來設(shè)計(jì)設(shè)置行高的形式，可以放置在設(shè)置按鈕里，也可以在外部按鈕較少的情況下展示出來。

5.5 數(shù)據(jù)顯示

5.5.1 數(shù)據(jù)完整度

當(dāng)列表中數(shù)據(jù)過長時(shí)，我們需要根據(jù)屏幕寬度調(diào)整列表展示方式，超過列表默認(rèn)寬度的內(nèi)容可以省略，通常用…表示，鼠標(biāo)移入后出現(xiàn)氣泡展示全部內(nèi)容。

其中氣泡建議展示在上方，因?yàn)槲覀兊拈喿x順序是從上到下，鼠標(biāo)向下移動(dòng)時(shí)不會(huì)被上面的氣泡遮擋住。

氣泡面積不宜過大，根據(jù)屏幕尺寸控制在一定比例，一版不超過內(nèi)容區(qū)的四分之一，展示不下的內(nèi)容可以在氣泡中增加滾動(dòng)條。

5.5.2 減少圖形元素

盡量減少視覺符號(hào)的使用，因?yàn)橐曈X符號(hào)可能會(huì)使你的用戶界面復(fù)雜，產(chǎn)生難以理解的內(nèi)容。去除不必要的視覺干擾，例如不必要的圖標(biāo)、無規(guī)律的色彩等。

5.5.3 空數(shù)據(jù)

表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎或誤以為出現(xiàn)了bug？

明智的做法，是無數(shù)據(jù)時(shí)用「-」來填充顯示，數(shù)據(jù)為零時(shí)與上下數(shù)據(jù)單位、小數(shù)點(diǎn)相同的0來顯示。

5.6 數(shù)據(jù)編輯操作

表格的數(shù)據(jù)編輯操作大體可分為顯性操作和隱形操作，顯性操作，指操作選項(xiàng)顯示在行內(nèi)。隱形操作，當(dāng)鼠標(biāo)懸停時(shí)或勾選才顯示操作選項(xiàng)。

5.6.1 類型

根據(jù)操作對(duì)象的不同，可以分為：

• 內(nèi)聯(lián)操作 ：形式可以是框內(nèi)編輯，可以浮層編輯，也可以彈窗編輯；
• 單行操作： 一般操作放置在表格的最后一列；
• 批量操作：針對(duì)多行數(shù)據(jù)的編輯操作。

5.7 實(shí)例運(yùn)用 – 單行操作

產(chǎn)品現(xiàn)狀：在財(cái)務(wù)中臺(tái)系統(tǒng)中，常常由于權(quán)限的不同或者單據(jù)狀態(tài)不同這兩種原因，使得每行的數(shù)據(jù)擁有不同的操作項(xiàng)，信息過載導(dǎo)致頁面擁擠。

而且這些按鈕因?yàn)橐曈X特征比較明顯，容易分散用戶的注意力；因?yàn)楸砀窨臻g有限，操作區(qū)的各操作項(xiàng)過于接近，誤操作率相對(duì)較高。

改版目標(biāo)：財(cái)務(wù)管理頁面的內(nèi)容又多又全面，同時(shí)能夠準(zhǔn)確無誤地進(jìn)行相關(guān)操作。

設(shè)計(jì)策略：

• 用戶聚焦內(nèi)容 —— 控制操作項(xiàng)的顯示數(shù)量；
• 降低誤操作率 —— 操作項(xiàng)直接要有足夠空間；
• 將展示區(qū)域更多留給表體 —— 避免操作列占用太多屏幕空間。

5.7.1 方案一：操作項(xiàng)聚合式

只展示【查看】操作項(xiàng)，其余操作項(xiàng)采用下拉菜單的樣式收集于更多當(dāng)中。

討論結(jié)果：此方案雖然滿足了設(shè)計(jì)目標(biāo)，但下拉框中可能存在不同操作，同樣無法避免誤操作的可能性。同時(shí)，每個(gè)下拉菜單形式一樣，但出現(xiàn)的內(nèi)容卻不懂，容易使用戶產(chǎn)生困惑。

5.7.2 方案二：錯(cuò)位顯示

不同的操作想放置在不同的位置上，保證上下行的操作項(xiàng)一致，能在一定程度上減少誤操作。

討論結(jié)果：

• 首先，這樣的設(shè)計(jì)浪費(fèi)大量的屏幕空間；其次，浪費(fèi)開發(fā)工作量！因?yàn)樵诹斜碇袑?shí)現(xiàn)一系列權(quán)限判斷和操作，在詳情界面中往往還需要再開發(fā)一次相同的權(quán)限判斷和操作；
• 再次，不同單據(jù)可能存在操作順序不一樣，上下移動(dòng)鼠標(biāo)會(huì)存在不同操作，用戶代價(jià)非常高。

思考：操作項(xiàng)是否真的需要在表體中呈現(xiàn)？

操作項(xiàng)放置在行中是為了便捷的對(duì)數(shù)據(jù)進(jìn)行操作。但這里要注意到，財(cái)務(wù)人員僅僅憑借表體中的單行數(shù)據(jù)是不足以支撐對(duì)這些賬單進(jìn)行相應(yīng)的操作，涉及到審核、編輯、作廢等一系列的操作都需要結(jié)合賬單詳情，檢查無誤之后才會(huì)進(jìn)行點(diǎn)擊。

所以，在此場(chǎng)景下，操作項(xiàng)就不需要展示在表體中，放著用戶也不敢點(diǎn)擊。

5.7.3 方案三：以不變應(yīng)萬變

回歸“一個(gè)界面一個(gè)用戶任務(wù)”的原則，不保留任何操作項(xiàng)，詳情移至首列，所有針對(duì)賬單的操作都去往該單據(jù)的詳情界面完成。

討論結(jié)果：從開發(fā)的角度上看，此方案界面高度解耦，功能迭代方便，節(jié)約開發(fā)工作量；從認(rèn)知成本上看，列表界面操作高度一致性，利于養(yǎng)成用戶習(xí)慣。

從操作效率上看，在詳情頁用戶會(huì)明顯確認(rèn)目標(biāo)單據(jù)，幾乎不會(huì)誤操作； 同時(shí)此方案節(jié)約了大量屏幕空間，更有利于用戶對(duì)信息的獲取。

5.8 實(shí)例運(yùn)用 – 批量操作

產(chǎn)品現(xiàn)狀：批量操作采用下拉菜單的形式放置于功能按鈕區(qū)，批量操作的內(nèi)容感知弱，用戶的操作路徑長（在表格左側(cè)進(jìn)行勾選，鼠標(biāo)移至右上方進(jìn)行相關(guān)操作）。

5.8.1 方案一：信息前置

信息前置，將批量操作按鈕全部平鋪于功能按鈕區(qū)。

討論結(jié)果：此方案，雖然有利于用戶感知具體有那些功能操作，但對(duì)于復(fù)雜業(yè)務(wù)來說，存在很多批量操作按鈕的可能，這樣便會(huì)造成頁面擁擠，進(jìn)而影響用戶操作體驗(yàn)。

同時(shí)，一個(gè)模塊出現(xiàn)2個(gè)主按鈕，也是不推薦；再者批量操作是針對(duì)表格多行數(shù)據(jù)的處理，而數(shù)據(jù)又是屬于表體，所以批量操作應(yīng)該作為表體交互的一部分，不應(yīng)放置在操作按鈕區(qū)。

5.8.2 方案二：沉浸式操作

采用隱形操作，當(dāng)鼠標(biāo)勾選才顯示相應(yīng)的操作選項(xiàng)，顯示在篩選區(qū)域（覆蓋住篩選區(qū)）。

討論結(jié)果：該方案使界面簡潔明快，可減輕空間壓力，減少一定的視覺干擾。但滿足一些業(yè)務(wù)場(chǎng)景，功能阻斷性強(qiáng)，做了批量操作就做不了篩選。

5.8.3 方案三：頂部浮層操作

采用隱形操作，當(dāng)鼠標(biāo)勾選才顯示相應(yīng)的操作選項(xiàng)，顯示在表頭上方。

討論結(jié)果：勾選時(shí)頁面會(huì)出現(xiàn)跳動(dòng)，當(dāng)出現(xiàn)批量操作按鈕時(shí)，頁面結(jié)構(gòu)也相對(duì)變得復(fù)雜，視覺噪音較多，不利于進(jìn)行定位操作。

5.8.4 方案四：上內(nèi)容下操作

采用隱形操作，當(dāng)鼠標(biāo)勾選才顯示相應(yīng)的操作選項(xiàng)，采用浮層的形式至于表體下方。

討論結(jié)果：

• 首先，根據(jù)古騰堡原則，用戶的在做表格操作的時(shí)候，視覺流是左做到右，從上到下，最終的操作視覺落腳點(diǎn)恰好是操作項(xiàng)，符合眼動(dòng)規(guī)律；
• 再者，批量操作影響整個(gè)表格，布置于底部符合工業(yè)設(shè)計(jì)中的“上內(nèi)容下操作”。

簡單解釋一下，上內(nèi)容下操作可以打個(gè)比方，比如電腦屏幕負(fù)責(zé)顯示內(nèi)容，鼠標(biāo)鍵盤至于下方負(fù)責(zé)相關(guān)的操作。

6. 底欄

底欄一般放置有分頁器，分頁器包含以下幾個(gè)部分：總條目、條數(shù)設(shè)置、翻頁、跳轉(zhuǎn)。

分頁器的功能是加載數(shù)據(jù)，該功能也可以用加載更多替代。但加載更多適合小數(shù)據(jù)量，它具有節(jié)省空間，同時(shí)能給用戶一種沉浸式體驗(yàn)。但是這種模式，對(duì)于數(shù)據(jù)量難以把握，操作不靈活。

7. 數(shù)據(jù)詳情的展現(xiàn)形式

關(guān)于表格數(shù)據(jù)詳情的展現(xiàn)形式，大致可以分為四種：彈窗、抽屜、嵌套以及頁面跳轉(zhuǎn)，其中彈窗可以分為模態(tài)彈窗和非模態(tài)彈窗。

模態(tài)彈窗，簡單理解就是帶有遮罩蒙層的，具有較強(qiáng)的阻斷性，喚醒時(shí)用戶只能對(duì)彈窗進(jìn)行相應(yīng)操作，無法繼續(xù)操作主頁面；非模態(tài)彈窗，喚醒時(shí)用戶依然可以對(duì)主界面進(jìn)行操作。

這里不對(duì)其“模態(tài)”和“非模態(tài)”展開討論，文末參考文獻(xiàn)中放置了一篇關(guān)于彈窗的文章，里面論述的比較詳細(xì)，有感興趣的小伙伴可以看看。

7.1 彈窗

7.1.1 模態(tài)彈窗

在表格中，模態(tài)彈窗通常以對(duì)話框的形式呈現(xiàn)，它能讓用戶不離開主路徑的情況下，在當(dāng)前頁面正中打開一個(gè)浮層，承載相應(yīng)的操作。

適用場(chǎng)景：數(shù)據(jù)詳情體量不大，頁面內(nèi)容較輕時(shí)。同時(shí)，不需要參照上級(jí)頁面內(nèi)容，有快速回退的訴求。

7.1.2 非模態(tài)彈窗

“非模態(tài)”對(duì)話框能讓用戶不離開主路徑的情況下，在當(dāng)前頁面正中打開多個(gè)浮層，對(duì)其內(nèi)容進(jìn)行相關(guān)操作。

適用場(chǎng)景：數(shù)據(jù)詳情體量不大，頁面內(nèi)容較輕時(shí)且有對(duì)比訴求時(shí)，可使用“非模態(tài)”對(duì)話框。

7.2 抽屜

抽屜是一種交互方式，當(dāng)需要一個(gè)附加面板來控制父級(jí)頁面內(nèi)容，這個(gè)抽屜在需要時(shí)呼出?？勺远x上下左右四個(gè)方向，一般右側(cè)最為常見。

側(cè)滑抽屜有較強(qiáng)的連貫性，適合與原頁面具有連貫結(jié)構(gòu)的內(nèi)容的展示。

適用場(chǎng)景：詳情頁的內(nèi)容較多時(shí)，且有快速切換主體的訴求。

7.3 嵌套

嵌套展示也就是點(diǎn)擊表體行數(shù)據(jù)，表格下拉，直接在表體內(nèi)展現(xiàn)出詳情。

適用場(chǎng)景：一般適用于對(duì)行數(shù)據(jù)的補(bǔ)充，要注意補(bǔ)充的信息不能太多。

7.4 頁面跳轉(zhuǎn)

適用場(chǎng)景：當(dāng)詳情頁承載內(nèi)容過多且里面的操作相對(duì)復(fù)雜時(shí)。

7.5 實(shí)例運(yùn)用 – 嵌套

• 業(yè)務(wù)場(chǎng)景：運(yùn)營人員在收到租客提供的銀行流水單通過微信等渠道發(fā)給財(cái)務(wù)進(jìn)行確認(rèn)，財(cái)務(wù)人員確認(rèn)之后，需要找到相應(yīng)的租客賬單（多個(gè)），完成收款核銷等操作。
• 產(chǎn)品現(xiàn)狀：產(chǎn)品無法支持財(cái)務(wù)人員定位到需要的收款/核銷的賬單，導(dǎo)致工作效率低下。同時(shí)由于底層架構(gòu)的一些歷史原因，導(dǎo)致頁面性能差（數(shù)據(jù)加載過慢）。
• 設(shè)計(jì)目標(biāo)：提高財(cái)務(wù)的收款、核銷效

設(shè)計(jì)思考：

• 頁面跳轉(zhuǎn)具有強(qiáng)烈的打斷感，加上“漫長”的加載時(shí)長（性能問題 — 用戶核銷完一條賬單時(shí)，返回到表格頁需要重新加載全部數(shù)據(jù)），大大降低了賬單核銷的效率。因此在此業(yè)務(wù)場(chǎng)景中不適合采用跳頁面的方式。
• 結(jié)合業(yè)務(wù)的特定場(chǎng)景，用戶在對(duì)賬單進(jìn)行核銷時(shí)，是逐條進(jìn)行的。彈窗同樣具有一定的打斷性，同時(shí)考慮到用戶處理任務(wù)過程重的操作路徑和交互的連續(xù)性，采用嵌套的交互形式最適合。

7.6 實(shí)例運(yùn)用 – 抽屜

• 業(yè)務(wù)場(chǎng)景：業(yè)務(wù)人員根據(jù)表格的數(shù)據(jù)，查看資產(chǎn)的運(yùn)作情況，比如某個(gè)資產(chǎn)出租率低，則會(huì)進(jìn)入詳情查看分析資產(chǎn)，并對(duì)該資產(chǎn)進(jìn)行一下合并拆分等相應(yīng)的處理。
• 產(chǎn)品現(xiàn)狀：產(chǎn)品功能復(fù)雜，導(dǎo)致業(yè)務(wù)人員無法快速的定位問題；缺少相關(guān)數(shù)據(jù)，無法支撐決策，需要對(duì)資源臺(tái)帳進(jìn)行重構(gòu)。
• 設(shè)計(jì)目標(biāo)：提高產(chǎn)品易用性：減少現(xiàn)有功能（弱化→移出）

設(shè)計(jì)思考：

• 考慮到性能問題，摒棄了原先的頁面跳轉(zhuǎn)的形式；
• 為了降低用戶在使用中的打斷感同時(shí)針對(duì)資源詳情的操作相對(duì)復(fù)雜，采用彈窗則會(huì)出現(xiàn)彈窗之后再跳彈窗的情況出現(xiàn)，所以這里也不適合采用彈窗的交互形式；
• 由于不存在用戶逐條查看資源詳情對(duì)其進(jìn)行分析的場(chǎng)景，同時(shí)考慮到嵌套交互的一個(gè)缺點(diǎn)，當(dāng)關(guān)閉詳情時(shí)，由于表格大張大合，大大破壞了表格頁面的穩(wěn)定性，用戶視線容易失焦，需要重新定位，因此在這里采用側(cè)滑抽屜時(shí)最友好的交互形式。

注：以上兩個(gè)案例僅對(duì)表格詳情頁展示問題展開的論述，關(guān)于重構(gòu)方案里面的其他改版點(diǎn)這里就先不做分享，若大家對(duì)B端改版感興趣，找機(jī)會(huì)我在進(jìn)行項(xiàng)目的復(fù)盤總結(jié)，分享給大家。

8. 后記

以上就是本篇文章的全部內(nèi)容，表格設(shè)計(jì)往往沒有既定的規(guī)范，往往需要結(jié)合產(chǎn)品和業(yè)務(wù)場(chǎng)景，找到一個(gè)合適的方案。希望通過本篇文章的講述，能對(duì)大家有所啟示，謝謝閱讀~~

我是B端種子選手 – Nick，我們?cè)谙缕恼轮幸??，文章預(yù)告：《復(fù)雜表單設(shè)計(jì)》

參考文獻(xiàn)：

data table

Ant Design

web表格設(shè)計(jì)攻略

Web頁面中的表格設(shè)計(jì)，遠(yuǎn)沒那么簡單

表格設(shè)計(jì)全過程：這次給你講的明明白白

后臺(tái)列表設(shè)計(jì)避坑指南（上）

關(guān)于篩選模式可用性的幾點(diǎn)思考

深入了解彈窗應(yīng)用【二】

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

題圖來自Unsplash，基于 CC0 協(xié)議