原型产品外观设计与前端和后端工作密切相关

发布时间：2022-06-08 作者：admin 0

编辑介绍：对于产品经理，原型产品外观设计与前端和后端工作密切相关。因此，原型产品外观设计必须严格且标准化，以减轻自身和他人的工作压力。那么产品原型产品外观设计的工作方式是什么，以便后端开发人员可以快速理解产品外观设计的想法并理解功能逻辑机制？本文的作者总结了产品原型产品外观设计规范的“三步走”策略。

前言：

最近，当我将新手带入产品时，我发现当新手绘制原型时，他们通常可以自由地玩耍和自由绘画。最后，绘制的原型有数千人。 UI产品外观设计看着它并想打人，而前端开发则看着它并想诅咒。后端开发人员注视着……我的刀在哪里？

因此，今天，我想谈谈产品原型产品外观设计的规范，该规范概括为“三步策略”。

1.第一步：冷静下来UI产品外观设计 ——页面大小规范

当UI产品外观设计部门看到产品原型产品外观设计时，首先要考虑的是页面总大小应该多大以及页面内容是否可以完全显示。

在这里，为了使UI产品外观设计快速切入产品外观设计的工作，而不是纠缠于尺寸的比例缩放，并减少理解原型的难度，我们有必要将页面的整体尺寸标准化为产品外观设计。

（PS：假设您的原型页面布局无限接近页面的真实比例，这也是对UI的刺激：Brother已经设置了大小和布局，您是否只是想匹配颜色和手它在吗？）

例如：对于常见的Web端软件页面，建议将大小为1920 * 1080的产品外观设计标准化。效果完成后，可以使用F5预览。隐藏左侧页面目录后，正常显示可以在整个屏幕上展开，视觉效果立即充满！

上面的图片是手绘的页面效果（要全屏显示需要手动操作，可能无法实现）：

上图是页面规范的效果（自动填充全屏）：

比较以上两张图片后，结论很明显。另外，请尝试在同一页面上设置输入框，按钮和列表的长度和宽度，以使显示效果更好！

2.步骤2：让前端开发平静下来。要在——原型文件中添加的字段的说明

原型产品外观设计并非供产品经理使用，而是一种说明性材料，可以有效地帮助开发人员了解软件的功能意图。那些同意这种观点的人，请往下看，而不同意的人，请按ALT + F4。

良好的原型产品外观设计应该列出相关的产品描述材料，例如用于输入密码的帐户的文本框。您应该准确地指出相关的输入限制，如下所示：

上图显示了预览效果：

上图显示了单击黄色数字后的弹出内容：

上图显示了在RP文件中添加指令的位置：结合以上三张图片，告诉您如何添加组件说明和相应的显示效果；这使前端开发人员可以准确地了解每个领域或组件的准确含义，确保开发的准确性，并且由于某些领域的含义而避免了前端开发。我每天都在寻找产品并提出问题，因此，如果您能写清楚，则BB过多。

第三，第三步：让后端兄弟放下刀——原型，添加功能结构图和业务流程图

在完成以上两个步骤的前提下，下一步是面对后端开发人员。这时，他们最需要的不是产品经理的无休止的说明，而是可以真正帮助他们理清开发逻辑的说明性材料，例如功能结构图和业务流程图。

上图是功能结构图的示例，解释了页面结构和内容：

上图是用户创建驱动程序信息的流程图：

通过以上功能结构图和业务流程图的梳理，后端开发人员可以快速理解产品外观设计的思想，从而快速了解功能逻辑机制，自然就将“刀”放到了手中。

综上所述：已经解释了产品原型产品外观设计规范的三步过程，其核心思想只是一点。 ——产品的原型产品外观设计并不是产品经理的自信，而是可以有效帮助开发人员理解软件功能意图的说明性材料。

更多的工业外观设计【设计案例】请点击进入。