當(dāng)靜態(tài)原型成為“照騙”，當(dāng)產(chǎn)品需求在開發(fā)環(huán)節(jié)不斷失真，我選擇不再抱怨，而是拿起代碼武器，用“動(dòng)態(tài)代碼原型”在產(chǎn)品與開發(fā)之間，搭建起一座無(wú)損溝通的橋梁。

———— / BEGIN / ————

“這個(gè)效果實(shí)現(xiàn)不了?！?/p>

“當(dāng)時(shí)看原型不是這樣的啊！”

“這個(gè)交互，我們理解錯(cuò)了?！?/p>

這些對(duì)話，是否在你的團(tuán)隊(duì)里日日循環(huán)？它們?cè)抢_我多年的魔咒。作為產(chǎn)品經(jīng)理，我用Axure畫出的高保真原型，在評(píng)審時(shí)獲得一致通過(guò)，但最終上線的產(chǎn)品卻總是“賣家秀”與“買家秀”的區(qū)別。這中間的Gap，消耗的是巨大的溝通成本、團(tuán)隊(duì)信任與項(xiàng)目周期。

直到我做出了一個(gè)看似“不務(wù)正業(yè)”的決定：自學(xué)前端，用Vue等技術(shù)直接編寫可運(yùn)行的原型。

我將這種方法命名為“動(dòng)態(tài)代碼原型”，它徹底改變了我們的協(xié)作模式。

痛點(diǎn)：靜態(tài)原型的“三大罪”

在闡述我的方案前，我們必須先正視傳統(tǒng)靜態(tài)原型（無(wú)論多高保真）的固有缺陷：

• 信息失真器：靜態(tài)原型是“死的”。它無(wú)法展示真實(shí)的數(shù)據(jù)流轉(zhuǎn)、復(fù)雜的交互狀態(tài)和頁(yè)面邏輯。開發(fā)全靠腦補(bǔ)，而腦補(bǔ)，是項(xiàng)目風(fēng)險(xiǎn)的萬(wàn)惡之源。

• 效率瓶頸：產(chǎn)品經(jīng)理絞盡腦汁畫圖、標(biāo)注；開發(fā)人員費(fèi)盡心思解讀、猜測(cè)。一個(gè)微小改動(dòng)，產(chǎn)品經(jīng)理要修改所有相關(guān)頁(yè)面，開發(fā)再重新理解。溝通成本極高。

• 信任瓦解器：當(dāng)開發(fā)人員屢次發(fā)現(xiàn)“這個(gè)做不出來(lái)”或“實(shí)際效果不是那樣”時(shí)，他們會(huì)逐漸對(duì)原型失去信任，甚至開始質(zhì)疑產(chǎn)品經(jīng)理的專業(yè)能力。團(tuán)隊(duì)內(nèi)耗由此而生。

我的方法的核心是：拋棄靜態(tài)圖片，交付一個(gè)可在瀏覽器中真實(shí)運(yùn)行、交互、展示數(shù)據(jù)的原型系統(tǒng)。 它不是最終產(chǎn)品，但無(wú)限接近于最終效果。

1. 核心理念：從“畫給你看”到“做給你用”

傳統(tǒng)模式：“你看，這個(gè)頁(yè)面長(zhǎng)這樣，點(diǎn)擊這里會(huì)彈出那個(gè)?！?/p>

動(dòng)態(tài)模式：“你用一下這個(gè)功能，感受一下流程。這里的數(shù)據(jù)是Mock的，但交互和邏輯是真實(shí)的?！?/p>

2. 技術(shù)選型與實(shí)現(xiàn)（務(wù)實(shí)至上）

技術(shù)棧：前端框架（Vue / React） + UI組件庫(kù)（Element UI / Ant Design） + 模擬數(shù)據(jù)（Mock.js）。

為什么這么選？這些是現(xiàn)代前端開發(fā)的主流技術(shù)，意味著我的原型與最終開發(fā)環(huán)境同構(gòu)。組件庫(kù)保證了視覺一致性和開發(fā)效率。

項(xiàng)目實(shí)戰(zhàn)：在設(shè)計(jì)復(fù)雜的工商注冊(cè)流程時(shí)，我直接用Vue + Element UI搭建了一個(gè)原型。它包含了多步驟表單、條件判斷、文檔上傳預(yù)覽等全部交互。開發(fā)團(tuán)隊(duì)拿到后，驚呼：“這簡(jiǎn)直就是一套基礎(chǔ)代碼，我們直接在這上面繼續(xù)開發(fā)就行了！”

3. 工作流重塑：從線性到閉環(huán)

我們的流程變成了：

1）產(chǎn)品設(shè)計(jì)：我依然會(huì)繪制草圖梳理思路，但不再追求Axure的像素級(jí)完美。

