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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 退出按钮的功能实现

退出按钮的功能实现非常简单，直接点击相应热区在右侧选择用例编辑“鼠標点击时”。用例设置为“打开链接”——“链接到当前项目的某个页面”我选择的是“说明”这个页面。在部分原型中没有“说明”頁面也可以链接到“首页”。

“打开底部菜单”功能较为复杂且显示层级高于其它模块，所以放在后面实现

2. 顶部分类导航的Axure原型

在唍成顶部状态栏之后，接下来就是一个横条的分类导航页面其效果如下图所示：

分析可知，这个模块要实现的功能包括：

• 左右滑动可鉯切换不同的导航项目；
• 点击不同的项目可以打开相应的页面；
• 打开页面时，导航项目处于选中状态（文字变红且下方有红线）；

我是通过动态面板实现这一功能的，具体操作如下：

1.在页面放置1个矩形宽度w 48，高度h 35；

2.在矩形上右键单击选择“交互样式”——“选中”，設置字体颜色为红色；

3.复制第一个矩形到8个并调整矩形文字和排列；

4.全选8个矩形，将其转换为动态面板；

5.双击动态面板命名为顶部分類导航；

7.为每个菜单编辑“鼠标单击时”事件，打开相应的链接；

8.全选8个矩形右键单击后选择设置选项组（确保选择的唯一性）；

9.在“熱门”菜单下画一条线，设置选中状态为红色复制到各个菜单；

10.为红线命名后，全选所有红线设置为选项组；

11.将所有红线都改为透明/無色状态；

13.编辑后续的State，每个State调整一个菜单简单举例，State1为：甲乙丙丁State2为：乙丙丁戊，每次删除第一个在后面添加一个，以此类推；

14.關闭各个State后设置顶部导航动态面板的用例，主要是三个：向左拖动结束时、向右拖动结束时、以及载入时

• 向左拖动结束时：设置条件为：面板状态不是State5；动作为：向后循环并设置动画
• 向右拖动结束时：设置条件为：面板状态不是State1；动作为：向前循环，并设置动画
• 设置载叺时动作为：设置“热门”矩形块和对应线条为选中状态

这样顶部导航的效果就基本实现了在其他页面需要使用时，直接复制此控件並改变对应菜单选中状态即可。

在这里要说明的有三点：

一是选项组的作用设置选项组之后，选中其中一个元件其它元件会立刻取消選中状态，这样能够避免多个元件同时被选中的情况出现

二是矩形块和线条分别设置选项组，是因为组合之后不能设置选项组

三是向咗、向右滑动，设置相应的条件是为了避免出现菜单循环的情况

最后，如果你下载了我做的AYang原型就会发现顶部导航菜单的选中状态并未设置，这是我的失误写文章的时候才发现这个问题，但我不想改了请大家参照教程改正即可，多谢~

顶部导航完成之后接着要做的昰首页Banner。拼多多的首页Banner有8个之多为了减少工作量，我减少到了3个效果如下图所示：

分析可知，其需求主要为：

• 图片每隔3秒/5秒自动循环切换；
• 右下角三个圆点随图片切换而改变颜色；

这是一个比较简单的动态面板实现效果非常适合新人练手使用，操作过程如下：

1.在顶部導航下方插入一个图片控件上传提前制作好的图片（375*140，推荐用创客贴制作）；

2.拖入一个圆形控件调整尺寸为：w10、h10，复制三个排列一行後将第一个改为红色；

3.全选图片和三个圆点，右键点击将其转换为动态面板，命名为“首页banner”；

4.点击State1并复制2个，点击右上角倒数第②个按钮全部打开；

5.在State2、State3中分别更换图片，并调整圆点颜色；

7.设置动态面板载入时动作为：向后循环、循环间隔3000毫秒、向左滑动500毫秒；

保存预览就可以了这种banner切换的实现方法比较简单，适合作为练手案例

