产品经理画原型最大的浪费不是时间是那份原型交给开发后开发还要从头再写一遍。如果原型本身就是开发能直接用的界面呢一、每个产品经理都经历过的原型翻译损耗小林是一家SaaS公司的产品经理负责客户成功模块。去年Q3她提了一个客户健康度评分系统的需求。她的工作流程是这样的写PRD——38页定义功能清单、业务规则、数据指标画原型——用Axure画了60多张页面标注交互逻辑、跳转关系、字段规则评审——拉着开发过一遍口头解释这个按钮点了之后跳到这里“这个列表要支持筛选”“这个分数低于60要变红”交付开发——原型文件扔给前端PRD扔给后端然后问题就来了。开发做出来的东西和她画的原型总有差距产品经理画的开发理解的差距来源列表页支持多条件筛选只做了单条件筛选原型里筛选区域画得不够明显健康度低于60显示红色做成了红色文字原型标注红色没说是背景色还是文字色详情页有趋势曲线做成了柱状图原型里画的是示意图开发以为是柱状图预警要发邮件和企微只发了邮件PRD里企微那行被开发看漏了这些差距不是开发的问题也不是产品经理的问题——是原型→代码这个翻译过程中必然产生的损耗。原型是静态示意代码是动态实现。中间隔着产品经理的口头解释、开发的理解偏差、沟通中的信息丢失。每一个环节都在漏信息。小林跟我吐槽的时候说了一句话我觉得说出了所有产品经理的心声“我最崩溃的不是需求被否而是我花两周画的原型开发花一个月写出来最后一看——这不是我要的东西。然后返工再改再返工。两边的 时间都浪费在’翻译’上了。”二、问题的本质原型和实现之间隔着一堵墙拆开看产品经理和开发之间的协作流程是这样的产品经理 → PRD 原型 → 开发理解 → 手写代码 → 产品验收 → 返工这个流程有四个损耗点损耗点一原型是假的Axure画出来的页面再精致也是静态图片。它不能点、不能输数据、不能跑业务流。开发看着一张假页面去写真代码靠的是理解和想象。损耗点二PRD和原型对不上PRD写了38页原型画了60张。字段校验规则在PRD第23页交互跳转在原型第47张。开发要在两个文档之间来回切换漏看几条是常态。损耗点三开发从零重建不管原型画得多细开发都是从头写——建组件、写样式、绑数据、调交互。原型在这个过程中唯一的作用是参考不产生任何代码复用。损耗点四验收阶段才发现偏差开发做完才知道这不是我要的。此时返工成本已经很高——代码写完了改一个字段校验规则可能牵连三四个文件。这四个损耗点加在一起消耗了产品经理和开发各自30%-40%的时间。三、小林怎么解决的用myBuilder替代Axure小林后来在CSDN上发现myBuilder起初以为又是一个低代码平台。但仔细看了一下她发现了一个不一样的东西myBuilder的页面设计器搭出来的不是原型图是真实的页面——带组件、带样式、带交互规则的真页面。这跟Axure有本质区别维度Axure原型myBuilder页面产出物静态交互图图片跳转链接真实的Web页面HTML组件样式能不能输入数据不能只有示意能表单组件真实可用能不能跑业务逻辑不能能配置显示规则、禁用规则、校验规则交给开发后开发从头写代码开发直接在此基础上接接口、写逻辑改需求改原型→通知开发→开发改代码改配置→页面即时生效小林决定试一下。她的思路变了——不再追求自己搭出一个能跑的MVP而是追求搭出来的界面开发能直接用。她做了什么第一步搭页面布局和组件2天小林用myBuilder的后台页设计器拖拽出了客户列表页和客户详情页。操作逻辑跟Axure很像——从左侧组件库拖组件到画布调整位置和样式。但区别是拖出来的不是图片是真实的页面组件。数据表格能真的显示数据表单能真的输入按钮能真的点击。第二步配交互规则1天这一步是myBuilder跟Axure最大的区别。在Axure里健康度低于60显示红色只能标注在原型旁边靠文字说明。开发看了之后自己理解——是背景红还是文字红含不含60在myBuilder里小林直接在属性面板配置了显示规则表达式。这个规则是真实生效的——数据低于60页面上的背景真的变红。小林说“以前我在PRD里写’当客户健康度低于60分时列表显示红色’——开发可能理解成’低于60含不含60红色是背景色还是文字色现在我自己配好页面上直接就是我要的效果——没有理解偏差因为做的人就是想的人。”第三步搭工作流示意图半天健康度低于阈值要触发预警。小林用myBuilder的流程设计器把预警流程画了出来——触发条件、条件分支、各分支的动作节点。这一步她当作比Axure流程图更直观的可视化来用。流程图里的节点配置她填了大致逻辑但具体的接口调用、消息推送这些需要写代码的部分她留给了开发。三天半后的成果小林拿着myBuilder里搭好的页面去找开发负责人。开发打开一看页面布局已经搭好了不用从头写HTML/CSS组件已经摆好了不用从零选组件库交互规则已经配好了不用猜红色是背景还是文字工作流结构画好了不用对着PRD理解流程逻辑开发负责人说了一句话“你要是每次都这么交付我们开发周期至少省三分之一。”四、myBuilder对产品经理的真正价值先说清楚——myBuilder不是让产品经理替代开发。小林搭出来的页面核心的数据接口、评分算法、跨系统数据对接、深度集成——这些仍然需要开发用代码实现。myBuilder里的交互规则、数据对接等功能需要通过代码脚本来完成产品经理做不了也不应该做这部分。myBuilder对产品经理的价值是完全替代原型工具并且产出物能直接给开发使用。具体来说传统模式AxuremyBuilder模式画原型→写PRD→交付开发→开发从头写代码搭页面→配规则→交付开发→开发在已有页面上接接口写逻辑原型是参考物不产生代码复用页面是交付物开发直接复用UI和交互配置交互规则靠文字描述理解偏差大交互规则真实生效所见即所得改需求→改原型→通知开发→开发改代码改配置→页面即时生效→开发同步看到验收阶段才发现这不是我要的搭的时候就看到效果偏差在交付前就消除了一句话总结原型从给开发看的参考变成了给开发用的半成品。五、产品经理用myBuilder能做什么场景产品经理做的开发做的内部审批系统搭审批表单页面、配字段校验规则、画审批流程结构写接口对接、实现消息推送、处理复杂审批逻辑客户管理界面搭客户列表/详情页、配显示规则和筛选条件、搭数据看板布局写数据接口、实现跨系统数据同步、复杂统计逻辑数据报表系统搭报表页面布局、选图表组件、配置展示规则写数据源SQL、实现ETL数据同步、复杂计算逻辑业务流程管理搭流程相关页面、画工作流结构、配表单规则写流程中需要的接口调用、异常处理、集成逻辑你发现没有——产品经理做的部分正好是产品经理最擅长的页面布局、交互设计、业务规则定义。开发做的部分正好是开发最擅长的接口、算法、数据集成。没有角色越界没有重复劳动。六、关于不会写代码怎么办这是产品经理最常问的问题。答案是——你不需要写代码但你搭的东西要足够清晰让开发接手时不用猜。myBuilder的渐进式设计恰好支撑这种协作第一层无代码拖拽组件搭页面配样式和布局。这一层产品经理完全胜任——操作逻辑跟Axure差不多只是拖出来的是真页面而不是图片。第二层低代码用表达式配规则——显示规则、禁用规则、校验规则。这不是写代码是写条件跟Excel的IF函数差不多。产品经理可以自己配也可以标注好规则让开发配。第三层全代码写JS或Java实现复杂交互和数据对接。这一层留给开发。产品经理不需要碰只需要在页面设计阶段把这里需要什么交互效果标注清楚。小林的经验是“第一层我自己全搞定第二层简单的我自己配、复杂的标注好让开发配第三层完全交给开发。我的原则是我搭到开发拿过来不用再猜’这页面要长什么样’的程度就行。”七、成本和上手难度维度说明费用12元永久授权比一个Axure团队版授权便宜两个数量级学习曲线有Axure/原型设计经验的产品经理2-3天可以搭出第一个页面需要写代码吗产品经理不需要。交互规则用表达式配置复杂逻辑交给开发做出来的东西能给开发用吗能。页面是真实的Web页面开发直接在此基础上接接口、写逻辑开发能拿到源码吗能。低代码开源90%的框架模块源码公开开发可以在此基础上修改和扩展做出来的系统能在公网跑吗能。myBuilder的官网和运营后台就是用自身开发的在公网上运行八、说句大实话写这篇文章不是为了说产品经理可以替代开发。恰恰相反——当产品经理用myBuilder替代Axure产出物从原型图变成开发能直接用的界面产品和开发的协作效率反而会提升一个量级。因为消灭了翻译损耗——产品经理搭的页面就是开发要实现的页面不存在原型→代码的理解偏差消灭了重复劳动——开发不用从零搭页面、选组件、写样式直接在已有页面上接接口写逻辑消灭了返工循环——产品经理搭的时候就看到了真实效果偏差在交付前就消除了不用等开发做完才发现这不是我要的小林后来把搭好的页面交给开发团队。开发看了之后说“你这个比PRD好使——因为我不用猜了。页面长什么样、交互怎么走、规则是什么你都已经配好了我只需要接接口就行。”从那以后小林公司内部的惯例变成了产品经理用myBuilder搭页面和配规则开发在此基础上接接口写逻辑。PRD从38页变成了一个可交互的页面链接。开发周期从原来的一个月缩短到了两周——省掉的不是开发的工作量而是重建的工作量。
