#本文為2022摹客RP原型工具測評大賽優(yōu)秀獎作品

對于B端產(chǎn)品而言，大多會陷入一個誤區(qū)：B 端產(chǎn)品注重底層邏輯而非體驗，但其實無論是B端還是C端用戶，考慮產(chǎn)品體驗都是其產(chǎn)品發(fā)展的第一準(zhǔn)則。本文以摹客RP為例，論述B 端產(chǎn)品與企業(yè)之間，從來不只是買賣關(guān)系，優(yōu)化產(chǎn)品體驗才能夠提升企業(yè)的運作效率，是值得關(guān)注的一點。

一、淺談 B 端產(chǎn)品經(jīng)理發(fā)展趨勢

提到 B 端產(chǎn)品，習(xí)慣性將其定義為把功能或服務(wù)售賣給企業(yè)的軟件，相較于 C 端產(chǎn)品在用戶感受和創(chuàng)新玩法有較外顯的表現(xiàn)方式，多數(shù)人會陷入“B 端產(chǎn)品注重底層邏輯而非體驗”的誤區(qū)，但無論是什么類型的產(chǎn)品，最終都是一個個真情實感的用戶在使用，何況 B 端產(chǎn)品在獲取成本上大多又比 C 端產(chǎn)品高，在市場和客戶需求的不斷變化下，“用戶體驗”從來都是各類產(chǎn)品應(yīng)該保證和關(guān)注的。

隨著云計算、AI 智能、教育和產(chǎn)業(yè)互聯(lián)網(wǎng)的興起，率先獲得新方案的 B 端企業(yè)開始思考如何將技術(shù)變現(xiàn)，很多大廠愿意投入較多資源在 B 端領(lǐng)域的產(chǎn)品建設(shè)，消費互聯(lián)網(wǎng)起家的騰訊著手打造產(chǎn)業(yè)鏈，阿里巴巴耕耘多年阿里云系列開始產(chǎn)生經(jīng)濟(jì)效應(yīng)，市場上B端產(chǎn)品經(jīng)理的崗位需求隨之大增，如下圖調(diào)研報告中提及，產(chǎn)品經(jīng)理的工作內(nèi)容大多涉及 B 端方向。

（圖片來源：騰訊問卷 2020 產(chǎn)品經(jīng)理生存報告）

我目前負(fù)責(zé)的產(chǎn)品是為元件供應(yīng)商和買家之間交易服務(wù)的在線商城，可以簡單想象成一個只賣電子元器件的淘寶或天貓，算是帶點 C 端調(diào)性的 B 端產(chǎn)品。

剛接手這個產(chǎn)品時，我也一直秉持著“只要功能符合業(yè)務(wù)需求即可”，加上公司開發(fā)人力有限和著急開拓新盈利模式，便把資源全花在推進(jìn)新功能上；直到追蹤新功能使用數(shù)據(jù)發(fā)現(xiàn)不如預(yù)期，深度訪談了供應(yīng)商和買家之后，才得知原來我們早期開發(fā)的部分基礎(chǔ)功能已不符合當(dāng)今市場趨勢下的使用習(xí)慣。

就算新功能是來自最近搜集的用戶需求，依然衍生許多問題和使用意向低落的情況，產(chǎn)品團(tuán)隊因此決定重新定義基礎(chǔ)功能以進(jìn)行網(wǎng)站改版，也才讓我意識到原來 B 端產(chǎn)品與企業(yè)之間，其實真的不只是提供合乎業(yè)務(wù)邏輯的服務(wù)，更是以伴隨著企業(yè)成長的角度，在各階段提供合適的產(chǎn)品功能來協(xié)助企業(yè)標(biāo)準(zhǔn)化流程和成本節(jié)約，而整件事便脫離不了對產(chǎn)品體驗的追求和死磕。

二、怎么開啟產(chǎn)品體驗優(yōu)化之路？

在開始闡述優(yōu)化體驗前，先定義 B 端產(chǎn)品三種常見頁面：

1. 落地頁面

即用戶登入產(chǎn)品后的第一個畫面，透過這個頁面去找到對應(yīng)功能，將用戶分發(fā)到不同頁面去，因此落地頁面通常會以主畫面+側(cè)欄的形式展開功能清單，搭配幫助中心避免用戶迷路而流失。

