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

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

一、特點優(yōu)勢

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

1. 表格特點

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

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

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

2. 表格優(yōu)勢

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

1. 可承載大量同類信息及數(shù)據(jù)，結(jié)構(gòu)簡單，分類清晰，便于用戶瀏覽和批量操作。
2. 橫向關(guān)聯(lián)縱向?qū)Ρ刃畔⒌奶幚矸绞?，幫助用戶快速了解并簡單分析信息的差異性，失?lián)性等。
3. 表格中各列內(nèi)容相對獨立，可根據(jù)業(yè)務(wù)需求或是用戶關(guān)注點的不同進行自定義的調(diào)整。
4. 對于大量數(shù)據(jù)信息，在保留現(xiàn)有視覺結(jié)構(gòu)的條件下，可直接使用其他通用功能組件，進行搜索，篩選，編輯，批量操作等其他自定義選項操作。

二、構(gòu)成模塊

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

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

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

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

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

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

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

三、表格類型

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

1. 子表格

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

2. 交叉表格

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

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

3. 樹形表格

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

4. 圖表表格

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

四、設(shè)計拆解

1. 表頭設(shè)計

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

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

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

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

2. 精簡表頭

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

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

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

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

3. 搜索樣式

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

4. 模糊搜索

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

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

缺點：關(guān)鍵詞的重復(fù)度比較高，搜索出來的內(nèi)容量很大，會把關(guān)鍵詞相關(guān)的所有內(nèi)容都會展示出來。

5. 精準搜索

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

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

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

6. 篩選數(shù)據(jù)

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

7. 下拉篩選

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

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

缺點：不能查看所有的篩選內(nèi)容，有相應(yīng)的使用成本。

8. 平鋪篩選

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

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

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

9. 單元格設(shè)計

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

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

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

10. 定列寬

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

11. 列間距

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

舉例：邊距為a1，中間內(nèi)容為a2（定義為最小值，根據(jù)寬度進行自適應(yīng)）。

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

12. 列數(shù)控制

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

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

第二：用戶自定義列，選擇相對應(yīng)的展示內(nèi)容。

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

五、視覺標準

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

1. 分割線和斑馬紋

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

2. 裝飾或顏色

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

3. 行的對齊方式

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

4. 不留白

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

5. 低頻操作

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

6. 分頁器

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

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

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

六、總結(jié)

本文提供了表格的基礎(chǔ)指南，還有很多的內(nèi)容需要我們?nèi)ネ诰?，根?jù)自身產(chǎn)品內(nèi)容特性和用戶的需求進行調(diào)整，但是設(shè)計原則都是通用的，從用戶的角度出發(fā)設(shè)計表格，提升用戶的使用體驗，提升用戶的使用效率。

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

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