快传号/二狗聊科技

我们在一些社交APP或者新闻类的APP上首次使用的时候，应用软件都会提示你选择感兴趣的内容，以便于更加精准的推送内容。　　今天和大家分享一下这个效果的制作方法。老规矩，上效果图。

制作过程

首先我们使用矩形工具，在场景中绘制6个矩形，并且将每个矩形都添加一些文案，这些文案随便填写，自己随意发挥。我这里选择了，科技、历史等文案，效果如下。

我们需要实现当点击矩形的时候，矩形变成蓝色背景白色文字，所以这里我们用到了一个“选中”的交互样式。

我们以科技为例，右键选择“科技”矩形，选中交互样式。

在打开的窗体中，我们切换到“选中”的tab页，将填充色设为蓝色，将字色设为白色。

完成这一步，我们实现当矩形被点击时，矩形显示被选中状态。下一步，我们开始设置交互动作。选择“科技”这个矩形，然后新增交互。

这里增加“单击时”事件后，添加“设置选中”的动作，目的是为了实现，点击矩形后，让矩形的样式改变为“选中”状态。

这里，我们还需要考虑到一个问题，既然我们可以选中，那就要改可以取消。所以在这个“单击”的事件上，我还增加了条件的判断。

增加条件判断后，我们就可以根据当前元件是否被选中，来触发不同的点击效果。当矩形被选中时，再点击这个矩形，我们可以实现取消选中的效果。

最后一步，我们复制“科技”这个矩形的交互动作，将它粘贴到其他的矩形上，就完成了这个原型的制作了。看下最终的效果。

如果你希望对深入学习Axure的话，推荐你一本书《Axure RP与APP原型设计完全学习教程》，我就是从这本书开始入门的。希望也可以帮到你！

想了解更多精彩内容，快来关注我是IT小白