原型设计工具Axure RP新手教程（二）：交互式按钮教程

---

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（确定）以保存操作。

预览互动

• 预览页面，然后单击按钮将其设置为选定状态并使其变为紫色。然后再次单击以删除所选状态。
• 右键单击该按钮将其禁用并使其变为灰色。

---

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

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