最近做了幾個后臺管理系統，表格在其中占據著不可或缺的地位。在此對于表格的設計做一個整理，如有考慮不周之處，歡迎留言，共同學習進步~

表格：一種可視化的數據交流模式，也是組織整理數據的一種手段，主要承載數據的展示、對比和歸納。

一、設計原則

易讀：表格應該是一目了然的，層級分明的。讓用戶的注意力集中在內容而不是表格的形式。

高效：表格頁應該是可交互的，幫助用戶更快來分類獲取信息以他們習慣的方式。

?二、表格結構

下圖展示的為最常見的表格，表格不僅可以包含數據還可以包含可視化元素，比如：圖表。對于表格，最基本的元素就是表體，也就是數據部分。

1. 容器：容器包含表格的所有內容。
2. 搜索/篩選區域：方便用戶快速查詢定位數據，一般位于表格上方。
3. 功能性按鈕：一般位于表格上方，有時也可以位于表格下方。
4. 表頭：起到對于數據內容的解釋以及可以附加篩選排序等。
5. 表體：包含行和列數據以及一些操作（可選）。
6. 底欄：底欄包含數據量以及總頁數和當前頁數以及每頁數據量和分頁，底欄數據也可以放置在表格頂部。

2.1 搜索/篩選區域

在表格設計中，一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位。搜索更多的是對單一或者包含某個字段的的數據來進行定位，有更高的精確度；

不同于搜索，篩選更多的是查詢一類數據，可以和一些功能相配合使用（導出）。

根據搜索和篩選的屬性，我們可以根據實際情況設計搜索和篩選的表現形式。

根據MECE，我們可以歸納出以下的場景：

1. 常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選性，篩選少可以展示出來；
2. 搜索和篩選都常用，可以將搜索和篩選都展示出來；
3. 常用篩選少用搜索，篩選和搜索同時展示；
4. 篩選和搜索都不常用，展示搜索隱藏篩選。

搜索

• 構成：標簽，輸入框，搜索按鈕（可選）
• 輸入：通過輸入特定的字段，來查詢單一的數據，在表格中有導航的作用。
• 查詢范圍：可以查詢單個數據類型，也可以查詢多個數據類型
• 搜索結果：根據輸入的搜索字段，可能存在空狀態。對于搜索結果的排序，可以根據數據的匹配度或者生成時間等排序。

根據匹配方式，可以分為：精確搜索和模糊搜索。在大多數情況下，模糊搜索有利于減輕用戶記憶負擔，但是在同一個輸入框搜索具有相似度很高的內容（比如手機號和ID都包含數字）時，建議對于該內容使用精確搜索或者分開兩個輸入框搜索。

根據搜索時效性，又可將搜索分為，實時搜索和點擊搜索。實時搜索，指的時在用戶輸入數據時便進行數據的搜索，具有搜索快速，搜索結果實時顯示的好處，但是僅適用于小數據搜索；點擊搜索，指的是在輸入數據后，需要點擊按鈕才能進行搜索，該搜索方式適用性強。

根據表現形式，可以將搜索分為,簡單搜索和復雜搜索。簡單搜索，指的是單一搜索框的形式，視用戶對于搜索的需求的強烈度，可以放置輸入框在篩選框前或后（注意保持所有頁面統一），簡單搜索還可以加上標簽篩選，來搜索不同的數據類型（圖書搜索—作者，書名，編號等）；復雜搜索，指的是多個搜索框的形式，一般只展示一個最常用的輸入框，其余的輸入框隱藏。

篩選

• 構成：菜單項，單選/復選框（可選），搜索框（可選），篩選按鈕（可選）
• 篩選：通過選擇特定的選項，來對現有的數據進行篩選，篩選項應該遵循MECE原則。
• 數據數量：對于數據篩選沒有交叉的情況，同時篩選項少于5項時，我們可以采用展開的形式（單選框，標簽的形式，頂部tab等形式）來進行篩選；對于超過5項少于25項的情況，我們可以采用下拉菜單的形式；對于超過25項的內容，我們可以在下拉菜單加上模糊搜索，采用實時搜索。
• 數據呈現：一般包含全部或者不限這一項，對于兩者的區別就如同all和any的區別。對于數據的呈現，我們可以根據用戶的行為設置默認值。

