編輯導(dǎo)讀：表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，常和排序、搜索、篩選、分頁(yè)等其他界面元素一起協(xié)同。本文作者總結(jié)了一套B端表格設(shè)計(jì)指南，一起來(lái)看看吧。

大家好，我是小鹿，周末來(lái)小小的充個(gè)電吧～今天為大家分享的是「B端典型頁(yè)面-表格（上篇）」，文章將從概念和結(jié)構(gòu)拆分為以下四個(gè)部分為大家進(jìn)行全方位的解讀復(fù)盤。

01 表格的概念

02 數(shù)據(jù)查看-顯

03 數(shù)據(jù)篩選-查

04 數(shù)據(jù)操作-增刪改

因篇幅較長(zhǎng)，考慮到大家的閱讀體驗(yàn)，本篇將從前兩個(gè)部分「表格的概念」和「數(shù)據(jù)查看」結(jié)合實(shí)際案例進(jìn)行分享。

一、表格的概念

1. 表格的特點(diǎn)

表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，常和排序、搜索、篩選、分頁(yè)等其他界面元素一起協(xié)同。在企業(yè)級(jí)中后臺(tái)中，常應(yīng)用于：

一次性瀏覽大量信息-很多圖表類型無(wú)法展示數(shù)據(jù)特點(diǎn)，而表格是組織大量信息通用性最高的一種表達(dá)方式，既可陳列信息，又可以表達(dá)信息之間的關(guān)系；

信息之間需對(duì)比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關(guān)聯(lián)；

快速確定并執(zhí)行多種復(fù)雜操作-如對(duì)信息進(jìn)行搜索、篩選、增刪改等。

2. 表格頁(yè)的構(gòu)成

通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分，根據(jù)不同粒度的用戶目標(biāo)將其解構(gòu)為三部分：

• 數(shù)據(jù)查看：表格的核心-顯，用戶用來(lái)閱覽、對(duì)比和分析數(shù)據(jù)
• 數(shù)據(jù)過(guò)濾：輔助作用，承載表格的查功能，將數(shù)據(jù)過(guò)濾，方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方
• 數(shù)據(jù)操作：輔助作用，承載表格的增刪改的功能，比如常見(jiàn)的“新增”、“刪除”、“編輯”按鈕。

從用戶目標(biāo)來(lái)看，表格頁(yè)的終極目標(biāo)是查看，所以我們按照數(shù)據(jù)查看、數(shù)據(jù)過(guò)濾、數(shù)據(jù)操作的順序來(lái)對(duì)表格頁(yè)進(jìn)行講解。

二、數(shù)據(jù)查看-顯

數(shù)據(jù)查看區(qū)主要由表頭、行、列、單元格五個(gè)部分組成。

表頭：說(shuō)明數(shù)據(jù)的內(nèi)容，可以包含篩選、排序等功能起到數(shù)據(jù)解釋作用

行和列：對(duì)本行/本列數(shù)據(jù)的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關(guān)鍵要素

單元格：表格的主體內(nèi)容，承載用戶的每一條數(shù)據(jù)，也是整個(gè)表格的核心

分頁(yè)器（不一定有）：分隔長(zhǎng)列表的組件，每次只加載一個(gè)頁(yè)面

對(duì)表格元素庖丁解牛后，小編將通過(guò)八個(gè)點(diǎn)：視覺(jué)風(fēng)格、表格構(gòu)成（表頭、行、列、單元格、分頁(yè)器）、基礎(chǔ)交互和詳情查看，三原則：信息降噪、呼吸適中、高效易讀

來(lái)對(duì)表格設(shè)計(jì)一一拆解

1. 視覺(jué)風(fēng)格

表格中所承載的數(shù)據(jù)信息才是主體，在進(jìn)行表格設(shè)計(jì)時(shí)，尤其要注意去除所有非必要的視覺(jué)元素，讓用戶將注意力集中在數(shù)據(jù)信息上，而不是無(wú)關(guān)的邊框、底色等。

1.1 去掉不必要的分割線和斑馬紋

