Axure制作滑动验证组件

Axure原型工具有好多滑动的效果，滑动验证，是校验“可疑用户”的一种主流方式，那用Axure原型工具如何制作滑动验证的效果呢？具体操作步骤如下：

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

• 动态面板的运用
• 动态面板宽度和内部元件的关系理解
• 动态面板“拖动”交互动作的运用
• 动态获取数值及动态计算的运用
• 添加动作时，组合条件的运用

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

一、准备工作

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”宽度，高度不变

三、最终效果

 以上就是Axure制作滑动验证组件的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。