為大家梳理一個web表格設計框架，希望能夠給大家帶來完整的不一樣的內容。全文12,598字，預計閱讀30分鐘，建議收藏。

在網頁或桌面端為載體的B端產品和生產力工具中，越來越多的設計師需要和數據打交道，查詢和處理數據的能力是當前正在設計的大多數產品的關鍵要求之一，表格被公認為是展現數據最為清晰、高效的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。

表格，展示行列數據，既是一種可視化交流模式，又是一種整理數據的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內容；通過合理佈局，感知不同信息間的關聯與區別，進行分析和比較；對數據進行排序、搜索、分頁、自定義操作等複雜行為。

1.1 表格的佈局

表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格佈局有水平型、垂直型和矩陣型三種基本佈局，分別強調行、列、單元格。

水平型會弱化列的存在，強調行信息的連貫性，適用於用戶閱讀信息時是從左到右，然後自上而下逐條掃描。垂直型是通過強化列的視覺特徵來突出不同列信息的對比。矩陣型的表格有均勻統一的分割線，單元格比較明顯，適用於列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合併的情況也屬於矩陣型。

還有比較常用的表格類型層級型：

層級表

是表達結構性關係的表格，表現得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。

層級表並不如矩陣表直觀，但通過結構化的組織方式逐級展示表的數據內容，讓整體信息架構一目了然，非常適合大型數據表。

結合層級表的使用場景，多以查看為主，編輯需求較少。

同時還有特殊的表格類型，圖表型與卡片型：

圖表型

除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便於用戶從圖形角度查看、分析自己關注的數據。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。

卡片型

可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優先級進行排列。此外，卡片彼此之間又形成一個整體。

卡片是一種承載信息的容器，對可承載的內容類型無過多限制，它讓一類信息集中化，增強區塊感的同時更易於操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關係。適合較為輕量級和個性化較強的信息區塊展示。

注：在有限的表格空間內需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。

在實際工作中，上述表格類型還有可能互相結合，以更好的達到相應的分析目的。

比如垂直–層級，矩陣–數據立體表等。

1.2 表格的構成

從視覺結構的表現角度，個人將“表格”的構成分為：標題、表上方篩選操作區、表頭、表體、底欄。由表頭、表體構成內部區域，由標題、篩選操作、底欄構成外部區域。

標題

標題是對錶格信息內容的整體概括，可包含數據來源及屬性(日期、地區等)，以便用戶對錶格內容有整體認知。給數據表格起一個清晰簡明的標題，與其他的設計同等重要。有了好的標題，表格就可以獨立使用，如果導航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。

篩選操作區域

這里特指位於表頭的上方的操作區域，包含篩選，操作按鈕等其他操作。篩選區包含模糊搜索和條件篩選，按鈕分為增刪改和其它業務處理操作，合理設計篩選區可以大大提高用戶的效率。

表頭

表頭對數據性質的歸類。表頭按慣例要對數據的簡況做出反映，如被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經濟狀況等。表頭的字段名稱應當符合人們的思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這裡也能指列行標籤，是對所屬行或列數據的描述。

除了容納行/列標籤之外，表頭也可以進行排序、搜索、篩選等。

表體