去掉豎向分割線：水平分割線能顯著減輕長(zhǎng)表格在垂直方向的視覺(jué)重量，加快大量數(shù)值的對(duì)比工作。

而豎向分割線的作用是即使縮減元素之間的距離也能區(qū)分不同元素，但如果使用了合適的對(duì)齊方式分，豎直分隔線就會(huì)很多余的。即使要用，也要非常淡，不能妨礙快速瀏覽。

不使用斑馬線：數(shù)據(jù)量不大且易分辨的情況下，斑馬線在很多時(shí)候也是沒(méi)有必要的，因?yàn)樗鼈兪峭活悢?shù)據(jù)，而且水平分割線就已經(jīng)能夠明顯區(qū)隔。

1.2 分割線樣式輕盈

分割線的樣式盡量輕盈，無(wú)關(guān)的邊框不要搶視覺(jué)，數(shù)據(jù)才是主體，突出內(nèi)容。

1.3 減少圖形元素的使用

去掉不必要的裝飾和顏色，如icon、標(biāo)簽等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但物極必反，少即是多，要注意克制這些元素的使用。標(biāo)簽?zāi)苡镁€性就不用面性，做到輕盈，否則表格中最重的就是標(biāo)簽。

1.4 字體降噪

在產(chǎn)品的品牌設(shè)計(jì)中，字體是規(guī)范中的重要一環(huán)。然而在設(shè)計(jì)表格時(shí)，簡(jiǎn)約至上才是關(guān)鍵，盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體，但數(shù)字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現(xiàn)以下情況

不要出現(xiàn)襯線字體：因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音，不利于用戶對(duì)數(shù)據(jù)的理解和思考。

不要出現(xiàn)全大寫(xiě)字體：因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。

不要出現(xiàn)使用斜體：易引起視線疲勞，影響閱讀。

不要出現(xiàn)多種字體：保持風(fēng)格統(tǒng)一。

2. 表頭

根據(jù)表頭的復(fù)雜程度，可以分為以下三類類型：

• 純文本表頭：僅起到解釋數(shù)據(jù)屬性的作業(yè)
• 多功能表頭：含篩選、搜索或排序等相關(guān)操作
• 分組表頭：信息分類層級(jí)較多的情況下使用，表格需要采取帶豎向分割線

而在表頭設(shè)計(jì)過(guò)程中，有以下3點(diǎn)需要注意：

2.1 精簡(jiǎn)表頭-少一字不可

表頭在能夠概括的情況下，盡量簡(jiǎn)煉、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來(lái)進(jìn)行減短簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用。

一個(gè)簡(jiǎn)單的檢驗(yàn)表頭是否精簡(jiǎn)的方法是：少一個(gè)字不可，通俗易懂的說(shuō)法就是字?jǐn)?shù)再精簡(jiǎn)用戶就不明白意思

2.2 定義專有名詞

對(duì)于比較復(fù)雜的表頭，可以定義一個(gè)專有名詞，鼠標(biāo)hover上去對(duì)專業(yè)術(shù)語(yǔ)或用戶不常見(jiàn)的名詞給予該字段的詳細(xì)解釋，同時(shí)滿足新手、普通、專家用戶的需求。

2.3 情況允許時(shí)，去掉表頭

如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要表頭，因?yàn)榘l(fā)件人和郵主題的區(qū)分度比較高。

3. 單元格

3.1單元格高度

在開(kāi)發(fā)同學(xué)的眼中，單元格高度=內(nèi)容高度+上間距+下間距，在實(shí)現(xiàn)設(shè)計(jì)稿時(shí)，通常也是按照這個(gè)方式來(lái)寫(xiě)的，而不是像設(shè)計(jì)同學(xué)一樣按照文字的尺寸來(lái)計(jì)算間距。其中，文字行高建議設(shè)為字號(hào)的1.5倍，上下間距設(shè)為字號(hào)的1.2倍。

當(dāng)然，在很多很多通用化產(chǎn)品中，存在多個(gè)設(shè)備屏幕分辨率的差異，為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果，可設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來(lái)滿足需求，提供切換按鈕讓用戶自己控制顯示密度。

3.2 單元格截?cái)嘁?guī)則

