编辑导读：在产品使用中，我们经常会看到一个switch开关，是一种常见的产品交互设计。那么，如何设计一个switch开关呢？只需要用到一个圆和一个椭圆就可以了。本文作者将对如何制作switch开关进行分析，希望对你有帮助。

在其他的文章中看过比较简单但是没有用到函数的开关，用两个模块做好的关和开，一个隐藏，本来是显示的关，点击关，就会显示开，隐藏关；再次点击显示关，隐藏开。

今天教大家怎么样使用一个圆和一个椭圆来制作switch开关交互。

大致交互流程：点击圆形，圆形将向右移动，圆角矩形改变填充色；再次点击圆形，圆向左移动，圆角矩形取消填充色（后面有详细讲解）。

如图：

这里我使用了一个中间变量来控制当前switch开关的状态，0：代表关；1：代表开（只是把文字颜色改成了白色，所以就看不到了，实际开关值在改变ing，如下图）。