编辑导语：在我们的日常工作中，经常会用到表格进行整理。表格可以直观清晰地表达差异和变化，也可以给我们职场上一些帮助。本文作者分享了关于统计表的设计思路，让我们一起来看看。

作者主要负责某B端产品数据统计相关的产品设计。这次主要分享一些与统计表设计相关的经验和思考。请给我你的建议。

一、统计表格

表格是一种组织和整理数据的手段，通过显示行和列数据以可视化方式进行交流。

一般来说，当有大量的结构化数据需要显示时；当需要排序、搜索、分页和自定义操作等复杂行为时，使用它。

用户可以通过数据表查询业务数据，了解业务情况，进而达到辅助决策的效果。

00-1010设计表格时，表格中需要解决的问题有哪些？

有没有现有的数据表可以解决这个问题？可以通过优化当前表来实现吗？

在这里，我们将引用作者在《腾讯产品法》中所说的话：

“好的产品设计是用有限的基本能力实现高满意度的功能。”

如果没有，那么必须添加一个新的表单来满足用户的需求，作者将在下面分享这个问题。

一般来说，表主要包括两种结构：列表，操作(搜索、过滤、导出)。

00-1010首先，根据用户的用途过滤数据指标，列出所有可能的字段，然后显示核心字段/最适合的字段。

然后，判断数据源的状态。如果数据源的表单以“提交”为节点，提交后字段不变；那么笔者认为列表是静态列表，即使后续还有其他操作，也是以“整体形态”为维度的状态变化。这样的桌子设计得很好。

如果表单中的数据在提交后可以修改，那么列表是动态的，这使得表单更加复杂。此时列表数据字段的显示就显得尤为重要，需要考虑数据变化(增加、删除、改变)对列表的影响。

比如酒店PMS系统的住宿顺序，具体字段包括：入住者信息(姓名/手机号/性别/国籍/身份证/住址)、渠道来源、入住时间、房间号、入住天数、房费金额；收款、存款、待收款；备注信息；其中，居住者信息可能不唯一(一个订单中可能有两个或两个以上的居住者)，房间号可能不唯一，收款、存款收款、待收款等信息会随着操作而变化。

这个时候需要考虑：

1)如果字段不是唯一的，有必要全部显示吗？如果只显示一个，对后续搜索是否有影响。

例如，是否有必要显示上述信息中的所有居民；如果只显示一个显示，显示的信息是否支持修改/删除，修改/删除后选择哪个字段；如果列表只显示一个，则在搜索“其他居民”时是否可以成功查询数据。

2)如果字段中有动态计算逻辑，是否可以直接显示“计算结果”，用户是否认同和理解计算逻辑？

比如上面的“集合”，用户可以一次操作多个集合，这里我们可以考虑显示“集合总和”。

二、表格设计思路

1)在表设计原则中：第一列是列表的唯一标识符，可视为数据中的“主键”；最后一列列出了各种操作。

一般来说，第一列可以用“创建时间”或“ID”或“用户名”来标识。

2)列表排序

通常情况下，可以根据“唯一标识”按正/反顺序排列情况。订单主要根据用户在表格中的用途；例如，在餐饮业的订单中，订单的创建时间是以相反的顺序排列的，用户主要期望看到新订单被排列和制作。

是否需要根据默认排序设置特殊排序？比如基于以上订单列表，是否有“接单”操作的概念；比如某些地区的订单需要特殊处理，如果需要，是否需要优先显示待处理订单？如果是这样，需要在默认排序中增加操作/异常处理等维度进行排序。

3)列表分页

分页：作者通常根据页面的内容和布局来设置每页显示的数据量；分页的优点是单个请求中的数据量小，响应速度快。

无分页：如果不进行分页，会不会一次请求的数据过大，导致用户体验不佳的问题？

00-1010 1)搜索：通过查询关键词快速定位目标数据，通常分为模糊搜索/精确搜索。

互动的主要形式如下：

2)筛选

在列表顶部添加过滤操作：

在列表中添加过滤操作：

自定义的列筛选功能并实现搜索

索列的示例。

多项筛选

导出：

“导出”操作按钮通常是导出当前筛选数据结果。需要注意【导出】按钮的层级位于筛选、查询结果后。

三、其他

在设置列表的过程中经常会遇见列表字段过多/长影响页面展示效果的情况，对于此问题我们可以通过一些交互手段进行规避。

1）固定头和列：适合同时展示有大量数据和数据列

2）固定列：对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据

3）限制展示字段，鼠标悬停进行展示详细信息

以上是笔者本次不成熟的分享内容，欢迎大家下方留言进行交流。

主要参考文章：

Ant Design Vue

数据表格应该这样设计

本文由 @美的人不生气 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。