編輯導(dǎo)語：產(chǎn)品設(shè)計(jì)的目標(biāo)之一便是達(dá)成更加完善的用戶體驗(yàn)，進(jìn)而提升用戶粘性，推動(dòng)后續(xù)用戶的留存和轉(zhuǎn)化。作者深度復(fù)盤了他的項(xiàng)目，分享B端產(chǎn)品體驗(yàn)升級(jí)背后思考過程，希望可以帶給大家更多幫助！

BrokerCould是一款為金融券商提供客戶關(guān)系管理的SaaS產(chǎn)品，至今發(fā)展已有4年。市場不斷在變化，客戶對(duì)于產(chǎn)品服務(wù)的要求也在不斷變化，為了讓用戶有更好的使用體驗(yàn)，需要對(duì)產(chǎn)品進(jìn)行不斷的優(yōu)化創(chuàng)新。在2020年下半年，產(chǎn)品進(jìn)行了自上線以來規(guī)模最大的一次改版。

在這次改版中，我們對(duì)產(chǎn)品主要板塊進(jìn)行了體驗(yàn)上的升級(jí)改造，新增了BI和Marketing功能，產(chǎn)品能力大幅提升。本文將為你帶來這一過程中我們?cè)诋a(chǎn)品設(shè)計(jì)上的思考過程，出于保證產(chǎn)品隱私考量對(duì)于頁面中的一些字段信息進(jìn)行了替換處理。

一、為什么做體驗(yàn)升級(jí)

做出產(chǎn)品全面體驗(yàn)升級(jí)的決策并沒有那么容易，團(tuán)隊(duì)在經(jīng)過幾輪的會(huì)議討論后，才最終決定對(duì)產(chǎn)品進(jìn)行全面升級(jí)改造，產(chǎn)品進(jìn)行全面體驗(yàn)升級(jí)的原始驅(qū)動(dòng)力主要有以下三點(diǎn)：

1. ?NPS凈推薦值：作為一款金融垂直領(lǐng)域SaaS產(chǎn)品，客戶介紹是我們獲取新客戶的主要途徑之一，NPS凈推薦值也是我們長期關(guān)注的指標(biāo)，我們希望通過這次的體驗(yàn)優(yōu)化來提升產(chǎn)品的NPS值。
2. 品成熟期：產(chǎn)品經(jīng)過孵化期、成長期進(jìn)入到成熟期，在這個(gè)階段產(chǎn)品功能趨于穩(wěn)定，讓我們有更多的時(shí)間來優(yōu)化打磨產(chǎn)品，提升產(chǎn)品的用戶體驗(yàn)。
3. 海外戰(zhàn)略：產(chǎn)品國內(nèi)市場發(fā)展受限，業(yè)務(wù)拓展重心向海外市場轉(zhuǎn)移，產(chǎn)品交互和視覺上需要針對(duì)海外用戶的使用習(xí)慣進(jìn)行調(diào)整（關(guān)于海外用戶對(duì)視覺風(fēng)格傾向的用研結(jié)論顯示，海外用戶更傾向于Chrome及谷歌系產(chǎn)品風(fēng)格）。

二、產(chǎn)品現(xiàn)有問題分析

解決問題的前提是定位出產(chǎn)品中真正的問題。只有清楚的了解產(chǎn)品的現(xiàn)狀，才能提出優(yōu)質(zhì)的解決方案。因此在項(xiàng)目啟動(dòng)后，我們就開始了對(duì)產(chǎn)品現(xiàn)有問題的分析和整理，信息來源于以下三個(gè)方向：

1. 客戶反饋：通過客戶成功人員收集客戶反饋，深入地了解客戶期望與客戶體驗(yàn)之間的差距，定位出產(chǎn)品存在的體驗(yàn)問題。
2. 數(shù)據(jù)分析：分析產(chǎn)品在接入GrowingIO后產(chǎn)生的真實(shí)數(shù)據(jù)，直觀地洞察用戶行為，分析異常數(shù)據(jù)背后的原因。
3. 競品分析：對(duì)比分析Salesforce、HubSpot、Zoho等相關(guān)競品，找出與之相比我們產(chǎn)品中存在的不足之處和潛在的機(jī)會(huì)點(diǎn)。

