最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

Axure的7种交互样式(3)-选中的交互样式

教程 小楼一夜听春语 262浏览

元件样式发生颜色的改变非常常见。

例如一个橙色的关注按钮,点击之后变为灰色,并且文字变为取消关注。

再次点击时,还能够变回橙色的关注按钮。

这是通过用户点击操作产生的样式改变,所以是交互样式。

实现这个案例,需要先为按钮设置默认的文字与样式。

然后,在交互面板中为按钮添加元件选中的交互样式。

在交互样式的设置中,将填充颜色设置为关注后的颜色。

但是,到这里还没有结束。

因为点击按钮的时候,并不会发生颜色的改变。

所以,我们要清晰的了解一个概念:点击不等同于选中。

元件有选中和未选中两种状态,需要通过交互设置才能够改变元件的状态。

接下来,我们还需要新建交互。

先选择[单击时]的触发事件,然后再选择[设置选中]的动作,动作的目标是[当前元件],也就是当前添加交互的这个按钮元件。

最后,在动作设置中,我们将选中状态的值改为[切换]。

此时查看原型的话,点击按钮就会发生颜色的改变。

但是,还存在一个问题,就是文字没有发生改变。

我们知道,按钮元件选中时文字是“取消关注”,取消选中时文字是“关注”。

所以,我们还需要通过添加交互去改变按钮的文本。

我们继续新建交互,找到[选中时]的触发事件,动作选择[设置文本],动作的目标还是[当前元件],文本的值设置为[取消关注]。

取消选中时,同样需要新建交互,选择[取消选中时]的触发事件,进行同样的设置,只是文本的值设置为[关注]。

到这里,我们就完成了关注按钮所有的交互,预览原型就能够看到想要的效果。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:IAXURE » Axure的7种交互样式(3)-选中的交互样式