根據觸發方式，可分為：觸發篩選，實時篩選。一般情況下，篩選條件存在交叉時使用觸發篩選，不存在交叉時使實時篩選。也可以根據篩選條件的數量選擇合適的觸發方式，比如條件少時用實時篩選，條件多時用觸發篩選。

根據篩選的位置，可以分為：標題篩選，表頭篩選。標題篩選指的是，在表格的標題處可以進行相關項的篩選，優點時可以節省空間，缺點是一次只能篩選一項；表頭篩選，指的時篩選框單獨呈現在表頭，形式可以是組合篩選（多個篩選條件）和單個篩選，同時視篩選的對用戶的重要程度可以選擇是展開還是隱藏顯示。

交互形式：點擊菜單呈現下拉框，鼠標移到相應的項會有視覺區分，點擊該項選中該項，外部顯示選中的項。日期篩選建議使用一次點擊選擇日期范圍，而不是需要點擊兩次來分別選擇，同時禁用無數據的日期。

2.2 功能性按鈕

常見的功能性按鈕有：導出，創建，設置表格結構（定制表單，設置行高…）等（功能性按鈕在這里指的是對于表格數據進行增刪改查等 ）。

根據人的閱讀習慣和人機工程，一般重要的按鈕(破壞性按鈕除外)放在左邊，次要的放在右邊，常用的按鈕放在左邊，不常用的按鈕放在右邊。

所以我們可以根據按鈕的重要程度和使用頻率來設計按鈕的放置位置。

導出

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態。

交互：在未選中數據時（有復選框的形式），按鈕為禁用狀態，若設計為啟用狀態，可以在點擊是出現toast提示；在選中數據時，點擊導出數據。

導出數據：導出的數據可以是部分數據也可以是全部數據，視實際情況而言。對于導出文件的名稱一般的處理為：當前頁面的名稱+當前日期（時間視情況而定）。不導出表單的相關操作，只導出數據。

創建數據

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態。

交互：一般點擊創建按鈕，會出現包含創建項目數據的彈窗。彈窗一般包含：標題，創建項目表單，取消/創建按鈕（創建按鈕一般在必填數據未填寫時呈現禁用狀態）。

彈窗表單設計注意點：1.選擇合適的輸入方式 ?2.顯示必要的數據項以及默認的數據（默認的序號等） 3.能創建數據，一般就能刪除數據

自定義表單項

使用場景：由于一份數據報表，往往需要滿足各種不同的角色在不同情況下的需求，因而在數據內容上，一般采取寧多勿少的原則，即系統提供盡可能詳細的數據給用 戶，由此就造成了表格數據項過多，難以在一個屏幕內完整展示，導致需要橫向拉伸，極大的降低了表格的可讀性。

表現形式：一般有兩種形式，一種是將所有的數據項都展示在表格的上方（可以收起/展開）；另一種是點擊按鈕出現彈窗進行選擇配置。

設計注意點：一般默認顯示最重要，最常見的幾個數據項，用戶可以根據自己的需求自定義數據項。

設置行高

使用場景：由于用戶閱讀表單的設備的多樣性，一個統一的行高會導致在不同尺寸設備上一屏顯示的數據的差異化，影響閱讀的效率。

設計注意點：設置行高為興奮需求，可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設計設置行高的形式，可以放置在設置按鈕里，也可以在外部按鈕較少的情況下展示出來。

2.3 表頭

作用：解釋當前列數據。所以在數據有明顯的差異以及能自我表意的時候，甚至可以去掉表頭（郵箱），畢竟表頭也占據一定的空間。

設計注意點：

1. 表頭標題盡量簡約
2. 表頭的UI表現區別于正文
3. 表頭標題與數據對齊，完整顯示標題

根據表頭的構成，可以分為三類：

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

對于多功能表頭，常見的功能包含：全選復選框，篩選，搜索，排序。

• 全選復選框：對于全選，有兩種情況，一種是全選當前頁面的所有數據項，另一種是全選所有數據項。所以為了適應不同的場景需求，復選框可以進一步篩選是全選當前頁面所有數據還是所有數據，也可以篩選別的類型的數據（已讀、未讀、已標記、未標記等）。
• 篩選：表頭篩選和單獨篩選相比，只能篩選一列數據，使用實時篩選，但是具有節省空間的作用。篩選不僅可以篩選單選或復選，還可以篩選日期。
• 搜索：我們還可以對于一列的數據在表頭進行搜索，來節省空間。
• 排序：設置查看數據優先級順序，快速發掘最關注的信?？梢允褂蒙舷掳粹o進行排序（只有兩種排序），還可以使用下拉菜單進行排序（適用于多種排序）。同時我們可以根據用戶的認識來設計排序，比如對于銷量，我們可以只顯示從高到低的排序(用戶并不會對于低銷量的商品感興趣)。對于排序的方式，有按A-Z首字母升序/降序，也有按數值升序/降序。