（圖片來源：Freshdesk 落地頁）

2. 工作頁面

用戶會沉浸的進(jìn)入功能界面，以處理特定任務(wù)為主，此頁面需要降低對用戶干擾，幫助用戶高效且合理找到所需的功能，在 UI 上會減少花哨布局，盡量以聚焦簡約的方式讓用戶專注各種功能操作。

（圖片來源：Axure 操作頁）

3. 管理頁面

對應(yīng)前臺應(yīng)用的后臺管理系統(tǒng)，舉凡成員角色權(quán)限、管理報表呈現(xiàn)方式、工作臺配置形式等，輔助用戶建立組織操作體系及降低用戶的使用成本，通常會按照管理類別細(xì)分為多個頁簽。

（圖片來源：Wix 設(shè)定頁）

在不同頁面中，產(chǎn)品經(jīng)理需要關(guān)注的優(yōu)化重點也大有區(qū)別，例如落地頁面的圖示和導(dǎo)航是否足以清晰引導(dǎo)用戶？工作頁面的功能布局及工作區(qū)大小是否合理？管理頁面的各項權(quán)限切分是否符合目標(biāo)對象的組織邏輯？

而產(chǎn)品經(jīng)理也常接收到各種渠道的用戶反饋，可能來自內(nèi)部同事、高層的主觀使用建議，或從競品調(diào)研、自查獲得客觀數(shù)據(jù)，不過請留意是“關(guān)注”反饋而非被“要挾”，才能在兼顧用戶體驗時，保有產(chǎn)品核心定位及普遍適用性。

三、為什么原型圖對產(chǎn)品經(jīng)理如此重要？

在完成用戶反饋搜集之后，產(chǎn)品經(jīng)理需要繪制幾種圖來向不同對象表達(dá)需求規(guī)劃：

1. 角色/關(guān)系圖

描述產(chǎn)品業(yè)務(wù)如何運作，每個角色在此業(yè)務(wù)邏輯下彼此的交互行為和信息傳遞方式，通常在搜集業(yè)務(wù)需求之后梳理角色用。

（圖片來源：我司產(chǎn)品管理后臺功能關(guān)系圖）

2. 業(yè)務(wù)流程圖

整理用戶各種行為產(chǎn)生的數(shù)據(jù)，在不同頁面之間的流向，并標(biāo)記可能產(chǎn)生異常的環(huán)節(jié)。看似簡單的行為也會涉及前中后臺的數(shù)據(jù)流轉(zhuǎn)，舉例來說：用戶在雙十一買了兩個不同店家商品，并點擊下單并完成付款，此時會觸發(fā)訂單信息從前臺被拋到中臺，中臺使用后臺預(yù)先傳遞的整合資料包處理訂單，最終再將訂單信息拆送到貨運系統(tǒng)、客戶售后管理系統(tǒng)、財務(wù)金流系統(tǒng)等。

（圖片來源：我司訂單系統(tǒng)后臺流程）

3. 頁面流程圖

以前述的業(yè)務(wù)流程圖為基礎(chǔ)，輔助各功能頁面示意圖（通常會把頁面中會引發(fā)交互的關(guān)鍵功能列出，但不會呈現(xiàn)頁面排版布局），更具象的表述是哪一個頁面元素讓用戶在頁面之間發(fā)生跳轉(zhuǎn)，完善整體交互流程。

（圖片來源：如何正確畫出頁面流程圖）

4. 原型圖

細(xì)化每個頁面，進(jìn)一步闡述頁面元素及相對位置、跳轉(zhuǎn)邏輯、設(shè)計要求、交互目的傳達(dá)，在正式進(jìn)入開發(fā)階段之前必備的溝通圖檔，也產(chǎn)品經(jīng)理最重要的技能之一。

（圖片來源：我司標(biāo)簽管理后臺原型圖）

在優(yōu)化產(chǎn)品體驗的過程中，產(chǎn)品經(jīng)理首先需要把“故事（為什么提這個需求）”說清楚，而要說好一個故事，具象的“場景（用戶使用情境是什么）”和“角色（哪些人是我們的用戶）”有助于“讀者（處理需求的人，包含設(shè)計、開發(fā)團(tuán)隊）”更快的進(jìn)入狀況并理解脈絡(luò)。

