在B端系统中，列表是一个非常常用的功能。不论是列表页的设计还是单独的列表，都会涉及到列表的逻辑。这篇文章，我们来梳理一下。

本文所讲的B端产品集中在后台系统领域，一般后台系统的页面分为表单页，详情页、列表页、表盘页面。

• 表单页：主要用于添加、修改数据对象的操作型页面，会包含多个表单控件的处理
• 详情页：用于展示某条数据对象的详细内容、数据的页面
• 列表页：用于展示大量同类型的数据，包括对该数据的排序、筛选、查看、删除等
• 表盘页：用于展示数据和图表等页面，也叫做仪表盘，即数据分析

那么如何设计好每一个列表页面之间的逻辑呢？

首先要明白当前列表主要表达的内容是什么，比如在WMS系统中，有库存列表、入库列表、出库列表、库位管理列表，根据名字就可以得知这个列表所要展示给用户的内容是什么；

其次，需要理清楚每一个列表之间的关联关系，比如，入库列表跟库存列表之间是以商品为载体，库存列表的主体是商品，以商品为维度进行库存的统计，而入库列表则是以每一条入库记录为主体，二者的关系是一对多，也可以理解为，入库列表的主键为入库编号，库存列表的主键为商品编号，一对多的关系怎么设计数据库结构呢？

简单来讲：

1:1关系一个表实现

1:N关系需要两个表实现，把1的主键放在N的表里作为外键

N:N关系需要三个表实现，需要将两个表的主键组成第三个表格

举个例子：

某自学考试社会助学点有教师若干名，招生人员若干名，学生若干名。

教师和招生人员的基本属性为：姓名，性别，职称。

学生的基本属性为：姓名，性别，入学成绩。

招生人员负责招收学生，记录招生人数。

教师负责辅导学生学习，依据其职称和辅导时间产生辅导费用。

根据上述信息整理出如下E-R图，可见招生人员与学生之间是一对多的关系，学生与教师之间是多对多的关系，故招生和学生之间是两张表，而学生和教师之间是三张表，两部分合在一起，减去学生重复的表，总共是四张表。

整理出的四张表格如下，加粗部分为该表格的主键和外键。

• 招生人员（招生人员姓名，性别，招生人员职称）
• 教师（教师姓名，性别，教师职称)
• 学生（学生姓名，性别，入学成绩，招收人员姓名）
• 辅导（教师姓名，学生姓名，教师职称，辅导时间）

建表的结构懂了，下面就是列表数据的问题了，我们知道一个列表页面展示的数据是非常多的，产品设计原型的时候其实不能太过死板，所以学了数据库的产品刚开始也会存在一定的弊端，会把每一个列表页当作一张表，其实不然，列表页是给用户看的，用户想看到什么，我们就给他查询什么展示出来，所以一个列表页面并非就是一张数据表，而是技术人员通过联表查询将多张表格的数据查询出来展示在一张列表页面，也就是用户看到的一张张的表格。

清楚表的规则之后，就能够很好的理清楚每一个列表页面的信息、列表之间的关联关系，从而更好的跟技术人员进行沟通，虽然产品可以不懂技术，但是知道一些基础的技术知识，总是对工作有益，当时，学会了一定的技术知识，也不能跟产品设计的思路混淆。

本文由 @晚迟 原创发布于人人都是产品经理。未经作者许可，禁止转载。

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