列表是不少平臺必備的模塊之一，而提升列表的操作效率，將很大程度上提升客戶對平臺的潛在滿意度。這篇文章里，作者結(jié)合案例，梳理了如何實現(xiàn)列表體驗創(chuàng)新升級的過程，一起來看看吧。

一、前言

為什么我們要做列表創(chuàng)新提效？

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

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

基于以上兩方面的原因，我們從客戶視角出發(fā)，設定設計目標為列表體驗創(chuàng)新升級， 提升列表核心場景操作效率以及客戶滿意度。

針對「瀏覽數(shù)據(jù)」「查找數(shù)據(jù)」「管理數(shù)據(jù)」三大核心場景分析量化客戶體驗痛點，通過打造全屏交互框架、創(chuàng)新設計4個交互模式、增加智能查詢等舉措，給客戶帶來「更全面」「更便捷」「更高效」的列表使用體驗，提升客戶滿意度，助力業(yè)務達成目標。

二、瀏覽數(shù)據(jù)更全面

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

「某個大客戶一早就很焦慮的在如流上告訴小王一個在投的廣告計劃數(shù)據(jù)表現(xiàn)很差，希望他幫忙查找原因。小王打開16寸的筆記本在推廣計劃列表中搜索定位到該計劃名稱，橫向掃視了這個計劃的所有關(guān)鍵數(shù)據(jù)指標，心里對數(shù)據(jù)表現(xiàn)有了數(shù)。這時他想通過縱向?qū)Ρ绕渌惐憩F(xiàn)優(yōu)異的計劃來嘗試定位問題進而做出優(yōu)化?！?

上述瀏覽數(shù)據(jù)場景中，客戶橫向查看單行關(guān)鍵數(shù)據(jù)、縱向?qū)Ρ饶承?shù)據(jù)指標的行為對一屏能顯示的行數(shù)有直接訴求，當列表頁面占比低時，顯示的行數(shù)、列數(shù)都有限，進而導致瀏覽、對比的效率非常低。

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

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

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

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

平臺中大量涉及由某一項觸發(fā)下鉆到其他項的場景，平臺原本的交互形式是打開新的瀏覽器頁簽去加載下鉆頁面。然而在全屏沉浸模式下，如依然保持外跳的交互，那客戶查看數(shù)據(jù)時需先退出當前全屏沉浸模式，然后在外跳鏈接中再打開全屏模式，整體操作路徑長效率低，因而需給出新的交互模式。

我們借鑒瀏覽器頁簽邏輯，提供全屏模式下的多任務標簽卡，用戶可在沉浸模式下，通過切換標簽，完成數(shù)據(jù)管理，高效便捷。

三、查找數(shù)據(jù)更便捷

讓我們繼續(xù)跟隨上述優(yōu)化師小王的視角：

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

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

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

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

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

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

四、管理數(shù)據(jù)更高效

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

「總算篩選查找到該計劃全部出價低的關(guān)鍵詞后，小王在列表中逐一選擇其中數(shù)據(jù)表現(xiàn)不好的關(guān)鍵詞，隨后修改這些關(guān)鍵詞的出價?！?

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

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

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

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

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

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

五、總結(jié)

在以上設計主張上線前，設計側(cè)聯(lián)合研發(fā)共同確認了埋點監(jiān)控數(shù)據(jù)口徑，同時聯(lián)合UER制定了上線后敏捷調(diào)研問卷內(nèi)容，借此定性定量驗證設計主張是否切實有效。

沉浸列表在商業(yè)B 端平臺某模塊小流量試點上線后，統(tǒng)計數(shù)據(jù)顯示：

• 屏效提升：可見信息量提升1.3倍（16寸屏幕下，由平均顯示8行到19行）；
• 操作效率提升：平均完成一次操作的縱向滾動距離，從原來的550px下降到47px，提效約90%。

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

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