Axure交互案例:iOS滑动开关分分钟学会,源文件免费送

什么是滑动开关

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

快速绘制线框图

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

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

开关:从元件库拖动一个圆形至画布中,尺寸设置为20x20,边框线设置为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基础教程、交互案例以及经验技巧,并不定期赠送各种资源福利,包含:系统组件库、页面模板、实战案例等。

推荐阅读更多精彩内容