編輯導(dǎo)語：B端工作臺(tái)是B短產(chǎn)品一大必備的界面，但常常是設(shè)計(jì)一次之后就無人問津。有的工作臺(tái)是能夠提升用戶的工作效率，但有的工作臺(tái)卻是“雞肋”。本文旨在對(duì)B端工作臺(tái)進(jìn)行拆解，讓更多設(shè)計(jì)者了解到其中的設(shè)計(jì)方法以及體驗(yàn)升級(jí)的設(shè)計(jì)策略，一起來看看吧。

引導(dǎo)語：本文針對(duì)B端產(chǎn)品的工作臺(tái)進(jìn)行拆解，幫助新手B端設(shè)計(jì)師了解工作臺(tái)的設(shè)計(jì)方法以及體驗(yàn)升級(jí)的設(shè)計(jì)策略，包含如何使用競(jìng)品分析和度量方法，最后附贈(zèng)案例拆解，助力融會(huì)貫通。

一、了解B端工作臺(tái)

工作臺(tái)是B端產(chǎn)品的一大必備功能，高度聚合的作用讓它常常作為“門面”身份出現(xiàn)（用戶登錄后第一個(gè)看到的頁(yè)面），但很可惜它并不是業(yè)務(wù)核心頁(yè)面，常常是設(shè)計(jì)一次后就無人問津。雖然有的工作臺(tái)能夠幫助用戶提高工作效率，但是也有存在很“雞肋”的情況，使用性逐漸可有可無。那么如何設(shè)計(jì)好B端產(chǎn)品的工作臺(tái)呢？

下面我們從工作臺(tái)的常見類型和功能幫助大家拆解工作臺(tái)的體驗(yàn)設(shè)計(jì)機(jī)會(huì)點(diǎn)。

1. 定義與特點(diǎn)

工作臺(tái)是一個(gè)能幫助用戶快速掌握工作進(jìn)展、進(jìn)入工作狀態(tài)的導(dǎo)航頁(yè)面。

B端工作臺(tái)具有細(xì)分功能導(dǎo)航的作用，幫助用戶減少尋找功能的時(shí)間。當(dāng)B端產(chǎn)品具有多個(gè)使用角色時(shí)，會(huì)根據(jù)業(yè)務(wù)屬性進(jìn)行工作臺(tái)劃分，以此來滿足不同角色的使用訴求。

2. 常見功能

想要達(dá)成快速掌控工作進(jìn)展、開啟處理工作事項(xiàng)，工作臺(tái)一般具有以下五項(xiàng)常見功能：

（1）統(tǒng)計(jì)業(yè)務(wù)數(shù)據(jù)

用戶根據(jù)業(yè)務(wù)數(shù)據(jù)查看工作進(jìn)度。不同的用戶身份在使用目標(biāo)上有所不同，比如管理者角色，會(huì)根據(jù)業(yè)務(wù)數(shù)據(jù)調(diào)整戰(zhàn)略決策、安排下屬的工作內(nèi)容；執(zhí)行者會(huì)根據(jù)自己的完成進(jìn)度來安排近期的工作內(nèi)容，識(shí)別工作優(yōu)先級(jí)。

（2）聚合高頻常用功能

常用功能又稱快捷功能，是指使用者工作中最常用的幾個(gè)功能選項(xiàng)。比如匯易聯(lián)是一個(gè)單據(jù)報(bào)銷平臺(tái)，我們可以在工作臺(tái)上快速的找到“提單據(jù)”這項(xiàng)功能。

（3）查看待辦事項(xiàng)

待辦事項(xiàng)跟業(yè)務(wù)數(shù)據(jù)都有查看工作進(jìn)度的作用，兩者的不同點(diǎn)在于業(yè)務(wù)數(shù)據(jù)是以業(yè)務(wù)指標(biāo)為基準(zhǔn)明確工作進(jìn)度，待辦事項(xiàng)是以數(shù)量這個(gè)維度來分析和查看。比如保險(xiǎn)業(yè)務(wù)員的季度保險(xiǎn)額，這個(gè)金額數(shù)值是業(yè)務(wù)指標(biāo)；審核員需要審核保單的數(shù)量是待辦事項(xiàng)。

（4）明晰細(xì)分業(yè)務(wù)

B端產(chǎn)品的業(yè)務(wù)屬性會(huì)在工作臺(tái)有所體現(xiàn)。比如：匯易聯(lián)，它的產(chǎn)品定位在于幫助企業(yè)全流程管控各類費(fèi)用支出，屬于票據(jù)管理領(lǐng)域中費(fèi)用管理這項(xiàng)細(xì)分業(yè)務(wù)，對(duì)應(yīng)的常見功能有：我的賬本和快速提單，它們出現(xiàn)在工作臺(tái)上，除了幫助用戶快速開展工作，減少細(xì)鉆外，還能夠幫助用戶識(shí)別產(chǎn)品的業(yè)務(wù)屬性。

識(shí)別業(yè)務(wù)性的隱性優(yōu)點(diǎn)：增強(qiáng)產(chǎn)品記憶點(diǎn)，當(dāng)用戶記住這個(gè)產(chǎn)品的核心業(yè)務(wù)功能。對(duì)于B端產(chǎn)品來說，在細(xì)分領(lǐng)域占據(jù)一席之地，實(shí)際就是掌握了精準(zhǔn)客戶。

（5）高效獲取業(yè)務(wù)信息

為了方便使用者快速查看，有部分內(nèi)容需要展示在工作臺(tái)。比如：匯易聯(lián)的單據(jù)動(dòng)態(tài)功能，就是在幫助用戶快速查看自己提交的單據(jù)最新動(dòng)態(tài)，無需點(diǎn)開其他頁(yè)面，在工作臺(tái)就能快速讀取。

3. 使用效能

