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

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

一、前言

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

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

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

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

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

2. 問題洞察

① 用戶角色分析

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

管理人員

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

執(zhí)行人員

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

② 問題總結(jié)

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

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

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

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

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

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

1. 老版的頁面整體上采用了色塊和卡片的內(nèi)容區(qū)分方式，色塊雖然起到了分割的作用，但也占用了很多顯示面積，導(dǎo)致實(shí)際內(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)品能力，打造支持多種工作項(xiàng)的業(yè)務(wù)訴求。

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

第三，解決信息展示效率低的問題，營(yíng)造高效、親和的使用體驗(yàn)

4. 解決方案

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

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

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

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

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

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

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

在迭代管理、查詢場(chǎng)景下，我們補(bǔ)齊了迭代列表缺失的功能模塊，強(qiáng)化了管理場(chǎng)景下的關(guān)鍵信息的透?jìng)鳎嵘芾硇省?/p>

1. 首先，補(bǔ)齊缺失的模塊名稱「迭代列表」，明確「迭代」的概念，增強(qiáng)用戶對(duì)「迭代」認(rèn)知。
2. 同時(shí)，重新梳理了迭代卡片的信息層級(jí)，突出起止時(shí)間、進(jìn)度等關(guān)鍵信息的透?jìng)鳎瑤椭芾韱T及時(shí)掌握迭代進(jìn)度。
3. 新增快捷搜索功能，有效解決在迭代數(shù)據(jù)過多時(shí)查詢效率低的問題。
4. 此外，降低了「新建迭代」按鈕的權(quán)重，畢竟在實(shí)際使用場(chǎng)景中每?jī)扇懿艜?huì)新建一個(gè)迭代，且只有權(quán)限的管理員才能新建迭代，偌大的按鈕對(duì)于其他普通用戶來說是一個(gè)非常大的干擾項(xiàng)。

增強(qiáng)自定義能力，滿足不同團(tuán)隊(duì)的使用差異

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

③ 營(yíng)造高效、親和的使用體驗(yàn)

重塑設(shè)計(jì)價(jià)值觀

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

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

弱化干擾項(xiàng)

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

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

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

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

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

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

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

三、總結(jié)

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