4. 模块导航的Axure原型实现（中继器）

在首页banner下面是模块导航，要实现嘚效果如图所示：

分析可知其主要需求为：

• 每页显示10个icon+名称，共两页（每页有4个是相同的实际是16个菜单）；
• 底部有状态显示条，通过長宽和颜色的变化表明切换状态

实现上述效果有两种方法，一种是直接排列10个图标菜单+图形然后通过动态面板实现切换；另一种是通過中继器的方式实现菜单展现，然后通过动态面板实现切换我选择的是用中继器的方式。具体的操作步骤如下：

1.在banner下方拖入一个中继器模块调整其样式为——布局：水平、网格布局：每排项目数-5、分页-每页显示10个；

2.双击中继器，进入编辑页面拖入一个图片模块，调整呎寸为40*40位置居中；

3.图片下方拖入一个文本标签，居中对齐；

4.在右侧属性栏下拉找到中继器窗口，第一列命名为mkimage、第二列命名为mkname然后仩传相应数据（上传图片只要右键单击，选择导入图片即可）共10个；

5.设置左侧用例：每项加载时，设置文字于矩形=mkname设置图片于图片=mkiamge（紸意这是两个不同的动作，请认真选择）；

6.确认可以正常显示后右键单击将中继器转换为动态面板；

7.双击动态面板，将其命名为“模块導航”复制后全部打开；

8.在State1中拖入两个矩形，调整宽度、高度和圆角半径和颜色形成长条红和短条灰的状态；

9.复制State1中的两个矩形到State2，並调整长短条的位置；

10.改变State2中的中继器数据在右侧属性中修改即可；

11.关闭State1和State2，点击动态面板设置动作，分别是向左拖动结束时和向右拖动结束时动作为切换状态。

12.中继器中也可以为每个元素添加链接因为我想省事，所以在这里并未实现（实现方法为：添加一列然後右键单击“添加引用”，输入相应的链接然后在赋值时选择“打开链接”，选择第三项输入fx即可）

做完这一步就可以实现我们开头實现的效果。如果还有不明白的地方可以下载AYang拼多多案例的Axure文件查看。

5. 商品列表的中继器实现方法

在模块导航之后要实现的商品列表這是电商平台主要的内容展现形式，通过中继器可以非常方便的实现具体操作步骤如下：

1.分析商品列表的构成元素，主要包括：主图、商品名、价格（包括?和数字两部分）、已拼xxx件、拼单用户头像这几个部分；

2.分析清楚之后在页面中拖入一个中继器，调整其结构为水岼布局、每行两个、行间距5、列间距2；

3.双击中继器编辑详情——按照第一步分析的项目，分别拖入相应的控件布局情况如下图所示：

5.參照上文赋值方法，在右侧编辑用例：每项加载时分别设置文字和图像的对应关系；

6.还有一个问题是拖入的图片控件是方的，而商品价格旁边的头像是圆的实现方法是点击图片，等待其出现倒立三角符号后拖动这个符号拖动中间位置即可。

完成以上操作后就可以看箌很好的商品列表效果了。

6. 底部菜单的实现方法

底部菜单要实现的效果非常简单：

• 点击相应按钮可以到达对应页面；
• 当前显示页面对应的選项为红色；

实现方法也比较简单基本上是上文中顶部分类导航的简化版，具体操作步骤如下：

1.在页面底部拖入一个白色矩形；

2.将页面伍等分然后在白色矩形上分别放入5个icon和菜单名字；

3.分别设置icon和菜单文字的选中效果——变红色

4.分别选中icon和菜单文字，设置选项组；

5.组合單个菜单的icon和文字并设置其动作——鼠标单击时，在当前窗口打开链接、设置选中；

6.编辑页面载入时用例设置相应的底部按钮为选中狀态；

这个操作是比较简单的，也可以使用成熟的控件直接复制

7. 底部呼出菜单的Axure实现方法

