本期內容概覽

下圖為內容目錄，大家可以通過下面的目錄針對感興趣的內容進行選擇性閱讀。文章分為兩小章節類，從最基礎對表格的認識再到表格如何提升“易讀性”進行分享。

 

什么是表格？

 

我先從表格的最基礎的基本認知跟大家分享，幫助大家對表格有個初步的認知。那么什么是表格呢？用一句概括：“將復雜的內容進行「歸納整理」，將「信息展示」給用戶，幫助用戶高效率的進行「數據分析」。”

 

1. 表格的意義

1.1. 表格定義

表格是一種常見且最有效的信息組織整理手段。在B端產品應用中“表格用于組織并呈現結構化的數據及信息內容，通常會提供對數據對數據及信息的操作能力，進而方便用戶閱讀、分析、比較數據”。

單元格：通過縱向與橫向的分割線組合而成的“單元格”構成了表格的基本單位。

縱列、橫列：表格中縱列、橫列是由多個單元格進行橫向、縱向排布組合而成，他們相互獨立又相互關聯；

表體：是由多行和多列的單元格組合而成，用于顯示數字和其他項以便快速引用、分析和操作。

1.2 表格應用

表格在B端產品中它是頁面布局的重要組成部分，可用于展示結構化數據、靜態信息以及處于變化中的數據。表格中行與列形成了單元格的寬高，不同的寬高有著疏密之別，使信息之間更易于對比，大大提升了用戶對信息的接收效率和理解程度。

因為表格是常見的信息組織手段，所以數據經過歸納整理和合理布局后，更易于用戶感知并分辨其中的差異、變化、關聯，可以將數據進行對比分析。如下圖所示：

 

2. “表格”的構成

常規情況下，可以把表格分為：a. 內部構成元素，它包含了表格頭部、表格主體、表尾；b. 外部構成元素，它包含了表格篩選區、按鈕操作區、底部區；

2.1 內部構成元素

如下圖所示為表格的內部結構樣式。

1）表格頭部：表格每一列的標題作用包括屬性分類或基本概括，還包括了對列進行排序、篩選、凍結等功能。但是，不建議在表頭進行篩選等復雜操作。

2）表格主體：表格主體是由表格的多個基本單元格組成，它主要展示表格的主體信息內容。

3）表格尾部：一般承載統計信息，如總計、平均數等。

2.2 外部構成元素

如下圖所示為表格的外部結構樣式。

1）表格篩選區：它是針對表格主體內容進行篩選。

2）按鈕操作區：它是針對表格內部元素做整體的操作，按鈕區的操作可分為增、刪、改操作和業務處理操作（比如常見業務中常用到的自定義列）。

3）表格底部區：底欄一般放統計信息、分頁等內容。

2.3 常見的布局規則

一般來說，表格有水平型、垂直型兩種布局。

垂直布局

是在行分割的基礎上，通過強化列的視覺特征來突出行間信息的對比，如下圖所示：

水平布局

弱化列的存在，強調信息的連貫性，保證用戶閱讀信息時視覺流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。

 

3. 表格類型

類型一：基礎表格

最基礎的表格，由表頭和單元格組成，無其他拓展操作，對信息進行最基礎展示。

幾種常見的風格樣式：1）常規型，僅顯示橫向分割可減少整個網格的視覺干擾；2）斑馬紋，隔行交替使用底色來區分數據橫向對比；3）田字型，單元格有均勻而明顯的分割線，邊框單元格比較明顯。

類型二：固定行表格

用于固定表格高度內容區不能完全展示內容的場景，出現滾動條可滑動預覽，滾動僅發生在表格內部，表格內有一個獨立的垂直滾動。如下圖為騰訊投放廣告表格，當表格縱向區域內容過長時可上下滑動頁面預覽：

類型三：固定列表格

用于固定重要信息列，在寬度有限的頁面窗口中表格橫向內容不能完全被展示的場景，可左右滑動查看其他更多的內容信息。如下圖為騰訊投放廣告表格，當表格橫向區域內容過寬時可左右滑動頁面預覽：

類型四：單/多選表格

表格可進行單選/多選。如下圖為騰訊投放廣告表格，可以進行列的選擇并將其進行編輯操作：

類型五：可展開表格

表格行可以展開/折疊信息，一些次要的或擴展內容會被折疊起來，有必要操作或查看時可進行展開。如下圖為騰訊投放廣告表格，他將一些延展的詳情數據收起，用戶可點擊展開：

類型六：樹表格

當數據信息有清晰的層級關系時，可以使用樹表格。如下圖Demo所示：

 

4. 本章總結

