大厂B端实战！提效90%的列表是如何设计的？-四位快资讯

前言

为什么我们要做列表创新提效？

列表是百度商业 B 端平台最典型的模块之一，据百度商业 B 端平台埋点数据统计显示，提效列表 PV 占平台总 PV 的表何 40%，列表操作时长占平台 47%。大厂B端的列列表承载了客户浏览数据、实战设计查找数据、提效管理数据的表何重要功能，是大厂B端的列客户重点使用和关注的区域。

然而据百度商业平台体验监测报告显示，实战设计平台列表模块满意度 53.9%，提效低于平台平均满意度分值（55.6%），表何不满意归因主要集中在性能卡顿、大厂B端的列交互操作效率低两方面。实战设计

基于以上两方面的原因，我们从客户视角出发，设定设计目标为列表体验创新升级，提升列表核心场景操作效率以及客户满意度。针对「浏览数据」「查找数据」「管理数据」三大核心场景分析量化客户体验痛点，通过打造全屏交互框架、创新设计 4 个交互模式、增加智能查询等举措，给客户带来「更全面」「更便捷」「更高效」的列表使用体验，提升客户满意度，助力业务达成目标。

一、浏览数据更全面

在百度商业平台中，列表在整个页面中占比仅 40%左右。同样是广告投放平台的竞品巨量广告其列表页面占比为 70%左右，对竞低 30%，可见我们的列表区域屏效是很低的。屏效低直接影响到客户浏览效率，以百度商业平台优化师小王浏览推广计划列表的场景为例来说明：

「某个大客户一早就很焦虑的在如流上告诉小王一个在投的广告计划数据表现很差，希望他帮忙查找原因。小王打开 16 寸的笔记本在推广计划列表中搜索定位到该计划名称，横向扫视了这个计划的所有关键数据指标，心里对数据表现有了数。这时他想通过纵向对比其它同类表现优异的计划来尝试定位问题进而做出优化。」

上述浏览数据场景中，客户横向查看单行关键数据、纵向对比某些数据指标的行为对一屏能显示的行数有直接诉求，当列表页面占比低时，显示的行数、列数都有限，进而导致浏览、对比的效率非常低。

刚开始，我们尝试对列表页面布局进行全新布局调整，从而提升列表页面占比。然而，考虑到百度商业平台客户覆盖量大，在原列表页面直接进行大幅度布局优化，成本高且用户接受程度不可控。因此设计侧探索尝试全屏沉浸模式，让用户「看的更全面」。

1. 打造全屏交互框架，沉浸体验提屏效

用户在列表页面一键进入到沉浸的全屏交互框架中，列表页面占比提升至 90%。同时，我们还针对全屏沉浸模式给出了全新的紧凑型 UI 方案，通过采用文字按钮更轻量，缩减列高列宽更紧凑的设计手段，在 16 寸屏幕下，纵向实现展现行数从 8 行增加至 19 行，充分提升了空间利用率。

2. 多标签任务交互模式，无缝切换效率高

平台中大量涉及由某一项触发下钻到其他项的场景，平台原本的交互形式是打开新的浏览器页签去加载下钻页面。然而在全屏沉浸模式下，如依然保持外跳的交互，那客户查看数据时需先退出当前全屏沉浸模式，然后在外跳链接中再打开全屏模式，整体操作路径长效率低，因而需给出新的交互模式。我们借鉴浏览器页标签逻辑，提供全屏模式下的多任务标签卡，用户可在沉浸模式下，通过切换标签，完成数据管理，高效便捷。

二、查找数据更便捷

让我们继续跟随上述优化师小王的视角：

「小王通过对比分析以及和客户深度沟通后，发现问题在于该计划的部分关键词出价过低导致广告曝光不足。于是他打开关键词列表中，筛选出该计划下的出价低于 12 元的包含“鲜花”字样的全部关键词。」

在上述查找数据场景中，小王需要针对计划名称、出价、关键词名称三项发起复合筛选。而目前在百度商业平台中，这种复合筛选只能通过多次发起单个筛选来完成，而单个筛选就需 4 步，他需要三次发起单个筛选，共 12 步才能完成这次复合筛选，操作复杂且效率低下。

1. 组合筛选交互模式，筛选操作减步长

针对上述操作效率低下的问题，设计侧给出组合筛选交互模式。在组合筛选模式下，同样的筛选行为仅需点击筛选按钮，再操作窗口中 3 项筛选项，点击确定完成筛选，共 5 步即可完成，筛选操作较之前提效 58%。

2. 增加智能查询，自然语义下达指令，查询友好便捷

通过上述描述的场景不难发现，客户查找其实是有明确的思路的，这种思路一般是自然语言的表达，优化师需将自然语义转换成系统表单表达。与其让用户自己转化，不如直接满足他自然语义查询。通过咨询技术同学，确认了方案的技术可行性后，给出了智能查询方案，用户可通过自然语言自由表达查找诉求，平台智能过滤筛选数据，整个查找过程体验更友好便捷。