每天进步一点，离大神的目标又近了一些。

小教程小经验，只是为了提高你的技能水平，把学到的经验灵活的运用到你的交互设计上，才是迈入大神圈子的第一步。

今天要讲的这个案例，如果你能琢磨透了，会对你有很大的帮助。

“滑动验证”

此案例里的一些重点如下：

1、 动态面板的运用

2、 动态面板宽度和内部元件的关系理解

3、 动态面板“拖动”交互动作的运用

4、 动态获取数值及动态计算的运用

5、 添加动作时，组合条件的运用

 

好了，不废话了，进入正题，开始画这个原型了

一、准备工作

1、拖入矩形

画一个验证完成前的背景，300×40（尺寸可根据你的喜好需求自行调整），输入文字，调整到适合的样式，起个便于识别的名称（背景）

 

2、复制你刚刚画的背景

改名为“状态背景”，这个是验证完成后的背景；调整完样式以后，将它转换为动态面板，名称就叫（状态层）

 

3、对齐刚刚的两个原件

动态面板背景一定要在你第一个背景的上层，然后将动态面板的尺寸调整为40×40

 

4、拖入矩形画操作用的滑块

40×40，找两个图标，双箭头和完成以后的对号（此处你可以用官方库的图标），将图标分别写上名称（双箭头、完成），图标调整到合适尺寸后与矩形上下左右居中对齐，然后选中完成图标，设置为隐藏；然后将滑块和图标编组后转换为动态面板，写上名称（按住拖动）

将刚刚画的“按住拖动”原件对齐到背景的左侧

好了，所有图层都画完了，如下；接下来我们添加交互动作。

二、交互动作

这里，我们所有的交互动作，都添加在“按住拖动”原件上，此处需要仔细越多理解

先看下所有动作

1、 添加“拖动时”动作

【动作1】

移动“按住拖动”，水平拖动，动画“无”，添加界限“左侧”大于原件“背景”的x边距，“右侧”小于原件“背景”的x边距加宽度

【动作2】

设置尺寸“状态层”，宽度“运算公式”原件“This”（当前按住拖动）的x边距 减去 原件“背景”的x边距 + 原件“This”的宽度，高度不变

 

Ok，做完以上动作就可以试一下效果了，已经可以拖动了

 

但是没有完成的效果，不急不急，接着来

 

2、 添加“拖动结束时”动作

这里会有两组动作，一组需要输入条件

2.1、用例组1，条件如下

如果原件“This”的x边距 大于等于 原件“背景”的x边距加宽度减去原件“This”的1.1倍宽度（1.1倍是为了冗余出一些距离，便于手动时触发）则运行

【动作1】

显示“完成”图标，隐藏“双箭头”图标

【动作2】

禁用“按住滑动”和“滑块”，验证完毕了，就禁止再操作滑块了

【动作3】

设置文本“状态背景”为“验证成功”

 

2.2、用例组2

不满足用例组1条件时运行

【动作1】

移动“按住滑动”，回到拖动前位置

 

【动作2】

设置尺寸“状态层”，宽度为原件“This”宽度，高度不变

三、最终效果

原型演示地址：

http://25jmki.axshare.cn/#g=1&p=%E6%BB%91%E5%8A%A8%E9%AA%8C%E8%AF%81

演示原型下载地址：

https://pan.baidu.com/s/1e9yFrKMfmMisxGaMpuLAfw

通过这个实例，我们可以拓展出多种交互原型，例如这种滑块验证，其它的大家自己动脑筋想把

本交互组件也集成到了我的《快速原型组件库》里，力求打造一套官方原型库的最佳替代方案，感兴趣的可以去看一下

https://www.axureshop.com/a/590.html

或者加入我的群，咨询交流

UIUE干货分享群：117184