表體是表格的主體內容，具體信息數據內容的填充區域，由一個個基礎的單元格組成，單元格是表格呈現數據信息的基本單位，可以是計數、百分比、均值、"-"等任何數據。表體包含數據，分割線，背景，單元格數據可進行點擊操作，如鍊接跳轉(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。

表尾一般是統計類數據，例如合計、平均數等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。

底欄

底欄在表格最下方，主要展示正文中的數據量或單頁數據的概覽信息，也常提供統計功能，供用戶了解總體進展。底欄一般放統計信息、分頁控件、備註說明、操作按鈕(加載更多)等內容。

底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據不同的場景選擇最優的設計方案，比如有的時候並不需要定點跳轉。

無限滾動可以替代分頁，但對於功能優先的應用未必適用。下圖為查看更多按鈕，比較少見：

同時，在選中操作的下，操作按鈕也可以位於底欄，在未選中時操作置灰。

採用格式一致外觀，突出有利於對象識別的關鍵信息。

2.1 視覺標準

填充與邊距

合適的填充和邊距對於視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性，當創建表格設計規範並嚴格遵循後，就可以創建視覺一致的表。表格本身應具有最小寬度，在不同畫面中寬度應可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小於表格，那麼表格應水平可拖拽。

對齊方式

數據合適的位置排列能夠提升數據的瀏覽效率和準確度。對齊能夠很好的形成視覺引導線，會讓表格更加規範易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。

正如連續律所描述的，人們傾向於把那些經歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體，傾向於使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。

數字應該右對齊

在表格中，諸如金額、數量等數值排列時，通常採用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。數字是從右向左讀的，是因為我們對比數字時，首先看個位，然後十位、百位。當個位數值對齊時，我們就可以快速查看前面的數值，比較多個數據的大小。因此，表格的數字應當右對齊。

當我們常用的字體如果不同數字寬度不一致時，會導致千位分隔符不在一條直線上，所以要選擇數字等寬的字體，等寬的數字在同一豎線時更容易對比。

文字信息左對齊

因為我們閱讀文字信息是從左向右讀，如果不採用左對齊，會降低瀏覽文字的效率。

混合型文本左對齊

當數字、文字、字母組成混合數據時，標題和正文左對齊，使用了一個視覺起點。

在實際工作中，主流框架組件，表格列數據對齊同時針對分割線，雖不是完美中的對齊，但開發成本低。

不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標懸停狀態時單元格展開列出全部字段信息。

色彩

一般表格具有的顏色盡可能少。顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便於準確辨別光標所在行)等處理方法，還可以對錶頭表尾進行視覺區分。但不能增加過多顏色以引起混亂。

分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。

2.2 表頭的優化

表頭標籤應該簡煉準確，以達到節省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。當然對於產品而言，先能把事情說清楚，再考慮文字的簡潔性。

當數據結構比較複雜的時候，使用多級表頭來體現表頭與數據的層次關係，如下圖：

當數據有看不懂或生僻的信息時，用戶期望有人告訴他為什麼會這樣，就需要在表頭標籤後加上小問號，鼠標懸停彈出說明文字的提示框。

不需要表頭

如果表格數據可以自我解釋，表頭就可以不需要。電子郵件的表格是一個好例子，郵件主題，發送者，發送日期都區別度高不會混淆的。當然有的情況表頭是不能去掉的，例如有兩個不明確的日期，這時候你就需要定義一個表頭。

2.3 行的優化

默認排序

所有行按邏輯排序，比如按風險由小到大，將最安全的操作放最前面；或按照信息時間排序，由新到舊，以創建時間進行排序，即最新創建的排在最前面。

合適的行高

行高是非常重要的參數，直接影響著閱讀體驗。較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數據，但會降低掃描效果，導致視覺解析錯誤。適宜的行高使得數據更易於被閱讀，但這不代表行高越大越利於閱讀。

設置行高的原則：

A.單行數據顯示時，數據顯示緊湊、有序。

B.多行數據顯示時，弱化表格形式，提供豐富的視覺展現。

因此，對於單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對於多行顯示的表格，建議內容區到上下邊框的距離略小於文字高度。當然，也可以提供切換按鈕讓用戶自己控制顯示密度。

橫向斑馬線

斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀表格時出現迷失情況，要注意兩種顏色不能反差過大。另外，可以根據實際情況選擇是否與邊框同時使用。

行的強調

有時為了強調行內信息的連續性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續通暢，以提升閱讀效率。

表格還可以通過顏色來指示狀態，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數據。

同時可以對行內信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現，同時兼顧行與行之間的關鍵信息的對比，如上文表格佈局提到的圖表的使用。

2.4 列的優化

減少列的數量

盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。

合適的列寬

列寬嚴謹的處理方式有三種。第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其餘列則按百分比處理；第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。 （當然我覺得不要太拘泥這個，合適就好）

列的強調

為便於用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。

一般列的強調是配合列排序功能使用的，如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區隔，增加同類信息的對比性。

2.5 單元格數據展示

度量單位的使用

其中的關鍵區別在於數字的大小。數據的度量單位無需重複，一般在表頭標識清楚即可。

空白單元格處理

一般指空數據或零數據的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是數值為零？正確做法是，對於數據為零的單元格，要填上0，且小數點後位數、單位，都要與上下數據格式保持一致；對於沒有數據的單元格，通常是用“－”表示。

B端后台數據類型較多，最好能為空數據做出釋義，可以在“列標籤”或底欄給出解釋文案。

數據過多

單元格的寬度根據列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。

關鍵屬性標識

比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。

2.6 分隔線

水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內容更加條理清晰，便於用戶對比查看數據。

垂直分隔線，在表格中使用適合的對齊方式後，那麼就可以省略；數據量級比較大的表格，列之間過於緊密時建議保留，可以使用較淡的分隔線，將不同列數據區分開來，提升瀏覽速度。