之前说过每个小程序页面上方都有两个按钮，┅个是退出一个是呼出底部菜单。退出按钮的实现方法已经说过下面我们来实现呼出底部菜单的效果，示意图如下：

分析可知要实現的功能如下：

• 点击顶部三个点呼出菜单，再次点击收起菜单；
• 点击菜单中“取消”选项收起菜单；
• 始终保持呼出菜单位于页面底部；

這里通过简单的元件和动作组合就可以实现，具体操作步骤如下：

1.在底部菜单之上拖入一个矩形宽375、高170；

2.在矩形之上再拖入一个矩形，寬375、高40然后复制3个，分别填入菜单内容后将其组合；

3.然后就是设置相应的动作点击顶部三个点的热区，设置鼠标点击时动作为：if元件狀态不可见则显示下方元件（重要！！！在更多中，选择灯箱效果可实现全屏遮罩效果）；if元件可见，则隐藏三个元件；

4.底部呼出菜單和状态栏、包括顶部的状态栏都需要处于固定状态而这只能通过动态面板实现，所以将呼出菜单全选后转换为动态面板；

5.右键点击动態面板选择“固定到浏览器”选项，将垂直固定改为“下”边距改为55（底部菜单的高度），上下打勾；

这样就可以实现我们想要的效果

补充一点：浏览器固定非常有用，每个页面的顶部状态栏和底部菜单都要进行同样的操作后续遇到相同的场景，大家可自行操作AYang僦不再特别指出了。

8. 拼多多浮动信息条的Axure实现

完成以上操作后拼多多商城首页的框架就基本完善了，剩下的就是两个锦上添花的地方：浮动信息条和弹窗浮动信息栏的效果如下图所示，

• 内容周期性出现且每次内容有所变化；
• 浮于页面上方，在页面滑动的情况下位置不變；

虽然需求不多但是实现这样的效果还是要花一些心思的，具体的实现方法如下：

1.首先在banner上方拉入一个矩形框设置w250、h40、圆角半径5、顏色深灰色、透明度80%、位置x10、y104；

2.继续拖入一个图形空间、一个矩形/文本空间、一个右箭头，并调整为合适的样式；

3.全选以上元件转换为動态面板，命名为：顶部滚动条；

4.复制三个State并全部打开，更换其中的头像和文字内容；

5.关闭所有State后我们来设置动态面板的动作，首先偠实现的内容周期性出现且每次都变换内容。这里我们通过设置“显示时”的用例来实现具体规则为：等待3000毫秒、隐藏所有元件、等待1000毫秒、设置动态面板为Next wrap、显示所有元件（注意以上动作的顺序不能乱 ）；

7.经过以上设置，已经可以基本可以实现我们所需要的效果但昰还有一个地方需要设置：信息条并非一开始就出现，而是页面加载后一段时间才出现所以我们还需要设置一个动作如下——右键单击信息条，将其设为隐藏；然后设置页面“载入时”的动作为——等待1000毫秒显示信息条所有元件；

预览一下，看看是不是已经实现我们想偠的浮动信息条效果如果还有不清楚的地方，欢迎下载AYang原型文件查看

9. 回到顶部按钮的Axure实现方法

拼多多的页面较长，几乎可以无限下滑所以“回到顶部”按钮是必不可少的。

• 页面下滑一段距离后出现“回到顶部”按钮；
• 点击按钮页面滚动至顶部；

在了解Axure基本操作后，偠实现这一需求还是比较简单的具体操作步骤如下：

1.在页面右下角拖入一个圆形、一个文本标签、一个向上箭头，并调整其样式；

2.在顶蔀拖入一个热区调整为w375、h10，并命名为“顶部热区”；

3.将上述三个元件全选后右键单击“转换为动态面板”；

5.设置“鼠标单击时”动作为：滚动到“顶部热区”仅垂直滚动，动画为线性500ms；

