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

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

一、特點優勢

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

1. 表格特點

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

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

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

2. 表格優勢

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

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

二、構成模塊

表格雖然細節設計上千差萬别，但在表現形式和閱讀順序上卻是基本一緻的。

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

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

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

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

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

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

三、表格類型

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

1. 子表格

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

2. 交叉表格

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

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

3. 樹形表格

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

4. 圖表表格

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

四、設計拆解

1. 表頭設計

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

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

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

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

2. 精簡表頭

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

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

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

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

3. 搜索樣式

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

4. 模糊搜索

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

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

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

5. 精準搜索

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

優點：查找内容精準高效，提升用戶的效率。

優點：對于查找的内容有目的，有目标，隻能單次查找。

6. 篩選數據

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

7. 下拉篩選

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

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

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

8. 平鋪篩選

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

優點：操作效率高，所有篩選内容直觀，便利快捷。

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

9. 單元格設計

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

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

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

10. 定列寬

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

11. 列間距

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

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

我們在設計的初期，就要做好設計規範，表格的邊距要統一制定。中間内容間距也要确定最小距離，在根據内容的展示進行自适應，如果内容表格寬度大于頁面寬度，首尾列固定，邊距固定，中間内容有固定最小值，根據内容進行自适應。

12. 列數控制

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

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

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

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

五、視覺标準

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

1. 分割線和斑馬紋

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

2. 裝飾或顔色

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

3. 行的對齊方式

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

4. 不留白

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

5. 低頻操作

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

6. 分頁器

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

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

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

六、總結

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

本文由 @斜杠南青年 原創發布于人人都是産品經理，未經許可，禁止轉載。

圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部