下圖採用了同時使用水平和垂直分隔線：

如果在表格中使用適合的對齊方式，分隔線就是多餘的。但由於表格數據量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。

2.7 分頁及翻頁

在web端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定，原則是不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量。相比於跨屏翻頁而言，向下滾屏會更便利，在下文控製表內容中展開比較了無線滾動與分頁。

分頁控件內容：用戶自定義每頁顯示的數量，當前頁碼(行數)，全部數據的頁數(行數)，向前翻頁，向後翻頁，到達第一頁，到達最後一頁等。

當用戶的數據未超過一頁時，可以隱藏翻頁控件。翻頁按鈕不可用時，須給出置灰態或不可點擊。

分頁控件做為篩選數據的一種方式，通常可以結合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網易的郵箱，翻頁與日曆結合使用，對於有大量郵件數據的用戶來說，查閱郵件的效率更高。

除了無限滾動，還有第三種翻頁方式，鼠標點擊“加載更多”按鈕以查看更多數據。

2.8 簡化表格

乾淨的表格使人愉悅。特別是在處理大量數據時，巨大的數據量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內容的有效傳達是表格設計的本質，讓用戶注意力聚焦在核心內容上。所以，做減法設計就顯得可貴了。

實現簡化的方法是適當刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內容。 “簡單並不意味著沒有雜亂，這是簡單的結果。簡單性在某種程度上基本上描述了對象和產品的目的和位置。想設計出一個井然有序的產品。這並不簡單。“ - Jonathan Ive

減少分隔線

這必須是在數據允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多餘的。它們最大的貢獻就是縮減元素之間的距離，明確了單元格範圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。

不使用斑馬線，使用不同底色區分指示不同類型的數據是有必要的，但是用來區分同一類數據，斑馬線在很多時候又是沒有必要的，因為水平分割線已經明顯區隔了。

省去分隔線，對於較小的，動態性較小的表，可以省去所有分隔線，並獲得醒目的外觀。當然，這更多是數據量不大且易分辨的情況。

盡量以黑白為主

運用彩色表達組織或含義可能會增加誤解，並且引發視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態或進度。

克製圖形元素的使用

其他圖形元素，如星號、三角、圓點、對勾、叉等，雖然能夠幫助組織數據、更直觀的傳達信息，但要注意數量，物極必反，要注意克制這些元素的使用。

優秀的表格交互給予用戶操控感，不讓其迷失在數據中。提供便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多數據信息，快速定位目標數據，或根據特定規律對數據進行排序、突出、降維等處理。當我們將這些組件與交互動作結合，用一些習以為常的交互去操縱表格時，用戶將更清晰、有信心、提效率。

3.1 篩選與搜索

篩选和搜索是用戶精確目標數據的好方法，這是一項基本功能，可讓用戶從默認的表格數據輕鬆獲取要查找的內容，在數據量較大的表中特別有用，一般位於表上方的操作區域或表頭區域。

表上方

當表格的數據量較大時，可在表上方操作區域增加對象搜索或數據分類來提升用戶查找效率，且能同時使用。提供多維的篩选和排序，是增加用戶效率的有效方式。

輸入搜索框輸入用戶關心的內容，既可以實時篩選，也可以點擊觸發，一般須支持模糊查詢，否則用戶必須記住所有內容，才能查出要找的目標項，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需精確輸入。

無論手動查詢還是自動查詢，如果查詢條件是組合的幾個，那麼一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數據具有多個屬性且相互聯繫時，組合條件的查詢顯然是更合理的。

如果篩選操作是單個條件獨立查詢，各個篩選條件都是相互獨立的，那麼最好填好一個條件便自動查詢。

篩選條件有時候既需要匯總數據的，又需看單一條件下的數據，比如狀態包含“待付款、待發貨和待收貨等”，此時則是做成Tab單選較好，如下圖所示。

表頭

放置在表頭標籤上的篩選，受列內容的影響，一般做單次篩選。通過對錶頭標籤旁按鈕的點擊，使用戶更快捷進入到自己的篩選條件中。通常，表單越左的列數據越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。

3.2 滾動與固定

垂直滾動固定表頭

垂直滾動時，固定表頭可以讓用戶明白當前單元格數據信息的屬性和含義，體現界面友好性。當數據列差異不大，用戶不能直接根據表格數據分辨類型時，尤其需要固定表頭。當表頭有操作時，固定表頭更能提升使用效率。