（1）提高管理者的工作效率（為管理者提供戰(zhàn)略決策的輔助）

工作臺(tái)聚合管理者每日、每月、每季度需要查看的業(yè)務(wù)指標(biāo)，管理者在了解最新的業(yè)務(wù)完成情況后，對(duì)比公司業(yè)務(wù)指標(biāo)可以調(diào)整戰(zhàn)略決策。比如第一季度目標(biāo)是完成支付金額10w+，前三周只完成2分之一，業(yè)務(wù)數(shù)據(jù)面板輔助管理者完成工作。

這里可能有同學(xué)會(huì)問了：那為什么不用數(shù)據(jù)看板去看呢？數(shù)據(jù)看板看起來更清晰。

我的回答是：工作臺(tái)僅展示最新的核心業(yè)務(wù)數(shù)據(jù)，點(diǎn)擊“更多”可以跳轉(zhuǎn)到數(shù)據(jù)看板頁(yè)查看更多詳細(xì)信息。

（2）減少協(xié)作者的溝通時(shí)間

管理者下發(fā)的任務(wù)會(huì)直接展示在協(xié)作者工作臺(tái)的待辦事項(xiàng)，每天上班打開工作臺(tái)，第一時(shí)間了解今天的工作任務(wù)，方便協(xié)作者快速開展工作。

（3）增強(qiáng)部門工作協(xié)同效能

比如匯易聯(lián)單據(jù)狀態(tài)，可以看到流程目前流轉(zhuǎn)到具體哪位操作人。OA平臺(tái)中，用戶當(dāng)前審批狀態(tài)外置在工作臺(tái)，也是可以方便用戶第一時(shí)間查看。

4. 常見的工作臺(tái)類型

因B端產(chǎn)品復(fù)雜且多樣，以下僅對(duì)常見工作臺(tái)類型舉例分析：

（1）工具類產(chǎn)品

特點(diǎn)：工具類的工作臺(tái)因?yàn)楣δ苋?，具有普適性。因?yàn)椴粌H功能多而全，還可以根據(jù)不同的使用訴求自定義工作臺(tái)，由此提升用戶的工作效率和滿足用戶的個(gè)性化使用習(xí)慣。

舉例：常見的有飛書、語雀、釘釘?shù)墓ぷ髋_(tái)。

（2）業(yè)務(wù)功能類

特點(diǎn)：強(qiáng)業(yè)務(wù)屬性，一般為“量身定制”型的存在。

第一種情況：B端產(chǎn)品業(yè)務(wù)壁壘性高、細(xì)分領(lǐng)域精細(xì)化的特點(diǎn)，很難做到一個(gè)工作臺(tái)適配多種使用角色的使用訴求。這時(shí)就需要根據(jù)每個(gè)用戶的使用習(xí)慣、常用功能、典型數(shù)據(jù)去設(shè)計(jì)不同的工作臺(tái)。舉例：比如匯易聯(lián)分為：銷售部員工版本、銷售部管理者版本、人事財(cái)務(wù)管理者版本三種工作臺(tái)。天貓工作臺(tái)也會(huì)分店長(zhǎng)、老板、美工、客服能多種使用角色的工作臺(tái)版本。

第二種情況：平臺(tái)內(nèi)包含多類業(yè)務(wù)，業(yè)務(wù)之間沒有必然聯(lián)系，可以拆分業(yè)務(wù)功能賣給不同的客戶，這個(gè)時(shí)候，就需要根據(jù)業(yè)務(wù)屬性設(shè)計(jì)多個(gè)工作臺(tái)。比如保險(xiǎn)核心業(yè)務(wù)中續(xù)保業(yè)務(wù)和理賠業(yè)務(wù)就可以拆分賣出，配套兩個(gè)工作臺(tái)，理賠中心工作臺(tái)、續(xù)保中心工作臺(tái)。

（3）業(yè)務(wù)數(shù)據(jù)類

特點(diǎn)：與業(yè)務(wù)功能不同的地方在于業(yè)務(wù)數(shù)據(jù)作為重要組成部分占據(jù)工作臺(tái)頂部卡片模塊，而業(yè)務(wù)功能類的工作臺(tái)并不是都含有業(yè)務(wù)數(shù)據(jù)的。業(yè)務(wù)數(shù)據(jù)類的工作臺(tái)以查看業(yè)務(wù)數(shù)據(jù)為核心功能。

比如：微盟、淘寶、天貓工作臺(tái)，對(duì)用戶最重要的部分就是業(yè)務(wù)數(shù)據(jù)，查看店鋪的銷售額、業(yè)績(jī)指標(biāo)等等。

因B端產(chǎn)品復(fù)雜且多樣，以上舉例僅作常用工作臺(tái)的分析，并不確保能夠涵蓋所有工作臺(tái)的類型，歡迎大家留言補(bǔ)充，幫助自己和他人拓展眼界。

4. 工作臺(tái)基本構(gòu)成

工作臺(tái)的基本構(gòu)成與之前講過的常用功能有區(qū)別也有重復(fù)，基本構(gòu)成不代表全部都需要展示在工作臺(tái)上，搭配組合皆是為了滿足使用需要。

• 業(yè)務(wù)數(shù)據(jù)工作進(jìn)度：一般以數(shù)據(jù)可視化的形式出現(xiàn)，用于告知用戶工作進(jìn)度
• 待辦事項(xiàng)：告知用戶當(dāng)前、當(dāng)周的任務(wù)排期

快捷功能常用功能：快速開展工作或快速跳轉(zhuǎn)至常用頁(yè)面，無需在導(dǎo)航上一步步下鉆，節(jié)省時(shí)間，提高效率。

