元件样式发生颜色的改变非常常见。
例如一个橙色的关注按钮，点击之后变为灰色，并且文字变为取消关注。
再次点击时，还能够变回橙色的关注按钮。
这是通过用户点击操作产生的样式改变，所以是交互样式。
实现这个案例，需要先为按钮设置默认的文字与样式。
然后，在交互面板中为按钮添加元件选中的交互样式。
在交互样式的设置中，将填充颜色设置为关注后的颜色。
但是，到这里还没有结束。
因为点击按钮的时候，并不会发生颜色的改变。
所以，我们要清晰的了解一个概念：点击不等同于选中。
元件有选中和未选中两种状态，需要通过交互设置才能够改变元件的状态。
接下来，我们还需要新建交互。
先选择[单击时]的触发事件，然后再选择[设置选中]的动作，动作的目标是[当前元件]，也就是当前添加交互的这个按钮元件。
最后，在动作设置中，我们将选中状态的值改为[切换]。
此时查看原型的话，点击按钮就会发生颜色的改变。
但是，还存在一个问题，就是文字没有发生改变。
我们知道，按钮元件选中时文字是“取消关注”，取消选中时文字是“关注”。
所以，我们还需要通过添加交互去改变按钮的文本。
我们继续新建交互，找到[选中时]的触发事件，动作选择[设置文本]，动作的目标还是[当前元件]，文本的值设置为[取消关注]。
取消选中时，同样需要新建交互，选择[取消选中时]的触发事件，进行同样的设置，只是文本的值设置为[关注]。
到这里，我们就完成了关注按钮所有的交互，预览原型就能够看到想要的效果。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » Axure的7种交互样式（3）-选中的交互样式