編輯導讀：如何對海量的信息進行統計，最常見的方法就是進行表格整理。表格是職場人士最常用到的工具之一，是數據呈現的載體。本文從設計的角度，對如何進行表格設計展開分析，希望對你有幫助。

在我的上一篇文章中，詳細的對【表單設計】進行了總結，沉澱了表單設計中需要注意的體驗問題，今天按照同樣思路對【表格】 進行整理，這是我寫的第二篇文章，希望能對大家有幫助。

首先了解下表格的構成：頂欄、表格主體、底欄。

• 頂欄： 對表格信息進行概括，包含标題、篩選、搜索、操作按鈕等功能
• 表格主體：承載數據内容，由 行 和 列 構成
• 底欄：主要用于設置當頁條數及放置分頁器

關于表格的文章有很多，這邊我僅僅針對表格内部（即表格主體）與大家探讨需考慮哪些問題才能讓表格整體的閱讀體驗更好！

“優秀的設計需要用心、規劃、思考和理解人們的行為方式。”

的确，表格作為中後台海量數據呈現的載體，能夠【幫助用戶快速“閱讀數據”，獲取有效信息，提高決策效率】，但是實際業務中，很多設計師往往沒能夠結合産品和業務場景，找到一個合适的方案。所以我結合了自己在實際工作中遇到的表格設計問題，總結出以下幾點：

自我解釋的最終目的就是讓人看懂你，試想下用戶面對一整張表格中數據卻不知道表達什麼意思，這極容易給用戶帶來閱讀壓力最終放棄。因為很多B端産品的數據面向的用戶角色及場景都存在差異，所以在設計表格的時，我們首先需要對表格的表頭（列）進行合理的排列。

如：管理員與普通用戶所展示的數據内容就可能存在差異，所以需要根據閱讀重點來定義表格 列的展示順序（依據信息重要程度從左到右放置），且思考每列間的數據關系，來引導用戶。

案例：運用同學常見的拉新數據，其中的數據包含：日期、渠道、新增用戶數、活躍用戶數、用戶啟動次數、累計用戶數、版本信息等。

首先我們應思考運營同學關注點是什麼？作為運營方案的成果數據，他們肯定最想知道是否完成KPI「是否有效獲取到用戶？這些用戶活躍情況？哪幾天拉新效果最好等」。如果我們不考慮用運營同學特定的目的，随便排列，就容易導緻用戶第一時間很難獲取到自己想要的有效信息，極大影響閱讀效率。但如果抓住了這個主要目的，對指标進行排列，那麼我們表格的邏輯性便會更強，更清晰，也更加貼合業務述求。

表頭不僅僅有解釋當前數據内容，還可以集成：批量操作、排序篩選、解釋說明、分組、固定等查看操作，而這些功能均不是必要元素，需根據用戶查看數據的需要（如：用戶想快速找到拉新用戶數最多的某天等），适當的選配。

2.1 批量操作

在展示信息的同時，可以對表格主體内容中的數據進行删除、下載等操作，幫助用戶批量操作，提高效率。如：QQ郵箱我們批量删除郵件。

2.2 排序篩選

排序能讓用戶可以改變數據的排序，篩選則可以改變數據展示的類型，幫助用戶更好的觀察數據，發現數據規律。有兩種形式，一種是使用上下按鈕進行排序（正序與倒序），另一種是使用下拉菜單進行排序（适用于多種排序及篩選）。

2.3 解釋說明

• 表頭的字段名稱理應簡潔明了，但有時精簡後的名稱用戶還是看不懂，這時就需要跟一個釋義标識，鼠标懸停時出現該字段的詳細解釋，同時滿足不同用戶的需求。
• 有時候寬度不夠，文字會溢出，則需要懸停時出現完整的字段名稱。

2.4 分組

适用于多種所屬關系的信息展示（如：地址>街道>街區>樓号>門牌号）

2.5 固定

固定不光可以固定 行，也可以固定 列，特殊情況可以同時固定 行 和 列。一般數據較多時，幫助用戶在滾動過程中可以實時看到 行 和 列 對應的内容，提高閱讀效率。

3.1 對齊方式

合适的對齊方式，能夠讓用戶閱讀時更加舒服。由于表格中的數據類型比較多，需根據數據内容選用合适的對齊方式。

• 數字：右對齊，有小數點的數值需按照小數點對齊，且數值較大時需每隔三位數使用 ， 隔開，便于用戶閱讀與對比數值。
• 文字：左對齊，符合人們從左到右的閱讀習慣。
• 混合型文本：左對齊（混合型内容包含圖片，進度，狀态标簽，人物頭像，鍊接等）。
• 多選操作：居中對齊。

！！表頭的對齊方式與數據展示的對齊方式必須保持一緻，這樣能夠統一整個表格的表格對齊方式，便于提升閱讀與對比的效率。

數字：數值、金額、比率

文本對齊：純文本

文本：判斷性文本

文本：時間日期

混合型文本：狀态标簽、進度條

混合型文本：人員（單人、多人樣式）

混合型文本：操作

混合型文本：顯示/隐藏

混合型文本：評價

可操作：多選

3.2 數據多層級

在複雜的表格中，由于數據量較多，并且數據有層級關系，所以會對數據表格進行分層處理，優先展示第一層級的數據内容，将二三層級的數據隐藏起來，用戶點擊後再展示（如：教育類産品中題目設置 章節信息編輯 知識點編輯）。

3.3 數據修改

支持直接點擊内容，出現輸入框後進行編輯：

3.4 展示統計

方便用戶快速了解總數：

表格行列的分割方式有：

• 網格式：類似excel，這樣的方式很好的所有 行 和 列 進行分割，但是網格很容易給人造成視覺疲勞。
• 水平線：僅對 行 進行分割，通過間距與對齊的方式對 列 進行視覺上的分割，這樣的方式可以很好的對數據進行劃分，便于閱讀。
• 斑馬條紋：通過低飽和度的顔色交替的對 行 進行分割，同樣很好的對數據進行劃分，便于閱讀
• 留白，不分割：直接留白，通過間距來劃分，不建議使用這樣的方式，因為數據較多的時候，用戶十分容易将行對應錯，容易造成混亂。

表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎或誤以為出現了bug？明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。

表格無内容：

沒有創建訴求的，數據是系統産生的，不是由用戶創建的，直接告之暫無數據。

是用戶有創建訴求，數據是由用戶或系統産生的則直接示意用戶創建數據。

通過合理的組織架構和呈現方式，使原本枯燥的數據呈現出生命力，這是一件很神奇的事。而用心、規劃、思考和理解人們的行為方式，圍繞用戶目的與實際使用場景，提供易讀性高且規範表格更是需要設計師反複思考的事情！

最後感謝您看到最後，希望通過本篇文章的講述，能對大家有所啟示~~~~~~~

本文由 @小發哥 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

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