消息通知：一般包含系統(tǒng)消息、業(yè)務(wù)進(jìn)展、功能信息三類。系統(tǒng)信息包含功能迭代和產(chǎn)品更新；業(yè)務(wù)最新進(jìn)展包含最新業(yè)務(wù)數(shù)據(jù)更新；功能信息：包含業(yè)務(wù)流轉(zhuǎn)進(jìn)度和上下級(jí)提交審核和被審核的進(jìn)展?？筛鶕?jù)重要程度選擇是否展示在工作臺(tái)。

個(gè)人信息：當(dāng)身份識(shí)別為核心功能時(shí)時(shí)出現(xiàn)，比如使用不同角色的賬號(hào)登陸天貓店鋪工作臺(tái)，對(duì)應(yīng)的功能是不同的，有時(shí)同一個(gè)賬戶兼職兩種身份，為了識(shí)別身份需要展示個(gè)人信息；但是在強(qiáng)業(yè)務(wù)屬性工作臺(tái)（理賠與續(xù)簽）時(shí)無需出現(xiàn)，因?yàn)樵谫~號(hào)登錄時(shí)就已經(jīng)識(shí)別了賬號(hào)權(quán)限，展示具體業(yè)務(wù)的內(nèi)容。所以還需具體情況具體分析。

新手引導(dǎo)幫助中心：當(dāng)用戶首次登錄時(shí)，新手引導(dǎo)負(fù)責(zé)向用戶介紹業(yè)務(wù)模塊及對(duì)應(yīng)功能，用戶可以【一鍵跳過】，但當(dāng)用戶需要的時(shí)候，必須有一個(gè)【入口】方便快速找到。當(dāng)用戶從新手轉(zhuǎn)化為常用用戶時(shí)，新手引導(dǎo)也就切換成為了幫助中心。

5. 工作臺(tái)功能模塊自定義

因?yàn)楣ぷ髋_(tái)的業(yè)務(wù)屬性、使用角色、使用訴求都有所不同，構(gòu)成模塊可以根據(jù)需要進(jìn)行展示和隱藏。目前有很多成熟的產(chǎn)品已經(jīng)支持工作臺(tái)內(nèi)容模塊自定義，分享三個(gè)擁有自定義工作臺(tái)功能且可以免費(fèi)試用的產(chǎn)品，方便大家參考：

（1）Pingcode：拆分工作臺(tái)功能模塊的體驗(yàn)良好，可供參考

（2）ClickUp：國(guó)際化版本工作臺(tái)自定義模塊可參考

（3）匯易聯(lián)：設(shè)置可見模塊，拖拽即可自定義布局

二、工作臺(tái)體驗(yàn)升級(jí)的目標(biāo)拆解

B端工作臺(tái)的設(shè)計(jì)難點(diǎn)，在于體驗(yàn)設(shè)計(jì)師對(duì)于產(chǎn)品業(yè)務(wù)的了解程度。不僅要滿足產(chǎn)品需求出UI圖、出交互邏輯，還需要在產(chǎn)品商業(yè)價(jià)值、客戶價(jià)值、用戶價(jià)值上做到平衡。

1. 商業(yè)價(jià)值、客戶價(jià)值、用戶價(jià)值的區(qū)別

產(chǎn)品商業(yè)價(jià)值：產(chǎn)品功能滿足市場(chǎng)需求，持續(xù)為企業(yè)帶來利益，也就是賺錢，而且要賺長(zhǎng)久的錢。

B端產(chǎn)品的購(gòu)買者是客戶，也就是公司的老板，但是實(shí)際使用的用戶是企業(yè)的員工。

客戶價(jià)值：我們的產(chǎn)品能夠幫助企業(yè)降本增效，也就是幫客戶省錢，比如節(jié)省人力成本、資源成本等等，對(duì)客戶來說就是有價(jià)值的。

用戶價(jià)值：那么能夠提高用戶使用的體驗(yàn)，幫助他們?cè)诠ぷ髦杏玫牧鲿?，?jié)省工作時(shí)間、提升工作效率，能夠讓他們?cè)缦掳?，這對(duì)用戶來說就是有價(jià)值的。

如果沒有做到真正的了解用戶，是沒辦法提升對(duì)應(yīng)的價(jià)值點(diǎn)的。

2. 獲取客戶價(jià)值、用戶價(jià)值的渠道

如何了解產(chǎn)品用戶的價(jià)值需求呢？這里跟大家分享兩個(gè)方法，一個(gè)是用戶調(diào)研，一個(gè)是競(jìng)品分析。

用戶調(diào)研有兩種結(jié)果類型，定性分析和定量分析，搭配使用獲取更多、更全面、更有效的用戶數(shù)據(jù)。

競(jìng)品分析是去了解同類競(jìng)品的功能點(diǎn)、體驗(yàn)設(shè)計(jì)優(yōu)秀的部分，從更全面的角度分析用戶到底需要的是什么，因?yàn)橛械臅r(shí)候用戶是做不到準(zhǔn)確表達(dá)自己的需求的。比如在建造交通工具的例子上，起初用戶描述的需求：想要一匹會(huì)飛的馬。但是我們要洞悉出用戶的真實(shí)需求是：想要更快速度的交通工具。

看看競(jìng)品都在什么功能上“使勁”，B端產(chǎn)品不做模仿，要在標(biāo)準(zhǔn)功能的基礎(chǔ)上做差異化，差異化價(jià)值才是我們的“賣點(diǎn)”。

3. 用戶角度：洞察問題

產(chǎn)品在0-1的發(fā)展階段時(shí)，工作臺(tái)往往沒有真實(shí)的使用用戶，只能根據(jù)產(chǎn)品邏輯和業(yè)務(wù)思維去建立。但當(dāng)產(chǎn)品發(fā)展到一定階段，積累了用戶群，我們就需要聚焦典型用戶的使用習(xí)慣，打造出符合用戶需要的工作臺(tái)。因?yàn)榭蛻艉陀脩羰莾深惾巳?，所以我們還要有辨別真?zhèn)涡枨?、排列?yōu)先級(jí)的能力。