2）原型開發(fā)：我直接進(jìn)入編碼階段，使用真實(shí)的組件搭建頁(yè)面，編寫核心交互邏輯，并填入符合業(yè)務(wù)規(guī)則的模擬數(shù)據(jù)。

3）評(píng)審與測(cè)試：

• 內(nèi)部評(píng)審：讓業(yè)務(wù)、運(yùn)營(yíng)甚至老板直接“用”這個(gè)原型，反饋?zhàn)兊脴O其具體：“這個(gè)下拉框選項(xiàng)不夠”、“這一步太麻煩了”。

• 開發(fā)評(píng)審：我將原型代碼倉(cāng)庫(kù)地址發(fā)給開發(fā)。他們可以直接審查代碼邏輯，討論技術(shù)實(shí)現(xiàn)的細(xì)節(jié)，評(píng)估工作量變得異常準(zhǔn)確。

• 用戶測(cè)試：將原型部署到測(cè)試環(huán)境，讓真實(shí)用戶提前體驗(yàn)，收集的反饋價(jià)值遠(yuǎn)超靜態(tài)圖。

4）無(wú)縫移交：開發(fā)團(tuán)隊(duì)基于我的原型代碼倉(cāng)庫(kù)進(jìn)行二次開發(fā)，或直接借鑒其結(jié)構(gòu)和邏輯。產(chǎn)品與開發(fā)在同一個(gè)語(yǔ)境下對(duì)話，扯皮自然消失。

價(jià)值：遠(yuǎn)超預(yù)期的“降維打擊”

這套方法帶來(lái)的收益是全方位的：

• 溝通效率的躍遷：溝通語(yǔ)言從模糊的“文字、線框圖”變?yōu)榫_的“組件、狀態(tài)、屬性”。開發(fā)不再需要問我“這個(gè)列表為空時(shí)顯示什么？”，因?yàn)樗谠屠镆呀?jīng)看到了。

• 風(fēng)險(xiǎn)的前置暴露：在“績(jī)效系統(tǒng)”中，我試圖實(shí)現(xiàn)一個(gè)復(fù)雜的獎(jiǎng)金公式可視化編輯功能。在編碼原型階段，我就發(fā)現(xiàn)了其技術(shù)復(fù)雜度和性能隱患，立即調(diào)整了設(shè)計(jì)方案，避免了項(xiàng)目后期才發(fā)現(xiàn)無(wú)法實(shí)現(xiàn)的災(zāi)難性后果。

• 團(tuán)隊(duì)信任的重建：當(dāng)我能夠用代碼清晰地表達(dá)想法，甚至能和他們討論v-if和v-show的區(qū)別時(shí)，我贏得了技術(shù)團(tuán)隊(duì)的極大尊重。協(xié)作從“對(duì)立”變成了“并肩”。

• 個(gè)人能力的壁壘：這項(xiàng)技能讓我成為一名“T型產(chǎn)品經(jīng)理”，在垂直領(lǐng)域建立了深厚的護(hù)城河。我既能理解商業(yè)，又能駕馭技術(shù)，提出的方案也更具可行性和前瞻性。

推行“動(dòng)態(tài)代碼原型”，并非要求每個(gè)產(chǎn)品經(jīng)理都成為全棧工程師。它的精髓在于培養(yǎng)一種 “代碼思維”：

• 邏輯的嚴(yán)謹(jǐn)性：代碼要求你思考每一種邊界情況，這迫使你的產(chǎn)品思維更加周密。

• 組件的復(fù)用性：你會(huì)自然而然地思考如何將功能模塊化，從而設(shè)計(jì)出更高內(nèi)聚、低耦合的產(chǎn)品系統(tǒng)。

• 對(duì)技術(shù)實(shí)現(xiàn)的敬畏：你了解了技術(shù)的邊界和成本，在設(shè)計(jì)時(shí)會(huì)更務(wù)實(shí)，更能做出在“用戶體驗(yàn)”與“開發(fā)成本”之間的最佳權(quán)衡。

“動(dòng)態(tài)代碼原型”是我找到的，終結(jié)產(chǎn)品與開發(fā)扯皮的最優(yōu)解。它本質(zhì)上是一種極致的同理心——我選擇走進(jìn)你的世界，用你的語(yǔ)言與你對(duì)話。

當(dāng)你把一份可運(yùn)行、可體驗(yàn)的“活”的原型交到伙伴手中時(shí)，你會(huì)發(fā)現(xiàn)，那些曾經(jīng)橫亙?cè)趫F(tuán)隊(duì)之間的墻壁，正在悄然瓦解。

本文來(lái)自作者：容騰毅

2025AI產(chǎn)品大會(huì)，將于12月20-21日在深圳開幕！

聚焦“AI+行業(yè)”的落地實(shí)踐，分享AI在物流、音視頻、內(nèi)容、數(shù)字化、工業(yè)制造、大數(shù)據(jù)、協(xié)同辦公、出海、具身智能、智能硬件等等領(lǐng)域的具體案例。