原型设计是产品经理的必备技能，“熟练掌握Axure、墨刀等工具的使用”经常出现在产品岗位的JD上。

网上有很多原型设计的教程，都是从一个个元件讲起，但对于产品新人来说，最快上手、最有成效的方法是直接去临摹一个产品。

01

首先，选择自己喜欢的一款产品，用思维导图画出该产品的功能结构图和信息架构图。

功能结构图的主要作用是“厘清逻辑”，可以帮助我们清晰地看到产品的核心功能、重要功能、辅助功能以及这些功能之间的从属关系；

信息架构图的主要作用是“信息分类”，可以让我们看到呈现在用户面前的繁杂信息的组织方式。

梳理功能结构图和信息架构图其实就是在拆解一个产品，把它拆成最本质的功能或信息的集合体，有助于增进我们对产品的理解。

02

其次，分析页面之间的流转关系。

我的习惯是从登录开始，假设自己要完成某个动作，记录下自己每一步操作时页面的流转。

比如微信，我们想查看一个好友的朋友圈，那么需要登录微信，登录后默认在消息页面，

如果和该好友最近有聊天，则进入聊天页面，点击对方头像；

如果没有聊天，则需要通过搜索或点击通讯录，在通讯录里点击对方头像；

或者点击发现页，在自己的朋友圈页面，看到他的动态后点击他的头像；

之后都会跳转到用户的个人信息页面，再点击朋友圈，跳转到对方的朋友圈页面。

点击他朋友圈右上角的头像，又可以回到他的个人信息页，点击发消息回到聊天页面。

这其中，我们就可以看到登录、消息、通讯录、发现、聊天页面、朋友圈、个人朋友圈、个人信息页等多种页面之间的关系，

也可以发现有的逻辑是固定的，像查看好友的朋友圈都需要点击他的头像、进入个人信息页才能查看，这样在画原型的时候我们只需要画一遍，设置跳转就可以。

前面都是准备工作，现在终于要开始上手制作原型了。

第一步，绘制框架，设置母版。

还是以微信为例，进入微信之后会看到它的底栏和顶栏的整体样式都是固定的，只是会有相对应的颜色、文字的切换，那我们就可以把这个固定的东西画出来，做成框架模板，这样就不需要每次都重复画了。

AXure上，可以先新建页面，画好之后，选择转换为母版；也可以直接添加母版，之后新建页面再把母版拖进来。

第二步，根据前面做的信息架构图，一层一层地填充内容。

这一步就是照着画就行，把需要的元件拖进页面，更改文字、尺寸，再进行排版。

建议不要纠结颜色、阴影等，毕竟现在只是练习，我们做出黑灰白的低保真原型就够了。

图源产品班

第三步，根据页面流程图，设置页面交互效果。

这一步可能会比较难，但一开始我们先考虑最简单的从页面一的某个按钮跳到页面二就好。

如果是在同一母版内的不同页面内容，也可以设置成动态面板，不同状态对应不同内容。

我的经验是看到不知道如何实现的交互，再在百度、b站看教程跟着学，有具体的应用场景，我们才能掌握得更好。

第四步，思考各种异常状态。

比如在登录页面输错了密码会怎么提示？网络断开的时候怎么办？

类似这样的问题和逻辑，其实也是我们设计的重点，这样开发小哥哥才能知道怎么做。

通过临摹一个产品，除了可以练习原型工具的使用，更重要的是锻炼我们的产品思维能力，

可以促进我们不断地思考：为什么这里是这样的、逻辑是什么、下一步怎么办？

这样我们自己设计的时候，也会更有条理。