數據列表相當龐大而復雜的時候，使用固定表頭可以幫助用戶區分列與屬性。

水平滾動列固定

當呈現大量數據時，表包含的列數超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作。基於我們讀取信息的方式，從左到右放置關鍵列。最左側的列會引起最多的關注，當我們感興趣時，才會查看其他列，它會影響用戶閱讀所需時間與精力。

在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什麼這麼長？能減少字數嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以採取工具提醒？是否可以安排在窗口或對話框裡？

一般有兩個解決辦法：文本換行，對它縮排；在單元格區域截斷文本，在提示中顯示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。

3.3 排序

表格初始有一個默認排序，也叫初始排序。但有時，用戶希望將表格中某一行位置換到另一位置。

拖曳排序

拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已。可是，事實上，拖放過程涉及到了大量細節，在拖放期間，需要處理許多特定的狀態。

用戶在拖動模塊時，頁面整體佈局基本保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。常用於數據量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況。

穿梭表格

就是多表格拖拽的情況。比如左側的表格內容可拖拽至右側列錶框，同時支持表內上下拖拽更換位置順序，也可直接選中對像在兩欄中按鈕移動，完成拖拽行為。

那如何讓用戶知道可拖拽呢？

增加意向符號；改變光標樣式；增加被拖拽對象臨時性底色，突出顯示。

如何讓用戶知道怎麼拖拽到哪裡？

被拖入區域應增加插入位置符號，可以明確指出放置模塊的目標位置，減少用戶困惑，也可以對放置操作發生後的頁面外觀提前給出預覽。同時設計時考慮上下左右兩個方向的拖拽運動分別可以觸發什麼結果，超出表格範圍拖拽對象消失。

被拖動對象應呈現為輕微透明的樣式？應該顯示為完全不透明？或者改為使用縮略圖表示？我認為這三種方法都可以。透明效果也會讓更多表格內容對用戶可見，有助於用戶預覽最終放置後的結果。從而方便用戶查看頁面，也會表明該模塊處於一種特殊模式中。透明可以表明相應被拖拽對象尚未定位，或者說正處於過渡狀態。

表頭排序

排序又分為降序和升序，比如，事件相關的表格，默認時間降序排列；風險相關的表格，默認安全降序排序。

表頭排序可以輔助用戶快速挖掘出需要關注的信息，發現數據信息之間的關係，一般可按數字大小、文字拼音順序、字母順序等其它數據特徵進行排序。如果表格中不是所有數據都能排序時，則需要標識出可排序操作的列，一般採用三角箭頭做為標識，實時反饋當前操作狀態。

3.4 控製表內容

控制列

可伸縮列

由於存在多個數據標題和列，我們只能根據表格的寬度來展示數據。在某些情況下，表格可允許用戶選擇他們關注的列，在其固定寬度基礎上，讓用戶可以自由拖動列寬邊緣以調整列寬。

自定義選擇列

由於數據報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數據顯示上，一般採取寧多勿少的原則，即盡可能提供詳細的數據，由此會數據指標過多，難以在表內完整展示，導致需要水平拉伸，降低了表格的可讀性。

針對上面這個問題上，可將所有的指標名稱羅列在表格上方，並提供多選操作，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣能讓用戶在表格上方看到所有指標名稱，避免了原來需要水平拖拽而導致指標瀏覽不全的情況。其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。

B端后台通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。同時系統應記住用戶上一次自定義列的設置。

控制行

控制行高

較小的行高讓用戶無需滾動頁面就能查看到更多的數據，但可掃描性的效果易導致視覺迷失。這就是為什麼許多成功的數據表設計包含了控制行高(顯示密度)的功能。

樹形表

行也可以結構化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊。可操作按鈕一般位於各級行標題左側，具有獨特的視覺效果並具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態之間切換。展開與折疊也將極大的影響行內容顯示。

分頁

分頁可以將表內容信息劃分成獨立的頁面來顯示。

優點：

1.良好轉換：當用戶是在結果列表中查找特定信息而不僅僅瀏覽信息流時，分頁就是好的選擇。你會知道表格總量與當前頁的準確數量，能夠決定在哪裡停下或者去哪裡。

再次尋找特定數據時，分頁方案讓我們能夠大概定向到目標數據位置。用戶可能難以記錄目標數據頁精確數字，但一般能記錄大概範圍，而頁碼鏈接能讓用戶更容易到達那裡。

