编辑导语：在B端产品中，数据主要通过表格的形式展现，表格的易读性和易操作性设计，对提升B端用户的操作效率来说十分重要。本文作者分析了表格信息结构，并且对表格PRD功能进行了说明。
打开网易新闻 查看更多图片
表格是B端产品尤其是数据产品中，最常用的信息展现形态，比如商品列表、订单列表、用户列表，用户行为分析系统的事件列表、指标列表，DMP平台的标签列表、场景列表等，可以说B端产品40%以上的页面是由表格构成。
看似简单的一个表格功能，实际在PRD方案设计，到最终功能上线后，经常会遇到以下问题：
- 产品方案或交互说明功能遗留，开发上线后用户反馈优化建议，二次迭代开发；
- PRD文档里面产品交互说明不详细，测试验收环节要求开发加功能，开发吐槽产品需求不清晰，需求变更；
- 同一个产品经理，不同时期不同项目表格风格、功能不一致；
- 同一个部门，不同产品之间基础能力和用户体验意识水平不一，产品用户体验不一致。
数据明细表格
打开网易新闻 查看更多图片
操作列表
一、表格信息结构
从表格承载的信息展示功能，以及用户获取信息的核心诉求出发，对于表格的产品设计是可以形成标准化的PRD文档规范的。不同场景下，用户的需求如下：
- 结果筛选和过滤，针对不同的条件，快速过滤找到符合条件的数据结果；
- 新增记录或批量操作(数据表格展示明细一般可以无此需求)；
- 表格信息展示，包括核心字段展示，记录详情查看、信息修改等操作；
- 表格记录统计，及分页功能。
结合需求，对于表格通用的布局方式如下：
表格布局
二、表格PRD功能说明
Demo模板示例
1. 功能需求及交互原则
- 筛选字段：将常用筛选过滤或搜索字段按照优先级从高低排列，字段数量的多少取决于列表信息的筛选需求，既不能一股脑全部展示，也不能一味求少，导致筛选不便；
- 筛选字段交互方式：非固定内容一般使用文本搜索框，可枚举字段值的如状态、类型等采用输入+下拉搜索框，即既可以直接从下来列表中选择(筛选项20个以内),也可以输入关键词快速命中；
- 查询按钮：查询按钮主要是辅助功能，即输入文本后点击查询后出发表格内容更新。对于下拉筛选框，选项切换后直接出发查询，不需要手动点击查询按钮，这种交互的优点是用户所见即所得，不需要手动再点击查询按钮，缺点是，每一次切换都要触发查询请求。在数据量不大的情况（几万条以内）,优先选择无需点击查询按钮；
- 条件重置：适用于筛选字段较多时(5个以上)，可以快速清空查询条件；
- 条件展开：对于筛选条件过多超过2行，为了保持页面的简洁和突出重点，可以把相对不常用的条件收起，默认把最常用的条件直接铺开；
- 新增及批量操作：针对需要变更的表格，通常会有新增记录，或批量编辑的诉求，可以提供批量操作按钮；
- 表格字段数量控制：由于屏幕大小限制，表格宽度需要适当限制，最常采用的交互方式是把操作列固定，提供左右滚动的功能，一般字段数量超过8个，建议使用固定列的功能；
- 单个表格宽度限定：对于字段值内容比较长的文本信息，为了保持表格的视觉效果，需要对最大长度做限定，比如最长不超过15个字符，超出后“…“显示，鼠标悬浮时，tooltips展示全部内容；
- 表格排序：对于一些包含指标的表格，排序功能非常实用，但也是很多产品在设计或者开发变现时会忽略的功能；
- 记录默认排序规则：通常按最后更新时间降序排列，最后操作的，第一眼可以看到，保持信息的及时更新；
- 状态字段：状态字段一般用来标识记录的状态变更，不同状态以具有一定含义的不同色系的icon或文案加以区分，可以更方便对比区分；
- 操作列：单行记录的操作按钮，包括查看详情、编辑、删除等更多，通常为了保持表格的宽度，操作列的操作类型不超过4个，前三个优先展示最常用的操作，其他的在更多按钮中聚合，点击后展开更多操作；
- 批量选择，对于需要批量操作的场景，表格第一列一般为复选框，可以批量全选或取消；
- 权限控制：行记录权限，对于不同人只能查看自己的行记录，要做好数据权限过滤，而对于资产目录、信息共享类的内容，可以展示记录的同时，控制操作权限，即只有编辑权限的人才可以对记录进行编辑、删除等，查看用户对应按钮禁用置灰；
- 导出：对于有下载后二次处理或分析的，可以提供导出功能；
- 分页器：显示记录条数及翻页功能，有些场景也可以实用滚动下拉加载分页。
打开网易新闻 查看更多图片
三、小结
表格虽然是非常简单通用的功能，产品PRD输出环节，照着以上功能需求和交互清单，用户的需求和体验问题基本都可以覆盖了，这样可以在后期开发和测试环节，避免功能遗漏，节省沟通和扯皮的成本，一劳永逸。
作者：数据干饭人，微信号公众号：zhuangxiu1314，主要从事数据中台产品体系建设，包括：开发套件、数据资产、BI应用、精准营销平台、机器学习平台等。
本文由@数据干饭人 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议