用戶調(diào)研能夠幫助我們深入各角色的使用場(chǎng)景，分析其業(yè)務(wù)重心和痛點(diǎn)，了解各個(gè)角色對(duì)于產(chǎn)品的期望。

用戶調(diào)研：

產(chǎn)品用戶可以分為三類：新手用戶、中級(jí)用戶、專家級(jí)用戶。

1. 新手用戶：沒有人愿意永遠(yuǎn)做新手，新手的目標(biāo)是快速成為中級(jí)用戶；
2. 中級(jí)用戶：數(shù)量最多且比較穩(wěn)定的，“即用即走”是他們使用產(chǎn)品的訴求；
3. 專家級(jí)用戶：對(duì)產(chǎn)品最為了解的一部分人，對(duì)功能有極致要求，以追求產(chǎn)品更好的體驗(yàn)為己任。

我們的做用戶調(diào)研的最終目標(biāo)是拿到典型用戶畫像和用戶旅程圖。這兩方面的內(nèi)容會(huì)幫助我們分析用戶功能使用的優(yōu)先級(jí)。

在做工作臺(tái)用戶調(diào)研時(shí)常用的方法：

• 可用性測(cè)試：產(chǎn)品發(fā)展的不同階段都會(huì)使用的一項(xiàng)用戶調(diào)研方式。模擬真實(shí)的使用場(chǎng)景，一對(duì)一觀察用戶的操作路徑，通過用戶的行為，分析用戶的心理，是驗(yàn)證產(chǎn)品設(shè)計(jì)的必備手段，屬于定性分析。
• 用戶訪談：成本高，效果好。屬于定性分析，一般在產(chǎn)品積累了一定用戶人群和使用問題時(shí)去做用戶訪談效果最佳。
• 調(diào)研問卷：比較簡(jiǎn)單的一種調(diào)研方式，可以在短時(shí)間內(nèi)獲取大量用戶反饋的數(shù)據(jù)，屬于定量分析。因?yàn)锽端產(chǎn)品的用戶都是付費(fèi)用戶，獲取的數(shù)據(jù)具有真實(shí)性，但是我們要主觀分析哪些優(yōu)先級(jí)需求更高，更能幫助產(chǎn)品標(biāo)準(zhǔn)化。
• 現(xiàn)場(chǎng)觀察：當(dāng)新接觸某一業(yè)務(wù)領(lǐng)域的產(chǎn)品時(shí)，很難真的站在用戶角度思考問題，這個(gè)時(shí)候去現(xiàn)場(chǎng)觀察用戶真實(shí)使用場(chǎng)景，了解行業(yè)內(nèi)幕，工作流程，是幫助產(chǎn)品和設(shè)計(jì)師快速了解“陌生用戶”的有效方法。

這些用戶調(diào)研方法也可以根據(jù)優(yōu)化目標(biāo)和優(yōu)化時(shí)間段來劃分。

4. 版本優(yōu)化前后：可用性測(cè)試

（1）優(yōu)化前：定位需求

優(yōu)化前目標(biāo)：觀察用戶能否按照我們預(yù)設(shè)好的路線操作。

方法：召集10-15位目標(biāo)用戶，使用基于產(chǎn)品邏輯的原型圖demo進(jìn)行操作，觀察他們完成任務(wù)的過程，記錄完成任務(wù)所需時(shí)間。拿到數(shù)據(jù)后，分析與事先設(shè)想的產(chǎn)品邏輯偏差程度，進(jìn)行迭代調(diào)整。

（2）優(yōu)化后：驗(yàn)證目標(biāo)是否達(dá)成

比如我們的目標(biāo)是提升用戶的操作效率。使用可用性測(cè)試，觀察用戶能否快速在工作臺(tái)上定位自己想要的功能并完成工作，對(duì)比改版前后的使用時(shí)間，來確認(rèn)是否達(dá)成優(yōu)化目標(biāo)。

5. 搜集用戶需求：調(diào)研問卷、可用性測(cè)試

（1）調(diào)研問卷

因?yàn)锽端SaaS產(chǎn)品的用戶都是付費(fèi)用戶，付費(fèi)用戶有統(tǒng)一維護(hù)群，我們可以把調(diào)研發(fā)卷發(fā)放到客戶群里，也因?yàn)槭歉顿M(fèi)用戶他們也更樂意試用并反饋，有效幫助我們定期收集客戶的使用反饋。

（2）可用性測(cè)試

預(yù)約客戶體驗(yàn)新功能，通過可用性測(cè)試獲取用戶需求是具有針對(duì)性的，可以快速定位到功能模塊，助于我們收集用戶需求，展開迭代優(yōu)化。

6. 定義用戶畫像：現(xiàn)場(chǎng)觀察、調(diào)研問卷、用戶訪談

（1）現(xiàn)場(chǎng)觀察

有條件的話一定要到真實(shí)的使用現(xiàn)場(chǎng)去觀察，不要做任何判斷、不要說話，就單純觀察。

（2）調(diào)研問卷

這個(gè)方法能拿到比較多的用戶樣本，讓用戶畫像更為清晰。

（3）用戶訪談

用戶訪談會(huì)根據(jù)使用角色分類，有針對(duì)性的制定訪談方案。成本雖高，確是定義用戶畫像的好幫手。

本篇文章主要針對(duì)工作臺(tái)體驗(yàn)設(shè)計(jì)優(yōu)化的案例帶練，以上內(nèi)容就不再過多贅述，感興趣的伙伴可以留言～有機(jī)會(huì)為大家更系統(tǒng)的講解。

7. 借助競(jìng)品：聚焦突破