三、明確改版設(shè)計(jì)目標(biāo)

產(chǎn)品沒有目標(biāo)就沒有前進(jìn)方向，如果只是一個(gè)接一個(gè)的做不同的功能，只會(huì)把產(chǎn)品做成一個(gè)功能的集合，而不會(huì)勁往一個(gè)方向使。

經(jīng)過前期的市場調(diào)研和競品分析，再結(jié)合我們自身掌握的資源和產(chǎn)品現(xiàn)狀，我們確定了新階段的產(chǎn)品目標(biāo)。產(chǎn)品目標(biāo)是新階段我們對(duì)于產(chǎn)品形態(tài)的全新定位，也是我們后續(xù)進(jìn)行改版設(shè)計(jì)的準(zhǔn)則。

新階段產(chǎn)品目標(biāo)關(guān)鍵詞：

• 高效管理工具：B端產(chǎn)品的核心價(jià)值在于降本提效，通過交互流程優(yōu)化、引入智能助手等方式將用戶從繁瑣的基礎(chǔ)工作中解放出來，提升用戶日常工作效率，為客戶帶來實(shí)際的價(jià)值。
• 有溫度的產(chǎn)品：關(guān)注用戶使用產(chǎn)品時(shí)的情緒，產(chǎn)品的功能服務(wù)于用戶需求的同時(shí)，更注重情感的交流，讓用戶在產(chǎn)品使用過程更輕松、順暢。
• 差異化的能力：增強(qiáng)產(chǎn)品能力、優(yōu)化產(chǎn)品體驗(yàn)，與競爭對(duì)手形成明顯區(qū)別，獲取競爭優(yōu)勢(shì)，讓產(chǎn)品突出重圍。

四、改版設(shè)計(jì)方向

我們無意于僅做表層視覺的優(yōu)化，根據(jù)產(chǎn)品屬性、特征以及現(xiàn)實(shí)狀況，我們圍繞“高效管理工具、有溫度的產(chǎn)品、差異化的能力”三個(gè)關(guān)鍵點(diǎn)，對(duì)目標(biāo)進(jìn)行了分解，對(duì)應(yīng)到具體的頁面升級(jí)改造上，對(duì)部分功能進(jìn)行了重構(gòu)優(yōu)化，對(duì)視覺表現(xiàn)進(jìn)行了全面的升級(jí)。

五、優(yōu)化方案展示

1. 頁面自定義，打造專屬工作臺(tái)

1）首頁優(yōu)化

在產(chǎn)品最初的階段，我們并沒有一個(gè)真正意義上的首頁，而是出于用戶實(shí)際的使用場景，將用戶最常訪問的客戶列表頁作為進(jìn)入產(chǎn)品后的第一個(gè)頁面。在后續(xù)產(chǎn)品運(yùn)營過程中，有一些客戶提出需要一個(gè)能統(tǒng)一查看客戶跟進(jìn)情況及業(yè)績排行等信息的頁面，方便公司對(duì)銷售工作進(jìn)行匯總管理。

獲取到用戶的實(shí)際需求后，我們決定用首頁來承載這些功能模塊，開始階段我們打算只在首頁放置一些通用性強(qiáng)的功能模塊，但后續(xù)客戶不斷提出更為定制化的需求，首頁也變得越來越不可控。

舊版首頁的形成

產(chǎn)品設(shè)計(jì)一旦進(jìn)入到這種模式，對(duì)于產(chǎn)品研發(fā)團(tuán)隊(duì)和用戶而言都是一種災(zāi)難。為了滿足客戶需求，產(chǎn)品研發(fā)團(tuán)隊(duì)無法避免會(huì)做一些客戶的定制功能的開發(fā)，這類定制開發(fā)十分占用產(chǎn)品研發(fā)資源，影響正常的產(chǎn)品迭代節(jié)奏，而最終呈出的大雜燴式的首頁也談不上什么用戶體驗(yàn)。

