后台产品设计之列表页设计
时间：2023-09-01 08:36:01 | 来源：网站运营
时间：2023-09-01 08:36:01 来源：网站运营
后台产品设计之列表页设计：对于后台产品来说，列表页应该是应用范围最广、使用最多的页面之一。一个优秀的列表页能帮助用户快速了解相关数据，有效提升工作效率。
通常来说，一个完整的列表页包括导航区、检索区、顶部操作区、列表区以及分页区5大模块。
导航区
对于较为复杂的后台系统，由于功能结构、信息结构层级比较多，为了让用户能时刻知道自己在系统中的位置，就需要使用导航区。
图片来自淘宝，侵删对于简单的系统来说，往往利用顶部导航和侧边菜单就已经能让用户了解整个系统架构，这时，导航区就不是一个必备的选项。
列表页的导航区，常见的展现形式为面包屑导航
针对面包屑导航，其具体的展现形式也非常多样，除了上述基本形式，还包括下拉型面包屑、交互型面包屑等，考虑到后台系统一般不会使用这些形式，这里不再展开。
检索区
检索区主要用于辅助用户快速定位数据。在检索项的选择上，需要结合列表数据进行综合考虑。一般来说检索项越多越能帮助用户精准定位数据，但是过多的检索项也会对用户造成干扰。那么到底要怎么选择显示检索项呢，我认为可以参考以下原则：
例如用户列表，可以同时通过姓名、手机号对用户进行检索，那么就可以考虑将这两个字段融合到一个搜索框中，查找数据库的时候联查这两个字段。
但是要注意的是，不要将过于相近的字段进行合并检索，这样会检索出很多无关数据，无法达到让用户快速查找数据的目的。例如一个订单页同时包含订单编号和商品编号，并且这两个字段的定义规则相近，就不要将其合并检索，不然本来想通过商品编号来检索，结果检索出一堆订单编号中带关键字的数据，就会对用户造成很大的干扰。
不选择列表中不显示的字段，一个是因为列表页显示的字段一般为关键字段，不在列表页显示的字段相对就比较次要，对于检索项来说最好挑选关键字段进行检索。另一个是因为如果检索的字段不在列表中，容易给用户一种不安感，让用户不确定检索的是否是他需要的数据。
展现形式检索项不多的情况下，可以选择直接进行罗列。
如果检索项较多，可以默认显示关键检索项，折叠次要检索项，点击展开后再显示全部的检索项。
检索项的值数量可控的情况下，可以采用将检索项的值全部排列出来的方式。
这种方式，对于检索项和检索项的值，都可以结合折叠功能来搭配使用。
控件逻辑检索区常使用的控件包括下拉框、单行输入框、时间控件、复选框等
使用下拉框时，需要注意的是，如果下拉选项很多，可以考虑用联动下拉框代替，通过增加下拉层级来让选择更为快捷。例如一个学生管理列表，如果需要通过班级来检索学生，对于一个班级很多的学校来说，但是使用一个班级的下拉框来选择是非常困难的，可以将班级的下拉框替换为班级分类+班级的联动下拉框，这样能更快捷的查找数据。
在使用时间空间的时候，可以根据用户的使用习惯将一些常用时间抽离出来作为选项。
顶部操作区
顶部操作区的操作主要包括：
- 对列表多条数据产生影响的操作，例如导出、批量处理等；
- 不对具体已有的数据产生影响的操作，例如新增、刷新等。
列表区
列表区是列表页最主要的区域，通常来说可以继续拆分为列表数据区和列表操作区。
1.列表数据区列表数据区主要显示列表的各项数据。当列表数据项较少的情况下可以直接全部显示。而数据项较多的情况下，则需要挑选出关键数据进行展示，其他次要数据需要配合详情页来展示。
展现形式表头跟字段一一对应的方式应该是最基本、最常用的展现形式。
可以将多个关联性较大的字段放在一个表头名称下，这种方式可以通过减少字段的横向排列来缩短列表的宽度，减少横向滚动条的使用，更符合人眼观察习惯。
对于多个字段显示在同一个表头名称下，不建议选择数字类型的字段这么做，因为数字类型的字段在一个列表里显示的时候，天然有种可以直接进行纵向比较的优势，如果将多个字段组合在一起显示，反而会破坏这种优势。
在字段较多的情况下，更为直接的方式是采用横向滚动条，这种方式应该是大部分用户都比较熟悉的方式，但是用户体验上来说并不是很好。
在使用横向滚动条的方式下，可以配合使用固定数据列的方式，将重要字段固定，避免用户要来回滑动滚动条查看数据。
针对字段较多的情况，还可以采用数据列可配置的形式。这种形式比较适用于该列表同时服务于多种角色的用户，每种角色的用户关心的点各不相同的情况，可以让用户根据自己的需求进行数据列的配置。
虽然针对列表数据区总结了多种展示形式，但是每种形式都不是孤立的，应该结合具体情况配合使用，才能产生最优解。
列表排序列表的排序也是列表的一个关键内容，好的列表排序能让用户很清晰的了解列表，进行操作。常见的排序方式有如下几种：
针对用户可以新增数据的列表，大多采用数据创建的时间进行排序，这样有利于用户找到刚刚创建的数据，不至于创建完成后不知道数据在哪里。
针对用户不能新增数据的列表，可以选择某个或者某些字段的组合进行排序，例如根据时间、名称的首字母等，只要符合具体场景下的需求即可。
2.列表操作区列表操作区的操作主要是针对单条数据进行的操作，常见的操作包括修改、删除、查看详情、排序、审核等。
展现形式以按钮或者文字链接的形式来显示，是最为常见的一种形式。
以图标的形式来显示也是应用非常广的一种形式，但是这种形式更多的适用于非常常见的、用户非常熟悉的、能望图生义的操作，例如修改、删除等。
对于操作较多的列表，可以显示几个主操作，次要操作进行折叠处理，节约操作区的面积。
分页区
对数据进行分页可以减少数据加载的压力。分页区的主要内容包括数据总条数、每页显示数据数、当前页、翻页跳页操作。数据分页后，就会引出这样一些问题：
正常其实都是需要的，但是我们要沟通清楚
- 从当前页进入子级页面后，返回来时是否需要仍停留在原前页
正常其实都是需要的，但是我们要沟通清楚
总之，我们就是要沟通清楚~
好啦，今天分享就的内容到这里啦，希望能对大家有帮助~
在线咨询
