前言

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

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

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

基于以上兩方面的原因，我們從客戶視角出發(fā)，設(shè)定設(shè)計(jì)目標(biāo)為列表體驗(yàn)創(chuàng)新升級(jí)， 提升列表核心場(chǎng)景操作效率以及客戶滿意度。針對(duì)「瀏覽數(shù)據(jù)」「查找數(shù)據(jù)」「管理數(shù)據(jù)」三大核心場(chǎng)景分析量化客戶體驗(yàn)痛點(diǎn)，通過打造全屏交互框架、創(chuàng)新設(shè)計(jì) 4 個(gè)交互模式、增加智能查詢等舉措，給客戶帶來(lái)「更全面」「更便捷」「更高效」的列表使用體驗(yàn)，提升客戶滿意度，助力業(yè)務(wù)達(dá)成目標(biāo)。

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

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

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

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

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

1. 打造全屏交互框架，沉浸體驗(yàn)提屏效

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

2. 多標(biāo)簽任務(wù)交互模式，無(wú)縫切換效率高

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

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

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

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

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

1. 組合篩選交互模式，篩選操作減步長(zhǎng)

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

2. 增加智能查詢，自然語(yǔ)義下達(dá)指令，查詢友好便捷

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

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

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

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

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

針對(duì)這些痛點(diǎn)，我們?cè)谌脸两Ｊ较?，?chuàng)新提出「跨行框選」、「右鍵菜單」、「快捷鍵」三交互模式，優(yōu)化師可在頁(yè)面中根據(jù)訴求，隨時(shí)發(fā)起操作，使得原本低效的批量操作和行內(nèi)操作簡(jiǎn)單高效，有效緩解優(yōu)化師帶戶壓力。

1. 跨行框選交互模式，批量操作減步長(zhǎng)

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

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

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

總結(jié)

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

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

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

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

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

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

作者：百度MEUX