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

更多京東實戰(zhàn)：

一、前言

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

二、行云 3.0 設(shè)計的思考與實踐

1. 業(yè)務(wù)背景

作為京東自研的產(chǎn)研協(xié)作平臺，自 2018 年以來，行云在敏捷協(xié)同、devops 一體化以及應(yīng)用生態(tài)建設(shè)等領(lǐng)域著重發(fā)力，并在產(chǎn)品商業(yè)化上取得了初步成果。在業(yè)務(wù)快速擴展的同時，我們也意識到產(chǎn)品功能繁雜、使用低效等問題。結(jié)合行云 3.0 大版本升級的契機，我們把體驗優(yōu)化提上了日程。

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

2. 問題洞察

① 用戶角色分析

迭代模塊下參與協(xié)作的用戶包括項目經(jīng)理、產(chǎn)品經(jīng)理、UI 設(shè)計人員、研發(fā)人員以及測試人員等。一個迭代包含不同的工作事項，在規(guī)劃迭代時，一般項目經(jīng)理或者產(chǎn)品經(jīng)理擔(dān)任管理角色，并根據(jù)需求的優(yōu)先級規(guī)劃至不同的迭代，并拆分為各類工作事項和任務(wù)指派給相關(guān)的 UI 設(shè)計、研發(fā)、測試等具體執(zhí)行人員。

管理人員

在「迭代管理」場景下，迭代管理人員會實時關(guān)注迭代的整體進度，分析迭代進展情況，提早發(fā)現(xiàn)迭代的風(fēng)險和問題，及時調(diào)整資源和計劃，保證迭代穩(wěn)定的推進。

執(zhí)行人員

在「迭代協(xié)同」場景下，產(chǎn)品經(jīng)理、UI 設(shè)計、研發(fā)以及測試等任務(wù)執(zhí)行人員需要的快速查找到個人相關(guān)的工作事項，并即時更新工作事項的狀態(tài)，才能使迭代有條不紊的進行。

② 問題總結(jié)

了解了不同角色的關(guān)注點，結(jié)合線滿意度調(diào)研、平臺數(shù)據(jù)分析及體驗走查，我們總結(jié)以下問題：

頁面的布局結(jié)構(gòu)欠缺統(tǒng)籌規(guī)劃，難以支持業(yè)務(wù)的擴展。

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

基礎(chǔ)功能搭建不完善，協(xié)作成本高。

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

干擾項多，關(guān)鍵內(nèi)容展示屏效比低。

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

3. 優(yōu)化目標(biāo)

基于以上問題與業(yè)務(wù)規(guī)劃，我們確立了產(chǎn)品優(yōu)化的目標(biāo)

第一，統(tǒng)籌規(guī)劃現(xiàn)有產(chǎn)品能力，打造支持多種工作項的業(yè)務(wù)訴求。

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

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

4. 解決方案

① 解決支持多種工作項的業(yè)務(wù)訴求

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

我們首先引入 F 型網(wǎng)頁瀏覽模式，制定了視覺瀏覽動線，結(jié)合用戶的的使用數(shù)據(jù)和操作習(xí)慣將各功能點進行了合理的整合、排序。具體表現(xiàn)在：

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

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

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

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

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

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

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

不同團隊負責(zé)的業(yè)務(wù)領(lǐng)域不同，對信息字段有著不同的側(cè)重點。以看板視圖、列表視圖為例，我們增強了產(chǎn)品自定義展示能力，支持看板卡片自定義信息展示和表格自定義展示列的能力。

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

重塑設(shè)計價值觀

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

總結(jié)過往的迭代實踐經(jīng)驗，我們確定了高效、專業(yè)、清晰、親和的價值觀，重新升級行云設(shè)計系統(tǒng)，提升產(chǎn)品品質(zhì)。

弱化干擾項

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

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

沉淀新的設(shè)計語言

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

5. 上線反饋及后續(xù)規(guī)劃

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

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

三、總結(jié)

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