2） 轉(zhuǎn)變方向，重回以人為本的體驗(yàn)設(shè)計(jì)

舊版首頁框架是圍繞業(yè)務(wù)架構(gòu)建立的，在這次改版中，我們希望基于每一個(gè)使用者的視角，來建立新的首頁框架。在建立框架之前，首先我們需要明確的是，新版首頁的定位是什么？

我們對(duì)新版首頁的定位是提升工作效率方便用戶快速開展工作的平臺(tái)，基于這個(gè)定位，新版首頁需要考慮到不同角色對(duì)首頁的不同功能需求。不同角色因其工作職責(zé)和內(nèi)容的差異，對(duì)其而言同樣一個(gè)功能板塊的重要程度是不一樣的。一個(gè)內(nèi)容統(tǒng)一固定的首頁并不能滿足所有角色的工作需要，我們需要設(shè)計(jì)一個(gè)更為靈活的首頁，自定義的需求順應(yīng)而生。

新版設(shè)計(jì)框架

為此我們分別找到對(duì)應(yīng)角色的用戶，調(diào)研他們的日常工作流程（具體到每天、每周、每月的工作流程），以便更加深入了解他們的需求?；谇懊鎸?duì)用戶工作流程的梳理，基本上可以判斷出各個(gè)角色關(guān)注的核心數(shù)據(jù)和常用功能。

不同角色工作流程

隨著產(chǎn)品的持續(xù)迭代，產(chǎn)品業(yè)務(wù)種類增多，業(yè)務(wù)流程變得復(fù)雜，用戶處理業(yè)務(wù)時(shí)往往需要在多個(gè)頁面間進(jìn)行來回切換，在一定程度上影響著用戶的工作效率。其實(shí)用戶常用的功能并不多，完全可以將他們迫切需要的功能或數(shù)據(jù)展現(xiàn)到首頁，方便用戶開展工作。

基于前期對(duì)不同角色用戶日常工作流程的調(diào)研，我們抽象歸納出不同角色的工作路徑，整理出他們對(duì)功能、數(shù)據(jù)的不同需求，將其中高價(jià)值的部分做成組件，匯總起來搭建首頁組件庫。用戶在首頁配置頁可以根據(jù)自己的工作需要挑選出相應(yīng)的組件，配置自己的專屬首頁。

布局模式選擇

在首頁的配置頁面，可以進(jìn)行卡片組件的添加、編輯、拖拽調(diào)整位置等操作。每次設(shè)置只會(huì)應(yīng)用于個(gè)人視圖，不會(huì)影響團(tuán)隊(duì)中其他成員的視圖。

首頁編輯頁示意圖

最后我們一起來看看不同布局模式下首頁的實(shí)際效果。

首頁三列布局實(shí)際效果圖

首頁兩列布局(左寬)實(shí)際效果圖

2. 體驗(yàn)流程優(yōu)化，提升用戶體驗(yàn)

1）列表頁優(yōu)化

對(duì)于B端用戶而言，來后臺(tái)主要目的之一就是對(duì)數(shù)據(jù)進(jìn)行查閱和操作。列表頁可以查看和處理大量的數(shù)據(jù)，常有導(dǎo)航至詳情的作用。用戶可在列表頁對(duì)數(shù)據(jù)進(jìn)行篩選、比對(duì)、新增、分析、下鉆至數(shù)據(jù)完整詳情頁等操作。因此幫助用戶更高效的查看、處理、查找數(shù)據(jù)對(duì)于提升B端用戶的操作效率有著舉足輕重的作用。