對于表頭的交互，可以將表頭分為固定表頭和隨數據一起滾動的表頭。固定表頭，一般標題的數據屬性相似或者數據很多或者需要橫向滾動表格時，固定表頭便于分辨記憶。對于滾動表頭，建議若數據之間差異大可以直接去掉表頭。

2.4 表體

表體的構成：數據，分割線，功能操作（可選）。

表體的布局：

• 垂直布局—弱化了行，強化了列，用于行與行之間的數據對比，一般用于數據統計；
• 水平布局—強化了行，弱化了列，符合閱讀從左往右的順序，強調信息的連貫性，多用于多數據的情況，使用較為廣泛；
• 矩形布局—每個數據被分割，適用于數據過多，沒有足夠的空間來區分數據的情況。

數據：

對于數據，根據表現形式可以分為行數據和列數據。行和列是包含數據的容器。

行：

一行數據一般都是同一主體的不同屬性（比如：同一用戶的相關信息：ID、姓名、身份證、性別、年齡等。當然行數據也可以是對于列數據的統計。

交互：鼠標移到一行數據一般有視覺區分（顏色或者是高度-陰影）。已點擊閱讀的項有視覺區分（顏色弱化或者有標記）。

UI表現：為了加強行數據的聯系，我們可以使用斑馬線（顏色差距不宜太大）或者是去除豎分割線的形式，來加強視覺引導，提高閱讀效率。

行高：行高通過數據的密度和一屏顯示的行數，來影響用戶提取數據的效率?？紤]表格的行高時，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設定為字號的1.2-1.8倍，文字與分割線間距離可以設定為字號的1-1.5倍。

行高因為用戶習慣和用戶設備的不同，無法滿足所有用戶的需求，所以對于行高我們可以讓用戶去選擇合適的行高。

列：

一列數據指的是同一屬性的數據。根據7±2原理，建議最多展示9條列數據，同時少量的列數據也方便用戶瀏覽。建議將重要的列數據居左放置，表格只顯示重要的數據，對于次要的數據可以放入詳情頁。

UI表現：為了加強縱向數據的對比，可以使用兩種方式，1.縱向斑馬線，一般用于列與列之間的數據對比，用處有限；2.有時會使用不同粗細的縱向分割線對信息進行區隔，增加同類信息對比性。

列寬：

1. 數據長度固定時，一般顯示完整數據，具有固定的列寬，比如手機號可以設置150px；
2. 數據長度不固定時，首先我們應該了解用戶的輸入內容的情況，比如用戶個性簽名，我們設置了200字符，但是經過數據分析，發現大多用戶的簽名長度少于20，那我們可以設置列寬為20，從而保證大多數數據的完整；
3. 較少情況下，我們設置的數據不能完整的顯示數據，但是數據對于用戶有比較的重要。那我們可以讓用戶手動拖拽調整列寬（不影響別的列寬，可能會出現橫向滑動的情況）。

交互形式：對于一些列數據我們可以加上超鏈接，比如ID，用戶稱號等。注意區分別的數據，比如可以使用顏色。

顯示：

（1）字體的選擇

表格數據一般包含文本和數字。字體的選擇，保證字體的可讀性。

對于文本，有以下幾點建議：

1. 避免全大寫字體，因為它很難讀，需要轉化思維；
2. 避免使用襯線字體，因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考；
3. 避免使用斜體，易引起視線疲勞，影響閱讀；
4. 避免使用多種字體和選擇可讀性高的字體，保持風格統一。

對于數字，建議使用表格數字而非舊式字體和比例字。數字的單位，一般在表頭中顯示。

為了便于用戶信息的提取，我們可以設計數值的格式。表格數字不是越精確越好，需要多少有效數字就顯示多少，不必太多。所以我們可以設置數字的格式 :

