前言
列表是后台产品最为常见的页面，大部分业务模块的第一个页面就是列表页。这就意味着列表页面非常影响用户体验。然而，我用过不少的后台列表页面体验实在是一般，很多交互细节都没有考虑 —— 可以说，就是前端开发同学按照某个模板的默认方式开发的。其结果就是，用起来非常不方便，效率也很低，这种交互设计对于 B 端产品来说绝对是一个槽点。本篇就来讲讲列表页面交互设计要注意的关键点。
进入列表页面一定要有加载指示
进入列表页有时候加载时间会比较长，而且用户的网络环境也无法预测，当用户看到一个空白页面的时候是不知道当前的状态的。因此，在等待加载的过程中不能给一个空白的页面，而应该明确给出一个加载指示。简单的就是给一个普通的转圈动画，体验好一点就是提供更有趣的动画效果。关于加载这块，大家可以看之前的一篇文章：关于用户等待这件“小事”。
注重筛选表单的细节
列表通常会带有筛选表单，这里需要注意筛选表单的一些细节：
提供清空筛选表单内容的按钮，以便用户可以清空当前的筛选条件，避免用户手动一个个清空。清空时最好刷新一下列表。
下拉选项最好提供全部这个选项，这样可以保持交互的一致性，虽然在下拉输入框提供清空的按钮也可以做到筛选全部选项，但是交互一致性上面不如提供全部选项。
输入类的表单，最好能支持回车启动搜索，这样相比手离开键盘再点鼠标查询效率会更高。
从列表进入新增、编辑页面，再返回的时候应该保留筛选表单内容，避免用户重新挨个填写筛选表单。
最后一个就是表单内容变化时要不要立即进行列表筛选，在 C 端产品中这很常见，但对于 B端产品，我个人的建议是不这么做。因为用户有可能会有多个筛选条件同时查询，如果每次内容变动就进行列表筛选，列表内容变化时可能会影响用户当前的操作。
保持列表页面状态
见过不少这样的情况，从列表页跳转到其他页面后，再回来页面就又重新刷新一遍了，然后用户不得不重新找到之前浏览的位置，需要用户重新筛选、重新找到对应的分页 —— 体验非常不好！实际上，更好的方式是保持列表页面的状态。
在技术上，保持列表页面状态叫做“保活”（Keep Alive），也就是离开这个页面后再返回，页面的状态保持不变。这包括前面说的筛选条件、分页、选中状态和页面滚动位置等等 —— 也就是页面上的元素和离开前保持原样。这一点上，一般产品不提需求，技术是不会做保活处理的。因此，可以在规范中明确默认列表页面保活，然后如果有特殊要求再单独说明。
删除时需要考虑特殊情况
从列表页面删除某些数据是非常常见的情况，大部分情况下不会影响用户体验。但是，下面的一些特殊情况需要处理：
删除后需要以当前的筛选条件、分页刷新列表，保持当页数据量和分页大小保持一致。不要让页面的数据随删除操作越删越少（实际后面的分页还有数据）。
如果删除后出现当前页没有数据了（通常是最后一页），这个时候应该往上翻一页，不要让用户以为没数据。
如果将全部数据删完了（也可能是满足筛选条件的数据没有了），那么应该给出无数据指示的空页面，明确告知用户没有数据，而不是留一个空白页面。
新增和编辑数据后的处理
一般来说，新增数据和编辑数据后会返回列表。前面我们讲到了要页面保活，但是当出现新增数据和编辑数据后，如果保活就会让列表看不到变更后的数据。这种情况下，应该刷新列表，让最新变更的数据显示给用户，以起到反馈的作用 —— 但是刷新前的筛选条件、页码和其他状态应该保持不变。这种也可以写作交互规范里面，由前端统一处理，这样就不再需要每次在文档强调。
总结
列表是 B 端产品用户接触最多的页面，也是最影响用户体验和客户员工工作效率的部分。就如同我们在关于用户等待这件“小事”中说的那样，用户体验无小事。对于 B 端产品，要让用户用得顺，用得爽，这样才能够提升一线员工的工作效率，进而为客户创造价值。