B端產(chǎn)品的競(jìng)品找起來是有很大難度的，是較為復(fù)雜的課題，這里僅從工作臺(tái)相關(guān)角度找尋競(jìng)品并舉例分析，先分享幾個(gè)找B端競(jìng)品的小技巧。

找B端競(jìng)品的3個(gè)技巧：

1. 找競(jìng)品前先向產(chǎn)品經(jīng)理請(qǐng)教，他們是最懂產(chǎn)品的（注意平常要跟產(chǎn)品互幫互助，他們才會(huì)樂于分享）
2. 找同類競(jìng)品的TOP：從艾瑞咨詢報(bào)告中找到細(xì)分領(lǐng)域的TOP1-3，訪問官網(wǎng)查看支持免費(fèi)試用的產(chǎn)品
3. 當(dāng)無直接競(jìng)品的時(shí)：不同業(yè)內(nèi)翹楚性競(jìng)品、間接競(jìng)品、細(xì)分領(lǐng)域優(yōu)秀的“競(jìng)品”都能作為參考點(diǎn)

如果找不到同類領(lǐng)域的工作臺(tái)參考也不用著急，因?yàn)楸旧順I(yè)務(wù)屬性、產(chǎn)品定位的不同，就不可能只拿一個(gè)競(jìng)品抄一抄敷衍了事。也正是因?yàn)檫@個(gè)特點(diǎn)，我們把工作臺(tái)拆分成不同的模塊后，每個(gè)模塊都能找到可以參考的競(jìng)品。

8. 拆分功能模塊的競(jìng)品分析

拆分工作臺(tái)的核心功能。以業(yè)務(wù)模塊的功能導(dǎo)向去尋找優(yōu)秀的競(jìng)品，僅對(duì)功能點(diǎn)進(jìn)行參考。

這里你可能會(huì)問：“哪些競(jìng)品值得我們借鑒呢？”下面我依據(jù)工作臺(tái)常用的五個(gè)業(yè)務(wù)模塊、一項(xiàng)特色功能做舉例分析：

（1）待辦事項(xiàng)模塊：對(duì)應(yīng)項(xiàng)目管理專業(yè)軟件服務(wù)商

HRM系統(tǒng)：典型的項(xiàng)目管理/待辦事項(xiàng)功能，可以作為我們?cè)谧龉ぷ髋_(tái)待辦事項(xiàng)時(shí)的參考。不要被“直接”競(jìng)品四個(gè)字束縛住，只要是同類功能都具有一定的參考價(jià)值。

（2）業(yè)務(wù)數(shù)據(jù)模塊：對(duì)應(yīng)BI系統(tǒng)、數(shù)據(jù)類開源組件庫(kù)

數(shù)據(jù)看板在工作臺(tái)上占有“一席之地”，想做好工作臺(tái)上的數(shù)據(jù)模塊，當(dāng)然要：專業(yè)的事情向?qū)I(yè)的“人”請(qǐng)教。AntV、ECharts是國(guó)內(nèi)可視化組件庫(kù)中的佼佼者。雖然它們“其貌不揚(yáng)”，但是核心功能點(diǎn)是很“精致”的，經(jīng)得起推敲。我們可以借鑒功能框架，在此基礎(chǔ)上優(yōu)化視覺，前端工程師還可以直接利用可視化組件庫(kù)中的代碼進(jìn)行改寫，不僅節(jié)省設(shè)計(jì)時(shí)間，還有效提升開發(fā)實(shí)現(xiàn)的效率。

（3）常用功能模塊

工作臺(tái)中的常用功能一般使用icon+文字的形式展示，功能icon承載了表現(xiàn)產(chǎn)品視覺品牌質(zhì)感的責(zé)任，我們根據(jù)B端產(chǎn)品的業(yè)務(wù)屬性去設(shè)計(jì)。

（4）消息通知模塊：新聞中心

消息通知若需展示在工作臺(tái)，可參考網(wǎng)頁(yè)類產(chǎn)品的新聞中心設(shè)計(jì)，根據(jù)消息屬性和通知優(yōu)先級(jí)進(jìn)行分類展示。

（5）新手引導(dǎo)幫助中心模塊

新手引導(dǎo)通常以模態(tài)氣泡卡片樣式+高亮指定區(qū)域出現(xiàn)，我在體驗(yàn)匯易聯(lián)產(chǎn)品時(shí)，感受到兩點(diǎn)可以借鑒的方向，供大家參考：1.功能介紹的話術(shù)精煉，通俗易懂 2.模態(tài)可關(guān)閉也可快速找到，方便快捷有效。

以上舉例僅作參考，大家要學(xué)會(huì)發(fā)散思維，不要被“競(jìng)品”二次束縛。

9. 差異化調(diào)整

有些內(nèi)容無法直接拿過來照抄，下面我們看看如何差異化調(diào)整，做到“抄”的不留痕跡。

只借鑒”靈魂“，不借鑒“肉身”。

靈魂指功能框架，肉身指視覺效果。功能有相似的部分，用我們需要的邏輯去展示。視覺效果上充分發(fā)揮本身產(chǎn)品的品牌調(diào)性，利用好品牌的特點(diǎn)。

比如：展示用戶需要錄入信息的內(nèi)容分類，在功能上它僅僅是步驟條，用基本組件就能表現(xiàn)。但我們想給用戶更好的體驗(yàn)，就需要無限接近用戶的“心理預(yù)期”，做到一方面減少用戶的錄入負(fù)擔(dān)，另一方面讓其對(duì)內(nèi)容有基礎(chǔ)認(rèn)知。

定位目標(biāo)：關(guān)聯(lián)業(yè)務(wù)指標(biāo)

