交互式按钮 | Interactive Button

在本教程中，您将学习如何使用样式效果创建一个按钮，当该按钮处于不同的交互状态（例如鼠标悬停或单击）时呈现不同的样式。【原型预览】

1、原件设置

1. 打开一个新的RP文件，然后在画布中打开Page 1。
2. 拖拽一个按钮元件到画布中。

2、鼠标悬停样式效果

1. 选中按钮元件，然后点击交互面板中的鼠标悬停交互样式。
2. 在出现的:鼠标悬停区域中，勾选填充颜色属性，并在颜色选择器中选择一种红色。
3. 点击确定按钮保存操作。

3、鼠标按下样式效果

1. 在按钮元件选中状态下，点击交互面板中的新建交互按钮，在弹出的列表底部，选择:鼠标按下交互样式。
2. 在出现的:鼠标按下区域中，勾选填充颜色属性，并在颜色选择器中选择一种绿色。
3. 点击确定按钮保存操作。

4、预览交互样式

1. 预览页面并将鼠标悬停在按钮上以使其变成红色。
2. 在按钮上按下鼠标以使其变成绿色。

5、选中样式效果

给按钮添加交互样式

1. 回到Axure RP中，选中按钮元件，点击交互面板中的新建交互按钮，在弹出的列表底部，选择:选中交互样式。
2. 在出现的:选中区域中，勾选填充颜色属性，并在颜色选择器中选择一种紫色。
3. 点击确定按钮保存操作。

将按钮设置为选中状态

1. 在按钮选中状态下，再次点击新建交互，选择单击时事件，然后选择设置选中动作。
2. 在目标下拉列表中选择当前元件。
3. 保持设置下拉列表中的值不变，然后在为下拉列表中选择切换。
4. 点击确定按钮保存操作。

6、禁用样式效果

给按钮添加交互样式

1. 在按钮元件选中状态下，点击交互面板中的新建交互按钮，在弹出的列表底部，选择:禁用交互样式。
2. 在出现的:禁用区域中，勾选填充颜色属性，并在颜色选择器中选择一种灰色。
3. 点击确定按钮保存操作。

将按钮设置为禁用状态

1. 在按钮选中状态下， 点击新建交互按钮，选择鼠标右击时事件，然后选择启用/禁用动作 。
2. 在目标下拉列表中选择当前元件，然后选择它下面的禁用。
3. 点击确定按钮保存操作。

7、预览交互样式

1. 预览页面，点击按钮将其设置为选中状态以使它变成紫色，然后再次点击以取消选中状态。
2. 右键单击该按钮将其设置为禁用状态以使其变成灰色。