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

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

在本教程中，您将学习如何使用样式效果创建当按钮处于各种交互状态（例如，鼠标悬停或单击）时具有不同样式的按钮。

具体操作可以点击下方视频查看☟☟☟

小部件设置

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将按钮小部件拖到画布上。

• 选择按钮小部件，然后在Interactions （交互）窗格中单击Mouseover Style Effect（鼠标悬停样式效果）。
• 在出现的：mouseover块中，点击Fill Color（填充颜色）属性，然后在颜色选择器中选择一种粉红色。
• 单击OK（确定）保存操作。

Mousedown样式效果

• 在仍然选择按钮的情况下，在Interactions （交互）窗格中单击New Interaction（新建交互）。在出现的列表的底部，选择：mousedown样式效果。
• 在出现的：mousedown块中，检查Fill Color（填充颜色）属性，然后在颜色选择器中选择绿色。
• 单击OK（确定）以保存操作。

预览互动

• 预览页面并将鼠标悬停在按钮上，使其变为粉红色。
• 按住鼠标在按钮上，使其变为绿色。

• 将样式效果添加到按钮。
• 返回Axure RP，选择按钮小部件，然后在Interactions （交互）窗格中单击New Interaction（新建交互）。 在出现的列表的底部，选择：selected样式效果。
• 在出现的：selected块中，检查Fill Color（填充颜色）属性，然后在颜色选择器中选择一种紫色。
• 单击OK（确定）以保存操作。

• 在仍选择按钮的情况下，再次单击New Interaction（新建交互）。 选择Click或Tap事件，然后选择Set Selected / Checked操作。
• 在目标下拉列表中选择此小部件。
• 在Set （设置）下拉列表中保持选中状态，然后在To（到）下拉列表中选择切换。
• 单击OK（确定）以保存操作。

Disabled风格效果

将样式效果添加到按钮

• 在仍选择按钮小部件的情况下，在Interactions （交互）窗格中单击New Interaction（新建交互）。 在出现的列表的底部，选择：disabled样式效果。
• 在出现的：disabled块中，检查Fill Color（填充颜色）属性，然后在颜色选择器中选择灰色。
• 单击OK（确定）以保存操作。

• 在仍选择按钮的情况下，再次单击New Interaction（新建交互）。 选择上下文菜单（右键单击）事件，然后选择Enable/Disable（启用/禁用）操作。
• 在目标下拉列表中选择此小部件，然后在其下方选择禁用。
• 单击OK（确定）以保存操作。

预览互动