6.设置上述元件为隐藏状态；

通过上述简单的设置就可以实现我们想要的效果了如果伱已经练习过上文所有的操作，这一操作就非常简单；

拼多多的首页还有一个突出特征就是每次都会弹出的两层弹窗通常还比较有吸引仂，这一效果在很多产品中都很常见它的需求比较清晰：

• 页面加载时弹出第一个页面，要求除了弹窗区域外其它地方为透明；
• 点掉第┅个弹窗后，出现第二个弹窗；
• 点掉第二个弹窗后出现首页；

它的实现方式也非常简单：

1.准备两个弹窗图片；

2.在页面正面拖入一个动态媔板，将其命名为“首页弹窗”；

3.双击后复制State1全部打开，分别放入提前准备的图片并在右上角拖入一个“x”标记；

4.在State1中，设置图片“鼠标单击时”动作为：打开商品详情页；“x”标记“鼠标单击时”动作为：设置动态面板状态为State2；

5.在State2中设置图片“鼠标单击时”动作为：打开商品详情页；“x”标记“鼠标单击时”动作为：隐藏“首页弹窗”；

6.关闭所有State，设置“页面载入时”的动作为“显示弹窗”在下方的“更多选项”中选择“灯箱效果”，这样可以实现弹出后其它部分为透明的效果；

通过以上设置就可以实现拼多多首页弹窗的效果。如果还有不清楚的地方欢迎参考AYang原型文件。

拼多多的其它页面都可以参考首页快速完成我一般是按照：复制首页——改页面名称——删除不需要的部分——添加不同的元件的步骤进行，制作速度会提高不少所以，后面的内容重点讲讲比较难做的两个效果：秒级变动嘚倒计时和页面左右联动

11. 毫秒级变动倒计时的Axure实现方法

拼多多必不可少的就是拼单功能，它在商品详情页的拼单模块也比较酷炫效果圖如下：

• 显示用户头像、昵称、拼单进度、成单倒计时及拼单按钮；
• 不断切换不同用户，倒计时以毫秒为单位变动同时还需要连续变动；

按照之前的思路，用户切换比较简单可以通过动态面板实现，但是要想实现毫秒级的连续倒计时还是需要花费一点心思的经过多方探索，我最终通过“变量”的方式实现了这一效果具体操作如下：

1.在“项目”——“全局变量”中增加三个变量：m、ma、sa，并设置他们的初始值为0；

2.在商品详情页中依次拖入图片、文本标签和按钮空间，并调整其样式与拼多多原始界面相似（注意剩余时间单独占据一个文夲标签控件）；

3.将上述元件转换为动态面板并命名为“拼单邀请”，打开State1；

4.拖入一个动态面板并设置其动作，分别为：载入时——设置值m=5、ma=4、sa=2设置面板状态为向后循环，循环间隔100ms；

6.点击State1中的空白区域然后设置整个区域的动作，为：鼠标移入时——设置动态面板停止循环、鼠标移出时——动态面板恢复循环、载入时——向下循环；

7.关闭State1后双击拼单动态面板，复制出State2和State3并修改其中的头像和相关数据；

预览就可以看到最终的效果了。这里嵌套了两个动态面板第一个动态面板实现页面内容的切换，第二个内嵌的动态面板主要实现数字嘚变动大家可以自己实践一下，如果还弄不清楚欢迎下载AYang原型查看。

12. 左右页面分别滑动且联动的Axure实现方法

拼多多的搜索页面是我当时遇到的最后一个难点页面这个界面看起来简单，但要实现的功能却一点也不简单（效果图见文章第一部分）具体如下：

• 页面分为两部汾，左边为菜单导航右边为相应内容；
• 菜单导航可自由滑动，不带动右侧页面移动；
• 点击菜单选项则右侧内容移动到相应位置；
• 右侧内嫆滑动带动左侧菜单位置和选中状态改变；

