拼图解锁是一种出现不久的交互方式，在注册或登录的时候，要求用户水平拖动按钮，移动拼图到正确的位置，然后才可以继续下一步，这种方式增强了网站的安全性，防止用户的恶意注册。

就连我们的人人都是产品经理网站的注册也是采用这一方式，访问注册页面，可以看到如下图所示：

拖动拼图到正确位置才能继续下一步，分析一下这个交互过程：

1. 鼠标移动到圆形按钮上，上方显示拼图图片
2. 按下按钮开始向右拖动
3. 如果拼图位置正确对上（允许一定的误差），则显示通过
4. 如果拼图位置没有对上，显示验证失败，圆形按钮和拼图复位

圆形按钮只会沿水平方向移动，而且只能在滑杆范围内移动。

显然，使用Axure也可以实现这种效果，虽然我们有时原型并不需要做得这么真实，但我们可以从中学习到一些Axure实战技巧。

今天我们就来实现这种交互效果，从这个例子里我们可以学习到如下几点：

1. 动态面板的应用：整体对象操作，拖动事件支持
2. 沿水平方向移动设置，移动边界的限制
3. 动态面板拖动事件、拖动结束事件、鼠标移入/移出事件
4. 函数表达式的用法，数学函数的应用
5. 条件判断的应用
6. 形状的合并与去除用法

完成后的效果图如下：

点击这里查看在线演示

一、界面布局