編輯導語：在日常工作中，總是少不了做表格，是不可缺少的一部分。那你對表格了解多少呢？如何讓表格呈現(xiàn)得效果更好呢？本文作者就從表格的五大角度進行了詳細分析，感興趣的同學一起來看看吧。

這是在對表格進行深度了解的時候，對文章進行收集整理的內容，大家能夠一起學習。

一、特點優(yōu)勢

表格是展示數據最為清晰，高效的的形式之一，是一種常見的信息組織整理手段，常用于信息收集（展示）、數據分析、歸納整理等活動中。它也是設計每天接觸最多的組建，常和排序，搜索，篩選，分頁等其他界面元素，一起協(xié)同，通常表格的組成元素以及相關元素會有多個部分，根據不同的用戶目標需求將其分為三部分：

1. 表格特點

數據查看：這是表格的核心價值，用戶進行閱讀，對比和分析數據，是組織大量信息通用性最高的一種表達方式，既可以陳列信息，又可以表達信息之間的關系。

數據過濾：表格的搜索和篩選，便于用戶快速查看其中的差異與變化和關聯(lián)，將數據過濾，用戶快速查詢定位數據，對數據的展示更加的清晰，過濾出用戶想要查看的數據。

數據操作：對信息進行搜索，篩選，增刪改查，新增，刪除，編輯等篩選條件，對大批量的數據進行快速的操作。

2. 表格優(yōu)勢

B端中表格的優(yōu)勢有很多承載信息的載體，總結了一下4種讓我們一起看看吧。

1. 可承載大量同類信息及數據，結構簡單，分類清晰，便于用戶瀏覽和批量操作。
2. 橫向關聯(lián)縱向對比信息的處理方式，幫助用戶快速了解并簡單分析信息的差異性，失聯(lián)性等。
3. 表格中各列內容相對獨立，可根據業(yè)務需求或是用戶關注點的不同進行自定義的調整。
4. 對于大量數據信息，在保留現(xiàn)有視覺結構的條件下，可直接使用其他通用功能組件，進行搜索，篩選，編輯，批量操作等其他自定義選項操作。

二、構成模塊

表格雖然細節(jié)設計上千差萬別，但在表現(xiàn)形式和閱讀順序上卻是基本一致的。

常規(guī)的表格必然包含表頭欄、列表、翻頁器三個部分，根據需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。

標題欄：概括整個表格的內容信息，讓用戶一眼就知道該表格的用途是否符合自己心里的預期，在實際場景中，除了通過標題文字去的形式之外，你還可以為每一個表格去設計不同類型的圖標。

工具欄：主要承載表格當中的增刪改查等操作，也是用戶使用頻率較高的區(qū)域，在一個正常的表格中，新增，篩選，搜索，視圖，分類等類型的操作都會放置于此，能夠幫助用戶更高效的使用表格。

表頭欄：概括每列的主要信息，在用戶使用表格中，起到數據解釋作用，讓數據能與之進行匹配，使用戶能夠看懂數據，通常情況下，表頭在表格中是一直存在的，不會因為頁面滾動的原因讓表頭進行隱藏。

單元格：承載用戶的每一條數據，也是整個表格的核心，單元格的大小行高都會影響用戶使用表格的體驗，單元格的設計上也會有很多設計思路。

分頁欄：嚴格意義上講，分頁是不屬于表格當中，但當數據超過用戶所設定的閾值，就需要使用分頁分解數據，所以分頁和表格是經常聯(lián)系在一起的。

三、表格類型

除了基礎表格之外，還有其他的樣式集合，根據業(yè)務場景的不同，還分為交叉表格表頭分組，樹形表格圖標表格。加下來進行拆分。

1. 子表格

在一條數據表格中承載的內容出現(xiàn)多條進行嵌套時，就可以使用子表格進行創(chuàng)建，能夠更好的展示相關內容，解釋的更加的細致清晰。通過嵌套子表格的形式，將每條數據進行記錄，能夠更更好的了解到每條內容，何時使用子表格，有什么限制，我們在做項目的時候既要根據業(yè)務員進行具體分析。