工作中常常會(huì)遇到單元格數(shù)據(jù)過(guò)多的情況，常見(jiàn)的方法有兩種：

• 定義一個(gè)單元格長(zhǎng)度或字?jǐn)?shù)限制，超過(guò)該范圍以”…”顯示，鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。
• 折行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當(dāng)?shù)目吹剿行畔?，在B端使用層面上還是不錯(cuò)的，建議不要超過(guò)三行，超出可“…”顯示。

數(shù)據(jù)過(guò)多時(shí)，單元格長(zhǎng)度如何定義？超過(guò)哪個(gè)范圍“…”顯示呢？

定義長(zhǎng)度的依據(jù)：根據(jù)業(yè)務(wù)字段，防重復(fù)。保證用戶在掃視的時(shí)候，對(duì)重要字段能快速區(qū)分、對(duì)比。

3.3 不留空白格

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

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

3.4 收起低頻操作

對(duì)于單條數(shù)據(jù)操作頻繁的場(chǎng)景，當(dāng)超過(guò)三個(gè)操作項(xiàng)時(shí)，操作低頻折疊收起。這樣做的優(yōu)點(diǎn)是界面簡(jiǎn)潔明快，信息密度低，可以幫助頁(yè)面突出更加重要的信息，減輕空間壓力，減少干擾。

4. 行的設(shè)計(jì)

4.1 對(duì)齊方式

多行情況下，居中和頂部對(duì)齊都是可以的。不過(guò)小編建議采用頂部對(duì)齊，考慮到一行類不同的單元格會(huì)有行數(shù)不一致的情況，比如有個(gè)3行數(shù)據(jù)，有的只有一行，這個(gè)情況下居中對(duì)齊信息的閱讀效率不如頂部對(duì)齊效率高

4.2 默認(rèn)行排序

新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢？這是個(gè)和表格默認(rèn)排序有關(guān)的問(wèn)題。

表格數(shù)據(jù)應(yīng)該默認(rèn)按添加的時(shí)間排序，還是應(yīng)該按某個(gè)字段的名稱排序？

如果我們默認(rèn)按某個(gè)字段排序，比方說(shuō)崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數(shù)據(jù)在表格中極大概率不靠前。這時(shí)就會(huì)出現(xiàn)一個(gè)問(wèn)題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了，這會(huì)讓他們覺(jué)得自己的操作失敗了。

解決這個(gè)問(wèn)題的一個(gè)方法就是按照數(shù)據(jù)添加時(shí)間排序，默認(rèn)最新創(chuàng)建的在最上面，體驗(yàn)上創(chuàng)建完反饋，馬上就出現(xiàn)了變化，且針對(duì)最新數(shù)據(jù)的操作頻率較高，方便用戶發(fā)現(xiàn)與查找。同時(shí)也可以用帶排序的表頭，讓用戶自定義排序。

5. 列的設(shè)計(jì)

5.1 合適的列間距

合適的填充和邊距對(duì)于視覺(jué)設(shè)計(jì)至關(guān)重要，以保證易讀性。定義列的間距時(shí)，我通常的做法是N1保持不變，將N2定義一個(gè)最小值，N2再根據(jù)表格的寬度自適應(yīng)變化。

表格主要適配到這個(gè)最小寬度，這一步驟通常的設(shè)計(jì)系統(tǒng)的初期就要完成，一方面可根據(jù)自己項(xiàng)目目前情況，按照導(dǎo)航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時(shí)，可以有一個(gè)明確的邊界，同時(shí)能與開(kāi)發(fā)同學(xué)進(jìn)行理解溝通。當(dāng)表格寬度大于頁(yè)面寬度，固定首尾列，左右滑動(dòng)。

5.2 控制列數(shù)

基于對(duì)實(shí)際業(yè)務(wù)需求、目標(biāo)用戶訴求及其行為的理解，列數(shù)盡量控制在7±2，列舉用戶更為關(guān)注的數(shù)據(jù)，用戶需要的非重點(diǎn)、輔助性信息可以在詳情中展示。

5.3 自定義列

