B端产品列表设计-1

1、B端系统列表的重要性

在 B 端系统中，列表页面至关重要。它以清晰直观的方式呈现大量数据信息，方便用户快速浏览和检索。用户能高效定位所需内容，进行筛选和排序操作。同时，列表页面为系统的整体架构提供了基础导航，提升了工作效率和数据管理的便捷性。

2、B端系统列表的重要组成部分

2.1、列表数据

2.1.1、表头

• 列表表头最重要的信息是标题：代表这一列数据表示的是什么含义，属于必不可少的信息。
  

• 列表表头第二重要的信息是注释说明：对于一些复杂的字段名称可以使用该功能，鼠标悬浮后进行解释说明。

• 列表表头第三重要的功能是排序 ：对于一些数值、日期型的字段，可以在表头上直接进行排序，可以节省数据查询部分的空间。

• 列表表头第四个重要功能是筛选：对于部分值集确定的字段，可以选择在列表表头上直接进行筛选。

2.1.2、数据

​ 列表中数据的展示非常重要，但是设计起来形式相对单一，基本情况是做到一行代表一条单据，一列是一个字段即可。

• 需要重视的一点是字段顺序：
  • 一般会将优先级高的字段置于前面并固定显示。
  • 如不同人对于字段的优先级认知度不同，可以考虑让用户自行定义是否显示、显示顺序。

​ 表格数据里面需要注意的一点是：总结行。对于商城订单的列表，需要有总结行计算该页所有订单的金额等信息，能够大大提升使用人员效率。

​ 建议在设计表格数据内容时，考虑到相邻行的底纹颜色，能够使单调的文字显示变得有趣一点点。

• 如果列表需要展示的内容过多，可以选择2种常见的方式
  • 一是向右拖拽展示更多
  • 二是展开显示详情内容

2.2、列表操作

• 列表操作是针对某一行数据进行操作的一系列按钮，会根据单据的不同状态显示不同的内容，常见的有：
  • 查看：查看列表详情，此时不能够编辑；
  • 编辑：编辑列表单据内容，此时可以编辑信息；
  • 删除：删除该单据。

​ 如果按钮比较少，可以选择全部展开的方式，操作起来更加直观。

​ 如果按钮比较多，可以选择使用图标的形式或者优先级低的按钮隐藏到【更多】，不占过多空间。

2.3、页面操作

• 页面操作主要包括2种类型
  • 一是批量操作，例如批量删除、批量打印、导出数据等
  • 二是业务操作，例如新增商品。

2.4、数据查询

​ 数据查询主要是对列表的数据进行查询，筛选出合适的数据进行呈现

• 常用的数据查询形式如下：
  • 模糊查询：根据某个字段输入内容后进行模糊查询，主要适用于各种名称，例如合同名称等；
  • 单选/多选：针对有固定值集的字段，可以使用下拉选择的方式，具体包括单选和多选；
  • 级联选择：针对树形结构的字段，例如商品的一级-二级-三级分类，就可以使用这种查询方式；
  • 时间选择：对于时间类型字段，可以采用时间段筛选的方式，例如订单创建时间等。

2.5、数据搜索

​ 对于网站的个人中心，经常使用搜索的方式，即不是针对某一个字段进行模糊筛选，而是多个字段进行同时筛选，可以大幅减少筛选条件。

2.6、分页器

• B端系统列表页面一般会考虑使用分页功能，具体包括：
  • 每一页显示数据量：可以选择每页显示10条、20条、100条数据等，满足不同人对数据量查看的要求。
  • 跳转到第XX页：方便业务人员快速查看对应的数据。
  • 上一页与下一页：方便业务人员快速查看对应的数据。

3、遗留问题

​ 这个文章只是对B端列表进行了组成分析+简要描述，其实针对某一部分都有很多优化可以研究，如果大家感兴趣的话我们可以再针对每一部分单独来写深度分析。