这是《后台产品设计指南》系列文章的第10篇内容，更多精彩可以点击下方链接查看。
后台产品设计指南
列表是后台产品中常见的元素，是增删查改操作的入口。如何设计出合理的列表直接反映了产品经理的能力。由于删除操作没有太大区别，新增和编辑操作和具体的业务有关，本文会重点和大家探讨页面展示、搜索、排序、操作这些功能的设计规范。
列表类型
列表类型主要有以下几种：
基础型列表
是后台产品中最为常见的列表类型，一般列数控制在5-10列为宜。
主从型列表
列表之间存在从属关系、递进关系时，可以采用主从型列表形式，主从列表总成绩一般不超过3级。
综合型列表
综合型列表适用于业务数据展示复杂的场景。列表数据之间既包含并列关系，又包含从属关系等。
列表显示
面包屑
面包屑可以显示当前页面的路径，快速返回之前的任意页面。有些系统中的面包屑只做展示，并不支持点击；另外有些系统的面包屑展示的就是页面标题，而不是完整的路径。具体选择哪种方案需要提前考虑清楚。
列
页面上的列相当于一个个字段。列表中推荐展示内容的ID，这个唯一标识可以帮助技术、运营、客服等人员快速定位内容。一些系统中展示的是自增的序号，这个数字一般是没有什么用的。
页面中的内容需要考虑如对齐方式，宽度、边距等，这样才能将不同的元素合理的展示，让用户能第一时间获取到有用的内容。
通常使用文本左对齐、数值右对齐的方式。
针对固定长度的字段需要全部展示，比如手机号、时间。而长度不固定的字段可以设置一个长度，保证大部分数据都能显示，同时鼠标悬浮或者点击时应该能看到全部内容。比如订单备注可以设置展示长度为20，超出以…展示。
因为页面的宽度是有限的，一定要优先展现核心信息，次要信息和无关信息尽量不展现。如果列数比较多，可以让用户自己设置是否展现，比如禅道可以让用户自定义列，设置是否展现，宽度及展示顺序。
列表的ID、操作可以设置为固定，通过滚动条左右滚动切换查看内容，和下面说到的表头冻结比较类似。
列表中应该展现充实，饱满的数据。比如CRM系统中客户的星座、血型一般就获取不到，就不太适合展现在列表里面。
表头标题
表头标题是对列表内容的解释，一定要简洁，不能换行。针对不容易理解的标题可以添加注释进行说明。
表格的表头在页面上下滚动时，可以始终固定在顶部，这样用户可以方便地看到表头，相当于Excel的冻结首行功能。
滚动条
当页面纵向内容很多时，用户可以通过拖动纵向滚动条来查看内容；
横向的列数如果比较多时，可以增加横向横向滚动条。需要注意的是滚动条可以固定在页面底部，否则在低分辨率屏幕下，需要滑动到页面最下面才能使用滚动条，比较麻烦。
分页
分页能减少用户请求对服务器产生的压力，同时也能帮助用户知道数据量和自己当前的位置。一个完成的分页组件由一下几部分组成：
数据总量，显示当前内容的总数。
页面展示数量，可以设置当前页面的展示条数，一般后台产品中可以默认设置为20条。
上一页和下一页，点击分别进入上一个浏览的和后面临近的页面。部分分页上还有首页和末页按钮，可以直接跳转到第一页和最后一页。注意在首页和末页点击页面切换时，需要做特殊处理，因为这个时候已经没有页面可以点击了。
当前页码，当前页面的具体位置。
页码展示，当前页面之外的页面数字，可能是紧挨着当前页面的数字（比如步长为3或者5），也可能是和当前页面不相邻的数字。
页面跳转，可以输入指定数字快速跳转，可以通过回车或者点击跳转按钮来快速定位到指定的页面。
部分系统中的分页组件可以设置为如果页面数据小于1页就不展示分页，是否遵循这个设计需要平台的产品经理来设计。
如果页面数据量非常大，即便加了分页加载起来也可能会很慢。这个时候可以通过优化SQL、限定页面默认的数据量，比如文章列表默认调取最近1个月的数据、分库分表等技术来进行优化，提升加载速度。
搜索
搜索组件
列表中的搜索条件一般包括输入框、下拉框、时间组件。
用户输入内容，点击搜索或回车后，可以搜索数据。搜索一般是模糊搜索，特殊场景下需要用到精准搜索。
下拉框分为单选和多选，之前介绍表单组件的文章有详细说明，感兴趣的读者可以翻阅。一般情况下下拉框组件会添加一个“全部”或者“请选择”选择作为默认值，用来显示全部数据。
时间组件可以使用成熟的第三方组件，通过选择起止时间范围来搜索数据。可以在组件上添加快捷条件，比如最近一周，最近一个月，最近三个月，
注意事项
在搜索（查询）查询按钮右侧需要设置重置按钮，便于用户信息清空信息恢复初始状态。
有时候可以在一个输入框中聚合搜索多个字段，这样做对用户会比较方便。缺点也很明显，数据量比较大时，聚合搜索时间会比较长；用户不能组合搜索，比如既搜索姓名又搜索评论内容。
比较复杂的系统中，可以把不常用的搜索条件默认展示，其他查询条件折叠。注意常用搜索条件的字段内容要尽可能在列表中展现，否则用户搜索时可能会困惑。
同时还可以将常用的筛选条件设置好，保存为方案，后面再重复使用。
排序
数据展示排序
我们可以根据自己产品的实际特性以及用户期望来对其进行设定。比如会议申请列表可以按照会议申请时间降序，库存物料列表可以按照库存剩余量降序展示。
数据操作排序
页面中如果很多字段都有排序场景时，需要增加表头标题排序切换功能。在应用新的排序时，旧排序应该失效。比较合理的实现方案是从服务器上获取数据后通过js在本地实现排序，这样能减轻服务端的压力，本地运行起来也相对流畅。
页面数据还可以自定义排序，一般是通过设置排序值来控制排序，排序值越大展示越靠前，可以在详情页设置排序值，也可以在列表页设置排序值。部分列表页可以考虑使用拖拽进行排序，一般适用于数据量比较少的场景。
操作
页面中的操作一般有以下几种：
列表中的添加操作
比如文章列表中添加文章操作、添加文章分类操作、一键导入文章操作。
列表中的单个操作
比如针对文章列表列表中编辑文章操作、启用禁用文章操作、设置文章置顶操作。单个操作一般在列表的右侧，如果单个操作大于3个，可以考虑将不常用操作折叠在一起。有些系统在内容标题上也添加了操作链接跳转。
列表中的批量操作
比如文章列表中的批量删除、批量上架、批量下架操作。
批量操作一般都是选择当前页数据。当前跨页选择数据也是可以实现的，相对会复杂一点。
批量处理的操作可以在表头和表尾都展示，这样可以提升工作效率。
导入导出操作
因为这两个操作类型比较特殊，所以单独列出来。这里参考伙伴云系统中的导入Excel文件给大家说明一下。第一步是选择文件，可以通过点击按钮选择文件或者拖拽文件到浏览器窗口中。第二步是预览数据，可以选择文件中的工作表，设置标题行，提前浏览数据内容。第三步是匹配字段，可以设置导入哪些列。第四步才是真正的导入，当数据完全导入成功后，系统会发送通知提醒用户。一般系统中导入Excel文件不会这么复杂，选择文件导入后只需要告诉用户成功多少条，失败多少条就可以了。
导出的逻辑相对简单一点，需要设置文件名、导出的文件类型（xls、csv、xml等）、文件格式（一般用UTF-8）、数据范围（全部数据、当前数据）、页面模板（导出的字段类型）。如果导出的数据量比较大，可以提示用户任务正在处理，稍后再下载导出的文件。
制定标准规范能帮助产品、设计、开发更好的理解产品功能，设计和开发出来体验友好的产品，方便用户使用。通过日常的工作和学习，及时总结梳理产品规范，产品方案能更好的提升我们的工作效率。
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者与我一起交流探索，共同进步。