本章屬于本篇分享的第一章節。主要將表格存在的意義進行了定義，把表格的主要使用場景和作用（價值）進行詳細分析，目的是想讓大家了解實際工作中應該在什么的場景下如何使用表格。同時也將表格的主要構成元素（內部、外部）進行了拆解，目的想讓大家了解后能夠正確設計表格。為了方便大家的理解，也通過圖文結合的形式更具象、更清楚的提高閱讀理解。

 

 

如何提高表格的“易讀性”

表格內部構成元素分表由表格頭部、表格主題、表格尾部組成，因此提升表格的易讀性可以從表格內部著手優化；

 

1. 提升表格易用性因素

1.1 易讀性（本期重點）

易讀性是指通過使用表格高效的將數據進行展現、傳遞給用戶。表格中的數據需要結構化、展現規則一致、視覺層級清晰，這樣即可以將大量的數據進行有效的歸納與分類并陳列信息，又可以表達信息之間的關系；

1.2 易操作（下期重點）

將表格中大量的數據通過篩選、搜索、排序、分頁這四個操作提供給用戶，幫助用戶快速查找、對比、分析的操作，進而達到易操作的目的；

2. 內部構成元素易讀性設計

2.1 表頭提升易讀性的方法

方法一：凍結表頭(也是表格的一種類型)

將表格頭部固定，一般使用在電腦屏幕顯示不全表格縱向內容高度時，為滿足用戶在向下滾動表體的場景下也能實時有效閱讀表體數據與表頭屬性描述，從而有效提升表格使用易讀性。如下圖為騰訊投放廣告表格，當表格縱向區域內容過長時可上下滑動頁面預覽：

方法二：多級表頭

信息層級分類較多、結構較為復雜時，可使用多級表頭來體現數據的層次關系。注意：表格頭部的層級需要盡可能的簡潔，避免過重的表頭增加用戶的閱讀成本導致失去表格的意義。如下圖Demo所示：

2.2表體提升易讀性的方法

方法一：行高設置

表格主體是由表格的多個基本單元格組成，它主要展示表格的主體信息內容，所以我們控制好每個基本單元格的高度及可控制表格行高。我們可以使用《原子設計》理論將單元格再次拆分，我們可以把單元格看作是一個分子，那么組成單元格的原子是文字、分割線；

表格行高=單元格行高=文字大小+文字行高+上下邊距（Padding）+分割線，如下圖所示：

 

文字大小設置：一般出現在表格中的文字大小都在12-16px之間，通常12-14px最為常見，建議大家設計也在此范疇內。

文字行高設置：行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號 + 行間距，而不是單指字體高度，所以文字的高度不等于字號的高度，如：字號12px，行高為22px，根據Web頁面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：

一般行高可設置為字號的1.2-1.8倍，具體情況可按實際的場景訴求制定規范，比如：可以制定幾個梯度（緊密、正常、寬松）來配合場景的應用，當文本內容較多時為了不讓文字密度那么高可以使用寬松梯度做應用，當空間較小但又想承載更多的內容可以使用緊密梯度做應用；

具體可以查看我之前分享的《文字規范系統》

上下邊距（Padding）：表格中的邊距上下個方向。如下圖所示：

分割線：垂直分割線可跟隨列的數量（表格列的密集程度）判斷是否需要，一般而言一屏列數較少時可不配置，可減少視覺干擾讓表格更簡潔，使用列與列之間的間距作區分（格式塔原理）。但是一屏需要展示較多列時建議加上垂直分割線。

但是水平分割線在表格中一般情況下會存在，它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度。

那么問題來了，在設置單元格的時候分割線需要加進去嗎？答案是需要，但是每個單元格只需要在下方加一個1px分割線即可。舉個例：單元格行高為56px，那單元格容器高度=55px+分割=1px。如下圖所示：

 

小結：單元格行高是由字體大小、字體行高、上下邊距、分割線組成，表格行是由多個單元格組成，標體又是由多個表格行組成。所以，在實際應用場景中可設置字體大小、字體行高、上下邊距控制單元格的高度，進而滿足設置表格行高的訴求。如下圖拆解：

注意：在制作規范時盡量避免出現超過3種以上類型表格行高（不然很難管理和規范使用），可以預設緊密、正常、寬松來配合滿足不同業務場景的訴求。

方法二：行寬設置

表格行寬也就是單元格寬度是由內容容器、左右邊距組成。如下圖所示：

那么問題來了，當隨著不同大小的屏幕如何做自適應規則呢。可看下圖，將圖中A1部分固定寬度，不隨頁面縮小/拉寬而變化，A2部分看作為自適應部分，它跟隨頁面縮小/拉寬而變化。如下圖所示：

方法三：固定列 (也是表格的一種類型)

將表格中的最關鍵的內容與操作放在首尾列并固定，幫助用戶便捷閱讀、操作，未固定列可通過鼠標左右滑動方式查看。優勢是在寬度有限的頁面窗口中可以左右滑動查看其他更多的內容信息。如下圖為騰訊投放廣告表格，當表格橫向區域內容過寬時可左右滑動頁面預覽：

