很多时候,在做开启某个状态时,用单选按钮可能呈现的效果不太好,这时使用滑动开关按钮就是个更好的选择,一般应用于 允许通知、控制某些功能的开启或关闭 等的具体情境,比如微信的新消息提醒界面就会经常应用到这种开关按钮。所以,在做原型设计时,画出这种效果可以给程序猿和UI设计师呈现的更直观。
1、准备一个矩形和圆形,设置矩形的宽、高为58,30,圆角度(CORNER)为35,隐藏边框,填充色设为#333333,并将该矩形命名为背景;设置圆形的宽、高为28,28,隐藏边框,填充色#FFFFFF,并将该圆形命名为按钮。
选中背景,右键选择STYLE EFFECTS,点击【选中】,设置填充色为#76D471
2、将按钮拖至背景的左侧,选中两个元件,右键创建动态面板,将动态面板命名为组合动态。
3、点击动态面板,开始设置动态面板的交互动作
1)点击New Interaction,选择【鼠标单击时】,添加用例1
点击紫色加号,继续插入动作
2)因为用例1只是开启按钮的交互,还要设置关闭按钮的交互,所以需要继续添加用例2,步骤与上面相同
动态面板的交互全部设置完成后的样子应该是下图
4、一个开关状态切换的控件就完成了,F5预览效果