表格作為展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁等其他元素一起協(xié)同，構(gòu)成表格頁。本文作者從數(shù)據(jù)過濾、數(shù)據(jù)操作、數(shù)據(jù)查看這三個方面，對表格頁面的設(shè)計進行了分析，一起來看一下吧。

表格系列第一篇我們聊了表格的基礎(chǔ)內(nèi)容和表格的組成要素，包含表格由內(nèi)（展示項）、外（操作項）兩部分組成，如圖：

表格作為展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁等其他元素一起協(xié)同，構(gòu)成表格頁。通常表格頁面包含三個部分：數(shù)據(jù)過濾、數(shù)據(jù)操作、數(shù)據(jù)查看。

一、數(shù)據(jù)過濾

數(shù)據(jù)過濾是對數(shù)據(jù)進行篩選的部分，由搜索、篩選、標簽這三個部分組成。產(chǎn)品設(shè)計上提供多維的篩選和排序，將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看、對比、分析信息，是一種增加用戶效率的有效方式。

一般搜索和篩選會同時出現(xiàn)，但是兩者一般很少同時使用來對數(shù)據(jù)進行定位。

1. 搜索

搜索的交互觸發(fā)方式有“實時篩選”和“點擊按鈕觸發(fā)篩選”。實時篩選只適合數(shù)據(jù)量較小、數(shù)據(jù)嚴謹?shù)谋砀耥撁妫ㄗh謹慎使用?！包c擊按鈕觸發(fā)篩選”適合大部分表格場景。

因用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。

1）模糊搜索

用戶搜索意圖不明確時，將用戶的查詢與待檢索的內(nèi)容進行模糊匹配，使用模糊搜索時一定要結(jié)合自己的實際場景，慎重使用。

• 優(yōu)點：只要有相關(guān)的內(nèi)容都會被檢索出來，減少了精準搜索帶來的記憶負擔(dān)；
• 缺點：容易把相關(guān)的信息也帶出來，例如檢索地址廣州，把廣州的相關(guān)編碼也匹配出來。

2）精確搜索

用戶在搜索時，針對某一數(shù)據(jù)字段搜索，來查找所需要的數(shù)據(jù)。

搜索根據(jù)表現(xiàn)形式，可以分為以下四種類型：

1. 單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數(shù)據(jù)，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
2. 切換屬性搜索：可以設(shè)置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
3. 多標簽?zāi)：阉鳎罕砀穸鄠€數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對數(shù)據(jù)的精確度較高。
4. 多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。

這幾種類型之間沒有優(yōu)劣之分，根據(jù)業(yè)務(wù)場景使用對應(yīng)的類型即可。

2. 篩選

篩選是將用戶所需數(shù)據(jù)選出展示，其余數(shù)據(jù)暫時隱藏，通過篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶輸入的過程，提升查找效率。一般篩選有三種形式：

1）平鋪篩選

平鋪篩選就是將篩選項的內(nèi)容，直接展示于頁面之上，用于篩選條件很多，單獨篩選條件對應(yīng)數(shù)據(jù)無交叉，常見于信息密集型產(chǎn)品。

• 優(yōu)點：可以承載多維的數(shù)據(jù)信息，選中項的可見性高，用戶理解成本與操作成本低，且提高了用戶篩選的效率。
• 缺點：占用太多頁面空間，影響首屏的展示效率，增加用戶的決策時間。一般配合“勾選即執(zhí)行”使用，因此在執(zhí)行篩選的過程（動畫或加載時長）可能分散用戶精力。

通常電商類產(chǎn)品在篩選區(qū)往往采用平鋪布局。

2）條件篩選

條件篩選是最常用的篩選交互，便于從多個維度篩選，應(yīng)對各種復(fù)雜的篩選情況。條件選擇完后，選擇觸發(fā)篩選（若篩選條件不交叉可以選擇實時篩選）。

• 優(yōu)點：空間利用率高，起到了很好的收納作用，整體頁面更加美觀。
• 缺點：當(dāng)篩選過多時，信息量過于冗雜繁多。

3）表頭篩選

• 優(yōu)點：篩選當(dāng)前列，更直觀，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高。
• 缺點：篩選的內(nèi)容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學(xué)習(xí)。

4）如何合理的使用篩選項

信息排序：基于用戶使用場景，以目標導(dǎo)向為依據(jù)，將高頻的篩選項排列到前面，低頻的篩選項置于后面。

默認折疊低頻篩選項：當(dāng)篩選條件有高低頻之分，且對頁面空間要求較高時，通過展示高頻篩選項、隱藏低頻篩選項，更好的提升用戶體驗。

所有篩選項都很低頻：以點擊高級篩選按鈕的形式觸發(fā)，將全部篩選項置于氣泡或者彈窗之中。