B端用戶都是產(chǎn)品的重度使用者，一個(gè)每天會(huì)被使用到幾十次的功能，操作步驟是5步還是3步，會(huì)帶來明顯的體驗(yàn)差異。很多看似合理的設(shè)計(jì)，在高頻使用的場景下，就開始暴露出問題。

將自己武裝成重度使用產(chǎn)品的用戶，進(jìn)入到打造高效信息管理列表頁的實(shí)戰(zhàn)階段，從實(shí)際使用者的角度出發(fā)分析并定義問題，尋找設(shè)計(jì)突破口。

原有列表頁問題分析

在定位出列表頁存在的問題后，針對(duì)問題點(diǎn)提出相應(yīng)的改進(jìn)優(yōu)化方案。列表頁的改版優(yōu)化主要圍繞列表頁的三大組成部分篩選器、工具欄、表格來進(jìn)行。

2）篩選器-高效、便捷的篩選體驗(yàn)

篩選器的存在對(duì)列表頁來說是非常重要的，它可以幫助用戶在列表頁茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位。對(duì)列表數(shù)據(jù)進(jìn)行快速的劃分，縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間。

舊版篩選器是產(chǎn)品中用戶吐槽很多的一個(gè)點(diǎn)，舊版篩選器固定展示在列表頁的左側(cè)，將所有的篩選字段依次羅列出來。在進(jìn)行篩選操作時(shí)需要先選中篩選字段點(diǎn)擊展開，然后再對(duì)篩選項(xiàng)進(jìn)行操作，交互步驟較為繁瑣。缺少針對(duì)篩選項(xiàng)的排序功能，在篩選時(shí)需要花費(fèi)大量時(shí)間來挨個(gè)尋找自己要用的篩選項(xiàng)，實(shí)際使用體驗(yàn)不佳。為了用戶更好的篩選場景體驗(yàn)，我們選擇對(duì)列表頁的篩選功能進(jìn)行優(yōu)化。

設(shè)計(jì)之前我們對(duì)市面常見篩選器形式進(jìn)行了調(diào)研，為后續(xù)設(shè)計(jì)提供參考。

常見篩選器分析

在我們產(chǎn)品的實(shí)際業(yè)務(wù)場景中，每一個(gè)表單字段都有可能成為用戶的篩選條件之一，但是大部分情況下用戶在篩選時(shí)只會(huì)使用三到四個(gè)篩選項(xiàng)結(jié)合進(jìn)行篩選，這幾個(gè)篩選項(xiàng)也基本上是如時(shí)間、地址、客戶級(jí)別、客戶狀態(tài)這類的高頻篩選字段。

因?yàn)楹Y選功能是用戶進(jìn)入列表頁會(huì)頻繁使用到的一個(gè)功能，所以篩選操作的便捷性是我們?cè)谠O(shè)計(jì)新版篩選器時(shí)著重考慮的一個(gè)點(diǎn)。

通過分析不同類型篩選器的優(yōu)劣再結(jié)合到我們實(shí)際的業(yè)務(wù)場景，設(shè)計(jì)出更為高效與便捷的新版篩選器，新版篩選器改動(dòng)主要有以下三點(diǎn)：

1. 浮層式篩選器：新版篩選器位置由原本的固定在列表頁左側(cè)改為通過點(diǎn)擊按鈕觸發(fā)的浮層，這樣的改動(dòng)能夠擴(kuò)大表格橫向?qū)挾?，表格在橫向上能展示更多的字段信息，改動(dòng)對(duì)于后續(xù)新增的行內(nèi)快捷編輯功能也更為友好。
2. 選項(xiàng)平鋪：在原來篩選器使用中就有客戶反應(yīng)這種勾選篩選項(xiàng)以后才能展開篩選項(xiàng)內(nèi)容進(jìn)行篩選的交互方式很不方便，在新的篩選器中我們選擇將部分篩選字段平鋪展示，這樣能簡短操作步驟，提升交互效率。
3. 篩選項(xiàng)的增刪與排序：新增篩選項(xiàng)的增刪與排序功能后，用戶可以根據(jù)自己的工作需要將自己常用篩選項(xiàng)進(jìn)行排序后固定展示，不用在尋找篩選項(xiàng)上花費(fèi)大量時(shí)間。

