1. 主页 > 行业资讯 > 设计文章 >

进行切换:只使用一个圆和一个椭圆

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

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

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

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

如图:

这里我用一个中间变量来控制当前的开关状态,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开关点击相应的模块,就会交互开关。事实上,实现这一目标的原因并不多。想想吧。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/sjwz/531.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息