如果不同用戶想看到的信息側(cè)重不同，可以讓用戶自定義列的展示。在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖）。這樣做的好處是：

首先，用戶能在表格上方看到所有的指標(biāo)名稱，避免了原來(lái)需要橫向拖拽才能瀏覽到所有指標(biāo)的情況；

其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。

5.4 合適的對(duì)齊方式

合適的對(duì)齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對(duì)齊（符合格式塔心理學(xué)中相近原則）能夠很好的形成視覺(jué)引導(dǎo)線。通過(guò)對(duì)齊，會(huì)讓表格更加規(guī)范易理解，給用戶視覺(jué)上的統(tǒng)一感，視線流動(dòng)更順暢，讓用戶快速的捕捉到所需內(nèi)容。

• 文本左對(duì)齊：更高效的閱讀瀏覽順序，包括非比較型和固定長(zhǎng)度的數(shù)字，如日期2020-12-04（補(bǔ)0是數(shù)字書(shū)寫(xiě)規(guī)范）、編號(hào)1948696等；
• 數(shù)值右對(duì)齊：金額、長(zhǎng)度、高度等，數(shù)字是從右往左讀的，通過(guò)數(shù)值位數(shù)的長(zhǎng)短即可對(duì)比數(shù)值的量級(jí)和大小，方便數(shù)值的比對(duì)。這是因?yàn)樵趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等；
• 操作右對(duì)齊：操作即使沒(méi)有縱向分割線也能很好的起到分隔的作用，視覺(jué)上看表格是一個(gè)方方正正的格子，比較整齊

6. 分頁(yè)器

在Web端，數(shù)據(jù)量動(dòng)輒上萬(wàn)條，容易出現(xiàn)瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出的情況。使用分頁(yè)器有哪些優(yōu)點(diǎn)呢？

• 分頁(yè)可以緩解服務(wù)器的加載壓力，每翻一頁(yè)加載該頁(yè)的頁(yè)面，縮減單次加載的數(shù)據(jù)量來(lái)縮短等待加載的時(shí)間，從而達(dá)到少量多次的高效體驗(yàn)。這就是為什么哪怕是移動(dòng)時(shí)代了，很多表格還是使用分頁(yè)組件。
• 分頁(yè)可以跳躍查看數(shù)據(jù)，靈活性更高、步驟更短。

表格設(shè)計(jì)大原則是整張表不要超過(guò)一屏，每一頁(yè)的默認(rèn)行數(shù)：10行以上，減少翻頁(yè)的次數(shù)。但考慮到每個(gè)用戶的使用習(xí)慣，在給出默認(rèn)行的數(shù)量后，可以讓用戶自定義每頁(yè)的顯示的數(shù)量，相比于跨屏翻頁(yè)而言，向下滾屏?xí)憷?/p>

2個(gè)小tips：

• 當(dāng)表格數(shù)據(jù)無(wú)數(shù)據(jù)時(shí)，翻頁(yè)控制按鈕不可見(jiàn)。
• 當(dāng)表格數(shù)據(jù)條數(shù)小于10條時(shí)，翻頁(yè)控制按鈕不可見(jiàn)

7. 詳情查看

7.1 詳情入口

詳情查看可以分為點(diǎn)擊詳情、跳轉(zhuǎn)（顯性和隱性）三種方式。

• 詳情：在操作列中增加“詳情”功能，點(diǎn)擊查看詳情。
• 顯性跳轉(zhuǎn)：把 ID、名稱等唯一性標(biāo)志的字段加上超鏈接
• 隱性跳轉(zhuǎn)：默認(rèn)不顯示鏈接色，鼠標(biāo)hover上去才顯示鏈接色，點(diǎn)擊可以查看或直接點(diǎn)擊除操作外的單元格查看（如飛書(shū)管理后臺(tái)）

7.2 詳情交互

關(guān)于表格詳情查看的展現(xiàn)形式，按可承載的信息量由少到多依次分為折疊展開(kāi)、彈窗、抽屜、及新增頁(yè)面四種類型。

a. 折疊展開(kāi)