新版篩選器

3）工具欄-空間與布局的合理安排

舊版設(shè)計(jì)中列表工具欄空間浪費(fèi)較多，壓縮了表格區(qū)域空間，我們希望通過優(yōu)化頂部操作區(qū)域使空間利用更合理。列表工具欄大概有兩個(gè)模式，一種是單行模式，節(jié)約縱向空間，一種是雙行模式，適用于內(nèi)容量較多的情況。

在設(shè)計(jì)過程中我們分別嘗試了兩種模式，我們產(chǎn)品的內(nèi)容量在單行布局下顯得十分局促，在雙行模式下更滿足元素排序邏輯，所以我們還是選擇了雙行模式。

在雙行模式下，我們選著將標(biāo)題、視圖、新增等優(yōu)先級(jí)高的元素放在第一行。

表格工具、篩選、表格信息等優(yōu)先級(jí)相對(duì)較低的內(nèi)容放在第二行，為了節(jié)省縱向空間，對(duì)第二行的內(nèi)容進(jìn)行了弱化處理。為了確保搜索的全局性，選擇將搜索放在第一行，不受其他篩選項(xiàng)的影響。

列表工具欄

4）表格-最優(yōu)信息密度與快捷編輯

我們?yōu)橛脩籼峁┝恕熬o湊”、“舒適”和“寬松”這三種表格模式選擇，同時(shí)滿足用戶在“效率型”“閱讀型”“展示型”等不同頁面場景的需求。我們還未表格新增行內(nèi)快捷編輯功能，編輯信息在列表頁即可完成，不用再進(jìn)入詳情頁進(jìn)行修改，簡化了步驟，提升用戶工作效率提升。

表格閱讀模式

除了上述的改動(dòng)，我們還為列表頁新增了看板視圖模式，看板試圖模式在商機(jī)等場景有很好的應(yīng)用，最后讓我們一起看看優(yōu)化后的列表頁。

列表頁(表格視圖模式)

列表頁(看板視圖模式)

5）詳情頁優(yōu)化

原版的詳情頁為在新頁全屏展示，優(yōu)化為詳情頁在當(dāng)前頁面中展開顯示的方式，可以讓用戶不必經(jīng)常切換頁面，直接通過點(diǎn)擊下方列表中的客戶名來進(jìn)行快速切換。

新版詳情頁查看模式

6）信息降噪，讓界面信息更聚焦

詳情頁需要承載的信息、功能繁多，但是單頁面承載能力有限，一旦內(nèi)容過多，就會(huì)出現(xiàn)焦點(diǎn)不突出，內(nèi)容不清晰的情況。這無疑增加了用戶的思考時(shí)間，降低了工作效率。那么如何改善用戶體驗(yàn)，讓其能夠高效且舒適地使用我們的產(chǎn)品呢？

加強(qiáng)重點(diǎn)、信息降噪是保持信息干凈清晰，更好觸達(dá)用戶的保證。通過強(qiáng)化頁面內(nèi)的有效信息，降低多余元素干擾，從而提升頁面內(nèi)的“信噪比”，以達(dá)到功能與信息有效傳遞，降低用戶理解成本，提高產(chǎn)品操作效率。

提升“信噪比”不能以犧牲用戶正常的信息獲取需求為代價(jià)，當(dāng)頁面元素太多放不下，除了增加產(chǎn)品頁面數(shù)，我們可以嘗試運(yùn)用動(dòng)效，在同一頁面上擴(kuò)大產(chǎn)品的內(nèi)容范圍。

動(dòng)態(tài)擴(kuò)展內(nèi)容范圍

