编辑指南:在产品使用中，我们经常会看到一个开关，这是一种常见的产品交互设计。那么，如何设计一个开关呢？只需要一个圆和一个椭圆。本文作者将分析如何进行切换，希望对你有所帮助。

在其他文章中，我看到过相对简单但不使用函数的开关。它们由两个模块关闭和打开，一个是隐藏的，最初是显示的。如果你点击关闭，它会显示开，隐藏关；再次单击关闭显示将其隐藏。

今天我就教你怎么用一个圆和一个椭圆做开关交互。

一般交互过程:点击圆圈，圆圈向右移动，圆角矩形改变填充颜色；再次点按圆圈，圆圈向左移动，圆角矩形取消填充颜色(稍后详细解释)。

如图:

这里我用一个中间变量来控制当前的开关状态，0:表示关；1:代表on(把文字颜色改成白色就行了，看不到了，实际开关值是在变ing，如下图)。

1.基本要素

圆形:39*39

圆角矩形:90*41圆角50，命名为:关白开蓝(最好先用这个尺寸，了解后可以自己改，因为圆要根据圆角矩形的尺寸移动到相应的位置)

2.先设置圆角矩形的交互样式

选择圆角矩形(关闭并打开蓝色)，然后右键单击它，如下图所示。点击交互样式，用蓝色填充“选中的”；

3.添加详细的交互(开关)

将圆形和圆角矩形重叠(关闭白色，打开蓝色)，然后单击圆形。添加和加载时，设置文本。全局变量:newvariable1 = "0 "，newvariable2 = " 1默认负载为newvariable1 = "0 "。

然后添加交互:点击时，添加一个场景:如下图:

在这个场景中，添加一个动作:move如下图所示，这里使用的是函数[[This.right]]和[[This.bottom]]，函数[[This.right]]表示:当前组件的右侧；[[This.bottom]]表示当前组件的底部。

因此，[[V1.right]]指的是圆角矩形的右边(关白开蓝)，但圆不能超过圆角矩形的右边(关白开蓝)，所以需要-39，向左移动39个单位。同样，[[V2.bottom]]指的是圆角矩形的底部(关闭白色，打开蓝色)，但圆圈不能超过圆角矩形。(可以试试-39和-40的效果来理解意思)

3.向圆形添加动作:将其设置为选中(目标是圆角矩形(关闭白色并打开蓝色)，将值设置为真，然后添加圆角矩形的交互样式)

这时如果有加法动作，全局变量应该从“0”变成“1”。为了实现以下步骤的打开和关闭，如下图所示:

以上部分可以完成从off到on的切换，可以按F5预览。

4.(开-关)

实现开关机的动作和上面的开关机是一样的，关键是全局变量，把循环值改成NewVariable2，再加上场景2实现开关机。

[[v3.right-89]]和[[v4.bottom]]是使圆移动到圆角矩形的左边(关闭和打开)，圆角矩形(关闭和打开)设置为未选中，这里不做详细说明。如果你有任何问题，请留下积极的信息，等待你的到来。

思考:开关的交互不用点圈。比如手机里的WiFi开关点击相应的模块，就会交互开关。事实上，实现这一目标的原因并不多。想想吧。