产品经理在制作移动端原型的时候,经常会需要制作单选按钮。这种单选按钮的交互效果是这样的:
![253936402c0fdb5d7f2439b558334c52.png](https://i-blog.csdnimg.cn/blog_migrate/8c6f91f93f6931c3a90b02c7ff944a2c.jpeg)
如关闭通知后面的按钮,常见于设置页面。这种状态下是开启/选中状态,点击之后按钮的颜色发生变化,并且内部的小圆位置发生变化。
这个交互效果非常常见,这里给大家总结了3种制作的方法,这3种方法也可以应用到其他相似的案例中,因为学会某一个案例不是我们的目的。我们的目的是通过案例的学习,学会举一反三,应用到工作中。
![6d7dbfdb985a3da246dac4f5e7074bb3.gif](https://i-blog.csdnimg.cn/blog_migrate/f2a4cf4bb7a272e09189d464e47c9f1c.gif)
好了,前面说了几句题外话,现在正是来看看有什么方法来制作这个交互。
首先我们先把看到的界面搭建出来,不同的方法看到的界面及元素都是一样的。页面搭建比较简单,这里不再赘述。
显示/隐藏的方法
这个方法需要我们在现有的按钮下方再放置一个关闭状态的按钮。选中关闭状态的按钮,将其置于底层或者开启状态按钮的下一层即可。
![055d47a55231d0a8d9bb819dac1f4887.png](https://i-blog.csdnimg.cn/blog_migrate/0104a9249b07d8df4e4474c35d315924.jpeg)
![50da7bff50149678b50316fb58b48720.png](https://i-blog.csdnimg.cn/blog_migrate/a817585be047f0e7c2f98eca8cb74859.jpeg)
接下来的设置比较简单,点击“开”的时候,将“关”显示出来并置于顶层,将“开”隐藏。反之在点击“关”的时候,将“开”显示出来并置于顶层,将“关”隐藏。
![c30b4fa6f30748d4b7e888aefee4e5b0.png](https://i-blog.csdnimg.cn/blog_migrate/459c9dd2bae2b2ac9e6b4d9fb894faec.jpeg)
![91f2bf4c1968114152313eaf89fc5212.png](https://i-blog.csdnimg.cn/blog_migrate/4716abfbb17c68a813c1475a647f07e8.jpeg)
这一种方法下的单选按钮的交互效果就实现了。
动态面板的方法
还有一种方法是我们也很常用的,就是用动态面板去进行设置。
首先我们需要简历一个动态面板。这里可以直接将“开”按钮进行转化。选中“开”按钮,鼠标右键菜单选择“转化为动态面板”即可完成动态面板的转化。
![89a9c065c57fe1fe9be5a0340129b1b5.png](https://i-blog.csdnimg.cn/blog_migrate/691821670c93afdeffd441e3b41e257d.jpeg)
因为按钮的状态有“开”和“关”两种,所以这里需要再添加一个状态,分别将两个状态页命名为“开”和“关”。
![76d8863414317ca2bef14ebbc0c4e60e.png](https://i-blog.csdnimg.cn/blog_migrate/2a80d60018dada8ec48f3056143c3b90.jpeg)
打开“关”的状态页。将按钮“关”制作于该状态页中。
![bce3ae7e534c887c0050d39361576bd5.png](https://i-blog.csdnimg.cn/blog_migrate/8382681cc1870ce2114f0860091d0f32.jpeg)
在“开”状态页中,点击“开”按钮的时候,将状态切换到“关”。同理,点击“关”按钮的时候,将状态切换到“开”。
![d39ed24b93926a462037775e2b23a37a.png](https://i-blog.csdnimg.cn/blog_migrate/f82ffb58edf5a54c1f08c89b48c810ea.jpeg)
![303a822a2050694916f63c1bdb5054ef.png](https://i-blog.csdnimg.cn/blog_migrate/e74cfddd127b3e5de1e7e1c4f3d16895.jpeg)
交互样式和移动的方法
最后一种方法稍微复杂一些,跟前面两种方法的区别在于,没有两组按钮,交互主要是在一组按钮上完成。
通过上面的描述,我们清楚地知道,这个交互效果主要有两个,一个是按钮颜色发生变化,一个是内部小圆的位置发生变化。
按钮颜色发生变化,我们可以通过交互样式设置中的选中样式来实现。这里为了跟交互样式的设置保持一致,先将按钮的颜色设置为未选中时的颜色,也就是灰色。
![daa498eb53d44075ee6839d601e06527.png](https://i-blog.csdnimg.cn/blog_migrate/7934b16fa02222e03143f2a18b6ba741.jpeg)
分别设置按钮的底部和顶部小圆的选中样式。
![ab7b508bf3245a7eb7a252fc00a8cbc0.png](https://i-blog.csdnimg.cn/blog_migrate/0fd6f5166f1c9031a70f6074cf4e69a8.jpeg)
别忘记将默认选中状态选中。如果你做的按钮的初始状态是关闭状态,则不需勾选这一个选项,根据做的原型的实际情况去选择。
![49636e9a8c1004e50cda6846dc0c23ac.png](https://i-blog.csdnimg.cn/blog_migrate/833395121776c5d012a9bda5db6dcd11.jpeg)
鼠标单击时,设置按钮的选中状态为切换选中即可让颜色进行变化。
![5e482961fc5a068d840ac924b4cef700.png](https://i-blog.csdnimg.cn/blog_migrate/0032bf0c1bd9a6cc567ab85c136565da.jpeg)
![c503740a471e5e637b1220e8dbb050e0.png](https://i-blog.csdnimg.cn/blog_migrate/ab2d3da8a8898864e07b72e16c6f2294.jpeg)
最后设置小圆的位置就可以完成这个交互设置了。
先记录一些小圆的位置。“开”状态下圆的位置为:254,143;“关”状态下圆的位置为:239,143。位置的移动可以用绝对位置,也可以用相对位置,这里使用绝对位置。
这里需要增设用例条件,当按钮状态为选中和未选中的时候,移动小圆到相对应的位置。
![c10c1ff564fdd0fc43597724987fc372.png](https://i-blog.csdnimg.cn/blog_migrate/feec6d596b17d845170a95fa4248adfe.jpeg)
这个案例看似是一个简单的单选按钮/开关的交互案例,但是我们平时是非常常见的。这个案例的通用情况是,状态发生变化,如这里是开、关/选中、未选中两种状态。下次在看到状态发生变化的情况,可以尝试用这三种方式进行制作。
最后留一个问题和大家一起讨论,最后一种方法设置的方法较为复杂,实现的效果与前两种一致,那么这种方法是否没有存在的必要?有任何意见的话欢迎一起留言讨论。
往期精选
Axure如何应对意外关闭
Axure中的“AdaptiveViews”(自适应视图)是什么
Axure 教程 | 使用键盘进行移动对象
关注
听说关注了我们的人
都升职加薪啦
![139c9fae9f912316411405a0c931021d.png](https://i-blog.csdnimg.cn/blog_migrate/aaafc721eaf9abb516f05513db34fe78.jpeg)