网络上的教程都是关于Axure的某个功能，或者基于某个实现方法而进行解释的。但作者更希望，是从头到尾打造一个完整的应用，而从中学习到Axure的使用与方法。

Axure是产品经理最常用的工具软件之一，熟练掌握这一工具对产品经理至关重要。在学习的时候，我一直推崇“练中学、学中练”的学习方法，相较于单纯的原理学习或者一个控件、一个原理的实现，一个完整的项目会激发你所有可用的知识，并要求你去不断学习新的知识点，同时高强度的重复操作也会加深对Axure基本操作的认知。

同时，我也更为推崇文章类型的教程，因为可以反复查看、反复对照，比音频更直观、比视频更省时间。

可惜的是，在我学习的时候并没有找到这种符合要求的教程。

最近，因为个人原因，需要仿制一个拼多多的原型文件。借助这一契机，我写了这样一篇文章，希望能对同好有所帮助。

因为这是一篇实战性的文章，所以对原理部分介绍的比较少。如果大家需要，可以根据自己的需要学习研究。

一、拼多多原型项目的难点

在制作拼多多原型的过程中，除了动态面板、中继器等对新手来说比较难的常规操作之外，还有三个地方给我留下了深刻的印象：

第一个，很多页面都会出现在顶部的浮动信息栏，时隐时现，并交替出现不同的内容，同时在页面滑动时始终保持固定的位置；

第二个，商品详情页中的参与拼单倒计时，会显示不同用户的信息，同时剩余时间还会以秒为单位减少。这个效果相当酷炫，当然实现它也耗费了我大量的精力；

第三个，搜索界面中，菜单和页面内容呈左右排列，两边均可自由拖动，内容拖动带动菜单改变；菜单拖动，页面内容不变；点击菜单，页面内容滚动到相应位置——为了实现这一效果，我先后使用了三种方法，最终才找到现在的解决之道。

当然，以上三点是我个人感觉在制作拼多多Axure原型中比较困难的地方，其他Banner切换、菜单切换、商品列表、弹窗等常规操作没有一一列出，在后续的内容中都会一一描述，为Axure新手提供相应的参考。

二、拼多多Axure原型制作的前期准备

对初学者来说，必须首先熟悉Axure的各项基本操作，这里推荐小楼的基础教程，网上一搜就可以找到。在掌握基础操作之后，就需要制作一张拼多多功能列表的思维导图，我的成果如下所示：

通过思维导图分析，我们可以看到拼多多原型主要会有5个页面：首页、推荐、搜索、聊天、个人中心

在这里，我详细列出了主要的页面和页面内各模块的相关信息，并提前预演了不同模块的实现方式。通过提前制作思维导图，可以理清思路，同时也方便在原型制作过程中一一对照，防止遗u漏。顺便一提，我所使用的思维导图工具是XMind，基础功能已经足够使用，不用破解。

三、拼多多APP设计

对于仿制工作来说，**的好处就是不用思考布局问题。在Axure中插入图片控件——拖入拼多多首页截图——固定长宽比例——设置宽度为375——画出各模块参考线

这里，我又偷了一个懒，直接右键选择“分割图片”，把页面顶部保留下来作为原型的一个模块，然后添加两个热区分别实现“退出”和“打开底部菜单”的交互。