編輯導(dǎo)語：在我們的日常工作中，經(jīng)常會(huì)用到表格的形式進(jìn)行排列，表格可以比較直觀清楚的表達(dá)出差異和變化，在職場(chǎng)中也能給我們提供一些幫助；本文作者分享了關(guān)于統(tǒng)計(jì)表格的設(shè)計(jì)思路，我們一起來了解一下。

筆者主要負(fù)責(zé)某B端產(chǎn)品數(shù)據(jù)統(tǒng)計(jì)相關(guān)的產(chǎn)品設(shè)計(jì)，本次主要分享一些關(guān)于統(tǒng)計(jì)表格設(shè)計(jì)相關(guān)的經(jīng)驗(yàn)和思考，請(qǐng)大家多多指教。

一、統(tǒng)計(jì)表格

表格是一種組織整理數(shù)據(jù)的手段，通過展示行、列數(shù)據(jù)進(jìn)行可視化模式的交流。

一般情況下，當(dāng)有大量結(jié)構(gòu)化的數(shù)據(jù)需要展示時(shí)；當(dāng)需要對(duì)數(shù)據(jù)進(jìn)行排序、搜索、分頁(yè)、自定義操作等復(fù)雜行為時(shí)進(jìn)行使用。

用戶通過數(shù)據(jù)表格查詢業(yè)務(wù)數(shù)據(jù)、了解業(yè)務(wù)情況，進(jìn)而達(dá)到輔助決策的效果。

二、表格設(shè)計(jì)思路

當(dāng)進(jìn)行表格設(shè)計(jì)的時(shí)候，需要明確該表格要解決的問題是什么？

是否存在已有的數(shù)據(jù)表格可以解決該問題？能否通過優(yōu)化當(dāng)前表格來實(shí)現(xiàn)？

在這里就要引用《騰訊產(chǎn)品法》中作者所講：

“好的產(chǎn)品設(shè)計(jì)，就是運(yùn)用數(shù)量有限的基礎(chǔ)能力，去實(shí)現(xiàn)高滿意度的功能。”

如果不能，那么必須新增表格來解決用戶的需求，下面筆者關(guān)于此問題進(jìn)行分享。

通常來說表格主要包括兩個(gè)結(jié)構(gòu)：①列表、②操作（搜索、篩選、導(dǎo)出）。

1. 如何篩選列表字段？

首先，依據(jù)用戶的目的篩選數(shù)據(jù)指標(biāo)，將所有可能的字段全部列出，然后將核心的字段/最合適的字段展示出來。

然后，判斷數(shù)據(jù)源的狀態(tài)。 若數(shù)據(jù)來源的表單以“提交”為結(jié)點(diǎn)，并且提交之后字段無變化；那么筆者認(rèn)為該列表為靜態(tài)列表，即使后續(xù)有其他的操作，也是以“整個(gè)表單”為維度的狀態(tài)變化，這樣的表格是比較好設(shè)計(jì)的。

如果表單自提交后，還可以對(duì)其中的數(shù)據(jù)進(jìn)行修改，那么此列表為動(dòng)態(tài)，這樣的表格就比較復(fù)雜了；此時(shí)列表數(shù)據(jù)字段的展示尤為重要，需要考慮數(shù)據(jù)變化（新增、刪除、更改）對(duì)列表的影響。

例如：酒店P(guān)MS系統(tǒng)的住宿訂單，具體字段包含：入住人信息（姓名/手機(jī)號(hào)/性別/民族/身份證/住址)、渠道來源、入住時(shí)間、房間號(hào)、間夜數(shù)、房費(fèi)金額；收款、收押金、待收款；備注信息；其中，入住人信息可能不唯一（一個(gè)訂單可能有兩個(gè)入住人或者更多）、房間號(hào)也可能不唯一、收款、收押金、待收款等信息都會(huì)隨著操作進(jìn)行變化。

這時(shí)候需要考慮：

1）如果字段不唯一，是否有必要全部展示；如果僅展示一個(gè)，對(duì)后續(xù)搜索是否存在影響。

