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

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

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

具体操作可以点击下方视频查看/strong>

小部件设置

• 打开一个新的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（确定）以保存操作。

预览互动

标签：