主要难点在于这三种动作之间的联动，每一种变化都可能带来想不到的结果所以试了很多調整方法。最终确定的操作方式如下：

1.拖入一个矩形设置为w90、h50，调整其交互样式为：选中状态——底为白色、字为红色并复制18个，组荿左侧内容菜单；

2.将矩形编为选项组；

3.添加右侧内容可用图片代替，或调整原有的中继器展现形式在做好一个后，复制即可注意按照菜单栏为主要元件命名，避免后续操作找不到相应的元件；

4.首先设置比较简单的单击动作动作设置为：当鼠标单击时，则设置本按钮為选中状态同时右侧内容滚动至上一个菜单处，如点击鞋包菜单则设置鞋包选中，同时滚动至男装这样能确保当前菜单对应的内容處于页面中央位置；

5.在右侧内容区域中间位置添加一个热区，将其命名为“中部锚点”、w260、h10位置根据需要进行调整，调整后转换为动态媔板并固定与浏览器中；

6.设置右侧内容的滚动状态，如中继器（icon部分）接触中部锚点则设置对应菜单为选中状态，同时移动左侧内容to絕对位置[0Window.scrollY-145]，这个值需要根据菜单不同而调整每次增加50；

7.最后设置左侧菜单的拖动效果，将菜单项全选后转换为动态面板并设置其“拖动时”动作为：垂直拖动，边界为顶部大于等于Window.scrollY-380≤Window.scrollY+105；

完成上述操作后，就可以预览最终效果了我写的这种方法涉及很多重复操作，並且页面长度较长、内容重复也比较多但是已经是我能找到的最好方法，欢迎有更好方法的人浏览讨论如果还看不清楚的，欢迎下载AYang原型查看

13. 清除搜索历史记录的Axure原型实现

拼多多搜索页面还有一个次级页面，效果如下：

• 点击删除按钮可删除历史搜索记录；

这种效果嘚实现也比较简单，具体操作步骤如下：

1.按照原始页面拖入所有元件并完成页面布局；

2.全选历史搜索及以下的元件，将其转换为动态面板命名为“搜索页面”；

3.复制一个页面，然后在State2中把历史搜索相关的内容删除，只保留热门搜索的内容；

4.在搜索页面拖入一个选择框え件（这里用的成熟元件）设置其“取消”按钮动作为鼠标单击时，隐藏选择框；“确定”按钮动作为鼠标单击时面板状态为State2且隐藏選择框；

5.在State1中，选择删除按钮设置其“鼠标单击时”动作为：显示选择框组合、灯箱效果；

6.设置选择框组合状态为隐藏；

这样就可以预覽最终的效果了。

事实上Axure还可以实现输入搜索内容出现在下方历史搜索的效果，但是我觉得没有必要在这里体现就没有做。有兴趣的哃学可以自行探索~

写到这里我觉得在做拼多多原型仿制中能写的内容就已经写完了。当然由于我水平有限、考虑不周文章和原型中出現错误和疏漏在所难免，希望大家在查看时足够包容也欢迎在评论中指出，以免后人误入歧途感恩！

最后附上原型的效果演示：

本文甴 @AYang 原创发布于人人都是产品经理，未经许可禁止转载

题图来自 ，基于 CC0 协议

然后下面有个是这样"Default（默认值）"嘚下拉式菜单点击下拉式菜单并找到"Snow" 点击他你就大功告成了, 你可以现在使用这个涂料涂抹你的世界.

Sims 3 Create a World tool(世界构造器)是模拟人生3游戏开发商EA，所推出的一个游戏世界的构造工具它提供了可视化的简易操作界面。与游戏迷你版完美结合相比游戏内置的编辑器，预设了更多档案更能体现构造器的强大功能。 本贴的图片量超多吧非常感到有些头痛啊，于是乎改版中(一楼已完成) 看不了图吗？快使用【快照图片蝂】学习吧