例如上面所講的入住人信息，是否有必要將所有入住人展示出來；如果僅展示一個(gè)展示哪個(gè)，展示的信息是否支持修改/刪除，修改/刪除后取哪個(gè)字段；如果列表僅展示一個(gè)，搜索“其他入住人”時(shí)數(shù)據(jù)能否查詢成功。

2） 如果字段動(dòng)態(tài)存在計(jì)算邏輯，是否可以直接展示”計(jì)算結(jié)果”，用戶對(duì)此的計(jì)算邏輯是否認(rèn)同并理解。

例如上面的“收款”，用戶在一個(gè)訂單中可能操作多次收款，在這里可考慮展示“收款總和”。

2. 列表設(shè)計(jì)

1）在表格的設(shè)計(jì)原則中：第一列為列表的唯一標(biāo)識(shí)，在數(shù)據(jù)中可看做“主鍵”；最后一列為各種操作。

通常來說第一列可采用“創(chuàng)建時(shí)間”或“ID”或“用戶名”等進(jìn)行標(biāo)識(shí)。

2）列表排序

通常情況可按照“唯一標(biāo)識(shí)”進(jìn)行倒序/正序排列。排列順序主要依據(jù)用戶在表格目的；例如：在餐飲行業(yè)的訂單中，訂單的創(chuàng)建時(shí)間進(jìn)行倒序排列，用戶主要是期望看到新來的訂單進(jìn)行排單制作。

在默認(rèn)排序的基礎(chǔ)上是否需要設(shè)置特殊排序。例如：基于上面的訂單列表中，是否會(huì)有“接單”操作的概念；比如來自某些地區(qū)的訂單需要特殊處理，若有是否需要優(yōu)先展示待處理的訂單；如果是這樣的話，需要在默認(rèn)排序的基礎(chǔ)上增加操作/異常處理等維度進(jìn)行排序。

3）列表分頁(yè)

分頁(yè)：筆者通常依據(jù)頁(yè)面內(nèi)容、頁(yè)面布局，來設(shè)置每頁(yè)展示的數(shù)據(jù)量；進(jìn)行分頁(yè)的好處是單次請(qǐng)求數(shù)據(jù)量少，響應(yīng)速度快。

不分頁(yè)：若不進(jìn)行分頁(yè)一次性請(qǐng)求數(shù)據(jù)過大是否會(huì)產(chǎn)生延遲，進(jìn)而導(dǎo)致用戶的體驗(yàn)差問題。

3. 列表操作

1）搜索：通過查詢關(guān)鍵字來快速定位目標(biāo)數(shù)據(jù)，通常分為模糊搜索/精準(zhǔn)搜索。

主要的交互形式如下：

2）篩選

列表上方增加篩選操作：

列表內(nèi)增加篩選操作：

自定義的列篩選功能，并實(shí)現(xiàn)一個(gè)搜索列的示例。

多項(xiàng)篩選

導(dǎo)出：

“導(dǎo)出”操作按鈕通常是導(dǎo)出當(dāng)前篩選數(shù)據(jù)結(jié)果。需要注意【導(dǎo)出】按鈕的層級(jí)位于篩選、查詢結(jié)果后。

三、其他

在設(shè)置列表的過程中經(jīng)常會(huì)遇見列表字段過多/長(zhǎng)影響頁(yè)面展示效果的情況，對(duì)于此問題我們可以通過一些交互手段進(jìn)行規(guī)避。

1）固定頭和列：適合同時(shí)展示有大量數(shù)據(jù)和數(shù)據(jù)列

2）固定列：對(duì)于列數(shù)很多的數(shù)據(jù)，可以固定前后的列，橫向滾動(dòng)查看其它數(shù)據(jù)

3）限制展示字段，鼠標(biāo)懸停進(jìn)行展示詳細(xì)信息

以上是筆者本次不成熟的分享內(nèi)容，歡迎大家下方留言進(jìn)行交流。

主要參考文章：

Ant Design Vue

數(shù)據(jù)表格應(yīng)該這樣設(shè)計(jì)

本文由 @美的人不生氣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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