在企業(yè)級中后臺中，用戶查看的數(shù)據(jù)往往屬性較多且不唯一，通過簡單的檢索方式很難精確定位到目標數(shù)據(jù)，所以，在實際使用時，常會將大量非交叉關(guān)系的屬性進行羅列，搜索、篩選、標簽切換組合出現(xiàn)，形成多屬性組合檢索。

3. tab標簽

標簽切換一般用于和時間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容。數(shù)據(jù)類型在5個以下的建議采用tab頁切換的方式進行交互，展示清晰，用戶操作效率高；超過5個可以考慮下拉選擇或模糊搜索。

• 優(yōu)點：根據(jù)標簽，可以很清楚知道劃分，篩選的準確性高，切換tab就可以篩選內(nèi)容。
• 缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。

4. 數(shù)據(jù)過濾設(shè)計注意點

在使用中，索引本身應(yīng)該是0思考成本的，否則就失去了索引的核心價值。圍繞這一點，有兩個設(shè)計原則：

1）寧少勿多和高頻前置：即不要揣測用戶需要，最常使用的展示位置盡量靠前。

2）當(dāng)搜索項不可避免的比較多時，可以進行分類展示，降低尋找成本。

二、數(shù)據(jù)操作

數(shù)據(jù)操作是表格的操作部分，根據(jù)操作對象的不同，可以分為：

1. 單行操作（表格內(nèi)）

單行操作也稱行內(nèi)操作，常見的顯性與隱性兩種方式。

1）顯性操作

操作項顯示在行內(nèi)，直觀；文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當(dāng)超過時，建議將相對低頻操作選項折疊收起，點擊”更多”或“…”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。

2）隱性操作

如果單行操作不那么重要，或者說行操作過多影響用戶閱讀時，可將所有的操作進行隱藏。

當(dāng)用戶鼠標懸停時進行展開所有操作，界面簡潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾。這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學(xué)習(xí)成本。

行內(nèi)操作2種展示對齊方式：

①對齊式

將所有操作進行整齊排列，一般是一個操作對應(yīng)一列，當(dāng)有操作缺失時，展示為空，這種方式能夠讓用戶直接了解到操作的缺失，但反復(fù)的出現(xiàn)會造成表格視覺上的冗余，適合列數(shù)較少的表格使用。

②平鋪式

將所有操作按照一定的預(yù)設(shè)排列順序進行平鋪，這種方式能夠適應(yīng)B端的大多數(shù)場景，將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式。

設(shè)計點：操作按按鈕是全局操作還是單行操作其實是可以根據(jù)具體業(yè)務(wù)場景來決定的，判斷用戶批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個操作功能。

2. 批量操作（表格外）

批量操作適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶對一行或多行對象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準、拒絕、復(fù)制之類的操作，這將節(jié)省用戶時間，避免重復(fù)對多行進行相同操作，分顯隱性操作：

1）顯性批量操作

較為常用，外漏操作簡單易懂。

如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；

飛書的批量操作外漏在表格表格的右上角，雖然按鈕放在右側(cè)符合用戶右手操作鼠標的習(xí)慣，而且考慮到適配問題，但是批量操作的路徑不符合用戶的操作動線，路徑變長，大家可自行抉擇。

2）隱性批量操作

容易造成記憶負擔(dān)，增加學(xué)習(xí)成本，適合批量操作較低頻的操作，產(chǎn)品沒有那么復(fù)雜的產(chǎn)品。如飛書文檔

3. 全局操作

統(tǒng)攬全局，無需選擇數(shù)據(jù)內(nèi)容即可進行的操作，常見的【新增】、【導(dǎo)入】操作。

三、數(shù)據(jù)查看

數(shù)據(jù)查看是表格的主體部分，是信息的主要承載區(qū)域。

在開始之前，我們先來看看該區(qū)的結(jié)構(gòu)：主要由表頭、行、列、單元格四個部分組成。

1. 表頭欄

每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型。表頭在展示信息的時候盡量概括、準確、簡化，達到節(jié)省表格頭部空間，引導(dǎo)用戶的注意力聚焦于表格中的數(shù)據(jù)本身。

表頭并不是表格的必要元素，當(dāng)數(shù)據(jù)本身能自我表意的時候（例如郵箱），表頭是可以刪減掉的。

通常，表頭的設(shè)計會和下方列表設(shè)計有一定的區(qū)分，標頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗等方式來做區(qū)分。

1）表頭的類型

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

2）表頭交互

①表頭篩選

除了容納行標簽之外，表頭也可以添加排序、搜索、篩選等功能，通過對表頭標簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。

雖然表頭篩選能在一定程度上節(jié)約空間，但對于復(fù)雜業(yè)務(wù)的產(chǎn)品來說，不推薦使用，原因如下：數(shù)據(jù)信息列多，高頻篩選功能可能會被遮蓋，表頭復(fù)雜影響用戶表格閱讀。

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

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

