| 一、概述

滑块验证是一种新的交互验证方式，与传统的图文验证码相比，更安全更智能。通常用于注册、登录、密码修改等产品场景中。如图1所示为滑块验证的示意图及元素拆解。

图1-示意图.png

|  二、交互分析

我们来分析上图的滑块验证都有哪些交互效果：

1. 鼠标移入滑块上方，显示背景图。

2. 鼠标从滑块上方移出，隐藏背景图。

3. 拖拽滑块，滑块在滑动区域范围内左右移动。

4. 移动滑块时，滑块左侧的滑动区域部分填充为灰色。

5. 移动滑块过程中和移动滑块结束时，均会显示不同的提示信息。

6. 移动滑块时，滑动图片同步进行水平移动。

7. 松开鼠标左键时即拖动结束时，当滑动图片与填充区域重合时，允许有一定的距离误差，提示“验证成功”。

8. 松开鼠标左键时即拖动结束时，当滑动图片与填充区域未重合时，提示“验证失败”，同时滑动图片和滑块复位，回到原来的初始位置。

| 三、素材准备

1. 拖动一个矩形至设计区域，宽高设置为40 x 40，矩形填充为灰色#7F7F7F，从icons库拖动一个向右的箭头图标至设计区域，放置在矩形的中间，选中矩形和向右箭头，鼠标右键点击选择“转换为动态面板”，动态面板命名为“滑块”。

2. 拖动一个矩形至设计区域，宽高设置为266 x 40，编辑矩形文字为“向右拖动滑块填充拼图”，选中矩形，将其转换为动态面板，并命名为“滑动区域”。选中“滑动区域”动态面板，为其增加一个状态State2，状态2中添加一个矩形，矩形填充为灰色#AAAAAA，矩形宽高设置为40 x 40。

3. 将“滑块”与“滑动区域”这两个动态面板进行顶部对齐，左侧对齐。如图2所示。

   
   

   

   图2-滑动与滑动区域.png

4. 从元件库拖动一个矩形至设计区域，矩形的宽高设置为266 x 132，为矩形填充颜色，矩形命名为“底图”。

5. 从元件库拖动一个矩形至设计区域，矩形宽高设置为46 x 43，拖动一个圆至矩形的左侧，圆的宽高设置为20 x 20，选中矩形和圆，鼠标右键点击选择“变换形状”，选择布尔运算“去除”，进行运算，形成一个新的形状。再添加一个圆至形状的下方，选中新形状和圆，鼠标右键点击选择“变换形状”，选择布尔运算“去除”，运算后得到一个新的形状，命名为“滑动图片”。按住shift键+option键或shift键+alt键，水平向右复制，复制后的形状命名为“填充区域”，在右侧样式面板中，为“填充区域”设置一个内部阴影效果。如图3所示。

   
   

   

   图3-滑动图片及填充区域.png

6. 拖动一个矩形至设计区域，矩形的宽高设置为266 x 24，编辑矩形文本内容为“拖动滑块，将悬浮图片正确拼合”，选中矩形，将矩形转换为动态面板，命名为“提示信息”。将State1状态的内容复制三份，新增3个状态，修改各状态中矩形的文字内容，State2、State3和State4的文字内容分别为“滑块拖动中”、“验证通过”和“验证失败”。为state3和state4增加一个对勾和关闭图标。

7. 选中提示信息和底图，进行左对齐和底部对齐。选中滑动图片、填充区域、底图和提示信息，将其进行组合，组合命名为“背景图”。如图4所示。

   
   

   

   图4-背景图.png

| 四、交互设置

1. 选中滑块，点击“新建交互”按钮，选择“鼠标移入时”事件，选择动作“显示/隐藏”，显示背景图，如图5所示。

2. 选中滑块，点击“新建交互”按钮，选择“鼠标移出时”事件，选择动作“显示/隐藏”，隐藏背景图，如图6所示。

   
   

   

   图5-显示背景图.png

   
   

   

   图6-隐藏背景图.png

3. 选中滑块，点击“新建交互”，选择事件“拖动时”，选择动作“移动”，将当前元件（滑块）设置为水平移动，设置移动边界，左侧边界大于等于330（滑动区域最左侧的位置），右侧边界小于等于596（滑动区域最右侧的位置），如图7所示，点击完成。点击添加目标，将滑动图片设置为水平移动，设置移动边界，左侧边界大于等于滑动图片的左侧位置，右侧边界小于等于596（滑动区域右侧的位置），如图8所示，点击完成。

   
   

   

   图7-设置滑块移动.png

   
   

   

   图8-设置滑动图片移动.png

4. 为“拖动时”事件添加动作，点击插入动作，选择“设置面板状态”动作，将滑动区域的状态设置为State2，点击完成，如图9所示。

   
   

   

   图9-将滑动区域的状态设置为State2.png

5. 点击插入动作，选择动作“设置尺寸”，将“滑动区域”动态面板状态State2中的矩形宽度设置为[[LVAR1.x-LVAR2.x+LVAR1.width]]，其中LVAR1为滑块，LVAR2为滑动区域，如图10所示。高度不变，设置为40，如图11所示。

   
   

   

   图10-设置宽度.png

   
   

   

   图11-设置高度.png

6. 点击插入动作，选择动作“设置面板状态”，将提示信息动态面板的状态设置为State2，即提示“滑块拖动中”，点击完成，如图12所示。

   
   

   

   图12-提示状态2.png

7. 选中滑块，点击“新建交互”按钮，添加“拖动结束时”事件，选择动作“设置面板状态”，将提示信息动态面板的状态设置为State3，即提示“验证成功”。点击插入动作，选择动作“移动”，将当前元件（滑块）移至与填充区域左侧对齐，纵坐标不变，如图13和14所示。点击添加目标，将“滑动图片”移至与填充区域左侧对齐，纵坐标保持不变，如图15所示。为情形添加逻辑条件，表达式的内容为滑动图片与填充区域左侧的距离差的绝对值小于等于10，表达式为[[Math.abs(LVAR1.x-LVAR2.x)]]≤10，假设允许误差值在10以内，其中LVAR1为滑动图片，LVAR2为填充区域，如图16所示。

   
   

   

   图13-设置滑块横坐标.png

   
   

   

   图14-设置滑块移动后的位置.png

   
   

   

   图15-设置滑动图片移动后的位置.png

   
   

   

   图16-条件表达式.png

8. 为“拖动结束时”事件添加另外一个情形，添加动作“设置面板状态”，将提示信息动态面板的状态设置为State4，即提示“验证失败”，如图17所示；添加动作“等待”，等待时间设置为500毫秒；添加动作“移动”，将当前元件（滑块）移动至初始位置；添加目标，将滑动图片也移动至初始位置，如图18所示；添加动作“设置面板状态”，将提示信息动态面板的状态设置为State1，即提示“拖动滑块，将悬浮图片正确拼合”；添加目标，将滑动区域动态面板的状态设置为State1。如图19所示。

   
   

   

   图17-提示信息状态设置为State4.png

   
   

   

   图18-滑块和滑动图片位置复原.png

   
   

   

   图19-设置提示信息和滑动区域的状态.png

9. 点击预览，在浏览器中查看原型效果。

作者：努力拼搏的80后
链接：https://www.jianshu.com/p/9d4f52f35748