记得老大交给我第一个任务的时候，我特别兴奋的打开Axure，然后画了好久好久，什么都没有憋出来，以为自己能力很强，能够把一句话的需求，分分钟转换为一纸原型图。每次回顾上一次的工作时，都会在想，正确的且适合自己的原型设计方法应该是什么样子的呢，每次都有一些改进，但是没有进行完整的总结，只因为我比较懒，现在就总结一下啦~

原型设计前，我们到底应该要准备哪一些工作呢？

假如现在老大抛一个需求给你，那你该怎么办？

首先，该需求是属于已有产品的，还是需要设计一个新的产品呢？

其次，需求对应的业务流程又是什么样子的、使用的用户群体有哪一些

然后，提供线上处理的话，需要支持哪一些功能、包括的信息有哪一些

最后，绘制一份线框图，线框图看起来麻烦的话，可以加上功能流程图，拿给相关人员进行验证咯~

之前看过很多大神的分析，真的只是看过，等到自己实战的时候，才发现：白看了那么多干货，别人的经验总结是别人的经验总结，和我有什么关系，我也只能感叹一声“噢~好强大、就是这样子的哟~”所以说，看再多的干货都是无用的，需要自己去实践，在实践中检验别人的真理！

假定需求明确的前提条件下，比较全面的原型设计工作包括：

第一，业务&规则

1.梳理涉及到业务相关的人、事、物（和当前项目有利益关系的）

2.用例图

说明：前两点主要是为了让我们理清业务的涉及对象，产品功能的业务范围。

3.规则设计：产品的使用范围、产品设计的主要的目的，在规划产品功能的时候，有一定的指导作用

第二，功能&信息

1.梳理产品结构图（功能结构图）：该产品需要包括哪一些功能，也可以很方便的定义各个功能的优先级。

2.梳理信息结构图：了解产品需要哪一些基础数据，类似于表设计，只是说明有哪一些数据而已。

第三，页面&流程

1.梳理业务流程图（由于需涉及到相关角色较多，会使用泳道图）：绘制完成第二点的内容后，需要再结合用户的实际操作，根据当前系统能够提供的功能，来绘制出业务流程图。如发现哪一环节走不通，返回第二步，修改产品功能，继续完善业务流程图。

2.绘制线框图：找类似的竞品，绘制出每个功能对应的原型界面，绘制的时候，也看看信息结构图，以免设计原型的时候，遗漏重要数据。

3.功能流程图（对原型进行一个流程说明，针对产品功能来梳理功能之间的关系）：这一步也可以不做，关键看成员需求和产品的体系，为了保证页面的完整性，一般情况下，有时间就把原型对应的功能流程图绘制出来，这样子可以保证自己在绘制原型的过程中，不会遗漏某一个弹窗、次要页面等。

那么，展开来说就是：

一、业务分析

第一点，找出利益相关的事物

分为三大类：

用户，最常见的参与者

系统，和本系统有交互的系统（硬件、软件）

运行的进程，比如说时间，时间有时候会触发某一些进程

//产出物：用户场景分析//

第二点：理清产品规则（原则）

该产品主要的使用范围、用户范围、设计的主要目的

在产品开发的过程中、使用的过程中，会产生各种需求或者由于项目的进度，需要改变某些功能的优先级，那么拿出产品的规则说明来定义功能的优先级、需求

//产出物：产品规则说明//

第三点，绘制用例图

//产出物：用例图//

二、产品结构图（功能结构图）和信息结构图

第一点：先产品结构图

产品结构图，指产品功能结构图，就是说这个产品的所有功能模块结构图。比如微信分四个大模块：消息、通讯录、发现、我的，依次每个模块里面还有对应的功能。

目的：是为了梳理需求，防止出现缺页面，缺模块的现象，以鸟瞰的方式对整个产品的页面结构形成一个直观的认识；

产品结构图通常出现在我们产品的创意阶段，就是原型图出来之前。在这个阶段，其实我们对具体页面的元素，还是没有太清晰的概念的，我们可以先通过业务流程的来绘制出一份比较粗的功能结构图出来，绘制完成后，再去想当前的功能需要哪一些数据，当前的功能会产生哪一些数据，产品的数据需要从哪里去获取（比如说，相关软件提供、需要自己设计一个后台管理系统等），把这些数据罗列出来，绘制成信息结构图。

然后提供信息结构图，去完善功能结构图。

等我们的产品慢慢成型，每个页面的细节也出来的时候，我们也要同步更新功能结构图，这时候图中的一个节点变得更加细，可能代表功能一个模块，一个弹层，一个承载了功能的元素，用来告诉我们每个页面的功能，以及页面之间的跳转。

功能结构图可以通过备注去说明每个功能的优先级、技术实现、项目时间等因素

//产出物：功能结构图//

第二点：信息结构图

信息结构图：指脱离实际页面，将产品所有的数据抽象出来，组合分类的图表。比如：微信的用户资料包括：昵称、头像、微信号、二维码、地址、性别等。再比如：微信在朋友圈中，发布信息包括：文字、图片或小视频、时间等。

说明：

内容主要是产品需要展示的信息元素

作为开发建立数据库的参考依据，产品涉及到的数据均罗列出来，不会做到设计表结构的时候那么详细。

如果产品涉及到的信息比较多，可以分开列举，有一些信息之间会存在关联的关系。

//产出物：信息结构图//

三、业务流程图

主要是业务流程图，模拟实际的使用过程中，用户的操作流程，即：

角色：部门、岗位或人

活动：做了什么事情

次序：做这些事情的次序如何

规则：什么情况下到什么事情

注意：不能用一张图去说明整个业务，需要分清主次，把主要的业务节点抽出来，子流程单独进行绘制。

参考已有的功能结构图和用例图去绘制产品的业务流程图，通过分析实际的业务，来完善功能结构图，并完成业务流程图。

//产出物：业务流程图//

四、线框图

建议：

采用Axure灰度图

绘制之前使用自己的原型设计规范，这样子设计出来的页面会美观，同时会节约设计的时间

竞品的界面分析（这个其实在业务分析的时候就可以完成这一步），“抄”优点，学会识别“缺点”，有时间整理一系列的模板原型出来，或者是完善属于自己的元件库！

通过前面的功能结构图、信息结构图、业务流程图，对原型页面进行查漏补缺

页面命名规范，不要随便取名称

进行版本管理、修改记录

//产出物：产品原型设计稿//

总结：

大体流程是这样子说，其实在真正的工作中，有一些工作是可以省掉的，但是习惯一定要要成，一定要学会如何去分析一个需求，把它转为一个功能、一个流程、，快速的设计出完整且优秀的原型页面。前期工作做好了，在比较大型的项目中或者是版本迭代的时候，真的是百利无一害，加油吧~