如何做好B端產品的體驗優化？來看京東行云的實戰案例總結！

本文結合產研協作工具「京東行云 3.0」體驗升級，分享一下京東行云團隊在降低用戶認知負擔、提高操作便捷性的一些思考與實踐。

更多京東實戰：

一、前言

相較于 C 端產品來說，企業級 B 端產品具有行業壁壘高、業務復雜、服務角色多等特點，對于很多設計師來說感覺無從下手，找不到切入點。在長期的項目實踐中我們發現，好用的 B 端產品設計主要體現在兩個方面：一是容易上手，不需要用戶花太多精力學習；二是操作便捷，用戶能夠輕松的完成操作，用完即走。因此，從降低認知負擔、提高操作便捷性入手提升產品體驗是一個適合的切入點。

二、行云 3.0 設計的思考與實踐

1. 業務背景

作為京東自研的產研協作平臺，自 2018 年以來，行云在敏捷協同、devops 一體化以及應用生態建設等領域著重發力，并在產品商業化上取得了初步成果。在業務快速擴展的同時，我們也意識到產品功能繁雜、使用低效等問題。結合行云 3.0 大版本升級的契機，我們把體驗優化提上了日程。

本次優化我們確定了從「團隊空間-迭代」模塊開始：一方面，「迭代」模塊是行云敏捷協作的核心場景之一，想要提升產研協同效率，「迭代」模塊是主要途徑之一；另一方面，業務側準備打造空間支持多種工作項類型的能力，現有的 2.0 版本的框架布局早已隨著業務擴展不堪重負，無法通過簡單的修修補補來滿足業務擴展和用不同使用場景下的體驗訴求。

2. 問題洞察

① 用戶角色分析

迭代模塊下參與協作的用戶包括項目經理、產品經理、UI 設計人員、研發人員以及測試人員等。一個迭代包含不同的工作事項，在規劃迭代時，一般項目經理或者產品經理擔任管理角色，并根據需求的優先級規劃至不同的迭代，并拆分為各類工作事項和任務指派給相關的 UI 設計、研發、測試等具體執行人員。

管理人員

在「迭代管理」場景下，迭代管理人員會實時關注迭代的整體進度，分析迭代進展情況，提早發現迭代的風險和問題，及時調整資源和計劃，保證迭代穩定的推進。

執行人員

在「迭代協同」場景下，產品經理、UI 設計、研發以及測試等任務執行人員需要的快速查找到個人相關的工作事項，并即時更新工作事項的狀態，才能使迭代有條不紊的進行。

② 問題總結

了解了不同角色的關注點，結合線滿意度調研、平臺數據分析及體驗走查，我們總結以下問題：

頁面的布局結構欠缺統籌規劃，難以支持業務的擴展。

1. 舊版的工具欄功能多而雜，且缺少合理的組織邏輯，體驗非常不好；
2. 工作項切換和篩選器在一行展示，導致了布局緊湊、擴展性差，面臨不得不調整；
3. 「工作項」「篩選器」「視圖切換」等控件使用不規范，容易造成困惑；

基礎功能搭建不完善，協作成本高。

1. 在實際產品的使用中，一些用戶缺少敏捷協作的了解，加上頁面中迭代列表的內容較為簡陋，出現了誤把迭代當成項目、版本來使用情況。
2. 迭代列表里關于關鍵信息透傳度不夠，沒有直觀體現出當前迭代的狀態、進度，增加了管理成本。此外，隨著迭代數據得增多，列表缺少篩選能力，查找、管理成本高。
3. 右側內容區，表格&看板視圖下缺少字段信息的個性化設置。

干擾項多，關鍵內容展示屏效比低。

1. 老版的頁面整體上采用了色塊和卡片的內容區分方式，色塊雖然起到了分割的作用，但也占用了很多顯示面積，導致實際內容展示屏占比低。
2. 另一方面「頁面中 tab 切換」、「標簽」、「按鈕」等元素使用過多高亮色，吸引了用戶的注意力，干擾頁面核心的內容展示。

3. 優化目標

基于以上問題與業務規劃，我們確立了產品優化的目標

第一，統籌規劃現有產品能力，打造支持多種工作項的業務訴求。

第二，完善迭代不同使用場景下的基礎能力，提升協同效率。

第三，解決信息展示效率低的問題，營造高效、親和的使用體驗

4. 解決方案

① 解決支持多種工作項的業務訴求

舊版的工具欄由于功能冗雜繁多，也缺少合理的組織邏輯，查詢效率較低。此外，工作項切換和篩選器在一行展示，導致了布局緊湊、擴展性差的問題。結合產品支持工作事項類型擴展的能力，重點優化工具欄結構，理梳理各功能點的親疏關系、調整視覺樣式。同時，提升了表格組件中不同字段的視覺差異化表達，使其符合用戶的使用習慣，減輕信息獲取負擔，提升查詢、操作的效率。

我們首先引入 F 型網頁瀏覽模式，制定了視覺瀏覽動線，結合用戶的的使用數據和操作習慣將各功能點進行了合理的整合、排序。具體表現在：