因此，對于產(chǎn)品經(jīng)理來說，一個好用的原型圖工具便是能將故事講明白的橋梁，原型圖既能體現(xiàn)自己的構(gòu)思和想象，又能讓協(xié)作人員更直觀掌握你的核心訴求從而將其實踐。下圖為騰訊問卷 2020 產(chǎn)品經(jīng)理生存報告的調(diào)查結(jié)果，超過八成的產(chǎn)品經(jīng)理表示工作內(nèi)容中包含“產(chǎn)品設(shè)計”，繪制原型圖能力的重要度可見一斑。

（圖片來源：騰訊問卷 2020 產(chǎn)品經(jīng)理生存報告）

產(chǎn)品經(jīng)理大多以產(chǎn)出低保真原型圖為主，確保流程和元素能夠傳達(dá)設(shè)計細(xì)節(jié)與功能理念，高保真原型圖則多交由設(shè)計團(tuán)隊接手，產(chǎn)品經(jīng)理可依據(jù)自身成熟度和使用習(xí)慣選擇對應(yīng)工具，外企或海外較常使用的原型圖工具 Axure、Figma 的特點在于交互效果強(qiáng)大，但對初學(xué)者有較高的學(xué)習(xí)門檻，對企業(yè)在選擇組織協(xié)作工具也是一筆成本，也因此現(xiàn)在有越來越多的產(chǎn)品經(jīng)理傾向選擇免費一站式且有更多團(tuán)隊協(xié)作功能的平臺，來產(chǎn)出高質(zhì)量的原型圖優(yōu)化產(chǎn)品體驗，這也是近期我開始調(diào)研原型圖平臺的原因。

四、摹客 RP 如何助力原型圖產(chǎn)出？

在比較工具的過程中，我發(fā)現(xiàn)了大學(xué)時期曾使用的 Mockplus 經(jīng)典版，在近期推出了在線原型設(shè)計功能——摹客 RP，適逢公司在下個開發(fā)周期準(zhǔn)備進(jìn)行全網(wǎng)站改版，身為老用戶的我當(dāng)然得借此機(jī)會試試新功能。

首先簡介我司“全網(wǎng)站改版”這個項目：

• 背景：我司網(wǎng)站雖有在每個開發(fā)周期推出新功能，但舊的頁面一直缺乏優(yōu)化，很多早期規(guī)劃的 UI 和功能現(xiàn)已不符合使用趨勢及習(xí)慣，也無系統(tǒng)性的做過全網(wǎng)站調(diào)性調(diào)整。我們將全網(wǎng)站拆成類型頁面按服務(wù)類型、頁面種類分三個開發(fā)周期優(yōu)化，來推動全網(wǎng)站 0 上線。
• 測試頁面：這次主要在摹客 RP 繪制的是供應(yīng)商店家頁，此頁面需要呈現(xiàn)內(nèi)容包含：信息公布欄、供應(yīng)商簡介、產(chǎn)品線、亮點產(chǎn)品、技術(shù)支持文章、問與答，屬于改版幅度較大的頁面，因此需要產(chǎn)出大量的原型圖來說明不同按鈕或功能的交互關(guān)系。

再來說明使用原型圖工具時，我自己最重視的幾個層面：

1. 面板布局合理性：過于復(fù)雜的功能擺放層級，光是找尋功能就會耗費大量時間，不合適的工作區(qū)域功能和布局調(diào)整方式，將增加繪圖過程的使用和學(xué)習(xí)成本。
2. 預(yù)設(shè)組件和圖標(biāo)數(shù)量：若是每個組件都需要自己從頭拉圖和設(shè)定交互，圖標(biāo)得自行從網(wǎng)上下載或依賴設(shè)計師手繪，將降低原型圖的產(chǎn)出效能。
3. 交互形式及設(shè)置彈性：交互方式?jīng)Q定原型圖的豐富度，組件、畫板、頁面都應(yīng)該開放設(shè)置彈性來強(qiáng)化操作效果，多樣且精細(xì)的交互更有助于協(xié)作人員理解及還原需求。
4. 歷史版本與演示方式：產(chǎn)品經(jīng)理經(jīng)常遇到需求變動和版本迭代，尤其 B 端產(chǎn)品設(shè)計的業(yè)務(wù)邏輯復(fù)雜，每次原型圖變更都需要被妥善保存，并在展示時零誤差還原所有內(nèi)容。