1. 顯示數值，但是設置小數點位數，千分位和數值單位等；
2. 顯示百分比，設置小數點位數。

對于數值，我們應該減少用戶的計算，通過對比分析數據，在原有的數值上給出差值，升降變化，總計值平均值等分析性數據結果，方便用戶的查閱。

（2）對齊很重要

對齊可以遵循以下3條原則：

1. 數字右對齊；
2. 文字信息左對齊；
3. 表頭與數據對齊。

數字是從右向左讀的：這是因為，我們對比數字時，首先看個位，然后十位、百位。多數人也是這么學會算數的——從右邊開始，向左移動，在移動中傳遞數字。

文字信息是從左向右讀：這是符合人們的閱讀習慣的，一般人們的閱讀方式是從左往右，從上往下。當然不同的區域有不同的閱讀習慣，比如阿拉伯就是從右往左的閱讀習慣。

通常，表頭應當符合數據的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環境。

（3）數據顯示

在一個單元格數據顯示不完整時，我們可以截斷數據以…暗示數據的不完整。

對于截斷數據的展示，我們可以使用氣泡彈窗的形式（查看靈活，操作成本低，但是影響查看其他內容）或者是下拉查看（適合查看較多的內容，不會影響查看其他內容，操作成本高）。

空單元，會給用戶帶來疑惑，到底是無數據還是數值為0？

對于數值為0的數據，我們應顯示0，數值格式的處理和其他數值相同（小數點等），方便查看；對于無數據，我們可以使用“-”來顯示。

（4）分割線

如果對表格中的數據使用了合適的對齊方式，分隔線就會很多余。使用分隔線的首要好處是可以縮小元素間的空間，但仍可以區分各元素。即便要使用分隔線，也應該把顏色盡量減淡，不能妨礙快速瀏覽所以建議采用相同顏色的具有一定透明度的分割線，減少視覺噪音。

水平分隔線的用處是最大的，因為它可顯著減輕長表格占用的垂直方向的視覺重心，加快大量數據的對比工作，以及隨著時間看清趨勢。

（5）功能性操作

表體的功能操作根據針對的對象，可以分為：

1. 單個數據—可以針對單個數據進行編輯，形式可以是框內編輯（不適合長內容），可以浮層編輯，也可以彈窗編輯（會覆蓋信息）；
2. 整行數據—一般操作放置在表格的最后一列，建議超過兩個的操作，次要操作彈窗顯示（節省水平空間，防止誤操作），在鼠標hover狀態時顯示彈窗；
3. 在針對數據操作過多時，我們可以在選中該條數據時顯示針對數據的操作（Gmail）。

（6）操作按鈕的顯示

1. 圖標（和文字相比占據更少的空間，但是要注意其表意性）；
2. 圖標+標簽（占據更多的水平空間，但是可視化程度更高，適用于單個操作的情況）；
3. 文本鏈接（表意性強，但是可能存在文本過長的問題，建議在只有少于3個按鈕的時候使用，或者在下拉菜單中使用）。

對于單條數據的編輯修改，如果數據內容固定且只有幾項，則可以使用下拉菜單的形式；若數據內容不固定，但是數據長度短，可以在單元格內修改；若數據長度不固定，這可以使用彈窗的形式來進行編輯。

2.5 底欄

底欄同樣可以放置在表頭的上方。

底欄一般包含以下幾個部分：

1. 當前頁面數據的條數設置（可固定配置也可用戶手動設置）以及總的數據條數；
2. 總頁數以及當前處于的頁數顯示；
3. 前后翻頁功能（前一頁,后一頁，首頁，尾頁）；
4. 跳轉功能（對于很多頁數的表格尤其適用）。

對于分頁器可以分為以下幾類：

1. 復雜分頁器：可以設置每頁的顯示條數，適合大數據量。用戶可以根據自己的顯示屏調整顯示條數以提???高數據處理效率。對于條數的設置，可以選擇已設置的條數，也可以手動輸入設置條數。
2. 簡單的分頁器：不可以設置每頁條數,甚至沒有跳轉功能

分頁器的功能就是加載數據，該功能還有一種方式可以取代分頁器，那就是加載更多。

但是加載更多只適合小數據量，它具有節省空間，同時能給用戶一種沉浸式體驗。但是這種模式，對于數據量難以把握，操作不靈活。

本文由 @Day_1 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels ，基于 CC0 協議