她总结了最全的后台列表设计

在上一篇文章干货 | web端后台设计规范和表单控件大汇总中讲述了怎样设计添加页表单。添加进数据库的数据通过后台列表页展示出来，今天来讲讲如何设计后台列表页。

列表页通常由两部分组成：查询字段和表格列表。

△以商品列表页为例

一、查询字段

查询字段需要注意以下几点：

1.表格的哪些字段应该作为查询字段？

不是所有的表格字段都要拿来作为查询字段。作为查询字段的通常使用频率较高，且根据该字段可以查询出列表唯一数据。

尤其是在一些创新项目中，这点体现特别明显。创新项目需要快速迭代，打样试错。在版本初期，查询字段都不会有太多。

比如，商品较少时，商品列表通常会根据商品名称来查询商品，而不会使用商品ID（商品较少时，大家对商品名称认知感更强，反而不会刻意去记商品ID）。这时候，商品名称应该作为查询字段而商品ID不会作为查询字段。又比如，商品的最新修改时间，大家通常也不会用这个表格字段来查询商品，所以没有必要作为查询字段。

2.查询字段的排列顺序？

查询字段较多时，应考虑字段的排列顺序，将使用频率较高的字段放置在前，尽量避免放置在中间位置。

△以订单列表页的订单筛选为例

比如，订单ID是订单列表页的高频查询字段，自然放置在第一个位置比较合适，若放置中间位置或靠后位置，就不那么合理。

3.查询字段是精确查询还是模糊查询？

一般原则是文字查询为模糊查询，比如商品名称；数字查询为精确查询，比如手机号码。

4.查询字段过多，可将使用频率不高的先隐藏起来，作为高级查询。

当查询字段超过一定数量，我们可以将不是那么重要的的查询条件隐藏，通常有一个“更多”或“高级搜索”。

二、表格列表

表格承担着数据库数据展示，数据操作等作用。表面上看只需要将数据展示出来就行，但需要注意的细节也挺多。

1.默认排序？

排序并不总是以创建该条数据的最新时间倒叙排列，如订单和商品，通常是以创建最新时间倒叙排列。但在一些时效性较强的列表，比如通知公告，默认排序应该是最近修改时间倒叙排列，不再是以创建时间为准。

2.若表头字段较多，又不得已都要展示，可做自定义表头。

表头字段较多时，可做自定义表头。不同角色用户关注表头重点不同，让用户根据需要，自定义表头，包括哪些表头展示出来、表头的展示顺序。用户可以把自己不关心的列隐藏，把关心的列放到最左边，从而能够在一进入页面时就能看到自己最关心的内容。

3.列表宽度

列表宽度有个最基本的标准——表头不能换行。若有些字段较长，比如商品名称，表头宽度也应更长。若表格数据字数超过固定宽度，应考虑截断，有些可以尾部截断，比如【云南•玫瑰礼包（玫瑰花茶...】；有些则需要中间截断，比如【12345...@163.com】。

4.操作栏

操作栏通常有：查看、编辑、删除、查看日志等操作。如果操作多于三个，建议将剩下的操作折叠为“更多”，外面只保留2到3个常用操作。

查看点击进入详情页。

编辑点击进入编辑页，一定要考虑哪些字段可编辑，并不是所有的字段都可编辑。

删除一定要注意删除的数据是否有关联关系，若有关联关系，一定要先解除关联关系，才能再删除。是软删除还是硬删除。软删除只是页面上这条数据消失，但数据库中这条数据还在；硬删除是数据库中的数据也删除了。

有些操作按钮是根据列表某个字段的状态显示的，比如商品的上下线。

后台产品虽然重逻辑，但如果在逻辑严谨的情况下，让用户有更好的体验，那就是更好的产品了。我并不赞成只有在C端使用的是我们的用户，此时我们要注重用户体验，要做的好看。给内部员工用的后台系统就简单粗暴，不考虑其使用感受。毕竟如果是内部系统的话，那他们很大可能每天都要使用。

清晰的记得曾经使用一个系统，这个系统将“新增”按钮放置列表数据的最下方，而列表数据又有20多条，每次新增时都要滑动页面至最下方才能看到这个按钮，内心每次之不爽。

后台产品虽多，但套路大多相同，交互、UI更是可以复用。形成属于自己的一套规范，在以后的产品设计中，将大大提高工作效率。

欢迎小伙伴加我的私人微信yw5201a1交流。

更多干货可关注微信公众号：chanpinliu880

想学习更多关于产品、职场、心理、认知等干货，可长按右边二维码，关注我们。