编者按:对于产品经理来说，原型设计与前端和后端工作息息相关，所以原型设计一定要严谨规范，这样才能减轻自己和他人的工作压力。那么在产品原型设计中可以做些什么让后端开发快速理解设计思路和功能逻辑机制呢？作者为我们总结了产品原型设计规范的“三步走”策略。

前言:

最近在带新品的时候，发现新品在画原型的时候经常是自由发挥，自由发挥。最后画了几千个原型，看UI设计就想打人，看前端开发就想骂人，& # 8230；…我的刀呢？

所以今天，我想谈谈产品原型设计的标准化，概括起来就是“三步走战略”。

首先，第一步:让用户界面设计冷静下来——页面大小规范

UI设计师看到一个产品原型设计，首先关心的是整体页面大小应该有多大，页面内容是否能充分显示。

在这里，为了让UI设计快速切入设计工作，而不是纠结于大小的等比例，降低原型理解的难度，我们有必要规范页面的整体大小。

(PS:假设你的原型页面布局无限接近页面真实比例，也是对UI的鞭策:大小布局我已经定好了，你不会只是提交一个颜色的稿件吧？！)

例子:比如一个常见的web端软件页面，建议设计成1920*1080的大小。效果完成后，大家可以用F5进行预览。普通显示器隐藏左页目录后可以在整个屏幕上铺开，视觉效果瞬间饱满！

上图是方便绘图页面的效果(手动展开全屏是必须的，也是不可能的):

上图是页面的标准化效果(自动展开全屏):

对比以上两张图，结论很明显。另外，请尽量在同一页面上统一设置输入框、按钮、列表的长度和宽度，这样显示效果更好！

第二，第二步:让前端开发冷静下来——对原型文件中要添加的字段的描述

原型设计不是让产品经理自激，而是帮助开发人员有效理解软件的功能意图。同意这个观点的请往下看，不同意的请ALT+F4。

一个好的原型设计应该列出关于产品的说明材料，比如一个用于账号输入密码的文本框，并且你应该准确的指出相关的输入限制，如下图所示:

上图为预览效果1:

上图为点击黄色数字后弹出的内容:

上图为RP文件中添加指令的地方:

结合以上三张图告诉大家如何添加组件描述和对应的显示效果；通过这样做，前端开发人员可以准确理解每个字段或组件的确切含义，保证开发的准确性，避免前端开发人员每天因为某些字段的含义而向产品提问。如果能写清楚，就不要BB太多。

三、第三步:让后端大佬放下刀——给原型添加功能结构图和业务流程图

在做好以上两步的前提下，后端开发者马上就要面临。此时他们最需要的不是产品经理没完没了的解释语句，而是真正能帮助他们理清开发逻辑的解释性材料，比如功能结构图、业务流程图。

上图是说明页面结构和内容的说明性功能结构图:

上图为用户新司机信息流程图:

通过梳理以上功能结构图和业务流程图，后端开发可以快速理解设计思路，从而快速理解功能逻辑机制，自然放下手中的“刀”。

总结一下:产品原型设计规范的三个步骤已经讲过了，核心思想只有一点——产品原型设计不是产品经理的自尊，而是可以有效帮助开发者理解软件功能意图的解释性材料。