产品经理必备技能 | 如何画原型

产品经理当然要会画原型啦~

聊聊怎么画原型吧！

在画原型之前，更重要的事情，就是画页面流程图和信息架构图！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。

页面流程图

页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。

为什么要画页面流程：

（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本

（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题

（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量

页面流程图包含：

（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示

（2）流向：主干流向和辅助流向

（3）重点元素：每个流程中，重点要体现和表达的内容是什么

画页面流程图的工具：

（1）Axure：画了页面流程图可以紧接着画原型

（2）ppt：方便讲解

需要注意的地方：

（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。

（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。

（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。

页面流程图一般规则：

页面流程图例：

一个具体案例：

业务流程：

页面流程：

主要是分离出了普通用户的操作流程，加异常处理。

对于普通用户的关键页面和关键流向：

页面流程图：

（1）分离出5个页面，确定流程流向

（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...

（3）针对每个页面去画对应的原型图

信息架构图

信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。

信息架构图例1：

产品原型设计

有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？

产品原型，俗称线框图，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。

产品从原型到上线的流程：

大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要兼职交互设计...

案例：

好的原型有什么特点：

（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求

（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰

（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一

常用工具：

（1）纸笔：自己画画，快速学习和定位

（2）白板：多人讨论

（3）软件Axure/Sketch/墨刀：产出正式文档

案例：

（1）研究流程：业务流程->页面流程

（2）确定页面框架：大概确定页面布局和大的框架

（3）画原型：画模块，确定交互细节

注意事项：

（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。
（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。

（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑

（4）目录树清晰，阅读流畅

（5）保存修改记录，关键修改重新保存文件

画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。

用Axure动手画原型之前的灵魂拷问：

产品需求想明白了没？？？

产品流程理清楚了没？？？

手绘草图画了没？？？

手绘草图和Boss确认了没？？？