導讀：表格通常是指按照行和列或者採用更復雜的結構排列的數據，在數據分析等領域被廣泛應用。對於B端設計師來説，將冰冷的表格成更直觀、更具有可讀性的展現形式是其非常重要的技能之一。本文將圍繞表格的設計展開三方面的分析，希望對你有幫助。
表格是按照行和列或者採用更復雜的結構排列的數據，表格廣泛應用於通信、研究和數據分析。其實表格並沒有一個確定的定義，它會因為不同的行業和談論環境而存在差異。
對於設計師而言，表格是一個最不陌生的組件，尤其是B端的設計師。當我們設計產品的時候，最初的需求往往就是由一堆各式各樣表格構成。設計師的非常重要的一項技能就是將冰冷的表格，為更直觀、更高可讀性、更美觀的展示形式，如圖表、圖形、指標卡等形式。
表格的構成：
表格被公認是展現結構化數據最為清晰、高效的形式。常和按鈕、搜索、篩選、分頁等其他元素一起協同，構成表格頁。
通常表格頁面包含三個部分，分別為：數據查看、數據操作、數據過濾。
一、數據查看
讓我們先來回顧一下表格的基本構成，最上面的為表頭，橫為行，縱為列，內容區每一組展示數據區域為單元格。
表格的設計，雖然看似簡單，但是作為用户最常用的組件之一，我們需要對視覺和交互的精準把握，才能保證用户在使用表格時更加高效。這裏我推薦表格的”四維自檢法“對我們設計的表格是否合理，做出一個標準的判斷。分別是：信息降噪、呼吸適中、高效易讀、詳情查看。
信息降噪：分別對錶格內容和視覺層面進行重要性梳理，剝離不重要的元素，使表格輕量化。
呼吸適中：保持內容和元素之間合適的間距，使表格頁擁有一個好的呼吸感，將給用户營造一個舒適的操作環境。
高效易讀：通過對需求內容的解讀，對內容形式加以分類辨別，做出可讀性最強的樣式。
詳情查看：b端往往伴隨着表格數據類目龐大的問題，通常會採用另一種形式去展示全部信息。
1.1 信息降噪
1.1.1 精簡表格內容
當表格的字段非常重要時，一定要將字段全部展示出來讓用户更清晰的瞭解數據。如果你的用户只需要瞭解部分字段，那麼全部展示是沒有必要的，只需在展示最重要的字段即可。
1.1.2 自定義字段展示
不同用户想看的的信息側重不同，有時候我們無法準確判斷用户看重哪些字段，還可以讓用户自定義展示字段。
1.1.3 精簡字段名稱
當我們去設計表格的時候，通常會發現表格需要承載的信息量是非常大的，有時候為了表現出字段的準確含義，在定義字段名稱時往往會非常的長。但是當這些字段同時出現在一個表格裏時，過長的字段名稱，又會顯得冗餘，讓本就不大的頁面空間更加雜亂。所以當我們設計表格的時候，我們可以分析字段名稱，對字段名稱做精簡，看看是不是少一個字用户就無法理解字段的含義。
1.1.4 添加字段説明
1.1.5 簡化表格樣式
早期表格的設計，出發點主要以擬物形式，以最接近現實表格的樣式去設計。但是隨着互聯網的普及度加深，極簡的表格設計，使界面更加輕盈，讓用户更加專注於數據內容。去除縱向列的分割線，僅以淺色的橫向分割線區分行，但是要注意分割的顏色不能過於淺而缺乏辨識度，部分人羣對顏色的辨識度會偏低，顯示器的硬件性能也會影響顏色的可辨識性。
1.1.6 減少不必要的顏分
表格設計中一定不要使用過多的顏做狀態或操作的區分，過多的顏色細分會使表格變得更加混亂，影響用户體驗。對狀態的區分，僅用輕量的顏分即可，操作欄保持主色按鈕色。
1.2 呼吸適中
1.2.1 如何定義單元格的高度
瞭解單元格的結構，以及實現單元格的基本邏輯，有助於我們更好的去把控我們的設計。單元格內的可控尺寸包含：單元格高度、文字、文字/段落行高、文字上下間距。我們基於視覺呼吸感，賦予各個元素合適的尺寸，我在這裏給出一套參考方案：文字 = N 文字行高 = 1.5N上下間距 = 1.2N單元格高度 = 內容高度 + 上間距 +下間距
1.2.2 如何定義列的間距
首先我們要了解列的兩種類型，第一種是定寬列，第二種是自適應列。
1.2.2.1 定寬列
顧名思義就是它的寬度是固定的，比如：第一列我們設置寬度為200px，第二列我們設置為300px，五六七列分別設為100px，那麼我們這個列表就的寬度就等於200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的這個列表都會保持這個寬度不變。
1.2.2.2 自適應列
就是列會隨着分辨率變化而產生寬度的變化，比如：列表有五列，我們定義列表的寬度為界面寬度的50%，假定界面寬度為1200px，那麼列表寬度就為600px，而每一列的寬度則為120px。此時我們將界面的寬度縮小到600px時，那麼列表的寬度就為300px，而每一列的寬度則為60px。
在實際設計案例中，我們往往會面臨由於每一列的內容不同，所需要的寬度也就不同，我們希望在列不多時可以保持寬度自適應，但是如果每一列都做成自適應列的話，內容多的列無法展示全內容，內容少的列空間又會很大。所以，固定列 + 自適應列的綜合運用，可以讓我們更好的實現我們想要的設計方案。
1.2.2.3 列的結構
我們一起來了解列的結構。每一列分為內容區和左右間距區，在固定列裏面內容區和左右間距區都是保持不變的。但是在自適應列卻不同，它的內容區是隨界面分辨率變化而變化的，左右間距區的寬度是保持不變的（在代碼裏間距區被叫做Padding）
1.2.2.4 固定列
1.3 呼吸適中
1.3.1 列的對齊方式
基於人的慣性瀏覽順序，設計每列合理的對齊方式，能夠輔助用户更高效的完成工作。
標題和內容：一般採用左對齊，更高效的瀏覽順序。
有長短不一的數字時（序號除外）右對齊，方便比較 。
操作項一般放在尾列：右對齊。
1.3.2 不留空白格
從心理學的角度講，人對未知事物會產出恐懼情緒。我們在設計表格的時候，要考慮到表格的各種展示情況，非特殊情況不出現單元格空白。沒有數量用“0”表示，沒有該項內容用“-”表示。
1.3.3 選擇合適的分頁器
1.3.4 收起低頻的操作項
1.3.5 行的排序
如果產品沒有特殊需求，那麼默認最近創建的在最上面。可以用帶有排序的表頭，讓用户自定義排序。
1.4 查看詳情
1.4.1 詳情入口
如果表格的內容項很多，我們通常會在表格上只展示部分重要數據，而其餘數據放在詳情頁面展示。
作為詳情頁面的入口，通常會有兩種設計方式：
將詳情按鈕放在操作項裏
1.4.2 詳情頁的展開形式
如果詳情內容不多，沒有新開頁面的必要，我們可以採用展開行、彈窗、抽屜的形式，但是要注意儘量減少過多的樣式，給用户增加疑惑感。如果詳情的內容很多，而且的需求，建議採用新開頁的形式。建議根據詳情頁信息量的多少，以此採用展開行、彈窗、抽屜、新開頁的形式。
二、數據過濾
2.1 搜索
2.1.1 模糊搜索
模糊搜索是指在用户搜索意圖不明確時，搜索引擎將用户的查詢與待檢索的內容進行模糊匹配，找出與查詢相關的內容。模糊搜索無法精確理解用户的查詢意圖，返回的結果中可能包括了一大批用户不想要的信息，所以在使用模糊搜索時一定要結合自己的實際場景，慎重使用。優點：只要有相關的內容都會被檢索出來，減少了精準搜索帶了的記憶負擔缺點：容易把相關的信息也帶出來，例如檢索手機號，把相關編碼也匹配出來
2.1.2 精確搜索
精確搜索是指用户在搜索時，針對某一數據字段搜索，來查找所需要的數據。根據業務場景不同，我們會查找某一字段，或者是用切換不同字段來查找。優點：搜索匹配精準度高缺點：每次只能對單一條件進行搜索
2.2 篩選
篩選器主要是針對內容較少的字段進行查找的一種方式， 通過篩選器的選擇可以快速定位所需的數據，取消用户輸入的過程，提升查找效率。一般篩選有兩種形式，第一種是下拉篩選，第二種是平鋪式篩選。
2.2.1 下拉篩選
2.2.2 平鋪篩選
2.2.3 如何合理的使用篩選項
當數據內容需要的篩選類目過多時，如何合理的擺放，才能提高用户的使用效率。
信息排序：基於用户使用場景，以目標導向為依據，將高頻的篩選項排列到前面，低頻的篩選項置於後面
2.3 頁
頁又叫選項卡，在組件中我們通常叫Tabs，指的是分隔內容上有關聯但屬於不同類別的數據集合。
2.3.1 默認展示常用項
在使用頁時，有一點我們要特別注意，通常在B端設計中，我們會把頁的位置定位在最常用的一個選項。
2.3.2 增加數據條目
如果是訂單一類的分頁，我們還可以將數據條數，展示在右側，用來幫助用户快速瞭解到待辦數據量。
三、數據操作 3.1 分類
數據操作即對錶格的數據進行操作，首先我們對數據操作進行分類。
按控制範圍分：
單行操作
批量操作
全局操作
按操作屬性分：
新增數據
數據
刪除數據
業務處理3.2 如何合理的設計數據操作
第一步，先判斷控制範圍。
第二步，判斷擺放位置。
第三步，優化信息層級。
以上是操作項和篩選項較多的情況，那麼不多時，我們還是要合理利用空間，靈活設計。
與君共勉。
本文相關詞條概念解析：
表格
表格，又稱為表，即是一種可視化交流模式，又是一種組織整理數據的手段。人們在通訊交流、科學研究以及數據分析活動當中廣泛採用着形形色色的表格。各種表格常常會出現在印刷介質、手寫記錄、計算機軟件、建築裝飾、交通標誌等許許多多地方。隨着上下文的不同，用來確切描述表格的慣例和術語也會有所變化。此外，在種類、結構、靈活性、標註法、表達方法以及使用方面，不同的表格之間也炯然各異。在各種書籍和技術文章當中，表格通常放在帶有編號和標題的浮動區域內，以此區別於文章的正文部分。目前國內最常用的表格處理軟件有金山軟件公司出品的免費wps辦公軟件等可以方便的處理和分析日常數據。