舊版產(chǎn)品中跟進(jìn)記錄模塊是將整個(gè)發(fā)布控件完整的展現(xiàn)出來，在新版設(shè)計(jì)中我們將詳情頁由原本的新頁全屏展示優(yōu)化為當(dāng)前頁面展開的抽屜形式，詳情頁布局空間也因此變小，新版設(shè)計(jì)中如果再將發(fā)布控件完整的展現(xiàn)出來，由于控件本身占據(jù)空間較大，其他內(nèi)容的展示空間會(huì)變得很局促。

因此在新版設(shè)計(jì)中，我們選擇只將根據(jù)記錄的輸入框固定展示，將跟進(jìn)方式選擇、發(fā)布按鈕這些元素都暫時(shí)隱藏起來，當(dāng)用戶點(diǎn)擊輸入框觸發(fā)發(fā)布控件時(shí)，再擴(kuò)展為完整的發(fā)布控件形態(tài)。這樣的改動(dòng)既保證了跟進(jìn)記錄功能的完整，也保證了頁面信息的干凈清晰。

動(dòng)態(tài)記錄模塊優(yōu)化

出于用戶長期使用中形成的使用習(xí)慣，我們并沒有大幅調(diào)整詳情頁的頁面結(jié)構(gòu)，在新版設(shè)計(jì)中主要優(yōu)化信息的呈現(xiàn)和細(xì)節(jié)交互，通過細(xì)節(jié)優(yōu)化來提升用戶實(shí)際體驗(yàn)。

詳情頁

3. 組件優(yōu)化，從底層提升效率

在2年前，為了提升設(shè)計(jì)輸出的一致性以及提高和下游開發(fā)同學(xué)的對(duì)接效率，我們搭建了UI組件庫。舊版組件庫相對(duì)較為基礎(chǔ)，和我們自身的業(yè)務(wù)貼合度不高。

新版組件庫為解決實(shí)際問題而生，基于B端產(chǎn)品特性和自身業(yè)務(wù)特點(diǎn)，確定組件庫清晰、靈活、效率、優(yōu)雅的設(shè)計(jì)原則，對(duì)如地址選擇、人員選擇、時(shí)間選擇等20余個(gè)組件進(jìn)行了設(shè)計(jì)優(yōu)化。我們希望用戶使用新版組件更高效地去解決問題，并且從中獲得愉悅的感受。

新版組件庫設(shè)計(jì)思路

1）組件優(yōu)化示例-字段選擇組件

產(chǎn)品中如列表頁配置表頭顯示內(nèi)容、后臺(tái)配置默認(rèn)顯示字段等很多場景都需要進(jìn)行字段選擇。不同場景之間的功能需求也有所區(qū)別，有的需要能對(duì)選擇后的字段進(jìn)行排序，有的對(duì)已選擇的字段有數(shù)量限制。

舊版設(shè)計(jì)中是使用穿梭框來進(jìn)行字段選擇，為了滿足這些穿梭框能力之外的功能需求，我們對(duì)穿梭框進(jìn)行了改造，產(chǎn)品中因此產(chǎn)生了幾個(gè)衍生版本的穿梭框組件，整體性差，不成體系。

在我們產(chǎn)品實(shí)際的用戶使用環(huán)境中，可選字段數(shù)量經(jīng)常能達(dá)到七八十個(gè)字段。這么多字段的情況下選用穿梭框進(jìn)行字段選擇效率很低。

2）新版設(shè)計(jì)中

1.側(cè)重的將可選字段區(qū)域占比擴(kuò)大，并將字段平鋪展開，這樣可以展示更多的可選字段，更從容、高效的進(jìn)行字段選擇。

2.在已選字段區(qū)域，將排序、限制已選字段數(shù)量等功能統(tǒng)一設(shè)計(jì)，保持交互的統(tǒng)一性。

3.新增搜索功能，方便用戶快速選擇目標(biāo)字段。

新版字段選擇組件

應(yīng)用實(shí)例

3）組件優(yōu)化示例-地址選擇組件