2. 交叉表格

當一個表格里面有多條數據在同一個小范圍的緯度進行展示是，他就是交叉表格，從表象上看就是表頭有很多分組進行區(qū)分，因此它也叫做表頭分組。

他能夠通過拆分將數據進行切割，但是這樣數據的易讀性就是有很大的差距，比如在年度收支表格中，需要同時展示每一年份的收入，支出與利潤，使用交叉報表能夠讓用戶一眼就是看清數據，而基礎的表格卻不行，交叉表格也算是中國式表格中的一種，能夠滿足具體業(yè)務的需求。

3. 樹形表格

當表格中的數據為包含與被包含的結構時，可采取樹形表格。通過逐級大綱的形式來展現(xiàn)數據間的層級關系，讓整個信息結構變得一目了然，這一表格形式常出現(xiàn)在項目管理共具中。

4. 圖表表格

當一個表格里面有多種圖標數據進行展示時，他就是圖表表格。用戶點擊某一數據手，直接跳出數據的統(tǒng)計圖，方便用戶進行對比，同時這一功能也可以通過儀表盤這樣的功能去解決，也就是說國內常做的數據可視化。

四、設計拆解

1. 表頭設計

表格中分為表頭單元格和信息列表單元格，表頭信息其實是展示數據的概括名稱，表頭是允許排序，篩選，提示的，其他元素就很少在去添加了，數據的歸類名稱，名稱的字段就要讓用戶更加直觀的看懂和理解，要符合用戶的飯思維習慣，如果需要重點解釋的可在旁邊添加說明圖標進行解釋。

表頭的文本是整個表格中很重要的部分，所以在文本的字體上要跟表格文本的字重進行區(qū)分。

在確定了文本樣式之后，接下來重要的步驟就是確定列表信息的對齊方式，對齊方式對整個表格內容的視覺有很大的影響。

很多剛進入B端不久的設計師，都會有一個錯誤的認知，就是表格中不能使用居中模式，這是一些特殊的場景下是可以使用的，那么什么樣的場景可以使用呢，那就是下方屬性值內容長度一致，比如多選項，定寬標簽，縮略圖，進度條等。

2. 精簡表頭

表頭的命名有長有短，就像人的名字一樣，有點甚至會超出展示信息的長度，那么就會造成表格過長，信息展示不平衡，限制了信息的展示數量。難么使用體驗就很失敗，所以就需要對表頭進行精簡，精簡到少一個字不可的程度，要讓用戶清晰好理解。

確保在不影響用戶理解的情況下，把字段名稱精簡。

表頭的命名有長有短，就像人的名字一樣，有點甚至會超出展示信息的長度，那么就會造成表格過長，信息展示不平衡，限制了信息的展示數量。難么使用體驗就很失敗，所以就需要對表頭進行精簡，精簡到少一個字不可的程度，要讓用戶清晰好理解。

那么就有小伙伴就要問了，已經精簡到最少了，不能再少了，名稱還是很長，又要必須展示，才能有效的理解字段含義怎么辦呢，那就要設置專有名詞代替，并做解釋說明，用個小圖標引導用戶，懸浮展示表頭的所有信息。這樣用戶可以清晰理解字段含義，又可以在有限的頁面空間下獲取到更多的數信息。

3. 搜索樣式

表格承載的數據量很大，為了提高用戶的使用體驗，能夠快速的提升查找數據的數據效率，對表格的內容能夠快速的搜索，就會大大的提升用戶的效率。搜索有模糊搜索和精準搜索，所對應的場景不同，用戶使用的成本也不同。在不同的場景下來看下搜索的使用方法吧

4. 模糊搜索