③固定表頭

有些表格由于數(shù)據(jù)量較大，需要對頁面的上下滾動完成對數(shù)據(jù)的查閱，對表頭進行固定，可以幫助用戶更快地找到單元格的屬性和含義，尤其是單元格屬性信息數(shù)據(jù)沒有特征時（比如都是數(shù)字、百分比、姓名等）固定表頭可以大大提高使用效率。

當(dāng)然還有固定列，當(dāng)表格需要展示不同類別的數(shù)據(jù)較多一屏展示不下，可以對首尾字段進行固定，讓用戶通過左右滑動來實現(xiàn)對數(shù)據(jù)的快速翻閱，滿足用戶對數(shù)據(jù)的認知以及對數(shù)據(jù)操作的需求。

注意盡量避免橫向滾動：正常鼠標橫向滾動是需要用戶按住 「Shift 滾動」 才會使表格進行滾動，對于所有的鼠標用戶而言，橫向滾動都是極為痛苦的。

3）表格設(shè)計的注意點

①精簡表頭

表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據(jù)上下文關(guān)系來進行減短簡化，以達到節(jié)省表格頭部空間和減輕視覺壓力的作用。當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系。

②定義專有名詞

對于比較復(fù)雜的表頭，可以定義一個專有名詞，如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。鼠標hover上去對專業(yè)術(shù)語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。

③情況允許時，去掉表頭

如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。例如電子郵箱的收件表格，每列數(shù)據(jù)區(qū)別度高不會混淆，去掉表頭也能輕易閱讀。

表體部分所需要注意的設(shè)計點比較多，內(nèi)容包括了數(shù)據(jù)的對齊方式、字體、分割線、行高、數(shù)據(jù)顯示、單元格、行與列等，下面我們來依次聊聊。

2. 對齊方式

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

1）文本型數(shù)據(jù)左對齊

符合正常的心智模型，便于用戶掃描過程中快速定位到下一行文本，左對齊的文本在展示的時候起到了縱向分割線的作用。多行情況下，居中和頂部對齊都是可以的。

2）數(shù)據(jù)型數(shù)據(jù)右對齊

包含金額、長寬高等需要關(guān)聯(lián)比較的數(shù)字字段，這是因為我們在對比數(shù)字時，首先看個位，然后十位、百位等。

3）固定字段居中對齊

比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關(guān)系的文本（是/否、男/女等），字段固定不變，居中對齊能更好地信息呈現(xiàn)。這里根據(jù)業(yè)務(wù)也可以按照文本型左對齊處理，讓用戶查看表格不會感覺混亂。

4）表頭與其數(shù)據(jù)對齊方式相同

對齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。多級表頭：多行或多列合并居中對齊，最底層表頭可以按其數(shù)據(jù)對齊方式對齊。

5）最后一列操作列右對齊

使表格更加規(guī)則，視覺統(tǒng)一提高操作效率。

3. 字符規(guī)范

表格數(shù)據(jù)一般包含文本和數(shù)字，良好的字體能提高表格本身的閱讀性。設(shè)計上需要注意以下幾點：

1）數(shù)字單位的選擇與使用

表格中的數(shù)據(jù)要根據(jù)數(shù)量級確定展示形式，不需要精確的數(shù)學(xué)呈現(xiàn)，可以讓用戶更快地查找信息，下面是展示形式的建議。

數(shù)據(jù)的度量單位無需重復(fù)標注，只需要在表頭標識清楚即可，注意同一列單位保持一致。

2）減少用戶計算

深入了解用戶需求，根據(jù)需求為用戶提供差值、升降變化、合計值、平均值等直接展示形式。

3）字體使用

表格中字體保持一致，文字信息字體統(tǒng)一、數(shù)字信息字體統(tǒng)一即可。數(shù)字信息字體選擇——建議等寬等高字體，等寬的數(shù)字在同一豎線時更容易對比。

推薦以下幾款數(shù)字字體在表格中有更好的呈現(xiàn)效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。

設(shè)計表格時，盡量避免任何裝飾性字體，簡約至上才是關(guān)鍵。

• 不要出現(xiàn)襯線字體：因為個性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考。
• 不要出現(xiàn)全大寫字體：因為它很難讀，需要轉(zhuǎn)化思維。
• 不要出現(xiàn)使用斜體：易引起視線疲勞，影響閱讀。
• 不要出現(xiàn)多種字體：保持風(fēng)格統(tǒng)一。

4. 分割線

在表格設(shè)計當(dāng)中，每一條線都有著它存在的意義，比如：

