大廠B端實戰！提效90%的列表是如何設計的？

前言

為什么我們要做列表創新提效？

更多干貨學習：

列表是百度商業 B 端平臺最典型的模塊之一，據百度商業 B 端平臺埋點數據統計顯示，列表 PV 占平臺總 PV 的 40%，列表操作時長占平臺 47%。列表承載了客戶瀏覽數據、查找數據、管理數據的重要功能，是客戶重點使用和關注的區域。

然而據百度商業平臺體驗監測報告顯示，平臺列表模塊滿意度 53.9%，低于平臺平均滿意度分值（55.6%），不滿意歸因主要集中在性能卡頓、交互操作效率低兩方面。

基于以上兩方面的原因，我們從客戶視角出發，設定設計目標為列表體驗創新升級， 提升列表核心場景操作效率以及客戶滿意度。針對「瀏覽數據」「查找數據」「管理數據」三大核心場景分析量化客戶體驗痛點，通過打造全屏交互框架、創新設計 4 個交互模式、增加智能查詢等舉措，給客戶帶來「更全面」「更便捷」「更高效」的列表使用體驗，提升客戶滿意度，助力業務達成目標。

一、瀏覽數據 更全面

在百度商業平臺中，列表在整個頁面中占比僅 40%左右。同樣是廣告投放平臺的競品巨量廣告其列表頁面占比為 70%左右，對競低 30%，可見我們的列表區域屏效是很低的。屏效低直接影響到客戶瀏覽效率，以百度商業平臺優化師小王瀏覽推廣計劃列表的場景為例來說明：

「某個大客戶一早就很焦慮的在如流上告訴小王一個在投的廣告計劃數據表現很差，希望他幫忙查找原因。小王打開 16 寸的筆記本在推廣計劃列表中搜索定位到該計劃名稱，橫向掃視了這個計劃的所有關鍵數據指標，心里對數據表現有了數。這時他想通過縱向對比其它同類表現優異的計劃來嘗試定位問題進而做出優化。」

上述瀏覽數據場景中，客戶橫向查看單行關鍵數據、縱向對比某些數據指標的行為對一屏能顯示的行數有直接訴求，當列表頁面占比低時，顯示的行數、列數都有限，進而導致瀏覽、對比的效率非常低。

剛開始，我們嘗試對列表頁面布局進行全新布局調整，從而提升列表頁面占比。然而，考慮到百度商業平臺客戶覆蓋量大，在原列表頁面直接進行大幅度布局優化，成本高且用戶接受程度不可控。因此設計側探索嘗試全屏沉浸模式，讓用戶「看的更全面」。

1. 打造全屏交互框架，沉浸體驗提屏效

用戶在列表頁面一鍵進入到沉浸的全屏交互框架中，列表頁面占比提升至 90%。同時，我們還針對全屏沉浸模式給出了全新的緊湊型 UI 方案，通過采用文字按鈕更輕量，縮減列高列寬更緊湊的設計手段，在 16 寸屏幕下，縱向實現展現行數從 8 行增加至 19 行，充分提升了空間利用率。

2. 多標簽任務交互模式，無縫切換效率高

平臺中大量涉及由某一項觸發下鉆到其他項的場景，平臺原本的交互形式是打開新的瀏覽器頁簽去加載下鉆頁面。然而在全屏沉浸模式下，如依然保持外跳的交互，那客戶查看數據時需先退出當前全屏沉浸模式，然后在外跳鏈接中再打開全屏模式，整體操作路徑長效率低，因而需給出新的交互模式。我們借鑒瀏覽器頁標簽邏輯，提供全屏模式下的多任務標簽卡，用戶可在沉浸模式下，通過切換標簽，完成數據管理，高效便捷。

二、查找數據 更便捷

讓我們繼續跟隨上述優化師小王的視角：

「小王通過對比分析以及和客戶深度溝通后，發現問題在于該計劃的部分關鍵詞出價過低導致廣告曝光不足。于是他打開關鍵詞列表中，篩選出該計劃下的出價低于 12 元的包含“鮮花”字樣的全部關鍵詞。」