這次透過摹客 RP 繪制原型圖的過程，我也以上述四點當(dāng)作主要測評的方向，對比平常慣用的 Axure，發(fā)現(xiàn)摹客 RP 非常符合我制作原型圖的訴求，以下結(jié)合摹客 RP 界面截圖和自己使用的經(jīng)驗分享。

這次商店頁面涉及前后臺的功能設(shè)計，前臺需要輪播圖、下拉選單、面包屑等豐富的內(nèi)容呈現(xiàn)方式，后臺又需要有對應(yīng)的設(shè)置功能，在組件的類型上有較復(fù)雜的需求。

摹客 RP 內(nèi)建組件幾乎覆蓋了所有功能類型，海量且高質(zhì)感的圖庫讓我在繪制時能找到最合適的圖標(biāo)，有效制作引導(dǎo)用戶操作的后臺功能，還可將此次建立的顏色、樣式、組件儲存為設(shè)計資源，或者請設(shè)計師提前建制資源庫，日后即可透過共享的方式讓其他項目共同使用。

界面布局可說是摹客 RP 最大的亮點。之前常遇到的問題是，當(dāng)單一頁面有許多層交互畫面時，往往會變成用疊加的方式將頁面變化一層層蓋上去，每次要編輯其中一個畫面就需要點開圖層調(diào)整，有時候容易誤觸或整個模塊被拖拉到。

摹客 RP 的輔助畫板正好可以解決這個問題，在輔助面板上制作功能的交互流程有效將工作區(qū)劃分開，分別來制作主流程和次流程，再透過交互設(shè)定來關(guān)聯(lián)主次畫板的流程；而當(dāng)畫板一多（像這次光是一個頁面改版我就畫了十幾張圖），右下角導(dǎo)航面板的重要性也體現(xiàn)出來了，透過導(dǎo)航面板可以在茫茫圖海中加速找到目標(biāo)頁面，這是大部分原型圖工具都不具備的功能，一般比較常見于設(shè)計師使用的高保真繪圖工具中（如 Figma）。

再來是頁面或組件之間的交互設(shè)置方式，以往 Axure 的做法是從側(cè)欄中按頁面順序設(shè)定交互，但摹客 RP 是透過托拉的方式將頁面形成交互與鏈接，可指向整個畫板或其中的單獨功能，托拉過程也會有輔助框線幫助用戶理解交互影響的范圍，讓操作過程可視化程度提升。

最后是歷史記錄和演示的部分，歷史記錄清晰記錄由哪一位成員編輯和版本變動時間，方便控制版本內(nèi)容和成員狀態(tài)；而演示模式則高度還原原型圖內(nèi)容，Axure 時常在發(fā)布到云端后會有位置和樣式變形的情況，展示上也沒有太多的彈性。

最后

毫無疑問摹客 RP 是一款足以將原型圖制作過程變得更流暢的工具，在產(chǎn)品功能越趨復(fù)雜的設(shè)計過程中，透過簡化使用成本讓產(chǎn)品經(jīng)理將心思更著重在思考產(chǎn)品本質(zhì)及用戶需求中，讓用戶體驗優(yōu)化的過程不再是產(chǎn)品經(jīng)理一人的孤軍奮戰(zhàn)。

扣回題目本身，B 端產(chǎn)品與企業(yè)之間從來不只是買賣關(guān)系，如何從優(yōu)化用戶體驗賦能產(chǎn)品價值進(jìn)而提升企業(yè)運作的效率，是每個 B 端產(chǎn)品經(jīng)理都應(yīng)該關(guān)注的事情，讓企業(yè)與 B 端產(chǎn)品形成互補(bǔ)與增益關(guān)系，讓每個產(chǎn)品都能成為改變世界一部分的起點。

本文為2022摹客RP原型工具測評大賽的測評文章，如對摹客RP感興趣可點擊體驗鏈接：https://www.mockplus.cn/rp-event/?hmsr=woshipmhuangjie