交互式按钮 | 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. 右键单击该按钮将其设置为禁用状态以使其变成灰色。
评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注