设计开发前的产品原型图

设计开发前的产品原型图？

 

原型图的绘制并不是为画图而画，我们在画原型图的同时相当于对产品进行初次设计，将产品经理提供的需求融合在界面中。原型图的设计是一个对整体的把控和思考的过程，前期确定好产品原型，后期在设计和开发的时候能减少失误。

一些新手设计师对整个产品开发的流程最初的认识：产品经理（原型图）—设计师（设计稿）—开发（代码编写）。之前我在制作的时候经常性出现尴尬问题：产品经理不给原型图，这样直接导致做设计的时候我既需要考虑产品交互又需要考虑页面实现效果，加长了设计周期，并且出现多次返工修改的现象。后期经理做了流程上的规范后，才找到开发的正确打开方式。

所以，接下来分享一下正确产品的思路，希望能帮助更多设计师更好的理解产品和更规范的思维方式。

 

一、原型图

目前无论是产品经理和交互设计师绘制的原型图包括两类：低保真原型图和高保真原型图，两者的具体差别请自行参考度娘。今天主要说一下低保真原型图，就目前制作情况来看，低保真原型操作快速方便，也能达到用户对产品的期望和要求。

二、如何做？

下面我以前不久做好的钱管家APP为例，原型图制作工具我习惯选择Axure PR，如下图：

为了保证整体视觉感受，将所有需求按照模块进行了分类，并在主页下的子文件中命名单独的模块，鼠标选中子页面，单击文字即可重新命名。如下图：

依次下去，将你所做的项目模块归纳整理后，双击进入到对应的子页面进行编辑。然后运用组件库的元件进行绘制，博主的组件库分为两类：一是在线下载实的用元件库，一是平时作图积累下来自己定义的元件。这样在有足够的元件情况下，能做到快速开发的效果，节省开发时间。

三、架构规范（重点）

1.保证每个框架位置的准确性。

2.做到有评有据。

3.符合交互运作规律。

4.根据设计规范来推导原型的规范，都是相同的道理。

做设计的都知道，从基本的点线面出发，每个元素都要考虑整体性，所以这里画的原型图，不是简单的根据产品经理提供的需求文档随便画画，不考虑交互和产品的特性，便会出现下面的如下图误区：

单看挑不出毛病，但是融入到后台数据后，发现他们不能在忘记密码页面以原手机号接收验证码。所以又做出了调整，下图是效果图：

所以有时候你的原型图不仅要符合产品、设计的理念，同时又要满足前端后台的可实施性。由此可见，原型图的绘制，是一个对整体把控的预演，后期虽然也能在设计稿中优化修改，但前期如果定好了基调，后期无论是设计还是开发，都会省事不少。

而且做这类原型图最大的好处（于我而言）就是，再也不用担心产品经理时不时的需求更改，毕竟在原型图里更改比在设计稿调整简单的多。

博主这次的原型图先暂时以模块来划分，目前还没以流程箭头串联起来，在我们还没有做交互跳转的时候，流程线无疑是最佳选择，以下是加了流程线的效果图。

本次教程就到这了，下期继续分享干货！