原型设计工具Axure RP新手教程（十）：轮播/幻灯片教程

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何制作旋转的轮播，横幅或内容幻灯片。 您可以将其配置为自动前进或单击一个按钮前进。（查看视频点击此处）

小部件配置

创建第一张幻灯片

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 从Libraries（库）窗格中将一个矩形小部件拖动到画布上，并使用Style（样式）窗格或样式工具栏中的Fill Color（填充颜色）选择器将其填充颜色设置为蓝色。

• 右键单击矩形，然后在上下文菜单中选择Create Dynamic Panel（创建动态面板）。

创建第二张幻灯片

• 双击动态面板以编辑其状态。

• 在画布顶部，单击State 1（状态1）。在出现的下拉列表的底部，单击Add State（添加状态），然后按Enter以创建State 2（状态2）。

• 将一个矩形小部件拖到State 2（状态2）画布上，将其放在（0,0）处，并将其填充颜色设置为红色。

创建第三张幻灯片

• 重复以上两个步骤，以使用其自己的矩形窗口小部件创建State 3（状态3）。将矩形小部件设为绿色。

• 单击画布右上方的Close（关闭），或按ESC退出状态编辑模式。

注意：创建自己的轮播时，您可以在动态面板的每个状态中包含所需的任何小部件。

在页面加载时使轮播自动旋转

• 单击画布上的空白点以选择页面本身，然后在Interactions（交互）窗格中单击New Interaction（新建交互）。

• 在出现的列表中选择Page Loaded（页面加载）事件，然后选择Set Panel State（设置面板状态）操作。

• 在目标下拉菜单中选择动态面板。

• 在[状态]下拉式选单中，选取[下一步]，然后勾选[从上到下换行]方块。 这将使动态面板在达到最后一个状态后返回其第一个状态。

• 在Animate In（动画输入）下，选择Slide Left（向左滑动）。

请注意：Animate Out（动画输出）部分会自动更改以匹配此选择。

• 单击More Options（更多选项），然后选中Repeat every 1000 ms（每1000毫秒重复一次）复选框。 选中Delay first state（延迟第一次状态更改），然后单击OK（确定）以保存操作。

• 这将使轮播继续自动前进，超出第一个状态更改，并且第一个更改将延迟到页面加载后一秒钟。

预览互动

预览页面。一秒钟的延迟后，转盘应开始旋转。

添加下一步按钮

• 返回Axure RP，切换到Libraries（库）窗格顶部下拉菜单中的图标小部件库。

• 在窗格左上角的搜索字段中输入箭头，然后找到所需的向右箭头。 将箭头图标拖到画布上，并将其放在动态面板的右侧。

• 选择箭头图标，然后在Interactions （交互）窗格中单击New Interaction（新建交互）。

• 在出现的列表中选择Click或Tap事件，然后选择Set Panel State操作。

• 在目标下拉菜单中选择动态面板。

• 在[状态]下拉式选单中，选取[下一步]，然后勾选[从上到下换行]方块。

• 在Animate In（动画输入）下，选择Slide Left（向左滑动）。然后单击确定以保存操作。

添加上一步按钮

用向左的箭头重复添加下一步步骤。将动态面板的状态设置为Previous，而不是Next，然后为Animate In动画选择向右滑动。

预览互动

预览页面，然后单击箭头以浏览轮播中的幻灯片。

附加信息和提示

滑动幻灯片

您可以为移动界面制作滑动幻灯片/轮播。为此，请使用动态面板的向左滑动和向右滑动事件来代替上述添加上一步和下一步中的向左和向右箭头。

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。