設(shè)計(jì)優(yōu)化方案所定位的目標(biāo)若能與業(yè)務(wù)指標(biāo)相關(guān)聯(lián)則可發(fā)揮最大價(jià)值。

業(yè)務(wù)指標(biāo)與價(jià)值強(qiáng)關(guān)聯(lián)，商業(yè)價(jià)值指“真金白銀”續(xù)費(fèi)。比如SaaS產(chǎn)品根據(jù)用戶的訴求，不斷完善產(chǎn)品標(biāo)準(zhǔn)化，提高簽約率和續(xù)費(fèi)率，為企業(yè)賺錢。

客戶價(jià)值與用戶價(jià)值需借助專業(yè)的度量標(biāo)準(zhǔn)，其中UES模型應(yīng)用場(chǎng)景較為適合B端產(chǎn)品。

10. 三步實(shí)現(xiàn)

如果設(shè)計(jì)師的方案跟業(yè)務(wù)指標(biāo)相關(guān)聯(lián)時(shí)，更容易獲得團(tuán)隊(duì)的認(rèn)可，推進(jìn)的也會(huì)更加順利。當(dāng)然這不是一件簡(jiǎn)單的事，在工作臺(tái)的設(shè)計(jì)中，可以通過以下三步實(shí)現(xiàn)數(shù)據(jù)度量支撐設(shè)計(jì)改版：

（1）明確體驗(yàn)問題

明晰產(chǎn)品發(fā)展目標(biāo)，點(diǎn)對(duì)點(diǎn)突破（設(shè)計(jì)不要自嗨）。以提升操作效率為主，提升相關(guān)業(yè)務(wù)效能為輔。力求每個(gè)體驗(yàn)優(yōu)化點(diǎn)都能解決實(shí)際問題。比如本次改版工作臺(tái)要提高管理員下發(fā)任務(wù)的效率、工作臺(tái)易用性、客戶滿意度，效率這個(gè)可以用時(shí)間度量，易用性和滿意度需借助度量模型。

任務(wù)頁(yè)效率（下發(fā)效率）：指下發(fā)功能通過步驟簡(jiǎn)單化、減少下鉆、降低理解難度，從而提升效率。

易用性：指功能對(duì)用戶來說難度程度高低，比如功能入口是否易識(shí)別，可以快速找到；操作步驟是否符合用戶使用習(xí)慣；瀏覽內(nèi)容時(shí)可以快速閱讀和理解；不恰當(dāng)操作時(shí)是否有提示和限制；錯(cuò)誤操作時(shí)是否有提示，提示后用戶能夠繼續(xù)完成任務(wù)等。

滿意度：工作臺(tái)在滿足功能的情況下，對(duì)用戶有吸引力、產(chǎn)品界面友好給人舒適感、專業(yè)性高；當(dāng)用戶需要幫助和引導(dǎo)時(shí)能夠滿足他們的需求；用戶對(duì)品牌有贊美、能信任、愿意持續(xù)使用等。

（2）借助度量模型或者工具

UES：UES是阿里云中心基于易用性去擴(kuò)展而成的度量模型，核心維度包括易用性、一致性、滿意度、任務(wù)頁(yè)效率、性能。易用性是B端產(chǎn)品的重要屬性，他的背后就是易用性量表的標(biāo)準(zhǔn)，與常規(guī)的易用性量表對(duì)比來說更為成熟和精細(xì)化。

（3）獲取數(shù)據(jù)驗(yàn)證

SUS系統(tǒng)可用性度量表：SUS是評(píng)估產(chǎn)品可用性的一個(gè)花費(fèi)少，但十分有效的工具。該量表包含了10條定向問題，每個(gè)問題均為5分，按強(qiáng)烈反對(duì)（1分）到非常同意（5分）評(píng)分。

系統(tǒng)可用性量表最終算出的評(píng)分達(dá)到70分左右，就可以比市面上一半產(chǎn)品可用性要好，也就是說這個(gè)產(chǎn)品的用戶體驗(yàn)算是合格了。（各位感興趣的伙伴可自行網(wǎng)上查詢可用性量表）

CES易用性度量表：易用性包含易學(xué)性、易操作性和清晰三個(gè)維度。反映產(chǎn)品對(duì)用戶而言是否易于學(xué)習(xí)和使用，改版前后進(jìn)行分別使用易用性度量表調(diào)研用戶使用反饋，對(duì)比分析是否達(dá)成易用性的提升。

提升易用性可以降低學(xué)習(xí)成本，從而提升用戶滿意度、操作效率、任務(wù)完成率等。

三、工作臺(tái)體驗(yàn)升級(jí)的行動(dòng)和策略

1. 明確使用目標(biāo)，拆分內(nèi)容優(yōu)先級(jí)

經(jīng)過前期的競(jìng)品分析、用戶調(diào)研，我們已經(jīng)拿到了用戶畫像，對(duì)每個(gè)角色對(duì)應(yīng)的工作臺(tái)功能已經(jīng)有所了解。下面我們使用矩陣法，拆分內(nèi)容模塊的優(yōu)先級(jí)。

矩陣法：根據(jù)使用頻次和重要程度，分析和劃分業(yè)務(wù)模塊優(yōu)先級(jí)。矩陣法顧名思義，X軸Y軸分別代表使用頻次和重要程度，右上角為重要程度和使用頻次更高的業(yè)務(wù)功能模塊，那么越靠近右上角的功能則優(yōu)先級(jí)越高。

特別是在單一工作臺(tái)不能滿足多個(gè)使用角色時(shí)，矩陣法能夠幫助我們快速辨別功能優(yōu)先級(jí)。

2. 柵格系統(tǒng)助力模塊劃分

柵格系統(tǒng)（Grid Systems）：最早來源于平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)，互聯(lián)網(wǎng)發(fā)展之后，界面設(shè)計(jì)將這一概念借用過來，簡(jiǎn)易的理解柵格就是一種有規(guī)則的參考線。

