產(chǎn)品經(jīng)理畫(huà)原型最大的浪費(fèi)不是時(shí)間是那份原型交給開(kāi)發(fā)后開(kāi)發(fā)還要從頭再寫(xiě)一遍。如果原型本身就是開(kāi)發(fā)能直接用的界面呢一、每個(gè)產(chǎn)品經(jīng)理都經(jīng)歷過(guò)的原型翻譯損耗小林是一家SaaS公司的產(chǎn)品經(jīng)理負(fù)責(zé)客戶成功模塊。去年Q3她提了一個(gè)客戶健康度評(píng)分系統(tǒng)的需求。她的工作流程是這樣的寫(xiě)PRD——38頁(yè)定義功能清單、業(yè)務(wù)規(guī)則、數(shù)據(jù)指標(biāo)畫(huà)原型——用Axure畫(huà)了60多張頁(yè)面標(biāo)注交互邏輯、跳轉(zhuǎn)關(guān)系、字段規(guī)則評(píng)審——拉著開(kāi)發(fā)過(guò)一遍口頭解釋這個(gè)按鈕點(diǎn)了之后跳到這里“這個(gè)列表要支持篩選”“這個(gè)分?jǐn)?shù)低于60要變紅”交付開(kāi)發(fā)——原型文件扔給前端PRD扔給后端然后問(wèn)題就來(lái)了。開(kāi)發(fā)做出來(lái)的東西和她畫(huà)的原型總有差距產(chǎn)品經(jīng)理畫(huà)的開(kāi)發(fā)理解的差距來(lái)源列表頁(yè)支持多條件篩選只做了單條件篩選原型里篩選區(qū)域畫(huà)得不夠明顯健康度低于60顯示紅色做成了紅色文字原型標(biāo)注紅色沒(méi)說(shuō)是背景色還是文字色詳情頁(yè)有趨勢(shì)曲線做成了柱狀圖原型里畫(huà)的是示意圖開(kāi)發(fā)以為是柱狀圖預(yù)警要發(fā)郵件和企微只發(fā)了郵件PRD里企微那行被開(kāi)發(fā)看漏了這些差距不是開(kāi)發(fā)的問(wèn)題也不是產(chǎn)品經(jīng)理的問(wèn)題——是原型→代碼這個(gè)翻譯過(guò)程中必然產(chǎn)生的損耗。原型是靜態(tài)示意代碼是動(dòng)態(tài)實(shí)現(xiàn)。中間隔著產(chǎn)品經(jīng)理的口頭解釋、開(kāi)發(fā)的理解偏差、溝通中的信息丟失。每一個(gè)環(huán)節(jié)都在漏信息。小林跟我吐槽的時(shí)候說(shuō)了一句話我覺(jué)得說(shuō)出了所有產(chǎn)品經(jīng)理的心聲“我最崩潰的不是需求被否而是我花兩周畫(huà)的原型開(kāi)發(fā)花一個(gè)月寫(xiě)出來(lái)最后一看——這不是我要的東西。然后返工再改再返工。兩邊的 時(shí)間都浪費(fèi)在’翻譯’上了。”二、問(wèn)題的本質(zhì)原型和實(shí)現(xiàn)之間隔著一堵墻拆開(kāi)看產(chǎn)品經(jīng)理和開(kāi)發(fā)之間的協(xié)作流程是這樣的產(chǎn)品經(jīng)理 → PRD 原型 → 開(kāi)發(fā)理解 → 手寫(xiě)代碼 → 產(chǎn)品驗(yàn)收 → 返工這個(gè)流程有四個(gè)損耗點(diǎn)損耗點(diǎn)一原型是假的Axure畫(huà)出來(lái)的頁(yè)面再精致也是靜態(tài)圖片。它不能點(diǎn)、不能輸數(shù)據(jù)、不能跑業(yè)務(wù)流。開(kāi)發(fā)看著一張假頁(yè)面去寫(xiě)真代碼靠的是理解和想象。損耗點(diǎn)二PRD和原型對(duì)不上PRD寫(xiě)了38頁(yè)原型畫(huà)了60張。字段校驗(yàn)規(guī)則在PRD第23頁(yè)交互跳轉(zhuǎn)在原型第47張。開(kāi)發(fā)要在兩個(gè)文檔之間來(lái)回切換漏看幾條是常態(tài)。損耗點(diǎn)三開(kāi)發(fā)從零重建不管原型畫(huà)得多細(xì)開(kāi)發(fā)都是從頭寫(xiě)——建組件、寫(xiě)樣式、綁數(shù)據(jù)、調(diào)交互。原型在這個(gè)過(guò)程中唯一的作用是參考不產(chǎn)生任何代碼復(fù)用。損耗點(diǎn)四驗(yàn)收階段才發(fā)現(xiàn)偏差開(kāi)發(fā)做完才知道這不是我要的。此時(shí)返工成本已經(jīng)很高——代碼寫(xiě)完了改一個(gè)字段校驗(yàn)規(guī)則可能牽連三四個(gè)文件。這四個(gè)損耗點(diǎn)加在一起消耗了產(chǎn)品經(jīng)理和開(kāi)發(fā)各自30%-40%的時(shí)間。三、小林怎么解決的用myBuilder替代Axure小林后來(lái)在CSDN上發(fā)現(xiàn)myBuilder起初以為又是一個(gè)低代碼平臺(tái)。但仔細(xì)看了一下她發(fā)現(xiàn)了一個(gè)不一樣的東西myBuilder的頁(yè)面設(shè)計(jì)器搭出來(lái)的不是原型圖是真實(shí)的頁(yè)面——帶組件、帶樣式、帶交互規(guī)則的真頁(yè)面。這跟Axure有本質(zhì)區(qū)別維度Axure原型myBuilder頁(yè)面產(chǎn)出物靜態(tài)交互圖圖片跳轉(zhuǎn)鏈接真實(shí)的Web頁(yè)面HTML組件樣式能不能輸入數(shù)據(jù)不能只有示意能表單組件真實(shí)可用能不能跑業(yè)務(wù)邏輯不能能配置顯示規(guī)則、禁用規(guī)則、校驗(yàn)規(guī)則交給開(kāi)發(fā)后開(kāi)發(fā)從頭寫(xiě)代碼開(kāi)發(fā)直接在此基礎(chǔ)上接接口、寫(xiě)邏輯改需求改原型→通知開(kāi)發(fā)→開(kāi)發(fā)改代碼改配置→頁(yè)面即時(shí)生效小林決定試一下。她的思路變了——不再追求自己搭出一個(gè)能跑的MVP而是追求搭出來(lái)的界面開(kāi)發(fā)能直接用。她做了什么第一步搭頁(yè)面布局和組件2天小林用myBuilder的后臺(tái)頁(yè)設(shè)計(jì)器拖拽出了客戶列表頁(yè)和客戶詳情頁(yè)。操作邏輯跟Axure很像——從左側(cè)組件庫(kù)拖組件到畫(huà)布調(diào)整位置和樣式。但區(qū)別是拖出來(lái)的不是圖片是真實(shí)的頁(yè)面組件。數(shù)據(jù)表格能真的顯示數(shù)據(jù)表單能真的輸入按鈕能真的點(diǎn)擊。第二步配交互規(guī)則1天這一步是myBuilder跟Axure最大的區(qū)別。在Axure里健康度低于60顯示紅色只能標(biāo)注在原型旁邊靠文字說(shuō)明。開(kāi)發(fā)看了之后自己理解——是背景紅還是文字紅含不含60在myBuilder里小林直接在屬性面板配置了顯示規(guī)則表達(dá)式。這個(gè)規(guī)則是真實(shí)生效的——數(shù)據(jù)低于60頁(yè)面上的背景真的變紅。小林說(shuō)“以前我在PRD里寫(xiě)’當(dāng)客戶健康度低于60分時(shí)列表顯示紅色’——開(kāi)發(fā)可能理解成’低于60含不含60紅色是背景色還是文字色現(xiàn)在我自己配好頁(yè)面上直接就是我要的效果——沒(méi)有理解偏差因?yàn)樽龅娜司褪窍氲娜??！钡谌酱罟ぷ髁魇疽鈭D半天健康度低于閾值要觸發(fā)預(yù)警。小林用myBuilder的流程設(shè)計(jì)器把預(yù)警流程畫(huà)了出來(lái)——觸發(fā)條件、條件分支、各分支的動(dòng)作節(jié)點(diǎn)。這一步她當(dāng)作比Axure流程圖更直觀的可視化來(lái)用。流程圖里的節(jié)點(diǎn)配置她填了大致邏輯但具體的接口調(diào)用、消息推送這些需要寫(xiě)代碼的部分她留給了開(kāi)發(fā)。三天半后的成果小林拿著myBuilder里搭好的頁(yè)面去找開(kāi)發(fā)負(fù)責(zé)人。開(kāi)發(fā)打開(kāi)一看頁(yè)面布局已經(jīng)搭好了不用從頭寫(xiě)HTML/CSS組件已經(jīng)擺好了不用從零選組件庫(kù)交互規(guī)則已經(jīng)配好了不用猜紅色是背景還是文字工作流結(jié)構(gòu)畫(huà)好了不用對(duì)著PRD理解流程邏輯開(kāi)發(fā)負(fù)責(zé)人說(shuō)了一句話“你要是每次都這么交付我們開(kāi)發(fā)周期至少省三分之一?！彼?、myBuilder對(duì)產(chǎn)品經(jīng)理的真正價(jià)值先說(shuō)清楚——myBuilder不是讓產(chǎn)品經(jīng)理替代開(kāi)發(fā)。小林搭出來(lái)的頁(yè)面核心的數(shù)據(jù)接口、評(píng)分算法、跨系統(tǒng)數(shù)據(jù)對(duì)接、深度集成——這些仍然需要開(kāi)發(fā)用代碼實(shí)現(xiàn)。myBuilder里的交互規(guī)則、數(shù)據(jù)對(duì)接等功能需要通過(guò)代碼腳本來(lái)完成產(chǎn)品經(jīng)理做不了也不應(yīng)該做這部分。myBuilder對(duì)產(chǎn)品經(jīng)理的價(jià)值是完全替代原型工具并且產(chǎn)出物能直接給開(kāi)發(fā)使用。具體來(lái)說(shuō)傳統(tǒng)模式AxuremyBuilder模式畫(huà)原型→寫(xiě)PRD→交付開(kāi)發(fā)→開(kāi)發(fā)從頭寫(xiě)代碼搭頁(yè)面→配規(guī)則→交付開(kāi)發(fā)→開(kāi)發(fā)在已有頁(yè)面上接接口寫(xiě)邏輯原型是參考物不產(chǎn)生代碼復(fù)用頁(yè)面是交付物開(kāi)發(fā)直接復(fù)用UI和交互配置交互規(guī)則靠文字描述理解偏差大交互規(guī)則真實(shí)生效所見(jiàn)即所得改需求→改原型→通知開(kāi)發(fā)→開(kāi)發(fā)改代碼改配置→頁(yè)面即時(shí)生效→開(kāi)發(fā)同步看到驗(yàn)收階段才發(fā)現(xiàn)這不是我要的搭的時(shí)候就看到效果偏差在交付前就消除了一句話總結(jié)原型從給開(kāi)發(fā)看的參考變成了給開(kāi)發(fā)用的半成品。五、產(chǎn)品經(jīng)理用myBuilder能做什么場(chǎng)景產(chǎn)品經(jīng)理做的開(kāi)發(fā)做的內(nèi)部審批系統(tǒng)搭審批表單頁(yè)面、配字段校驗(yàn)規(guī)則、畫(huà)審批流程結(jié)構(gòu)寫(xiě)接口對(duì)接、實(shí)現(xiàn)消息推送、處理復(fù)雜審批邏輯客戶管理界面搭客戶列表/詳情頁(yè)、配顯示規(guī)則和篩選條件、搭數(shù)據(jù)看板布局寫(xiě)數(shù)據(jù)接口、實(shí)現(xiàn)跨系統(tǒng)數(shù)據(jù)同步、復(fù)雜統(tǒng)計(jì)邏輯數(shù)據(jù)報(bào)表系統(tǒng)搭報(bào)表頁(yè)面布局、選圖表組件、配置展示規(guī)則寫(xiě)數(shù)據(jù)源SQL、實(shí)現(xiàn)ETL數(shù)據(jù)同步、復(fù)雜計(jì)算邏輯業(yè)務(wù)流程管理搭流程相關(guān)頁(yè)面、畫(huà)工作流結(jié)構(gòu)、配表單規(guī)則寫(xiě)流程中需要的接口調(diào)用、異常處理、集成邏輯你發(fā)現(xiàn)沒(méi)有——產(chǎn)品經(jīng)理做的部分正好是產(chǎn)品經(jīng)理最擅長(zhǎng)的頁(yè)面布局、交互設(shè)計(jì)、業(yè)務(wù)規(guī)則定義。開(kāi)發(fā)做的部分正好是開(kāi)發(fā)最擅長(zhǎng)的接口、算法、數(shù)據(jù)集成。沒(méi)有角色越界沒(méi)有重復(fù)勞動(dòng)。六、關(guān)于不會(huì)寫(xiě)代碼怎么辦這是產(chǎn)品經(jīng)理最常問(wèn)的問(wèn)題。答案是——你不需要寫(xiě)代碼但你搭的東西要足夠清晰讓開(kāi)發(fā)接手時(shí)不用猜。myBuilder的漸進(jìn)式設(shè)計(jì)恰好支撐這種協(xié)作第一層無(wú)代碼拖拽組件搭頁(yè)面配樣式和布局。這一層產(chǎn)品經(jīng)理完全勝任——操作邏輯跟Axure差不多只是拖出來(lái)的是真頁(yè)面而不是圖片。第二層低代碼用表達(dá)式配規(guī)則——顯示規(guī)則、禁用規(guī)則、校驗(yàn)規(guī)則。這不是寫(xiě)代碼是寫(xiě)條件跟Excel的IF函數(shù)差不多。產(chǎn)品經(jīng)理可以自己配也可以標(biāo)注好規(guī)則讓開(kāi)發(fā)配。第三層全代碼寫(xiě)JS或Java實(shí)現(xiàn)復(fù)雜交互和數(shù)據(jù)對(duì)接。這一層留給開(kāi)發(fā)。產(chǎn)品經(jīng)理不需要碰只需要在頁(yè)面設(shè)計(jì)階段把這里需要什么交互效果標(biāo)注清楚。小林的經(jīng)驗(yàn)是“第一層我自己全搞定第二層簡(jiǎn)單的我自己配、復(fù)雜的標(biāo)注好讓開(kāi)發(fā)配第三層完全交給開(kāi)發(fā)。我的原則是我搭到開(kāi)發(fā)拿過(guò)來(lái)不用再猜’這頁(yè)面要長(zhǎng)什么樣’的程度就行?！逼?、成本和上手難度維度說(shuō)明費(fèi)用12元永久授權(quán)比一個(gè)Axure團(tuán)隊(duì)版授權(quán)便宜兩個(gè)數(shù)量級(jí)學(xué)習(xí)曲線有Axure/原型設(shè)計(jì)經(jīng)驗(yàn)的產(chǎn)品經(jīng)理2-3天可以搭出第一個(gè)頁(yè)面需要寫(xiě)代碼嗎產(chǎn)品經(jīng)理不需要。交互規(guī)則用表達(dá)式配置復(fù)雜邏輯交給開(kāi)發(fā)做出來(lái)的東西能給開(kāi)發(fā)用嗎能。頁(yè)面是真實(shí)的Web頁(yè)面開(kāi)發(fā)直接在此基礎(chǔ)上接接口、寫(xiě)邏輯開(kāi)發(fā)能拿到源碼嗎能。低代碼開(kāi)源90%的框架模塊源碼公開(kāi)開(kāi)發(fā)可以在此基礎(chǔ)上修改和擴(kuò)展做出來(lái)的系統(tǒng)能在公網(wǎng)跑嗎能。myBuilder的官網(wǎng)和運(yùn)營(yíng)后臺(tái)就是用自身開(kāi)發(fā)的在公網(wǎng)上運(yùn)行八、說(shuō)句大實(shí)話寫(xiě)這篇文章不是為了說(shuō)產(chǎn)品經(jīng)理可以替代開(kāi)發(fā)。恰恰相反——當(dāng)產(chǎn)品經(jīng)理用myBuilder替代Axure產(chǎn)出物從原型圖變成開(kāi)發(fā)能直接用的界面產(chǎn)品和開(kāi)發(fā)的協(xié)作效率反而會(huì)提升一個(gè)量級(jí)。因?yàn)橄麥缌朔g損耗——產(chǎn)品經(jīng)理搭的頁(yè)面就是開(kāi)發(fā)要實(shí)現(xiàn)的頁(yè)面不存在原型→代碼的理解偏差消滅了重復(fù)勞動(dòng)——開(kāi)發(fā)不用從零搭頁(yè)面、選組件、寫(xiě)樣式直接在已有頁(yè)面上接接口寫(xiě)邏輯消滅了返工循環(huán)——產(chǎn)品經(jīng)理搭的時(shí)候就看到了真實(shí)效果偏差在交付前就消除了不用等開(kāi)發(fā)做完才發(fā)現(xiàn)這不是我要的小林后來(lái)把搭好的頁(yè)面交給開(kāi)發(fā)團(tuán)隊(duì)。開(kāi)發(fā)看了之后說(shuō)“你這個(gè)比PRD好使——因?yàn)槲也挥貌铝?。?yè)面長(zhǎng)什么樣、交互怎么走、規(guī)則是什么你都已經(jīng)配好了我只需要接接口就行?！睆哪且院笮×止緝?nèi)部的慣例變成了產(chǎn)品經(jīng)理用myBuilder搭頁(yè)面和配規(guī)則開(kāi)發(fā)在此基礎(chǔ)上接接口寫(xiě)邏輯。PRD從38頁(yè)變成了一個(gè)可交互的頁(yè)面鏈接。開(kāi)發(fā)周期從原來(lái)的一個(gè)月縮短到了兩周——省掉的不是開(kāi)發(fā)的工作量而是重建的工作量。