1. 將「數據概覽」前置，與優先級最高的「工作項」切換放在第一行的最左側，改為 tab 組件的樣式，解決工作項擴展的能力。通過「數據概覽」可視化工具，管理者和成員可以查看較為詳細的迭代概覽數據。
2. 其次，將篩選器、快捷搜索、高級篩選聚合在一起更好的發揮數據篩選能力，讓用戶可以快速的定位和使用，進一步提升查詢、操作效率。
3. 將「看板/列表視圖切換」移動至第二行的右側，此外我們也優化了組件的視覺表現，讓組件間的區分度更加明顯。

② 完善迭代不同使用場景下的基礎能力，提升協同效率。

一個迭代分為不同的階段，不同階段下對應著不同的協同場景，對應的管理者和普通用戶對產品的使用也有著不同的訴求，沿著用戶使用場景出發的思路，我們制定了不同的優化策略。具體從兩方面進行了優化：

補齊迭代列表缺失的功能模塊，降低管理成本

在迭代管理、查詢場景下，我們補齊了迭代列表缺失的功能模塊，強化了管理場景下的關鍵信息的透傳，提升迭代管理效率。

1. 首先，補齊缺失的模塊名稱「迭代列表」，明確「迭代」的概念，增強用戶對「迭代」認知。
2. 同時，重新梳理了迭代卡片的信息層級，突出起止時間、進度等關鍵信息的透傳，幫助管理員及時掌握迭代進度。
3. 新增快捷搜索功能，有效解決在迭代數據過多時查詢效率低的問題。
4. 此外，降低了「新建迭代」按鈕的權重，畢竟在實際使用場景中每兩三周才會新建一個迭代，且只有權限的管理員才能新建迭代，偌大的按鈕對于其他普通用戶來說是一個非常大的干擾項。

增強自定義能力，滿足不同團隊的使用差異

不同團隊負責的業務領域不同，對信息字段有著不同的側重點。以看板視圖、列表視圖為例，我們增強了產品自定義展示能力，支持看板卡片自定義信息展示和表格自定義展示列的能力。

③ 營造高效、親和的使用體驗

重塑設計價值觀

本次的體驗升級中，除了關注業務主流程效率的提升，也重新思考了對用戶的人文關懷。對于用戶來說日常工作帶來的壓力已經夠繁重了，希望通過設計降低用戶的身心負擔，為用戶營造一個高效、親和的使用氛圍。

總結過往的迭代實踐經驗，我們確定了高效、專業、清晰、親和的價值觀，重新升級行云設計系統，提升產品品質。

弱化干擾項

此次優化中，一方面，秉承著“如無必要，勿增實體”的原則，我們刪減了頁面沉余的功能、弱化了不必要的視覺干擾元素，讓頁面盡可能保持簡潔。另一方面，在相關數據的支持下，將頁面中更重要的元素進行強調、放大，提升頁面核心信息展示效率，營造高效、親和的體驗。

1. 首先去除了干擾用戶的色塊，不僅減少了頁面的割裂感，同時也增加了表格內容的展示面積。
2. 然后，將頁面中的高亮色進行了去色處理，比如 tab 切換，采用了不同字重文本和深淺色號來區分選中和非選中的狀態。
3. 同時，降低列表翻頁組件的高度，配合這些色塊的刪除，在單位顯示面積內新增了 2.75 行的內容顯示高度。

沉淀新的設計語言

隨著此次體驗升級的落地，我們也沉淀出了行云的新設計語言、設計價值觀，從顏色、字體、布局、刪格等多個維度進行優化，實現交互和視覺雙重體驗升級，傳達獨特的品牌理念，并共建出一份供設計師和前端工程師共同使用的行云前端組件。使行云平臺在多個應用場景中保持相同的風格，以少量人力成本，幫助設計師與前端工程師提升工作效率。

5. 上線反饋及后續規劃

除表格組件還有些細節沒有上線，其他優化點已分批次上線，整體的數據指標呈正向增長（uv 增長 10%，pv 增長 42%以上，用戶停留時長增 54%，用戶滿意度評分由 2.18 上升到 3.76，推薦愿意指數由 5.23 上升到 8.14），同時也收到了用戶的諸多好評。

以上策略都是針對「迭代」頁面進行的優化，所采用的新的頁面樣式，我們又在其他核心流程頁的面中驗證了通用性和擴展性，并生成模版。此次體驗升級產生的頁面布局樣式會在其他產品模塊優化過程中逐步推廣，敬請期待！

三、總結

行云的產品初衷就是讓產研協作更加順暢、高效，我們相信通過這次產品體驗升級能夠更好的幫助用戶降低用戶認知負擔、提高操作便捷性，進一步提升協作效率。基于本次「迭代」模塊積累的優化策略，接下來我們會繼續完善其他產品模塊中的不足，有針對性的進行設計聚焦、提升產品體驗，為用戶打造更高效的協作體驗，為業務創造更多的價值。