模糊搜索是什么？指用戶在搜索意圖不明確或者是查詢內容不全的時候，將用戶查詢的關鍵詞進行模糊的匹配，從而查找出相關的內容，在眾多的數據中不能夠精準的查到用戶想要的內容西藥用戶在關鍵詞中進行篩選。所以在使用中要根據相關的場景進行使用。

優(yōu)點：減少精準搜索的帶來的記憶負擔，少量的關鍵詞都會被搜索出來。

缺點：關鍵詞的重復度比較高，搜索出來的內容量很大，會把關鍵詞相關的所有內容都會展示出來。

5. 精準搜索

精準搜索，是指用戶輸入相關的數據字段進行搜索，查詢要所需要的數據。根據場景的不同，查找相關的字段，編號，姓名等，也可以用標簽的來精準篩選來查找。

優(yōu)點：查找內容精準高效，提升用戶的效率。

優(yōu)點：對于查找的內容有目的，有目標，只能單次查找。

6. 篩選數據

大部分的表格都會有篩選項，針對內容較少的字段進行查找，可以快速的定位到想要查找到的數據。下拉篩選和平鋪篩選取消了用戶進行輸入的過程，提升了用戶的查找效率。

7. 下拉篩選

下拉篩選是大家見的最多的，不管是美觀度，還是頁面占比的都是比較推薦的，通過點擊選擇器下拉，來選擇需要篩選的內容。

優(yōu)點：空間利用率高，整體頁面更加的美觀。

缺點：不能查看所有的篩選內容，有相應的使用成本。

8. 平鋪篩選

平鋪篩選就是將所有的篩選項直接展示在頁面中，直接點擊選擇相關的篩選項即可，平鋪篩選適用于內容不多，占用極少的頁面空間，能夠快速的操作。

優(yōu)點：操作效率高，所有篩選內容直觀，便利快捷。

缺點：空間利用率低，不適用篩選項過多的內容。

9. 單元格設計

做設計的伙伴都知道，開發(fā)使用的是盒子模型，單元格高度=內容高度+上間距+下間距，所以餓哦們在設計的時候也要遵循這個規(guī)則，而不是按照文字的尺寸來計算間距，其中文字的行高建議設為字號的1.5倍，上下間距設為字號的1.3倍。那么我們了解了單元格的結構，和實現(xiàn)單元格的基本邏輯后，那么就會更好的把控我們進行設計。

單元格內的尺寸包含：單元格高度，文字字號，文字/段落行高，文字上下間距。

我們在保證視覺呼吸感，空間感，賦予各個元素合適的尺寸，那么一套好的參考方案給你參考。

10. 定列寬

什么意思呢就是定單元格的固定寬度，例如，我們單元格整個的寬度為1900px，第一列我們把寬度設置為300px，第二列我們設置為300px，第三列我們設置為200px，第四列我們設置為200px，五六七八列分別設為150px，那么我們這個列表就的寬度就等于300*2 + 200*2 + 150*4 = 1900px，在任何分辨率尺寸下你的這個列表都會保持這個寬度不變。

11. 列間距

在列表中合適的間距和填充，在視覺中至關重要，為了保證更好的易讀性，提高用戶的閱讀體驗，我們就需要對間距進行規(guī)范。

舉例：邊距為a1，中間內容為a2（定義為最小值，根據寬度進行自適應）。

我們在設計的初期，就要做好設計規(guī)范，表格的邊距要統(tǒng)一制定。中間內容間距也要確定最小距離，在根據內容的展示進行自適應，如果內容表格寬度大于頁面寬度，首尾列固定，邊距固定，中間內容有固定最小值，根據內容進行自適應。

12. 列數控制

列間距我們確定之后，如果列數過多，那么就展示不全，就會出現(xiàn)橫向滾動條，操作的瀏覽體驗就很差，屏效低。信息過多堆積就會造成視覺負擔。首先我們要先展示重要數據，次要的進行隱藏，，有兩種方式進行設計。

第一：可提供詳情按鈕，進行查看全部的內容。