柵格系統(tǒng)主要由列、水槽、邊距三個(gè)基本元素構(gòu)成。

3. 柵格的作用?

• ?對(duì)用戶：提高內(nèi)容布局規(guī)律性，減少認(rèn)知成本。通過柵格系統(tǒng)規(guī)劃設(shè)計(jì)功能模塊，頁(yè)面信息的展現(xiàn)更加清晰，從而提高用戶的閱讀和瀏覽效率，提供更好的用戶體驗(yàn)。
• 對(duì)設(shè)計(jì)師：提高效率與規(guī)范化。幫助設(shè)計(jì)師快速校準(zhǔn)元素在界面內(nèi)的位置，節(jié)省基礎(chǔ)度量（小學(xué)數(shù)學(xué)加減法計(jì)算間距等）的時(shí)間。避免設(shè)計(jì)師團(tuán)隊(duì)因感覺不一致造成規(guī)范不統(tǒng)一的現(xiàn)象。
• 對(duì)開發(fā)：提高設(shè)計(jì)還原度，節(jié)約時(shí)間成本。柵格系統(tǒng)提高了網(wǎng)頁(yè)的規(guī)范性，一次開發(fā)多次復(fù)用，提高開發(fā)人員的工作效率。
• 響應(yīng)式布局：柵格能夠幫助工作臺(tái)在自定義功能模塊時(shí)，界定模塊的寬度規(guī)范。

常見的兩種刪格：12柵格、24柵格

12刪格：

舉例：屏幕寬度1440px、左側(cè)導(dǎo)航寬度256px、兩個(gè)間距16px，剩余寬度為12*列寬+11*槽寬

特點(diǎn)：欄數(shù)較少，適合業(yè)務(wù)簡(jiǎn)單的工作臺(tái)使用，因?yàn)楹?jiǎn)單的業(yè)務(wù)會(huì)不出現(xiàn)密集的信息，所以使用12柵格足以。

24刪格：

舉例：屏幕寬度1440px、左側(cè)導(dǎo)航寬度256px、兩個(gè)間距16px，剩余寬度為24*列寬+11*槽寬

特點(diǎn)：欄數(shù)更多，當(dāng)工作臺(tái)模塊多且復(fù)雜時(shí)適用，因?yàn)闄跀?shù)越多，分出的模塊越細(xì)致，能夠承載更多復(fù)雜的內(nèi)容，也是目前B端產(chǎn)品常用的刪格列數(shù)。

柵格的兩種適配方式：拉伸間距、拉伸邊距

拉伸間距：卡片區(qū)域?qū)挾裙潭?，柵格寬度不固定，卡片與卡片之間的距離來適配多余的寬度

拉伸邊距：與拉伸間距相反，刪格寬度（卡片之間的距離）是固定的，卡片寬度適配多余的寬度。對(duì)齊方式有居左（右邊距伸縮適配）和居中（左右邊距同步適配伸縮），居中的對(duì)齊方式更為常用。

4. 建議選擇：柵格固定，拉伸內(nèi)容

拉伸間距和拉伸邊距時(shí)常見的兩種拉伸方式，但是都會(huì)壓縮我們的展示空間，所以采用了一種全新的適配方式：即柵格固定，拉伸內(nèi)容。

簡(jiǎn)單來說就是，邊距和間距都采用固定值，適配的過程中會(huì)采用不同的縮放策略對(duì)卡片內(nèi)容進(jìn)行伸縮，用卡片來適配多余的寬度（或高度），這樣我們的展示空間就隨之變寬，可以承載更多內(nèi)容。

優(yōu)勢(shì)：采用自動(dòng)填充布局可以有效提升內(nèi)容占比，提升屏效。

5. 優(yōu)化視覺風(fēng)格，提升品牌質(zhì)感

關(guān)于工作臺(tái)的體驗(yàn)升級(jí)策略，前面講到拆分業(yè)務(wù)功能優(yōu)先級(jí)和柵格系統(tǒng)助力模塊劃分，最后一步才是優(yōu)化視覺風(fēng)格。B端產(chǎn)品始終以業(yè)務(wù)功能服務(wù)用戶為導(dǎo)向，視覺設(shè)計(jì)僅為輔助。下面有三點(diǎn)可以幫助我們做B端工作臺(tái)的視覺體驗(yàn)升級(jí)：

（1）幫助/引導(dǎo)/歡迎插畫

插畫設(shè)計(jì)在B端產(chǎn)品中出現(xiàn)的機(jī)會(huì)較少，一般在工作臺(tái)以情感化傳達(dá)出現(xiàn)，期望與用戶建立親密關(guān)系，圖片相較于文字傳達(dá)效率更高，提升用戶對(duì)內(nèi)容的掌控感和品牌信任度。

（2）常用功能圖標(biāo)

B端產(chǎn)品體現(xiàn)視覺設(shè)計(jì)感的地方比較少，圖標(biāo)設(shè)計(jì)為其中之一，將品牌質(zhì)感融入圖標(biāo)設(shè)計(jì)中，體現(xiàn)品牌調(diào)性，比如科技、金融、創(chuàng)新、友好的關(guān)鍵詞都能通過圖標(biāo)設(shè)計(jì)去展現(xiàn)。

（3）業(yè)務(wù)數(shù)據(jù)

數(shù)據(jù)可視化的設(shè)計(jì)點(diǎn)在于用單一卡片模塊展示較多的業(yè)務(wù)數(shù)據(jù)，讓用戶在工作臺(tái)就能對(duì)最新數(shù)據(jù)有一個(gè)了解，這里就不能以視覺效果為主了，要以功能簡(jiǎn)單好用為重點(diǎn)，適當(dāng)表現(xiàn)產(chǎn)品風(fēng)格即可。