直接在表格里展開(kāi)（可以是詳情，也可以是二級(jí)表格），無(wú)需打開(kāi)新頁(yè)面即可查看附加信息，防止用戶迷失。

適用場(chǎng)景：信息量較少的情況

b. 彈窗

彈窗是一種中斷用戶當(dāng)前操作并對(duì)其進(jìn)行補(bǔ)充、或者對(duì)當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式，需要用戶進(jìn)行強(qiáng)交互，它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作。主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式：

非模態(tài)彈窗：

通常這類彈窗只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶感受不到他的存在。它的缺點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案。在詳情查看頁(yè)面中并不適用，此處就不再進(jìn)行拆解。

模態(tài)彈窗：

位于瀏覽器的主頁(yè)面核心區(qū)域，需要用戶對(duì)它做出相應(yīng)交互，彈窗才會(huì)消失。

優(yōu)勢(shì)：通過(guò)全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過(guò)透明度展示背景，讓用戶了解到自己并沒(méi)有離開(kāi)當(dāng)前頁(yè)面

劣勢(shì)：打擾用戶，感到強(qiáng)烈的中斷的感受

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

c. 抽屜

側(cè)滑抽屜相比彈窗減少了頁(yè)面層級(jí)和隔離感，有較強(qiáng)的連貫性，適合與原頁(yè)面具有連貫結(jié)構(gòu)的內(nèi)容的展示。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息，這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到多個(gè)項(xiàng)目時(shí)不會(huì)丟失位置?？?strong>自定義上下左右四個(gè)方向，一般右側(cè)滑出最為常見(jiàn)。

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

d. 新增頁(yè)面

新增頁(yè)面幾乎是萬(wàn)能的，無(wú)論頁(yè)面內(nèi)容量是多少、頁(yè)面間是否連貫、以及使用頻率怎樣，都可以使用。新增頁(yè)面又分為：覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場(chǎng)景上可以根據(jù)兩者差異進(jìn)行選擇。

在詳情查看中，二級(jí)頁(yè)面使用頻率是非常高的，需要用戶在A與B頁(yè)面之間進(jìn)行來(lái)回切換，這時(shí)候考慮頁(yè)面反復(fù)出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生，本著產(chǎn)品效率至上的原則，新增的頁(yè)面建議新開(kāi)一個(gè)窗口跳轉(zhuǎn)而非覆蓋，如下圖：

適用場(chǎng)景：當(dāng)詳情頁(yè)承載內(nèi)容過(guò)多且里面的操作相對(duì)復(fù)雜時(shí)，如詳情頁(yè)內(nèi)有表格的嵌套和特別多的操作

8. 基礎(chǔ)交互

8.1 表格滾動(dòng)

表格滾動(dòng)方式有表頭固定和列固定兩種，比較復(fù)雜的表格可同時(shí)采取表頭和列都固定的情況

表頭固定 ：適合列表滾動(dòng)加載時(shí)，適合瀏覽場(chǎng)景

列固定 ：適合列表項(xiàng)較多時(shí) ，需要左右滑動(dòng)時(shí)。比較常見(jiàn)的是首尾固定，當(dāng)時(shí)也可以按照業(yè)務(wù)要求首列或者尾列固定，或者說(shuō)表格前兩列業(yè)務(wù)都需要看到，則可以固定前2列

8.2 加載

表格中的復(fù)選框、折疊圖標(biāo)，操作按鈕等遵循組件本身的加載規(guī)則。

加載機(jī)制根據(jù)實(shí)際業(yè)務(wù)中的數(shù)據(jù)量來(lái)決定是全量加載還是分頁(yè)加載。

加載樣式循序?qū)?yīng)規(guī)則：

三、最后

以上就是「B端典型頁(yè)面-表格」上篇的全部?jī)?nèi)容啦～～

后續(xù)會(huì)為大家分享數(shù)據(jù)篩選、數(shù)據(jù)操作等一系列的設(shè)計(jì)知識(shí)點(diǎn)，希望能給正在從事或準(zhǔn)備入局B端的的小伙伴帶來(lái)啟發(fā)和幫助。

本文由 @且曼B端設(shè)計(jì)_劉美芳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。