按钮选中状态的颜色_Axure中用不同方法制作单选按钮交互效果

产品经理在制作移动端原型的时候，经常会需要制作单选按钮。这种单选按钮的交互效果是这样的：

如关闭通知后面的按钮，常见于设置页面。这种状态下是开启/选中状态，点击之后按钮的颜色发生变化，并且内部的小圆位置发生变化。   这个交互效果非常常见，这里给大家总结了3种制作的方法，这3种方法也可以应用到其他相似的案例中，因为学会某一个案例不是我们的目的。我们的目的是通过案例的学习，学会举一反三，应用到工作中。   好了，前面说了几句题外话，现在正是来看看有什么方法来制作这个交互。   首先我们先把看到的界面搭建出来，不同的方法看到的界面及元素都是一样的。页面搭建比较简单，这里不再赘述。      

显示/隐藏的方法

这个方法需要我们在现有的按钮下方再放置一个关闭状态的按钮。选中关闭状态的按钮，将其置于底层或者开启状态按钮的下一层即可。

接下来的设置比较简单，点击“开”的时候，将“关”显示出来并置于顶层，将“开”隐藏。反之在点击“关”的时候，将“开”显示出来并置于顶层，将“关”隐藏。

这一种方法下的单选按钮的交互效果就实现了。  

动态面板的方法

还有一种方法是我们也很常用的，就是用动态面板去进行设置。   首先我们需要简历一个动态面板。这里可以直接将“开”按钮进行转化。选中“开”按钮，鼠标右键菜单选择“转化为动态面板”即可完成动态面板的转化。  

  因为按钮的状态有“开”和“关”两种，所以这里需要再添加一个状态，分别将两个状态页命名为“开”和“关”。  

  打开“关”的状态页。将按钮“关”制作于该状态页中。  

  在“开”状态页中，点击“开”按钮的时候，将状态切换到“关”。同理，点击“关”按钮的时候，将状态切换到“开”。  

 

交互样式和移动的方法

最后一种方法稍微复杂一些，跟前面两种方法的区别在于，没有两组按钮，交互主要是在一组按钮上完成。   通过上面的描述，我们清楚地知道，这个交互效果主要有两个，一个是按钮颜色发生变化，一个是内部小圆的位置发生变化。   按钮颜色发生变化，我们可以通过交互样式设置中的选中样式来实现。这里为了跟交互样式的设置保持一致，先将按钮的颜色设置为未选中时的颜色，也就是灰色。  

  分别设置按钮的底部和顶部小圆的选中样式。  

  别忘记将默认选中状态选中。如果你做的按钮的初始状态是关闭状态，则不需勾选这一个选项，根据做的原型的实际情况去选择。

鼠标单击时，设置按钮的选中状态为切换选中即可让颜色进行变化。

  最后设置小圆的位置就可以完成这个交互设置了。   先记录一些小圆的位置。“开”状态下圆的位置为：254，143；“关”状态下圆的位置为：239，143。位置的移动可以用绝对位置，也可以用相对位置，这里使用绝对位置。   这里需要增设用例条件，当按钮状态为选中和未选中的时候，移动小圆到相对应的位置。   这个案例看似是一个简单的单选按钮/开关的交互案例，但是我们平时是非常常见的。这个案例的通用情况是，状态发生变化，如这里是开、关/选中、未选中两种状态。下次在看到状态发生变化的情况，可以尝试用这三种方式进行制作。   最后留一个问题和大家一起讨论，最后一种方法设置的方法较为复杂，实现的效果与前两种一致，那么这种方法是否没有存在的必要？有任何意见的话欢迎一起留言讨论。  

往期精选

Axure如何应对意外关闭

Axure中的“AdaptiveViews”(自适应视图)是什么

Axure 教程 | 使用键盘进行移动对象

关注

听说关注了我们的人

都升职加薪啦