产品经理在制作移动端原型的时候，经常会需要制作单选按钮。这种单选按钮的交互效果是这样的：
如关闭通知后面的按钮，常见于设置页面。这种状态下是开启/选中状态，点击之后按钮的颜色发生变化，并且内部的小圆位置发生变化。
这个交互效果非常常见，这里给大家总结了3种制作的方法，这3种方法也可以应用到其他相似的案例中，因为学会某一个案例不是我们的目的。我们的目的是通过案例的学习，学会举一反三，应用到工作中。
好了，前面说了几句题外话，现在正是来看看有什么方法来制作这个交互。
首先我们先把看到的界面搭建出来，不同的方法看到的界面及元素都是一样的。页面搭建比较简单，这里不再赘述。
显示/隐藏的方法
这个方法需要我们在现有的按钮下方再放置一个关闭状态的按钮。选中关闭状态的按钮，将其置于底层或者开启状态按钮的下一层即可。
接下来的设置比较简单，点击“开”的时候，将“关”显示出来并置于顶层，将“开”隐藏。反之在点击“关”的时候，将“开”显示出来并置于顶层，将“关”隐藏。
这一种方法下的单选按钮的交互效果就实现了。
动态面板的方法
还有一种方法是我们也很常用的，就是用动态面板去进行设置。
首先我们需要简历一个动态面板。这里可以直接将“开”按钮进行转化。选中“开”按钮，鼠标右键菜单选择“转化为动态面板”即可完成动态面板的转化。
因为按钮的状态有“开”和“关”两种，所以这里需要再添加一个状态，分别将两个状态页命名为“开”和“关”。
打开“关”的状态页。将按钮“关”制作于该状态页中。
在“开”状态页中，点击“开”按钮的时候，将状态切换到“关”。同理，点击“关”按钮的时候，将状态切换到“开”。
交互样式和移动的方法
最后一种方法稍微复杂一些，跟前面两种方法的区别在于，没有两组按钮，交互主要是在一组按钮上完成。
通过上面的描述，我们清楚地知道，这个交互效果主要有两个，一个是按钮颜色发生变化，一个是内部小圆的位置发生变化。
按钮颜色发生变化，我们可以通过交互样式设置中的选中样式来实现。这里为了跟交互样式的设置保持一致，先将按钮的颜色设置为未选中时的颜色，也就是灰色。
分别设置按钮的底部和顶部小圆的选中样式。
别忘记将默认选中状态选中。如果你做的按钮的初始状态是关闭状态，则不需勾选这一个选项，根据做的原型的实际情况去选择。
鼠标单击时，设置按钮的选中状态为切换选中即可让颜色进行变化。
最后设置小圆的位置就可以完成这个交互设置了。
先记录一些小圆的位置。“开”状态下圆的位置为：254，143；“关”状态下圆的位置为：239，143。位置的移动可以用绝对位置，也可以用相对位置，这里使用绝对位置。
这里需要增设用例条件，当按钮状态为选中和未选中的时候，移动小圆到相对应的位置。
这个案例看似是一个简单的单选按钮/开关的交互案例，但是我们平时是非常常见的。这个案例的通用情况是，状态发生变化，如这里是开、关/选中、未选中两种状态。下次在看到状态发生变化的情况，可以尝试用这三种方式进行制作。
最后留一个问题和大家一起讨论，最后一种方法设置的方法较为复杂，实现的效果与前两种一致，那么这种方法是否没有存在的必要？有任何意见的话欢迎一起留言讨论。
网友评论