数据产品PRD设计规范（一）：表格设计

表格是B端产品尤其是数据产品中，最常用的信息展现形态，比如商品列表、订单列表、用户列表，用户行为分析系统的事件列表、指标列表，DMP平台的标签列表、场景列表等，可以说B端产品40%以上的页面是由表格构成。

看似简单的一个表格功能，实际在PRD方案设计，到最终功能上线后，经常会遇到以下问题:

• 产品方案或交互说明功能遗留，开发上线后用户反馈优化建议，二次迭代开发
• PRD文档里面产品交互说明不详细，测试验收环节要求开发加功能，开发吐槽产品需求不清晰，需求变更
• 同一个产品经理，不同时期不同项目表格风格、功能不一致
• 同一个部门，不同产品之间基础能力和用户体验意识水平不一，产品用户体验不一致

数据明细表格

操作列表

一、表格信息结构

从表格承载的信息展示功能，以及用户获取信息的核心诉求出发，对于表格的产品设计是可以形成标准化的PRD文档规范的。不同场景下，用户的需求如下：

• 结果筛选和过滤，针对不同的条件，快速过滤找到符合条件的数据结果
• 新增记录或批量操作(数据表格展示明细一般可以无此需求)
• 表格信息展示，包括核心字段展示，记录详情查看、信息修改等操作
• 表格记录统计，及分页功能

结合需求，对于表格通用的布局方式如下：

表格布局

二、表格PRD功能说明

Demo模板示例

1.功能需求及交互原则

• 筛选字段：将常用筛选过滤或搜索字段按照优先级从高低排列，字段数量的多少取决于列表信息的筛选需求，既不能一股脑全部展示，也不能一味求少，导致筛选不便
• 筛选字段交互方式：非固定内容一般使用文本搜索框，可枚举字段值的如状态、类型等采用输入+下拉搜索框，即既可以直接从下来列表中选择(筛选项20个以内),也可以输入关键词快速命中。
• 查询按钮：查询按钮主要是辅助功能，即输入文本后点击查询后触发表格内容更新。对于下拉筛选框，选项切换后直接出发查询，不需要手动点击查询按钮，这种交互的优点是用户所见即所得，不需要手动再点击查询按钮，缺点是，每一次切换都要触发查询请求。在数据量不大的情况（几万条以内）,优先选择无需点击查询按钮
• 条件重置：适用于筛选字段较多时(5个以上)，可以快速清空查询条件
• 条件展开：对于筛选条件过多超过2行，为了保持页面的简洁和突出重点，可以把相对不常用的条件收起，默认把最常用的条件直接铺开。
• 新增及批量操作：针对需要变更的表格，通常会有新增记录，或批量编辑的诉求，可以提供批量操作按钮
• 表格字段数量控制：由于屏幕大小限制，表格宽度需要适当限制，最常采用的交互方式是把操作列固定，提供左右滚动的功能，一般字段数量超过8个，建议使用固定列的功能
• 单个表格宽度限定：对于字段值内容比较长的文本信息，为了保持表格的视觉效果，需要对最大长度做限定，比如最长不超过15个字符，超出后“…“显示，鼠标悬浮时，tooltips展示全部内容
• 表格排序：对于一些包含指标的表格，排序功能非常实用，但也是很多产品在设计或者开发变现时会忽略的功能
• 记录默认排序规则：通常按最后更新时间降序排列，最后操作的，第一眼可以看到，保持信息的及时更新
• 状态字段：状态字段一般用来标识记录的状态变更，不同状态以具有一定含义的不同色系的icon或文案加以区分，可以更方便对比区分
• 操作列：单行记录的操作按钮，包括查看详情、编辑、删除等更多，通常为了保持表格的宽度，操作列的操作类型不超过4个，前三个优先展示最常用的操作，其他的在更多按钮中聚合，点击后展开更多操作
• 批量选择，对于需要批量操作的场景，表格第一列一般为复选框，可以批量全选或取消
• 权限控制：行记录权限，对于不同人只能查看自己的行记录，要做好数据权限过滤，而对于资产目录、信息共享类的内容，可以展示记录的同时，控制操作权限，即只有编辑权限的人才可以对记录进行编辑、删除等，查看用户对应按钮禁用置灰
• 导出：对于有下载后二次处理或分析的，可以提供导出功能
• 分页器：显示记录条数及翻页功能，有些场景也可以使用滚动下拉加载分页

2.字段说明&自查清单

三、小结

表格虽然是非常简单通用的功能，产品PRD输出环节，照着以上功能需求和交互清单，用户的需求和体验问题基本都可以覆盖了，这样可以在后期开发和测试环节，避免功能遗漏，节省沟通和扯皮的成本，一劳永逸