注意：這里是指首尾列固定位置，而不是固定列的寬度。對于使用鼠標用戶而言，水平滾動交互體驗不佳。因此，盡可能通過調整列寬，避免出現水平滾動的情況。

適用場景：當表格的列數量過多導致寬度大于頁面寬度時的場景。

方法四：可拖拽列

可伸縮列是指用戶可手動拖拽表格某列的寬度，從而達到最佳可閱讀狀態。如下圖為騰訊投放廣告表格所示：

可拖拽表格注意事項：

1）需設置列最小寬度：可按屬性（日期、ID、數字、圖片等）進行定義最小寬度設定，比如正常文本類，如姓名、描述字段可設置最小寬度為3個中文字符、電話號碼類固定為11個英文字符等、圖片的最小列寬不影響圖片的可閱讀，超出部份換行顯示；

2）某列的寬度被手動調節寬度后，其余列的寬度應當不受影響，如果調整后，如果所有列寬總和大于屏幕寬度時可采用橫滑的形式展現；

可拖拽表格適用場景：

表格的數據內容可以很簡單或非常復雜。但是預設的寬度并不能給用戶最好的閱讀體驗。這種情況下，我們可以使用寬度可調整的表格，讓用戶在瀏覽時根據需要，自主控制表格列的寬度。

方法五：數據處理值

一般用在需要表格原始數據的基礎上給出數據差值、數據升降變化、數據平均值、數據總計等處理結果為導向，目的是減少用戶再次需要處理加工數據的過程，提升用戶閱讀信息的效率。

比如，用戶想快速查看對比某兩個時間段數據總計情況，那么可以在表格底部或表體第一列給個總計行，供用戶進行快速查閱。如下圖為總計案例Demo：

方法六：自定義列

提供自定義列設置可讓用戶根據自己的訴求來定義表格的列展示列及順序，常常用在表格中列數特較多場景。用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。

首先用戶可以在操作中預設幾個常用的自定義列展示，方便后續的延用。其次在對表格列的定義設置彈窗中可分成兩個操作區：1、用戶先在左側選擇希望在表格中展示的列；2、右側可對表格列字段進行排序。如下圖為騰訊投放廣告表格所示：

注意：系統應記住用戶上一次的自定義列設置，減少用戶操作成本。

2.3 表尾提升易讀性的方法

方法一：提供分頁器

在數據量較大的表格中使用分頁器有以下四大優勢：

1）方便用戶看到的內容盡可能聚焦，避免信息量過載。

2）分頁可以緩解服務器的數據加載壓力導致的加載時間過長。

3）分頁可以跳躍查看數據，靈活性更高、步驟更短。

4）用戶在表格瀏覽時可作為導航提示作用，告知用戶瀏覽哪幾條數據及數據總條數。

 

分頁器“解刨”（延展部分）

既然說到分頁器，那我們來細聊一下這個組件。首先，我們應該得知道分頁器是一個獨立的組件，而不是表格組件中的一部分，在本文中他與表格一起出現只是應用場景之一。

一般應用應用在展示大量內容或數據條目時，為了使用戶看到的內容盡可能聚焦，避免信息過載，我們應使用分頁器將內容分成多頁展示。分頁器分為常規、簡潔兩種類型；

常規分頁器

1）翻頁按鈕：用于在前后頁面之間翻頁導航功能;（必要）

2）當前頁碼：高亮的當前所在頁碼，告知用戶頁面中數據處于當前位置;（必要）

3）普通頁碼：用戶點擊可快速切換至該頁;（必要）

4）截斷符號：當頁面過多時用于省略中間頁，同時作為快速導航及被省略頁碼的操作入口;（必要）

5）條目設置：用于設置每頁顯示條目數量;（可選）

6）總頁數：通過使用總頁數告訴用戶知道大概會有多少數據；（可選）

7）頁碼跳轉：幫助用戶從當前頁面跳轉到其他某個頁面；（可選）

簡潔分頁器

1）翻頁按鈕：用于在前后頁面之間翻頁導航功能；（必要）

2）頁碼提示：a、提示用戶當前頁/總頁數；b、點擊出現現下拉選擇，用戶可以直接跳轉到某頁面；（可選）

 

3. 數據如何展示

3.1 從屬信息展示

通常為了提高用戶的快速瀏覽效率，減少次要信息的漏出。表格不會默認展示所有的信息，一些次要的、不是必須要關注的數據內容將其折疊起來，用戶有需要時可通過行展開的方式呈現。

方法一：使用嵌套子表格

將表格中父級行數據下的多條數據關聯數據進行嵌套。它能夠對主數據進行更加細致的解釋，詳細的了解主數據中數據的含義。如下圖所示，就是在一個表格中還能嵌套另一個表格：

