什么是滑动开关

滑动开关是一种开关选择器。当需要表示切换开启状态和关闭状态时，使用开关选择器。与复选框不同，切换开关会直接触发状态发生改变，而复选框一般用于标记，需要配合提交操作才能生效。滑动开关最初源于iOS的系统设计，后来安卓系统、PC端应用也逐渐使用滑动开关。

快速绘制线框图

滑动开关由背景和开关组成，如下图所示。下面我们利用Axure自带的元件库快速绘制线框图。

背景：从元件库拖动一个无边框矩形，将直角调整为圆角，圆角半径设置为12，设置填充颜色为#B0ADAB，尺寸设置为48×24。

开关：从元件库拖动一个圆形至画布中，尺寸设置为20×20，边框线设置为0，无描边。将开关与背景分别进行上下居中对齐，左对齐，再将开关向右移动一个像素。

分析交互效果

下面我们一起来分析下滑动开关的交互动画，滑动开关默认处于关闭状态。

1. 点击开关按钮，开关向右侧滑动，开关转换为开启状态，背景颜色变为绿色；

2. 再次点击开关按钮，开关向左侧滑动，转换为关闭状态，背景颜色变回了灰色。

制作交互原型

开关的左右移动我们可以通过“移动”这个动作来完成，背景颜色的变化可以通过选中样式进行切换。为了增大点击热区的范围，我们可以将开关和背景设置成一个组合，点击事件寄托在这个组合身上。好了，交互制作的思路已经分析的很清楚了，下面我们开始着手配置。

配置交互事件之前，我们先为背景设置一个选中的交互样式，选中时颜色填充为绿色#09BB07。

为选中开关和背景组成的这个组合，增加“鼠标单击”事件，增加动作“移动”，水平移动开关至背景的右侧，垂直方向保持不变。水平移动设置的表达式为[[LVAR1.x+LVAR1.width-Target.width-1]]，其中变量LVAR1为背景，Target为动作的目标元件，即开关，减去1个像素是为了保持与背景右侧有间隔。增加第二个动作，选中动作，此时将背景设置为选中状态。执行这些动作的前提是开关处于关闭状态，即背景未被选中时。交互设置如下图所示。

为单击事件再增加一个情形，增加情形条件当开关处于开启状态，即背景被选中时，开关移动至背景的左侧，同时将背景设置为未选中状态。开关移动后的位置为（[[LVAR1.x+1]]，[[Target.y]]），变量LVAR1为背景，Target为目标元件，即开关。水平方向添加1个像素，同样是为了保持与背景左侧有一个间隙。第二个情形的交互配置如下图所示。

开关组合的完整交互配置如下图所示。

到这里，有关滑动开关的交互配置已经完成，点击预览，验证下劳动成果吧！

小结

滑动开关的交互主要在于开关切换状态时，确定开关移动后的位置，并同时改变背景的颜色。位置移动可以通过“移动”动作来完成，背景颜色的改变，可以利用选中这一交互样式，来进行两种背景色的切换。

按照以下操作，可获取案例源文件

1.关注本头条号《Axure原型设计》

2.点赞本节课内容

3.发送私信关键字【 滑动开关】

【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧，并不定期赠送各种资源福利，包含：系统组件库、页面模板、实战案例等。