原型设计工具Axure RP入门教程（十三）：拨动开关教程

---

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

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

---

在本教程中，您将学习如何创建一个在打开和关闭时都会改变颜色的切换开关。

小部件设置

创建拨动开关的关闭状态

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将Box 3小部件拖到画布上。将其宽度设置为50，将其高度设置为20。在样式窗格中，将其角半径设置为25。
• 接下来，将一个椭圆小部件拖动到画布上，并将其宽度和高度都设置为30。
• 使用顶部工具栏中的对齐选项，将椭圆拖到矩形的顶部，并在左侧和中间对齐。这对小部件将为切换开关的关闭状态。

创建拨动开关的打开状态

• 选择小部件，复制它们，然后将它们的副本粘贴到画布上。
• 将重复椭圆的填充颜色设置为蓝色，并将其与矩形小部件的右边缘对齐。这对小部件将是拨动开关的打开状态。

将切换小部件放置在两个状态的动态面板中

• 选择关闭窗口小部件对，右键单击选择，然后在上下文菜单中选择创建动态面板。
• 在大纲窗格中，将光标悬停在新的动态面板窗口小部件的项目上，然后单击右侧的添加状态图标。
• 仍在轮廓窗格中，选择上椭圆和矩形，然后将它们拖到右侧以使其在状态2下缩进。这会将它们添加到该动态面板状态并在画布上打开该状态。
• 将上椭圆和矩形移动到画布上的（0,0）。
• 单击画布右上方的关闭，或按ESC退出状态编辑模式。

单击时，将动态面板的状态设置为下一步

• 选择动态面板状态小部件，然后在交互窗格中单击新建交互。
• 在出现的列表中选择Click或Tap事件，然后选择Set Panel State操作。
• 在目标下拉列表中选择此小部件。
• 在状态下拉列表中，选择下一步。然后选中出现的从最后到第一包框。这将使动态面板在达到最后一个状态后返回其第一个状态。
• 单击确定以保存操作。

预览互动

预览页面，然后单击切换开关将其打开和关闭。

---

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