第二：用戶自定義列，選擇相對應的展示內容。

如果根據業(yè)務的需求需要全部展示的情況下，那就需要滾動條，，根據業(yè)務需求來展示相關數列。

五、視覺標準

表格中承載的數據信息才是主體，在進行表格設計時，去除所有非必要的視覺元素，讓用戶將注意力集中在數據信息上，不是過多的裝飾，邊框，底色等。分割線的樣式盡量輕盈，無關的邊框不要搶視覺，數據才是主體，突出內容。

1. 分割線和斑馬紋

在很多產品設計中會發(fā)現(xiàn)想通過斑馬紋和分割線來區(qū)分信息的內容，本身是想很好的區(qū)分的，等帶設計好后就會發(fā)現(xiàn)其實用戶的視覺體驗并不是很好，造成視覺疲勞，反而會使得頁面更加的雜亂無章，那么想清晰的劃分信息內容，我們可以通過文字對齊，間距對齊來實現(xiàn)，有足夠的留白，使得頁面設計的更加的簡約和清晰。

2. 裝飾或顏色

對狀態(tài)的區(qū)分，僅用輕量的顏色區(qū)分即可，操作欄保持主色按鈕色。圖標，標簽，雖然能夠幫助組織數據，更直觀的傳達信息，但是物極必反，少即是多，要注意克制這些元素的使用，標簽能用線性就不用面性，做到輕盈，否則表格中最重要的就是標簽，過多的顏色細分會使表格變得更加混亂，影響用戶體驗。

3. 行的對齊方式

對于表格內容的對齊方式，居中和頂部對齊都是可以的，針對具體的使用方式推薦采用頂部對齊。當列表都是文字數據，不管你是居中還是頂部對齊上下的邊距其實是一樣的，但是當列表中出現(xiàn)了比較復雜的情況，就會出現(xiàn)參差不齊，都采用頂部對齊，瀏覽數據的時候更加的直觀閱讀效率更高。

4. 不留白

在列表中會有很多沒有數據來源的，那正對與沒有數據顯示的，用“—”代替，數據為0時，顯示“0”，如果沒顯示，會給用戶錯覺，時后臺的bug，還是什么問題，就會影響用戶的使用感受。

5. 低頻操作

表格中不管是信息的展示，還有很多的操作，最常見的就是增刪改查，當然還有其他操作，就會出現(xiàn)操作欄就會占據列表的半壁江山，那其他的列表數據區(qū)域就會壓縮，我們要知道列表的主要目的是展示信息，然后才是對信息進行增刪改查的操作，所以操作欄可以考慮隱藏，用戶點擊更多就可以選擇更多的操作內容。不管是精簡文字或是圖標，能夠讓用戶有很高的識別性就是可以操作的。

6. 分頁器

大多數表單每頁顯示行數可能超過 30 行，因此，將分頁器固定在表單底部會更加友好，方便用戶在頁面之間切換，無需過度地快速滾動。使用分頁可以減少加載時間，因為它限制了正在處理的信息量。

在表格中，數據量很大，如果同時將數據全部展示，就會出現(xiàn)瀏覽器響應太慢或者是內存溢出的情況，所以分頁器就很好的緩解了服務器的加載壓力，縮減單詞加載的數據量從而縮短了加載的時間，從而達到高效體驗。

分頁同時可以跳躍查看數據，更加的靈活，便利。還有一種情況出現(xiàn)就是如果數據不多，但是超過了一屏的顯示，相比于分頁器翻頁而言，向下滾屏會更加的便利。

六、總結

本文提供了表格的基礎指南，還有很多的內容需要我們去挖掘，根據自身產品內容特性和用戶的需求進行調整，但是設計原則都是通用的，從用戶的角度出發(fā)設計表格，提升用戶的使用體驗，提升用戶的使用效率。

本文由 @斜杠南青年 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。

圖來自 Unsplash，基于CC0協(xié)議。