2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠結束不了。當用戶知道可用行數量時，他們可以自己主觀做出決定而不是被動滾動。同樣的，當用戶能夠看到結果的數量時，他們將能夠預估他們查看表數據大概要花費多長時間。

缺點：

額外的動作：在分頁方案中，用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。

無限滾動

表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什麼場景都適用。

優點：

1.高效瀏覽：無線滾動提供了一個高效的方法讓用戶瀏覽表數據信息，而不必等待表格新內容的加載。當用戶並不特意尋找特定的內容時，他們需要通過查看大量內容找到自己中意的信息。

2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易，對於那些連續且冗長的內容，無限滾動要比把分頁的有更好的易用性。尤其在表格區域狹小時，使用無線滾動更能節省空間。

缺點：

1.受限性能：頁面加載速度是良好體驗的一切。尤其是表格計算數據時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動，就會加載更多的內容，當數據量過大時，結果就是頁面性能越來越低。

2.位置丟失：無線滾動同分頁相比，沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當用戶有這種行為的話，無線滾動就會讓用戶產生困擾厭煩。尤其當你刷新頁面時發現自己又回到表格頂部，不得不重新滾動等待結果的加載以繼續查看。

3.信息缺失：滾動條並沒有反映出實際數據量。假設快要接近底部了，當受到引誘滾動條再滾動一點點時，結果卻會發現表格數據量又刷新了。從一個可用性的角度來說，打破滾動條的正常使用規則對用戶來講是糟糕的。

一般來說，無限滾動適用於在數據有限且信息重複的表格，有利於內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。

3.5 查看次要信息

表格內容的取捨要建立在對業務的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過於龐大的信息量，建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。

展開行

展開行允許用戶無需打開新頁面在表格內即可查看附加信息，防止用戶迷失。

子表格

表格中打開表格，表格組節把相關的行組合在一起，並且能夠收縮和展開，各組節層級要有樣式區別。如有需要，在每個組節裡可以顯示數據概要信息。

彈窗

包括模態彈窗和非模態彈窗，模態彈窗是僅支持打開一個彈窗進行詳細查看，非模態彈窗是可以同時打開多個，並允許拖動彈窗位置進行信息對比。

模態允許用戶留在表格視圖中，且更多地關注附加信息和操作：

非模態彈窗對於主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數據的細節：

視圖切換

可以通過視圖切換查看更多細節，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。

3.6 數據的編輯操作

編輯表格數據在大眾化的Web應用程序中並不常見。不過，在企業級Web應用程序中，表格則佔據統治地位。此時，最常見的用戶需求，就是想要像使用Excel一樣實現表格編輯。畢竟Excel早已成為編輯網格數據的一種標準。

表格數據的操作大體可分為顯性與隱性。顯性操作，指操作選項顯示在行內，直觀明了；隱性操作，當鼠標懸停時或勾選才顯示操作選項，界面簡潔明快，可減輕空間壓力，減少干擾。

單行操作和批量操作

操作項一般存在於行數據最後，為固定列，或表上方位置，兩者對應多種操作場景。

單行數據操作

文字按鈕操作項一般不多於三個時，圖標按鈕不多於四個時，操作項跟在行條目後面；當超過時，建議將操作折疊收起，點擊更多彈出多個操作選項。當操作按鈕致灰時，鼠標選中可顯示原因。

如果行操作不那麼重要，或者說行操作過於囉嗦影響用戶閱讀時，可使用隱形操作，鼠標在行區域懸停時，可對當前行背景作出區分，或放大懸停區域，同時行尾出現可操作按鈕，進行行操作。如穀歌郵箱：

批處理操作

對於數據批量操作的場景，建議將操作放到表格上方，與復選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執行操作，並在選中復選框後激活表上方操作按鈕，如刪除、批准、拒絕、複製之類的操作，這將節省用戶時間，避免重複對多行進行相同操作。

表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現過多而暫時隱藏，如果空間限制導致操作按鈕排列不下，則使用“更多操作”按鈕。

二次確認提示：對於用戶操作結果給出提示窗反饋，用戶點擊「刪除」後，直接操作；出現提示框告知用戶操作成功，並提供用戶「撤銷」的按鈕；用戶進行下一個操作或者15s內不進行任何操作，提示框消失，用戶無法再「撤銷」。

在執行某些無法撤銷的操作時，點擊刪除後，出現模態彈窗進行二次確認，在當前頁面完成任務。同時禁止濫用模態彈窗進行二次確認，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發生。

單選、多选和全選

