产品经理之路（三）Axure动态面板（快速入门+轮播图案例一）

Axure动态面板（快速入门+轮播图案例）

动态面板是axure的核心功能之一，但是有一定的难度，今天用一个简单的例子来一起学习一下。

首先理解一个概念：什么是动态面板？用来做什么？

动态面板就是多个页面按照“动态划分“合成一个原件，然后通过某种动作驱动展示。

动态面板有三种状态，通过动作来控制具体状态

所以：动态面板=状态面板+动作

下面来进行一个轮播图

新建一个轮播图面板，双击之后会出现选项

点击新增，增加三个，然后重命名，设为S1

双击之后，会进入到第一层面板的编辑界面

对这个状态新增一个矩形界面，填充颜色并命名

此时，在主界面的时候是可以看到状态一的，如下图

其他两个层的方法一样这时候就可以看见三个状态显示

这时添加三个按钮，为了防止混淆，我们可以给他进行命名操作，如下图

之后选择点击设置单击状态

三个都做完了的时候，这个时候点击预览，可以看到点击按钮在不停的切换

这个时候，切换的状态还很僵硬，我们可以给它加上一个滑动的效果

这时我们再点击却换的时候，就会有滑动的一个状态

我们还是觉得单调，这是我们可以增加一个翻页的按钮

向后循环的按钮的意思是在到了最后一张图片的时候，你是停止还是说重新到第一张图片上，选中之后是到第一张图片上

全部设置完了之后是这个样子的

但是这个时候，一般来说，正常的轮播图会是自动循环的，我们不点他他也会自己动，点的时候，也会按照我们想要的方式去动，所以我们在这个基础上再给他升级一步

单击右侧工具栏的页面载入时的操作，之后进入控制面板设置

这样设置后，在开始时就可以进行一个轮播的状态，但是会出现一个情况，就是当我们选中该并且点击之后，轮播就会停止，状态已经切换出页面载入时的状态，状态变了，这时我们需要给他进行一个修改，让他继续按照轮播图进行轮播。将鼠标单击时的case进行复制到鼠标点击时候。这时就出现了我们想要的效果。

到这个时候，一般的轮播图已经好了，但是在一般的网页中，比如淘宝等网页，轮播图上的照片是个可以进行拖动的，它可以在axure上实现么，当然是可以的，我们来试一试。

我们选中动态面板，这时候，右边的工具栏出现了和之前不一样的操作，比之前的三个多出来了一大堆，这些就是给我们做出一些高级操作的选项。

我们将之前的操作case进行复制到“向左拖动时“

这个时候我们初步的轮播图就做好了。