地址選擇是新建表單中的常見填寫項(xiàng)，舊版地址選擇組件缺少搜索功能，級(jí)聯(lián)選擇的選擇方式效率低，在列表頁中進(jìn)行篩選時(shí)舊版地址選擇組件不能支持多選。

在新版設(shè)計(jì)中我們針對(duì)這些問題進(jìn)行了相應(yīng)的優(yōu)化：

1. 地址信息平鋪展開，提高選擇效率
2. 地址選擇組件新增搜索功能
3. 添加復(fù)選框，支持篩選場景下的多選需求

新版地址選擇組件

4）組件優(yōu)化示例-下拉選擇組件

在類似于審批人選擇這類場景，我們除了可以選擇具體的“成員”為審批人外，同時(shí)可以選擇“角色”或“部門”作為審批人，這樣可避免因成員離職變動(dòng)導(dǎo)致審批流失效。

在一個(gè)組件中同時(shí)選擇三種不同類型的數(shù)據(jù)，舊版下拉選擇組件是不支持的。舊版設(shè)計(jì)中我們的解決方案是用兩個(gè)選擇組件配合使用來達(dá)到這樣的效果，先選擇審批人的類別，再選擇具體的審批選項(xiàng)。

這種交互方式的無疑體驗(yàn)不好，新版設(shè)計(jì)中我們給選擇器新增了Tab，通過Tab切換來區(qū)分選擇不同類型的數(shù)據(jù)。

新版下拉選擇組件

新版組件庫有一套全新的設(shè)計(jì)語言，從設(shè)計(jì)原則到字體排版，從交互到文案，從動(dòng)效到樣式，從組件到設(shè)計(jì)工具……

4. 幫助引導(dǎo)系統(tǒng)化、體系化

大多數(shù)的B端產(chǎn)品，業(yè)務(wù)邏輯都非常復(fù)雜，為了滿足復(fù)雜業(yè)務(wù)邏輯的需要，設(shè)計(jì)的業(yè)務(wù)流程和產(chǎn)品頁面也相對(duì)復(fù)雜，為了讓用戶在使用產(chǎn)品時(shí)能方便、快捷的完成任務(wù)，在客戶使用產(chǎn)品前會(huì)安排專門的實(shí)施人員對(duì)用戶進(jìn)行產(chǎn)品知識(shí)培訓(xùn)。盡管提供了培訓(xùn)，用戶在使用產(chǎn)品過程中或多或少還會(huì)遇到問題。

這時(shí)候一個(gè)好的幫助引導(dǎo)系統(tǒng)存在就很有必要，舊版產(chǎn)品中幫助功能是一個(gè)很小的模塊，當(dāng)用戶產(chǎn)生疑問時(shí)，引導(dǎo)他去幫助中心查閱資料，這種方案顯然不太高效，幫助中心是按產(chǎn)品功能邏輯排列說明文檔，定位問題答案十分不易。

用戶根本訴求是：能快速定位到問題的答案，排解自己的疑惑。因此我們仔細(xì)詢問過用戶疑惑感來源的方方面面，構(gòu)建了構(gòu)建了基于場景識(shí)別的幫助引導(dǎo)系統(tǒng)。

1）簡單問題，就地解決

如名稱解釋、操作提示等簡單問題，提前預(yù)判問題點(diǎn)，給出輕量化的快速解答，就地化解疑惑。若疑惑未被消除，提供入口，將用戶引導(dǎo)至該問題對(duì)應(yīng)的詳細(xì)說明文檔。

示例一

2）因地制宜 ，快捷訪問

我們對(duì)全局幫助面板進(jìn)行升級(jí)，它的形式不再是一成不變，而是根據(jù)用戶當(dāng)前訪問的頁面，給出當(dāng)前頁面用戶可能出現(xiàn)問題指引和快速開始教程，幫助用戶快速解決問題。

示例二

3）復(fù)雜功能 ，視頻講解

