淘汰了5个方案，梳理出这份后台列表设计避坑指南（下）

列表页是构成后台使界面的重要组成之一，聚合了众多信息并供操作入口。区别于小而美的C端产列表，后台系统的户希望列表的容又多又全面（表格），但在操作时又支持快速定位（搜索，包含筛）、准确处（操作）。这需求貌似有些矛盾，但在很多场景，例如客在接待客户时口时间极短暂，既要全面获取相信息，又要快速应对解决客户问题。因此这需求仅合而且是需。

列表页由「搜索」、「表」和「操项」三大基块组成。刚才提到的矛盾点也是由三个模块之前的互相影响和约（面详细阐述）。我们当初由在设计时忽视特定场细节，以及生搬硬套一看来很美很简约的互样式，没有处理三个模块内部以及之间的关系，被用户抱怨说不用。篇文章就将「搜索」、「列表」、「操」三块问题进行分析和定位，盘点一下被淘汰掉的决方案，给大家提供一份避坑指。

注，不存在「最好」的通用方案，只有应对体需求「最适」的解决方案。

列表

列表的主要问题依旧是内容多带来的：

• 表头字段太，超出屏幕之外，左右滑动才能完整查看条目内容，导致眼动频繁，增加认负担。
• 条目多，批量操作可能要多次翻页。

另外，其他潜在问题也增加列表展示的复，例条目之间存在一定相关——基某份主合同续签订几份补充合同（里不讨论业务逻辑合理），么简单按照签订时间点排序，就无法现合同之间的关联关系。

在计，应着眼于避免内容多导致的认知负担和操作成本。尝了一些方法来减少息噪音，抽象来说方法归为个字——「藏」和「换」。「藏」，就是隐藏低优先息，需要的候才允许出现。「换」就是转换息呈现的形式。下面一一展开。

方法一：藏

用户来置展示哪表头项

和之前提到的搜索区域置功能类似，允许用户置表头项，隐藏暂不需要的内容。

△ 设计者 Ashmita Bhattacharyya

使用展开行

适合主次级对比强烈的列表。将重要度低的内容放展开行内，样以避免横向滑动。

但如果同查多条展开行，需要多次点击展开。

△ 图片来Element UI

树形数据

使用树形数据可以将一组有父关系的数据聚呈现，类似文章一开始提的主同+补充同的景。

△ 图片来Element UI

方法二：换

使用图像代替文字

图像比文字在信息传递上更直观。原因是人们对图像的处理效率远高阅读和理。用清晰易懂的图像以将信息检索效率提升一个数量级。

△ 图来自设计者Dwinawan

合理的默认排序规则

常见的排序规则包含时间的正、倒序等。合理的排序规则，决定首屏是否能呈现对用户重要度更高的内容，以及操反馈是否见。举个例子，用户新创建完成一个新条目，列表按照创建时间正序排列，刷新没有任何变化，需要用户翻到最才能看见，么个反馈验就不太。

也可以根据息的状置权重参数，综计算权重值后，重要度高的息排在前面。举个的例，大家是否发现订阅号消息的排序并不是按照更新间排序？的解释是，订阅号消息排列顺序会根据订阅号的优质程度、用户对订阅号的喜爱程度以及群发文章的内容质量等综因素动变化。也就是有多个权重参数值叠加，综排序。

另可以允许用户将任意条目顶等，例如微信可以将某或某群组消息顶。

注意

滚动条。滚动条在底部话，可能为列表条目太多（例如页展示50条），导致用户未将列表到底看不到滚动条。如设备是触屏，法支持左右滑动会常不便，此列表顶部也需要展示滚动条。

固列。如果列表支持横向滚动，那么选择列、称标识列、操作列建议固，便于操作。

△ 顶部横向滚动条、固列

数字右对齐。在小数位保持一致的情况，数字右对齐，更容易对数字大小。

空数据。没有的数据不要为空，以用符号「-」代替。

△ 数字右对齐、空数据

操作

操我们大致分成两类来分析

• 量操作，例如添/导入、设置/分配、删除、导等。
• 针对单条内容的操，例编辑、删除、查看等。

1. 批量操作

批操作相对复杂度高，出错的概率也，以下几条内我们设摸索过程中总结出的防错策略：

不建议支持跨页选择

跨页选择首先会增加发难度及测试复杂度，用户操作也易出错。比如，选择过程中，已选择数据的状态可能外部发了变化，不再符合批操作的条件，从导致任务处理失败。

设置处理数目限

如果数据太，系统负担过重，也会增加超时任务失败的频率。

协算

用户选择过程中动态算合并实时反馈，防止用户提交后发无法通过系统的校验条件。例如用户批还清多笔账单时，可以选择页面就提醒用户所选金额超出账户余额限制，不提交后给用户报错。

异反馈

些操作数据，处理耗时较，例如导出全内，可采用异的反馈方式，以避免耽误用户处理其他任务。依据场景，异反馈还可采用多种通道保证信息传达给客户，例如系统内提示+短信+邮箱提示。

2. 单条操作

列表信息展示，我们会尝试取舍和隐藏。

关于操作，在很多场景下，尽量全部展示，避免用户需额击才能将操作项唤出。原有：降低学习成本、提升操作效率。

△ 图片来自设计者Asish Sunny，设计案将部分操作隐藏，不过在很多场景下并不适用。

在展示上，可以使用图标按钮代替文按钮，要注意语义定要准确

不要过于追求创新导致语义和用户心理模型生偏。图标除了具有按钮功能，能提示信息状态，举两。

△ 图片来自设计者Aaron Iker

△ 图片来自设计者 Kirill Zhukovsky

在交互上，如操作可以在弹窗内解决，尽量不要新开页。

尤其是连续逐条处理任务，如频繁切换页，用户要耗费时新定位任务条目。

欢迎关注作者的微信公众：「能呆书一整天」