我們常以“ 心有靈犀 ”來(lái)形容與合作伙伴的默契配合，若我們的產(chǎn)品能與用戶達(dá)到同樣的默契，將極大地提升用戶在任務(wù)旅程中的流暢體驗(yàn)。
在B端體驗(yàn)設(shè)計(jì)領(lǐng)域，我們深知用戶對(duì)我們產(chǎn)品的期待──快速完成任務(wù)、即用即走。
然而，隨著業(yè)務(wù)需求和產(chǎn)品功能的不斷擴(kuò)展，流程復(fù)雜化、功能冗余、信息過(guò)載和引導(dǎo)不足等問(wèn)題逐漸浮現(xiàn)，這不僅增加了新用戶的學(xué)習(xí)成本，也使得老用戶喪失了使用產(chǎn)品時(shí)的專注和效率。
并致力于通過(guò)設(shè)計(jì)手段減少用戶在使用產(chǎn)品時(shí)的學(xué)習(xí)成本和操作負(fù)擔(dān)，旨在打造一個(gè)流暢、愉悅的體驗(yàn)環(huán)境，讓用戶每次使用都能保持輕松愉悅的工作狀態(tài)。
同時(shí)，我們也積極踐行集團(tuán)倡導(dǎo)的 “ 簡(jiǎn)單、順滑、激發(fā) ” 產(chǎn)品設(shè)計(jì)理念，通過(guò)在交互設(shè)計(jì)、業(yè)務(wù)組件等多個(gè)層面進(jìn)行來(lái)深入優(yōu)化和改進(jìn)，以達(dá)到產(chǎn)品與用戶之間的"心有靈犀"，讓用戶在使用過(guò)程中更加的得心應(yīng)手、更加快速高效的觸達(dá)并完成任務(wù)。
通常來(lái)說(shuō)一個(gè)順滑的交互對(duì)產(chǎn)品的體驗(yàn)提升的是非常大的，它允許用戶以直觀的方式理解產(chǎn)品的操作含義，在不依賴幫助文檔的情況下，也能輕松完成各項(xiàng)任務(wù)。
這種設(shè)計(jì)理念不僅提升了用戶體驗(yàn)，也確保了產(chǎn)品的高效率和便捷性，能夠使用戶迅速投入并快速完成工作，實(shí)現(xiàn)了真正的“即用即走”。
(1) 數(shù)字鍵盤，讓數(shù)據(jù)錄入更簡(jiǎn)單、更高效
相信很多產(chǎn)品設(shè)計(jì)人員都清楚選擇錄入的優(yōu)勢(shì)遠(yuǎn)大于手動(dòng)錄入。
在此之前，我們的工時(shí)填報(bào)頁(yè)面，由于可輸入信息精確到小數(shù)點(diǎn)后兩位，所以我們常用的計(jì)步器、選擇器、滑動(dòng)輸入等組件都無(wú)法在這里使用。對(duì)用戶而言，手動(dòng)逐項(xiàng)錄入數(shù)據(jù)的操作成本非常高。
在業(yè)務(wù)改版時(shí)，我們的體驗(yàn)設(shè)計(jì)師了解到舊版頁(yè)面信息錄入成本過(guò)高的問(wèn)題，于是提出了數(shù)字鍵盤錄入數(shù)據(jù)的方案「用戶在原本手動(dòng)錄入數(shù)據(jù)的基礎(chǔ)上，增加選擇錄入數(shù)據(jù)的能力，以此降低用戶錄入數(shù)據(jù)的操作負(fù)擔(dān)」。
-
作為數(shù)據(jù)錄入的組件，數(shù)字鍵盤適用于簡(jiǎn)短且整數(shù)的特殊場(chǎng)景下，如：數(shù)字錄入、百分比錄入。備選的數(shù)據(jù)信息以宮格布局呈現(xiàn)，用戶可以快速點(diǎn)擊數(shù)字鍵盤中需要填入的數(shù)字。相比下拉菜單和上下箭頭數(shù)字輸入框相比，更直觀，易用性更強(qiáng)。
-
對(duì)于擅長(zhǎng)鍵盤盲打的研發(fā)工程師類角色來(lái)說(shuō)，仍然可以通過(guò)物理鍵盤錄入數(shù)據(jù)；而對(duì)于不太熟練操作鍵盤的大多數(shù)用戶來(lái)說(shuō)，可以通過(guò)直觀的數(shù)字鍵盤點(diǎn)選錄入數(shù)據(jù)。數(shù)字鍵盤組件甚至還能幫助用戶自動(dòng)計(jì)算已填數(shù)據(jù)，實(shí)現(xiàn)一鍵補(bǔ)全。
-
數(shù)字鍵盤作為一種兼具選擇錄入便捷性和手動(dòng)輸入靈活性的數(shù)據(jù)錄入組件，為不同類型的用戶提供了高效、準(zhǔn)確的數(shù)據(jù)錄入體驗(yàn)，不僅提升了數(shù)據(jù)輸入的便捷性和準(zhǔn)確性，而且通過(guò)適應(yīng)不同用戶的操作習(xí)慣，增強(qiáng)了產(chǎn)品的普適性和用戶滿意度。
繼而我們也將數(shù)字鍵盤組件在其他使用場(chǎng)景進(jìn)行了拓展，比如，其他場(chǎng)景下數(shù)字鍵盤上集成了手動(dòng)錄入的輸入框，備選數(shù)據(jù)可以根據(jù)用戶設(shè)置的起止日期進(jìn)行自動(dòng)計(jì)算，不僅幫助用戶減輕了操作難度也極大節(jié)省了用戶的時(shí)間成本。
數(shù)字鍵盤經(jīng)過(guò)不斷的拓展與優(yōu)化，已經(jīng)成為用戶在多種場(chǎng)景下進(jìn)行數(shù)據(jù)錄入的利器。
在未來(lái)，我們將持續(xù)關(guān)注并探索數(shù)據(jù)錄入交互方式的優(yōu)化與改進(jìn)，致力于進(jìn)一步優(yōu)化信息錄入的體驗(yàn)，如當(dāng)下火爆的AI，來(lái)實(shí)現(xiàn)更加智能和自動(dòng)化的輸入解決方案，從而最大程度上讓用戶與產(chǎn)品交互默契、事半功倍。
(2) 在關(guān)鍵節(jié)點(diǎn)設(shè)置任務(wù)提示卡，給予用戶即時(shí)指引
很多大型B端產(chǎn)品的詳情頁(yè)在成熟期后都會(huì)面臨信息內(nèi)容多、分類復(fù)雜的問(wèn)題，這導(dǎo)致用戶需要滾動(dòng)多屏或者切換tab頁(yè)簽去查找信息，即便產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)已經(jīng)花了不少心血將信息布局做了優(yōu)化和重組，但也難以避免有些用戶查找關(guān)鍵信息費(fèi)時(shí)費(fèi)力，不清楚應(yīng)該在頁(yè)面哪一塊進(jìn)行哪些操作。
雖然IM、郵件等工具可以一定程度上解決信息的觸達(dá)，但用戶從其他平臺(tái)點(diǎn)擊網(wǎng)址鏈接跳轉(zhuǎn)到產(chǎn)品詳情頁(yè)后依然會(huì)面臨缺少明確的指引問(wèn)題。
-
針對(duì)以上用戶使用中的痛點(diǎn)，我們?cè)陧?yè)面中關(guān)鍵區(qū)域設(shè)置了一系列操作指引性的任務(wù)提示卡片，并在卡片上設(shè)置明確的引導(dǎo)文案及操作按鈕，以減少用戶因不熟悉產(chǎn)品功能或者頁(yè)面信息過(guò)多而找不到操作入口的問(wèn)題；
引導(dǎo)用戶點(diǎn)擊“去完成”、“去操作”等操作按鈕直接跳轉(zhuǎn)至應(yīng)該操作內(nèi)容模塊或相應(yīng)頁(yè)面去完成應(yīng)該完成的操作，這樣就使得不同用戶在不同環(huán)節(jié)完成相應(yīng)的任務(wù)，保證流程順暢的走下去。
-
任務(wù)提示卡作為一類高效的即時(shí)指引工具，已在多個(gè)用戶使用場(chǎng)景下發(fā)揮了關(guān)鍵作用，不僅幫助用戶提升了完成任務(wù)的效率，也在一定程度上緩解了用戶的焦慮。該組件的設(shè)計(jì)初衷是為了解決當(dāng)用戶面對(duì)復(fù)雜或不熟悉的操作時(shí)，為了用戶提供即時(shí)的指引。
在不同系統(tǒng)平臺(tái)的適配過(guò)程中，我們特別注重交互模式的靈活性和適應(yīng)性，以適應(yīng)不同的適用場(chǎng)景。例如，我們將傳統(tǒng)的卡片視圖優(yōu)化為列表視圖，并支持多個(gè)操作項(xiàng)，實(shí)現(xiàn)了用戶所見即所得的直觀體驗(yàn)。
經(jīng)過(guò)在多種場(chǎng)景下的實(shí)踐驗(yàn)證，任務(wù)提示卡已成為緩解用戶焦慮的一種手段。我們也認(rèn)識(shí)到，用戶焦慮直接影響到產(chǎn)品的可用性和用戶滿意度。
因此，我們會(huì)持續(xù)關(guān)注用戶焦慮產(chǎn)生的根源，不斷調(diào)整和優(yōu)化我們的設(shè)計(jì)策略，有目的有效率的降低用戶焦慮水平。
(3) 巧用浮層卡片，減少非必要的頁(yè)面跳轉(zhuǎn)
提到「鏈路」，相信很設(shè)計(jì)師都能想到縮短流程、簡(jiǎn)化操作步驟等手段。然而，隨著業(yè)務(wù)的復(fù)雜度提升，我們的很多使用流程變得越來(lái)越長(zhǎng)，用戶僅僅查看或者編輯一個(gè)簡(jiǎn)單的信息也需要打開新頁(yè)面，這無(wú)疑增加了用戶的操作成本。
在諸多項(xiàng)目實(shí)踐中，我們發(fā)現(xiàn)浮層卡片是一個(gè)非常靈活的組件，它可以在用戶需要時(shí)通過(guò)鼠標(biāo)懸停即可展開，用戶可以不用跳轉(zhuǎn)或打開新頁(yè)面就可以在浮層卡片中完成一些關(guān)鍵信息的查看或者編輯。
這種交互模式不僅可以減少用戶的操作步驟，還減少了產(chǎn)品鏈路和開發(fā)成本，在提升體驗(yàn)的同時(shí)也更好的效能業(yè)務(wù)。
在我們的平臺(tái)上，一些用戶雖然可以將自己經(jīng)常使用的應(yīng)用常駐到菜單欄上，但是受限于屏幕尺寸左側(cè)的菜單欄不能顯示太多常駐應(yīng)用。
-
當(dāng)用戶在切換一個(gè)常駐但因?yàn)槠聊怀叽缍鴽]有展示在菜單欄上的應(yīng)用時(shí)，需要先點(diǎn)擊更多【應(yīng)用圖標(biāo)】進(jìn)入更多頁(yè)面。
-
再定位到需要切換的應(yīng)用圖標(biāo)上進(jìn)行點(diǎn)擊才能完成整個(gè)【切換】的流程。
-
當(dāng)我們洞察到用戶使用菜單欄的痛點(diǎn)后，在后續(xù)的迭代優(yōu)化時(shí)。在更多應(yīng)用的圖標(biāo)上增加一個(gè)懸浮事件。
-
鼠標(biāo)懸浮時(shí)，它就像一個(gè)傳送門一樣將用戶需要切換的應(yīng)用呈現(xiàn)在浮層卡片上，用戶點(diǎn)擊所需的應(yīng)用即可完成應(yīng)用的切換。
【浮層卡片】作為一種靈活、高效的交互模式，在業(yè)務(wù)側(cè)得到能夠有效降低用戶重復(fù)操作的驗(yàn)證后，我們把它拓展到了很多的相似場(chǎng)景里。
經(jīng)過(guò)多場(chǎng)景的實(shí)踐，我們團(tuán)隊(duì)已將浮層卡片精煉為一種有效縮短用戶使用流程的交互模式，顯著提升了用戶操作效率。也被我們拓展到更多場(chǎng)景，以實(shí)現(xiàn)在更廣泛的應(yīng)用維度上為用戶提效。
二 創(chuàng)新業(yè)務(wù)組件設(shè)計(jì)，提升復(fù)雜場(chǎng)景下的數(shù)據(jù)可視化體驗(yàn)
隨著業(yè)務(wù)的不斷下鉆，不免會(huì)遇到一些復(fù)雜的使用場(chǎng)景，基礎(chǔ)的交互和組件已不能有效的解決用戶在使用中的問(wèn)題。
在一些既需要關(guān)注結(jié)構(gòu)化的概覽數(shù)據(jù)又要方便查看詳細(xì)數(shù)據(jù)的場(chǎng)景中，以及在一些數(shù)據(jù)關(guān)聯(lián)、任務(wù)串聯(lián)等場(chǎng)景中，設(shè)計(jì)側(cè)通過(guò)可視化、結(jié)構(gòu)化等設(shè)計(jì)手段探索出了一些新的業(yè)務(wù)組件，解決了數(shù)據(jù)概覽、數(shù)據(jù)關(guān)聯(lián)不清晰等問(wèn)題，為用戶構(gòu)建了直觀、易懂的使用體驗(yàn)。
(1) 信息概覽與Tab標(biāo)簽頁(yè)相遇，概覽&詳情均可兼得
在一些管理場(chǎng)景下會(huì)涉及到既需要查看各階段下不同狀態(tài)的概覽數(shù)據(jù)，又需要查看詳細(xì)數(shù)據(jù)的場(chǎng)景。
按照以往的交互，用戶可以用篩選器篩選出各階段下不同狀態(tài)數(shù)據(jù)再進(jìn)行查看對(duì)比，雖然篩選器可以篩選出這些多階段、多狀態(tài)的數(shù)據(jù)，但存在著篩選步驟繁瑣、多階段&多狀態(tài)的數(shù)據(jù)呈現(xiàn)都是棘手問(wèn)題。
我們最初使用了數(shù)據(jù)可視化的看板來(lái)呈現(xiàn)各階段下不同狀態(tài)的概覽信息，但這只解決了數(shù)據(jù)概覽的問(wèn)題，用戶還是需要點(diǎn)擊“詳情”才能跳轉(zhuǎn)至相應(yīng)的頁(yè)面。
-
體驗(yàn)設(shè)計(jì)師在一些項(xiàng)目中嘗試了將數(shù)據(jù)可視化看板與Tab標(biāo)簽頁(yè)的融合，這就形成了具有Tab切換功能的數(shù)據(jù)看板，用戶在查看概覽數(shù)據(jù)的同時(shí)也可以通過(guò)點(diǎn)擊切換查看各階段/狀態(tài)下的詳細(xì)數(shù)據(jù)。
-
在經(jīng)過(guò)用戶反饋和不同業(yè)務(wù)場(chǎng)景下的適配后，我們又針對(duì)小屏增加了折疊功能、折疊后狀態(tài)數(shù)據(jù)隱藏、寬度不夠時(shí)狀態(tài)數(shù)據(jù)隱藏等優(yōu)化。
-
以上數(shù)據(jù)看板與tab頁(yè)簽融合的方案，一方面解決了數(shù)據(jù)可視化的問(wèn)題，另一方面也解決了切換查看詳情數(shù)據(jù)的繁瑣操作。在明確了以上組件的價(jià)值點(diǎn)后，將其進(jìn)行延展并應(yīng)用到了一些具有共性的使用場(chǎng)景中。
通過(guò)將數(shù)據(jù)結(jié)構(gòu)化和tab標(biāo)簽頁(yè)的結(jié)合的方式，巧妙的解決了用戶在進(jìn)行數(shù)據(jù)概覽和查看詳細(xì)信息時(shí)可能遇到的繁瑣操作問(wèn)題。
這種模式不僅讓頁(yè)面信息結(jié)構(gòu)更加清晰，用戶無(wú)需跳轉(zhuǎn)，即可在當(dāng)前頁(yè)面內(nèi)，快速的查看概覽及詳情頁(yè)信息。
(2) 樹形連接線新范式，數(shù)據(jù)關(guān)系呈現(xiàn)簡(jiǎn)單明了
針對(duì)CICD等技術(shù)類產(chǎn)品中的存在的諸多數(shù)據(jù)關(guān)聯(lián)、任務(wù)串聯(lián)等復(fù)雜數(shù)據(jù)關(guān)系的難點(diǎn)，設(shè)計(jì)側(cè)巧妙的使用樹形連接線的可視化手段解決數(shù)據(jù)關(guān)聯(lián)不清晰的問(wèn)題，讓信息結(jié)構(gòu)更易懂，方便用戶理解和操作。
在我們的版本管理模塊中，用戶在需求規(guī)劃階段需要將交付的需求和開發(fā)分支進(jìn)行關(guān)聯(lián)，一個(gè)需求不僅可以與多個(gè)開發(fā)分支進(jìn)行關(guān)聯(lián)、多個(gè)需求也可以與多個(gè)應(yīng)用進(jìn)行關(guān)聯(lián)。這里的不僅要解決復(fù)雜的關(guān)聯(lián)關(guān)系，還要解決需求與開發(fā)分支可增刪的操作難點(diǎn)。
-
針對(duì)這樣的復(fù)雜多維使用場(chǎng)景，我們?cè)谠O(shè)計(jì)時(shí)借鑒了樹形連接線來(lái)解決需求與開發(fā)分支的復(fù)雜關(guān)聯(lián)關(guān)系，通過(guò)樹形連接線將需求與開發(fā)分支進(jìn)行串聯(lián)，讓復(fù)雜的關(guān)聯(lián)關(guān)系一目了然。
在解決了復(fù)雜的關(guān)聯(lián)的同時(shí)，在連接線上增加了「新增」及在表格操作列增加了「操作列」的操作來(lái)解決編輯等擴(kuò)展問(wèn)題。
樹形連接線作為一種解決數(shù)據(jù)可視化的手段有效解決了業(yè)務(wù)中的難點(diǎn)，同樣設(shè)計(jì)團(tuán)隊(duì)也將其拓展到了更多適用場(chǎng)景，幫助用戶提升信息查看和操作效率。
通過(guò)以上創(chuàng)新應(yīng)用，樹形連接線已成為提升數(shù)據(jù)可視化和用戶交互效率的重要設(shè)計(jì)元素。設(shè)計(jì)團(tuán)隊(duì)將繼續(xù)探索其在不同業(yè)務(wù)場(chǎng)景下的應(yīng)用潛力，以進(jìn)一步優(yōu)化用戶的信息讀取和決策過(guò)程。
以上兩組業(yè)務(wù)組件的設(shè)計(jì)思路充分體現(xiàn)了設(shè)計(jì)師對(duì)用戶訴求的深入洞察，并在設(shè)計(jì)上做出了突破。
設(shè)計(jì)師在對(duì)用戶場(chǎng)景深入分析后，巧妙地將現(xiàn)有組件的優(yōu)勢(shì)與用戶場(chǎng)景相結(jié)合，創(chuàng)造出了一系列新的業(yè)務(wù)組件，這些業(yè)務(wù)組件不僅解決了一系列共性問(wèn)題，也為未來(lái)的業(yè)務(wù)組件設(shè)計(jì)提供了新的可能性。
三 制定可持續(xù)的體驗(yàn)改進(jìn)策略
以上幾個(gè)是我們通過(guò)洞察用戶訴求，依靠設(shè)計(jì)手段改善用戶體驗(yàn)的典型案例。
想要持續(xù)而又高效的提升產(chǎn)品的用戶體驗(yàn)，僅憑零星的創(chuàng)意是不夠的，還需制定一套有效的設(shè)計(jì)策略，這套策略旨在培養(yǎng)設(shè)計(jì)團(tuán)隊(duì)成員的創(chuàng)新意識(shí)和體驗(yàn)思維能力，使設(shè)計(jì)團(tuán)隊(duì)能夠持續(xù)產(chǎn)出高質(zhì)量的用戶體驗(yàn)解決方案。
設(shè)計(jì)師理解需求時(shí)需從全局視角審視業(yè)務(wù)需求、產(chǎn)品目標(biāo)和用戶訴求，深入洞察產(chǎn)品體驗(yàn)旅程中的所有關(guān)鍵觸點(diǎn)，避免陷入只見樹木不見森林的誤區(qū)。通過(guò)多元的視角輔助我們了解用戶行為背后的真實(shí)動(dòng)機(jī)，從而提出更有效的解決方案。
(2) 鼓勵(lì)嘗試更多可能
在項(xiàng)目中，我們鼓勵(lì)設(shè)計(jì)師在滿足產(chǎn)品和業(yè)務(wù)需求的基礎(chǔ)上，打開思維的邊界去探索更多可能性。無(wú)論是對(duì)用戶的理解還是設(shè)計(jì)方向的探索，我們支持設(shè)計(jì)師不斷自問(wèn)，給予他們嘗試更多可能性的資源支持，以促使設(shè)計(jì)師們產(chǎn)出無(wú)懈可擊的解決方案。
在B端產(chǎn)品中，用戶對(duì)比較大的變化會(huì)產(chǎn)生抵觸心理，從心理學(xué)上來(lái)講：大家更喜歡保持現(xiàn)有的、已熟悉的行為模式和習(xí)慣。如果出現(xiàn)一些改進(jìn)比較大的優(yōu)化方案上線后，用戶并不一定都是照單全收，極端情形下還會(huì)出現(xiàn)用戶要求代碼回滾的情況。
因此，我們?cè)谠O(shè)計(jì)時(shí)不僅要解決業(yè)務(wù)需求，還要考慮用戶的學(xué)習(xí)成本和對(duì)變化的接受程度。必要時(shí)，需通過(guò)強(qiáng)化運(yùn)營(yíng)和落地最佳實(shí)踐，讓用戶意識(shí)到改變后的優(yōu)勢(shì)和收益來(lái)提升心理上的接受度。
(4) 沉淀與復(fù)用優(yōu)秀設(shè)計(jì)方案
我們會(huì)定期復(fù)盤并將在項(xiàng)目實(shí)踐中已經(jīng)被驗(yàn)證的優(yōu)秀、通用性高的方案（包括但不限于交互、視覺、業(yè)務(wù)組件等）定期匯總到設(shè)計(jì)組件庫(kù)以及模板庫(kù)中。通過(guò)評(píng)估這些方案的價(jià)值點(diǎn)和適用場(chǎng)景，設(shè)計(jì)師可以將這些經(jīng)過(guò)驗(yàn)證的方案作為備選，復(fù)用和延展到未來(lái)的項(xiàng)目中，為更多業(yè)務(wù)、更多產(chǎn)品賦能。
落地簡(jiǎn)單、順滑、激發(fā)的產(chǎn)品設(shè)計(jì)理念，我們不求一蹴而就，而是有意識(shí)的去關(guān)注用戶的問(wèn)題，持續(xù)不斷的優(yōu)化和改進(jìn)，用心對(duì)待每次微小的改進(jìn)，積少成多，最終會(huì)實(shí)現(xiàn)產(chǎn)品與用戶之間的“心有靈犀”。
希望以上分享能給從事在B端體驗(yàn)設(shè)計(jì)伙伴們帶來(lái)一些新思路、新思考。優(yōu)化、改進(jìn)的途徑有很多種，我們?cè)敢鈱⒋舜畏窒矸Q為拋磚引玉，更多還是需要我們深入到業(yè)務(wù)中，與產(chǎn)研同學(xué)協(xié)作一起產(chǎn)出更優(yōu)秀的解決方案。
