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

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

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

小部件设置

创建拨动开关的关闭状态

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

创建拨动开关的打开状态

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

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

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

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

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

预览互动

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

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签：