B端指南｜如何讓表格呈現的效果更好？
編輯導語：在日常工作中，總是少不了做表格，是不可缺少的一部分。那你對錶格瞭解多少呢？如何讓表格呈現得效果更好呢？本文作者就從表格的五大角度進行了詳細分析，感興趣的同學一起來看看吧。
這是在對錶格進行深度瞭解的時候，對文章進行收集整理的內容，大家能夠一起學習。
一、特點優勢
表格是展示資料最為清晰，高效的的形式之一，是一種常見的資訊組織整理手段，常用於資訊收集（展示）、資料分析、歸納整理等活動中。它也是設計每天接觸最多的組建，常和排序，搜尋，篩選，分頁等其他介面元素，一起協同，通常表格的組成元素以及相關元素會有多個部分，根據不同的使用者目標需求將其分為三部分：
1。 表格特點
資料檢視：
這是表格的核心價值，使用者進行閱讀，對比和分析資料，是組織大量資訊通用性最高的一種表達方式，既可以陳列資訊，又可以表達資訊之間的關係。
資料過濾：
表格的搜尋和篩選，便於使用者快速檢視其中的差異與變化和關聯，將資料過濾，使用者快速查詢定位資料，對資料的展示更加的清晰，過濾出使用者想要檢視的資料。
資料操作：
對資訊進行搜尋，篩選，增刪改查，新增，刪除，編輯等篩選條件，對大批次的資料進行快速的操作。
2。 表格優勢
B端中表格的優勢有很多承載資訊的載體，總結了一下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協議。