方法二：使用樹形表格 (也是表格的一種類型）

樹形表格是指表格的主要列的數據組織方式是一個樹結構，他可以時是多級樹結構的展現形式，對應的列數據（多級）與標題強相關。當數據信息有清晰的層級關系時，可以使用樹表格。如下圖Demo所示：

方法三：使用可展開 (也是表格的一種類型）

表格行可以展開/折疊信息，一些次要的或擴展內容會被折疊起來，有必要操作或查看時可進行展開，比如：可以是表單字段詳情、可以是介紹說明等。如下圖為騰訊投放廣告表格，他將一些延展的詳情數據收起，用戶可點擊展開：

 

3.2 單元格空數據展示

在表格字段展現中進場會有某個數據為空的情況，這時候建議大家不要用戶“0”或“空白”展示。因為在無數據/空的情況下用“0”容易誤導用戶數據是“0”，一般用會用“-”來表示數據為空（用戶慣性認知）。

3.3 默認排序

默認情況下常以創建時間進行排序，把最新創建的數據排在表格的最前面。因為用戶路徑是創建后對最新的操作評率較高，方便用戶查找。我們可以假設如果創建一條數據后，把最新數據放在最后一列，那么用戶在查找需要額外的搜索/篩選/使用分頁，增加了用戶的操作成本。如下圖所示可以默認時間排序，也可以按升序排序：

3.4 數據的對齊方式

合適的對齊方式能夠提升數據的瀏覽效率，比如：常見的文本左對齊，數據類右對齊。表格內信息的縱向列對齊符合格式塔中相近原則，它能夠很好將表格每列的數據形成一個個組的視覺效果。通過正確的對齊，會讓表格更加規范并易理解，從而快速提升數據的瀏覽、對比效率。

數據類型

數值類型右對齊：便于用戶直觀而又準確地讀取數據，要做到一眼觀定、簡潔明了。在表格中數值分布排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。比如常見的金額、人數、大小等，可以通過數據位數的長短直觀對比，因為在表格中對比數字時，閱讀順序是看個位、十位、百位…等。注意：數據格式需要保持一致，避免出現格式不一致的情況，比如：100.89、100、100.1；應該：100.89、100.00、100.10格式。

 

布爾型左對齊：比如常見的男/女、是/否、真/假等。

文本類型

固定或不固定長度文本都是用右對齊，固定長度是指文本長度不會發生變化，比如：日期、手機號等；不固定長度是指正常的項目描述、解釋說明、名稱之類格式和長度都不固定。應為左對齊符合中/英文的閱讀習慣，如下圖所示：

3.5 數據格式

規范數據表達，保證直觀準確一致的理解數據，比如：數值用來表示計量大小，它可單獨出現或搭配數字符號進行使用等一些規范。

大額計量

如果一個金額很大，那么數值中的“萬”“億”單位可采用漢字。如果一個數值很大，那么數值中的“萬”“億”單位可采用漢字。

 

數字脫敏

數據脫敏是指對某些敏感信息通過脫敏規則進行數據變形。下圖為通用場景，遇到數據安全性較強的業務場景，可根據業務場景自行調整。下圖為常見脫敏類型及通用使用方式：

時間日期格式

數值符合展現

在表格中數值用來表示計量大小，它也可單獨出現或搭配數字符號進行使用。

計量單位

在表格中，計量單位默認放在表頭，并默認右對齊。如下圖所示：

 

本章總結

本章屬于本篇分享的第二章節。我們首先分析了提升表格效率的的兩大因素，分別是易讀性和易操。其次我們通過分析“表格內部構成元素設計”和“數據如何展示”的設計手段來達到提高表格的易讀性。

其中“表格內部構成元素設計”章節講述了將表格內部元素表頭、表體、表尾拆解并將設計技巧和設計手段進行分享，目的是想幫助大家在設計表格時能夠通過這些技巧和手段提升表格的易讀性。“數據如何展示”章節講述了從各個維度思考如何正確將表格中的數據如何正確展示。

 

文章總結

根據上文我們可總結到表格是“將復雜的內容進行「歸納整理」，將「信息展示」給用戶，幫助用戶高效率的進行「數據分析」”。所以表格的作用是常見且最有效的信息組織整理手段，我們想要提升表格的體驗就需要著手從“易讀性”和“易操作”角度出發。本文側重拆解了什么是表格以及分析了如何提高表格的“易讀性”，下篇分享將以“易操作”角度繼續分享如何提升表格的體驗。

 

參考文獻

http://www.woshipm.com/pd/1655376.html

http://www.woshipm.com/ucd/714641.html

http://www.woshipm.com/pd/661699.html

http://www.woshipm.com/pd/5323117.html

https://ant.design/components/table-cn/