Axure交互式按钮

使用交互样式（MouseOver鼠标悬停、 MouseDown鼠标按下、Selected选中、和 Disabled禁用）制作交互式按钮。

然后，添加交互以将按钮设置为“selected和disabled”样式。

下载培训文件

如果您还没有该文件，请下载AxureTraining.rp并在Axure RP中打开它，Axure培训网站上每个教程都包含在内。建议您使用该文件来学习教程，但是不这样的话，也可以按照以下指导步骤来做，这样一来不使用AxureTraining.rp也能学会教程。

步骤1：添加交互方式

首先在按钮上设置交互方式。

前两个交互样式MouseOver和MouseDown可以自动触发，无需再构建交互。当某一部件上为MouseOver样式时，鼠标移到该小部件上时，该部件会呈现出Mouseover的视觉效果。光标悬停在部件上时，点击鼠标，将暂时显示MouseDown样式。使用Selected和Disabled两个交互样式则需要构建交互。

打开AxureTraining.rp，然后打开画布上的“交互式按钮”页面进行编辑。该页面中有一个绿色实心按钮。

点击选中按钮。在检查器顶部的名称字段处将窗口部件命名为“交互式按钮”。

在“属性”选项卡中“交互样式”栏下，单击“MouseOver”，打开“设置交互样式”对话框中的“MouseOver”选项卡。

单击选中“填充颜色”复选框。选中任一样式将覆盖窗口部件的默认样式。

打开颜色选择器并选定色号05AE03（活力绿）。

注意，当打开MouseOver选项卡时，部件为MouseOver样式。

切换到“交互样式”对话框中的“MouseDown”选项卡。将MouseDown填充颜色设置为色号52CDE6（亮蓝）。在“选择”选项卡中，选定填充颜色B822C5（辉煌紫）。在“禁用”选项卡中，选择填充颜色DDDDDD（浅灰色）。

单击“确定”关闭“设置交互样式”对话框。

步骤2：预览

点击主工具栏中的“预览”按钮，在浏览器中预览页面。最好是定期在浏览器中进行预览，以确保能达到预期效果。

在浏览器中，将光标悬停在按钮上查看MouseOver样式。然后单击并长按按钮查看MouseDown样式。

步骤3：设置selected

只有当用“设置selected”操作将窗口部件设置交互为“selected”状态时，才可以动态显示“selected”样式。同样，仅当使用“disabled”操作将窗口小部件设置交互为“disable”状态时，才可应用“disabled”样式。

在属性选项卡的顶部，双击“OnClick”打开例编辑器，创建OnClick交互。

在左列中，单击选中“设置selected/checked”。

在右栏中，找到“交互式按钮”，然后单击选中该复选框。或者也可以选择“此部件”选项，因为要创建的交互是部件对其自身执行操作的交互。

在此列底部，可以看到文本“将selected状态设置为”以及两个下拉列表。第一个下拉菜单设置为“value”，第二个设置为“true”。可以将这些下拉框保持原样不变。

单击“确定”关闭对话框。

步骤4：预览

单击预览，在浏览器中查看此交互。

在浏览器中，单击按钮。首先将看到MouseOver样式，然后是MouseDown样式，最后是Selected样式。

步骤5：设置disabled

现在将交互变更为点击时为禁用而不是选中。

将刚刚创建的OnClick案例视作“案例1”。双击属性选项卡中的标签“案例1”将其打开以进行编辑。

在中心列中，标记为“组织操作”，单击“设置selected”操作，然后按[DEL]键将该操作从案例中删除。

在左栏中，选择“启用/禁用”操作。

在右栏中，单击“交互式按钮”复选框或“本窗口部件”复选框。

将在此列底部看到两个单选按钮：启用和禁用。选择“禁用”。

单击“确定”关闭对话框。

步骤6：预览

预览页面。

单击禁用按钮,即可看到禁用状态。

关注设计，而非工具，让我们把精力集中在设计本身，而非去努力学习某个“强大”的工具，这是Mockplus一贯的理念。Mockplus做原型，更快更简单，现在下载Mockplus，免费体验畅快的原型设计之旅。