四、案例拆解

1. 需求與問題

隨著工作臺(tái)橫向業(yè)務(wù)不定期的需求輸入，業(yè)務(wù)管理平臺(tái)的功能服務(wù)量級(jí)的逐步增加，催生設(shè)計(jì)師思考：如何用設(shè)計(jì)上的最優(yōu)解，來搭建交易管理工作臺(tái)的體驗(yàn)框架？這個(gè)問題，在共建過程中我們確立了2個(gè)核心設(shè)計(jì)目標(biāo)：清晰、高效。

問題描述：管理員的首頁(yè)工作臺(tái)信息過于簡(jiǎn)單，查找信息低效，分發(fā)能力差，難以完成【快速識(shí)別業(yè)務(wù)進(jìn)展】【管理下屬的工作內(nèi)容】的使用訴求。

2. 用戶畫像與使用目標(biāo)

通過前期用戶調(diào)研建立的用戶模型，即用戶畫像（人物模型）幫助我們確定哪些任務(wù)重要，原因何在，再提煉出核心使用場(chǎng)景并定義需求，最后優(yōu)化頁(yè)面框架。

使用目標(biāo)：

管理員：查看最新業(yè)務(wù)數(shù)據(jù)、審核員工作完成情況、審批員工申請(qǐng)

業(yè)務(wù)模塊：

涉及到的業(yè)務(wù)模塊有：身份信息、待辦事項(xiàng)、數(shù)據(jù)概覽、交易列表、常用功能、交易列表（業(yè)務(wù)強(qiáng)相關(guān)）等

3. 定位改版目標(biāo)

從使用問題出發(fā)，找到使用訴求與工作臺(tái)現(xiàn)狀的差異點(diǎn)，明確改版后工作臺(tái)需要擁有的能力，即為本次設(shè)計(jì)改版目標(biāo)。

4. 功能拆解與模塊劃分

矩陣法：區(qū)分功能優(yōu)先級(jí)

使用矩陣法，區(qū)分業(yè)務(wù)功能的使用頻次和重要程度，重新劃分業(yè)務(wù)模塊。聚焦管理者關(guān)注的核心功能，減少高頻功能的操作下鉆。

24柵格：功能模塊重構(gòu)

使用24柵格系統(tǒng)為工作臺(tái)重新布局，規(guī)范化內(nèi)容區(qū)域。清晰明確的操作主線可以減少用戶的理解成本，讓用戶快速準(zhǔn)確地按照預(yù)期獲取信息，提升用戶使用體驗(yàn)。

遵循瀏覽動(dòng)線，優(yōu)化信息布局和視覺比例，突出核心數(shù)據(jù)。遵循【清晰】的設(shè)計(jì)原則，明確的布局結(jié)構(gòu)決定用戶的瀏覽動(dòng)線，幫助管理員高效便捷的獲取信息。

模塊化設(shè)計(jì)，還可以為后續(xù)業(yè)務(wù)拓展：新增模塊、功能時(shí)提供便利。

5. 視覺質(zhì)感，體驗(yàn)細(xì)節(jié)

（1）強(qiáng)化色彩聚焦

通過顏色對(duì)比，強(qiáng)調(diào)重點(diǎn)信息，第一眼透?jìng)?，聚焦用戶注意力?/p>

（2）提升信息對(duì)比

通過文字大小的對(duì)比，突出核心信息。

（3）信息降噪

當(dāng)頁(yè)面內(nèi)容過多時(shí)，弱化輔助信息，為頁(yè)面降噪。

6. 拿到反饋，持續(xù)迭代

我們體驗(yàn)設(shè)計(jì)師的目標(biāo)是幫助產(chǎn)品在體驗(yàn)設(shè)計(jì)的角度上不斷進(jìn)步，幫助產(chǎn)品完成標(biāo)準(zhǔn)化的沉淀，從而“賣給”更多的目標(biāo)客戶，賺取更多的“真金白銀”，這樣才能體現(xiàn)設(shè)計(jì)師的能力與價(jià)值。

總之，無論是SaaS產(chǎn)品標(biāo)準(zhǔn)化，還是交付項(xiàng)目幫助產(chǎn)品標(biāo)準(zhǔn)化，都需要不斷的迭代和優(yōu)化，版本迭代上線后，拿到改版前后的數(shù)據(jù)對(duì)比分析，驗(yàn)證設(shè)計(jì)方案或找到對(duì)應(yīng)問題的反饋，繼續(xù)鉆研迭代下去。

五、文章總結(jié)

這篇文章不僅幫助新手B端設(shè)計(jì)師了解工作臺(tái)如何設(shè)計(jì)和優(yōu)化，還以全局的角度剖析了頁(yè)面改版的“心酸歷程”。

工作臺(tái)的體驗(yàn)優(yōu)化升級(jí)之路難點(diǎn)在于要貼合用戶的使用訴求，抓住用戶、客戶的內(nèi)心價(jià)值點(diǎn)，其他視覺層面的升級(jí)僅為輔助。

設(shè)計(jì)B端工作臺(tái)的方法簡(jiǎn)化起來很簡(jiǎn)單，可總結(jié)為3點(diǎn)

1. 初次設(shè)計(jì)：以產(chǎn)品訴求為基礎(chǔ)，做出demo驗(yàn)證功能的可行性。
2. 優(yōu)化設(shè)計(jì)：調(diào)研用戶真實(shí)使用場(chǎng)景，拿到功能使用路徑，分析優(yōu)先級(jí)。
3. 視覺設(shè)計(jì)：模塊劃分、品牌質(zhì)感、情感化傳達(dá)皆為功能輔助，一切以提升使用效率，滿足用戶內(nèi)心價(jià)值點(diǎn)為己任。

本文由 @EllieOne 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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