• 當(dāng)表格中展示橫線，隱藏縱線：用戶的橫向閱讀體驗更佳，強調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶進行快速地對應(yīng)。
• 當(dāng)表格中展示縱線，隱藏橫線：用戶的縱向閱讀體驗更佳，強調(diào)數(shù)據(jù)上下間的對比，能夠讓用戶找到同一緯度數(shù)據(jù)下的對比。

在表格設(shè)計中，合理地使用分割線可以實現(xiàn)對表格行與列的強調(diào)。按照分割線的分布情況，可以分為4種類型：網(wǎng)格型、水平線型、斑馬條紋型、極簡留白型。這個部分在上一篇已詳細說明。

設(shè)計tips：

• 表格具有的顏色盡可能少，顏色和可讀性是密切相關(guān)的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。
• 背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色（便于準確辨別光標所在行）等處理方法，還可以對表頭表尾進行視覺區(qū)分，但不能增加過多顏色以引起混亂。
• 分割線顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
• 分割線和斑馬紋的應(yīng)用色彩都不應(yīng)該太深，如果你項目中對表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因為選中背景需要被高亮，那么一個列表就會出現(xiàn) 3 種顏色，是要盡力避免發(fā)生的。

5. 行高與單元格

開發(fā)同學(xué)工作的時候，使用的是盒子模型，設(shè)計師在出設(shè)計圖的時候也要遵循開發(fā)邏輯。

為了讓表格中的文字高度看起來舒適，有著視覺的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：

單元格高度=內(nèi)容高度 上間距 下間距

單元格的尺寸包含：文字行高建議設(shè)為字號的1.5倍，上下間距設(shè)為字號的1.2倍。

1）行高規(guī)則

對于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為內(nèi)容高度的2.5-3倍；對于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點與最低點到行框的上下邊距略小于文字高度。

①固定表格行高

當(dāng)數(shù)據(jù)有單行信息展示有多行信息展示時（或長度不固定），要定義內(nèi)容的行數(shù)（根據(jù)業(yè)務(wù)），根據(jù)行數(shù)確定行高多出的內(nèi)容做省略處理。

固定行高時可以規(guī)范幾種不同的表格行高，例如在我日常工作中規(guī)定了3種行高56px80px110px，行高較高時，我們數(shù)據(jù)內(nèi)容都進行居中對齊就會有一些問題。有些單元格只有一行信息，有些有多行信息，會使頁面看起來更混亂，信息查找速度降低。

②自適應(yīng)表格行高

表格行高跟隨行內(nèi)占用最多行數(shù)的單元格變化，設(shè)置固定的上下邊距，表格行高隨著數(shù)據(jù)信息的換行而變化如下圖。

2）單元格

①單元格關(guān)鍵數(shù)據(jù)

單元格數(shù)據(jù)一般有文字、圖標、頭像、進度等，在具體業(yè)務(wù)中，如果你找對了用戶想看的關(guān)鍵數(shù)據(jù)，將會大大提升用戶體驗，反之則干擾用戶查找信息，對于較為重要的數(shù)據(jù)可以進行關(guān)鍵數(shù)據(jù)的標識設(shè)計。

標簽：關(guān)鍵數(shù)據(jù)較多，顏色與視覺重量要做區(qū)分。

圖標：名稱與文件類型圖標區(qū)分。

人員信息：展示在表格中也十分常見，通常會用頭像 名稱的方式，例如下圖temabition和飛書中對人員信息的展示。

度量單位的使用：其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復(fù)，一般在表頭標識清楚即可。

進度條：進度條或簡單的數(shù)據(jù)圖，它更能直觀地展示數(shù)據(jù)的進度狀態(tài)，方便用戶對數(shù)據(jù)信息做判斷如下圖。

關(guān)鍵屬性標識：比如用戶重點關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。

空表格：表格數(shù)據(jù)為空時要給予一定的提示信息或快捷操作，讓用戶更快地進行對數(shù)據(jù)的操作。

空單元格：當(dāng)表格單元格中沒有相應(yīng)數(shù)據(jù)時，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩舻睦Щ笊踔琳`解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？

正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫中沒有該字段）用“-”，沒有數(shù)量（數(shù)據(jù)庫中有該字段）用“0”，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致。

②單元格交互

單元格編輯：

是對單條數(shù)據(jù)的修改，直接在單元格編輯信息的形式有很多，針對不同的數(shù)據(jù)提供對應(yīng)的編輯方案。

包含：原位編輯，懸停氣泡編輯，下拉狀態(tài)編輯，點擊彈窗編輯拖曳排序等等。針對不同的業(yè)務(wù)性質(zhì)對單元格采用不同的交互形式。

拖拽排序為用戶的自定義排序，在用戶拖拽時頁面布局保持不變，適用于數(shù)據(jù)量較小有自定義排序的情況下。