在上述查找數據場景中，小王需要針對計劃名稱、出價、關鍵詞名稱三項發起復合篩選。而目前在百度商業平臺中，這種復合篩選只能通過多次發起單個篩選來完成，而單個篩選就需 4 步，他需要三次發起單個篩選，共 12 步才能完成這次復合篩選，操作復雜且效率低下。

1. 組合篩選交互模式，篩選操作減步長

針對上述操作效率低下的問題，設計側給出組合篩選交互模式。在組合篩選模式下，同樣的篩選行為僅需點擊篩選按鈕，再操作窗口中 3 項篩選項，點擊確定完成篩選，共 5 步即可完成，篩選操作較之前提效 58%。

2. 增加智能查詢，自然語義下達指令，查詢友好便捷

通過上述描述的場景不難發現，客戶查找其實是有明確的思路的，這種思路一般是自然語言的表達，優化師需將自然語義轉換成系統表單表達。與其讓用戶自己轉化，不如直接滿足他自然語義查詢。通過咨詢技術同學，確認了方案的技術可行性后，給出了智能查詢方案，用戶可通過自然語言自由表達查找訴求，平臺智能過濾篩選數據，整個查找過程體驗更友好便捷。

三、管理數據 更高效

百度商業平臺的優化師人均帶中小客戶 100+，日常管理數據壓力巨大，這也對平臺操作效率提出了很高的要求。而目前列表行內操作以及批量操作都存在效率低下的痛點。我們接著以優化師小王為例：

「總算篩選查找到該計劃全部出價低的關鍵詞后，小王在列表中逐一選擇其中數據表現不好的關鍵詞，隨后修改這些關鍵詞的出價。」

小王完成這次修改價格的批量操作需 3 步：點擊選擇每一個要改正的關鍵詞所屬行前方的 checkbox→點擊批量操作下拉按鈕→點擊選擇所需的操作。某些時候，優化師是針對單行中若干數據進行編輯，而這些數據的行內操作分散在各列，鼠標橫滾距離長。

針對這些痛點，我們在全屏沉浸模式下，創新提出「跨行框選」、「右鍵菜單」、「快捷鍵」三交互模式，優化師可在頁面中根據訴求，隨時發起操作，使得原本低效的批量操作和行內操作簡單高效，有效緩解優化師帶戶壓力。

1. 跨行框選交互模式，批量操作減步長

針對以上痛點，設計提出跨行框選模式，客戶僅需框選要操作的行即可喚起操作菜單，批量操作由原先的 3 步操作減至 2 步，提效 33%。

2. 右鍵菜單聚類操作項，高頻操作快捷鍵，行內操作提效

同時，客戶在頁面中任何單元格內可直接點擊喚起右鍵菜單，菜單中按照客戶操作頻率以及功能相關性進行聚類，客戶無需左右拉動滾動條，直接選擇所需操作即可，大幅提升行內操作效率。

總結

在以上設計主張上線前，設計側聯合研發共同確認了埋點監控數據口徑，同時聯合 UER 制定了上線后敏捷調研問卷內容，借此定性定量驗證設計主張是否切實有效。

沉浸列表在商業 B 端平臺某模塊小流量試點上線后，統計數據顯示：

屏效提升：可見信息量提升 1.3 倍（16 寸屏幕下，由平均顯示 8 行到 19 行）；

操作效率提升：平均完成一次操作的縱向滾動距離，從原來的 550px 下降到 47px，提效約 90%。

在數據向好的情況下，我們快速推進沉浸式列表全量上線。全量上線一段時間即用戶熟悉使用后，我們在平臺中上線了敏捷調研問卷，回收客戶滿意度分值為 82.6%，遠高于之前的滿意度 53.9%。

此次設計項目，讓設計團隊看到唯有站在客戶視角，提供針對痛點的設計方案，用經營的思路服務好客戶，才能更好的助力業務實現目標。最后，感謝一起奮戰的商業平臺的小伙伴們，未來我們還會持續探索更多列表提效的設計手段，依托列表全屏沉浸模式帶來的高效便捷，為商業平臺的客戶們帶來更好更高效的體驗。

歡迎關注作者的微信公眾號：「百度MEUX」