在後臺產品中，數據報表的重要性毋庸置疑，不過優秀的數據表單並不多見，所以本文就從基礎功能、體驗升級兩方面來聊聊如何設計一個優秀的數據報表。

數據報表一直是後臺產品的重要組件，相較於複雜的業務處理邏輯來講算是非常簡單了，簡單到我們都不樂意花太多的時間去審視它。

現實情況卻是：PRD整好交給開發後，開發又拋來各種問題，上線後的功能可以滿足業務需求卻總又有那麼點不如意，然而出於各種原因也就將就著用了，所以設計優秀的數據報表並不多見。那麼今天我們就從基礎功能、體驗升級兩方面來聊聊如何設計一個讓研發省心、老闆稱心的數據報表，走起！

第一部分：基礎功能

這部分主要將數據報表PRD需要包含的基本內容，入門產品經理可將其作為CheckList參考。

數據報表通常分為查詢條件、數據、操作三部分，故而我們的PRD至少要包含這三部分的說明，我偏向以表格形式作為需求說明的展示形式，一目瞭然，如下：

1. 查詢條件

1）字段名

非特殊需要，所有字段在整個系統中都應保持一致的叫法，這是基本原則。比如一個手機號不要一會兒叫“聯繫手機”一會兒叫”聯繫方式”。

2）必填

數據量非常大時，考慮到查詢性能，可能要限制某個查詢條件必填，如年份、批次等。

3）格式

常見展示形式如下：

• 文本框
• 數值
• 日期：通常使用日期控件，需說明輸入形式（如YYYY-MM-DD）
• 時間：通常使用時間控件，需說明輸入形式（如HH:MM:SS）
• 下拉框：是否可多選
• 單選框
• 複選框

4）默認值

常見的情況如默認查詢最新數據、默認僅查詢有效數據，此時就需要對相關查詢字段設置默認值。

5）輸入範圍限制

日期、時間格式的查詢字段通常會限制輸入的最大值、最小值，這個與系統保留的最早歷史數據、最新數據實時性有關。涉及到時間段的查詢條件，可能還需要限制可支持的最長時間段。

6）其他說明

用於補充其他說明，如部分下拉框需限制最多可選擇的輸入項、支持批量粘貼輸入項等。

除了以上說明外，還可根據業務需要決定是否要支持全表模糊搜索（Ctrl+F的效果）作為對常規的字段查詢條件的補充，別小瞧這個小小的功能，有時它會帶來意想不到的便利。處於安全考慮，需明確說明是否需要做數據查詢權限控制，即每個用戶進來後看到的數據範圍甚至數據字段都是不一樣的，一般是其所需的最少數據集。

2. 數據

1）單位

數值類的通常要說明該字段統計時用的單位，如千、萬、%等。

2）格式

• 文本：存在較長文本情況下，需說明做多可容納的字符數，超過部分可用…代替
• 數值：保留幾位小數，多餘的小數四捨五入還是直接捨棄等。另數值空和數值為0在很多情況下是完全不同的意義，不顧實際業務直接把空值按0顯示是業餘選手的表現。
• 日期：明確顯示格式，請在全文使用
• 時間：明確顯示格式

3）支持篩選

即這個列是否支持篩選，效果就類似於excel的自動篩選功能，常用的篩選已經包含在查詢條件中了，此處主要考慮一些會用到但不常用的查詢字段。

4）支持排序

這個列是否要支持排序，數值類的一般需要支持排序，方便尋找最大值最小值，快速定位數據異常等。

記得根據業務需要為你的數據指定一個默認排序規則！

3. 操作

對報表來說，基礎操作包括導出、查看、編輯、刪除（前文說的查詢也是基礎操作的一種），這裡我只說導出和刪除：

• 導出：報表字段比較多時，建議支持自定義導出，即用戶可選擇所需字段進行導出，當然系統會制定常用字段作為默認導出字段，滿足大部分人的需求。
• 刪除：需要明確是否支持批量操作、物理刪除還是邏輯刪除，刪除後是否可讓用戶自己恢復。

第二部分：體驗升級

這部分我們來聊聊從哪些方面去優化數據報表體驗，我總結了以下5類優化Tips：

1. 讓表格井井有條

1）對齊

數值類字段通常會居右對齊以方便對比，其他字段居左對齊。

2）一致的格式

日期、時間、數值請使用一致的格式，”2020-1-1″ 與”2020-10-12″ 放在同一列顯然不如”2020-01-01″ 與”2020-10-12″放在同一列更易閱讀和對比。

3）統一高度

所有的數據行（不含表頭）都應該設置為統一高度。

2. 聚焦數據

1）斑馬紋

斑馬紋可提高橫向瀏覽速度，但請保證單元格底色與內容顏色有一定對比度，提升可讀性。

2）選中高亮

與斑馬紋一樣，選中高亮（或者突出）同樣可提高橫向瀏覽速度，讓用戶聚焦當前數據，如下為Element的一個表格組件截圖：

3）消除不必要的邊框

避免使用深色的、粗線條的邊框，一眼看過去全是條條框框，喧賓奪主。

4）隱藏不常用的行操作

你不需要把所有行操作按鈕都一字排開，這樣會增加思考時間，最多展示3個常用的行操作，其他的統統隱藏。你甚至可以隱藏全部行操作，只有選中記錄時才展示可用操作。

3. 使用簡單而明確的提示語

批量操作時提示操作的記錄數

用戶有時會使用全選勾選框選中一批數據後執行刪除，本以為是刪除本頁全部數據，結果是刪除查詢結果的全部數據，尷尬不尷尬?比避免此類問題，請將原來的刪除詢問”您確認刪除嗎？”略做修改變成”您確定刪除選中的xx條記錄嗎？”

4. 讓表格更直觀

1）核心數據使用柱狀圖

百分比形式的核心數據尤其適合柱狀圖形式，讓二維表格也能產生圖表般的直觀感，如下為AntDesign的一個表格組件截圖：

2）不同顏色圖標區分狀態

5個以內的狀態，可考慮使用不同的圖標或顏色以示區別，但過多的圖標或顏色會讓用戶迷失在五彩斑斕的數據中找不到重點。

5. 其他

1）凍結

凍結通常作用於表頭、首列（通常是標記整條記錄的關鍵字段，如姓名、企業名稱等）、操作列，雖然頁面會上下滾動、左右滾動，但請保證用戶可快速分辨當前看的是哪條記錄、什麼字段，並找到操作按鈕。

2）善用摺疊行

數據不多也不少時，可設計摺疊行，用戶不必左右拖動也不必進入詳情頁即可看到全部數據，減少了點擊次數，常見的側推抽屜也可以達到類似的效果。如下為Element的一個表格組件截圖：

寫在最後的話：對於數據報表而言，最重要的莫過於展示業務最需要的字段並制定合理的統計口徑，你的數據報表應該是可信賴的，能反映客觀事實的，能產生價值的。

參考資料：AntDesign原型組件、Element原型組件

本文由 @辣椒圈 原創發佈於人人都是產品經理。未經許可，禁止轉載。

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