在如圖表配置、數(shù)據(jù)工場這類流程和邏輯復(fù)雜的頁面，通過文字來給用戶完善的引導(dǎo)往往需要長篇大論。在這類頁面我們給用戶提供視頻講解來幫助用戶快速上手，相對(duì)于文字而言視頻的講解更形象易懂。

示例三

4）空頁面，無形的引導(dǎo)

最好的引導(dǎo)是無形的，不強(qiáng)制要求用戶完成教學(xué)任務(wù)，將空頁面作為用戶引導(dǎo)流程的一個(gè)起點(diǎn)，將空頁面設(shè)計(jì)為介紹產(chǎn)品功能，引導(dǎo)用戶的模塊。

示例四

最后我們還有一個(gè)強(qiáng)大的后方——幫助中心，幫助中心是我們整個(gè)幫助引導(dǎo)系統(tǒng)中重要的部分之一。在這里我們?yōu)橛脩籼峁┝烁鞣N各樣的幫助形式和學(xué)習(xí)資料，如教學(xué)視頻、幫助文檔、問答社區(qū)等。用戶有了問題進(jìn)入到幫助中心，可以很便捷的找到自己想要的答案，并且答案足以解決他們的問題。

5. 全新風(fēng)格、情感化插畫

在新版設(shè)計(jì)中我們繪制了全新風(fēng)格的產(chǎn)品插畫，運(yùn)用于產(chǎn)品中空狀態(tài)，加載等待、運(yùn)營活動(dòng)等場景，插畫作為現(xiàn)代設(shè)計(jì)的一種重要視覺傳達(dá)，可以進(jìn)行信息的傳達(dá)、感情的傳遞。

具備文字所不具備的溫度的插畫，能引發(fā)共情效應(yīng)的同時(shí)，可以具像化品牌形象、促進(jìn)轉(zhuǎn)化以及提升用戶粘合度。

列表頁搜索為空示例

空狀態(tài)插圖示例

六、總結(jié)

以上，是本次全面體驗(yàn)升級(jí)背后的原因以及思考過程，從前期用戶調(diào)研、問題分析、目標(biāo)確定（1.高效管理工具；2.有溫度的產(chǎn)品；3.差異化的能力），到通過多維度地將目標(biāo)落地（1.頁面自定義，打造專屬工作臺(tái)；2.體驗(yàn)流程優(yōu)化，提升用戶體驗(yàn)；3.組件優(yōu)化，從底層提升效率；4.幫助引導(dǎo)系統(tǒng)化、體系化；5.全新風(fēng)格、情感化插畫），優(yōu)化了體驗(yàn)、提高了使用效率。

新版設(shè)計(jì)在上線灰度測(cè)試后，通過問卷對(duì)本次體驗(yàn)升級(jí)進(jìn)行滿意度收集，測(cè)試租戶對(duì)于新版產(chǎn)品的滿意度平均值高達(dá)90%，用戶對(duì)于新版產(chǎn)品有很多正面反饋，有租戶反饋新版首頁對(duì)員工日常工作幫助很大，新版列表頁對(duì)于用戶日常管理用戶更高效。

對(duì)于自我認(rèn)知，設(shè)計(jì)更像一場修行，知易行難。作為體驗(yàn)設(shè)計(jì)師，不要紙上談兵，只在乎視覺層面的感知，應(yīng)該深入用戶群體，升入了解用戶使用場景，從用戶和業(yè)務(wù)的角度去研究用戶群體，只有站在更全面的的角度去思考問題，才能更好地服務(wù)用戶。

受限于篇幅，沒有將新功能BI和marketing部分的設(shè)計(jì)思考過程展示出來，以后會(huì)單獨(dú)分享，最后按照慣例上一波設(shè)計(jì)圖。

作者：Yone楊 ；公眾號(hào)：黑馬家族

原文鏈接：https://mp.weixin.qq.com/s/Kejsj3gkdvMW17zrQxhTXg

本文由@黑馬家族 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議