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