數據較多時，單個選擇數據費時費力。單選框是只能單選，而復選框是能選擇單個、多個或全部選擇項，而實際上純粹的單選很少見，所以建議一般場景下在表格最左側加上複選框，如前面說到的批量操作，多選後，就可以批量操作。點擊選框所在行的局部能讓整行被選中，每個選定的行都接受突出顯示處理，這種做法可增大點擊區域減少界面的混亂。

具體設計時，可以按照數據類型進行選擇，如郵件已讀、未讀等。

可進行選擇的表格需告知用戶已選數據量，在翻頁時是否允許跨頁選擇；全選是當前頁視圖中的所有項目還是選擇表格中的所有項目。

單元格編輯、行編輯與表格編輯

針對於需要進行數據編輯的表格。表內編輯能使數據更具可操作性，表內編輯一般優於彈窗。要啟動編輯功能，必須通過鼠標單擊，而非鼠標懸停。這樣就能確保整潔的網格顯示效果。假如是通過鼠標懸停來觸發，鼠標每經過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多麼煩人。

單元格編輯：針對單個，不連續的可編輯的單元格，為了讓功能更容易被發現，可以在單元格數據旁放置編輯圖標，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發編輯，單元格內出現輸入框，保存數據並退出。有了這個隨時可見的鏈接後，編輯功能就更容易被注意到了。

單元格編輯時，也可以設置整個單元格為熱區，以便用戶觸發。

覆蓋層編輯：點擊編輯圖標觸發；通過在頁面上方添加一層來放置編輯數據。雖然編輯期間也不會離開當前頁面，但卻不是在頁面中直接實現編輯。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。

選擇覆蓋層編輯而非行內編輯的原因也很多。有時候，不可能把某個複雜的編輯任務安排在同一個頁面中完成，如果嵌入頁面的編輯區域太大，會因為把內容過多地推向下方而損害頁面的整體感。

而其他情況下，也可以選擇中斷當前頁面流，尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要佔用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重要，就可以考慮使用覆蓋層編輯。

行編輯：針對同一行標籤下的數據編輯。新增數據行後，視圖定位到新增的行並高亮顯示，讓用戶快速聚焦。幾秒後高亮消失，以免過度干擾用戶。

不過，表內編輯圖標會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數量過多，很可能造成功能的利用率下降。如果一行有多個編輯選項，則可以適當使用彈窗編輯數據；如果表格有大部分單元格數據需要編輯，則可以全局編輯。

全局表格編輯：點擊表格編輯按鈕，當前表格所有可編輯的數據單元格內顯示文本修改框或類似XLSX的角標，進入一種特殊得編輯狀態，不會給人直覺造成混亂。這一功能基本用於大面積需要填寫和修改時，如大型填寫報表。

大型數據表由於支持編輯數據處多，這種方法的另一個問題是容易填錯單元格，想像單元格的密集，用戶意外編輯錯誤也時有發生，這樣的話需要編輯/暫存/提交三個操作。如果發現編輯的內容報錯可被更正，應直接引導用戶更正；如果報錯內容不可被更正，則告知用戶原因。

大型數據表如需減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏查看的入口，但應注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內容，只留下表格區域，用戶通過ESC鍵或按鈕隨時退出全屏模式，學習成本較低。

當表格數據為空時，在表格的空白內容處加入可創建的快捷入口，引導用戶新建表格數據，或者導入數據。如下圖郵箱已發送郵箱為空時：

當沒有創建訴求的，直接告之暫無數據。如數據是系統產生的，不是由用戶創建的，直接告之暫無數據，話術的表述則需與後台文案的整體風格保持一致。

後記

個人關於web表格設計的看法基本寫完了，在總結歸納中也發現了自己平常設計表格中的其他問題。大多表格設計在不同場景中需要隨機應變，沒有絕對的規範，只有相對的規範。我們要理解規範背後的原則，推導出適應其他場景的規範。

歡迎留言糾正，感謝閱讀。

我是一隻小龍，請鞭撻我吧！

參考資料：

1.web表格設計攻略http://www.woshipm.com/ucd/714641.html

2.B端后台數據的表格的易讀性和易操作性體驗http://www.woshipm.com/pd/1657136.html

3.螞蟻設計模式https://ant.design/docs/spec/alignment-cn

4.設計表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533

5.數據表的用戶界面最佳設計http://www.woshipm.com/pd/661699.html

6.樹形控件在生產力工具中的設計https://zhuanlan.zhihu.com/p/260068653

7.element組件庫： https://element.eleme.cn/#/zh-CN/component/table