拼圖解鎖是一種出現(xiàn)不久的交互方式，在注冊或登錄的時(shí)候，要求用戶水平拖動(dòng)按鈕，移動(dòng)拼圖到正確的位置，然后才可以繼續(xù)下一步，這種方式增強(qiáng)了網(wǎng)站的安全性，防止用戶的惡意注冊。

就連我們的人人都是產(chǎn)品經(jīng)理網(wǎng)站的注冊也是采用這一方式，訪問注冊頁面，可以看到如下圖所示：

拖動(dòng)拼圖到正確位置才能繼續(xù)下一步，分析一下這個(gè)交互過程：

1. 鼠標(biāo)移動(dòng)到圓形按鈕上，上方顯示拼圖圖片
2. 按下按鈕開始向右拖動(dòng)
3. 如果拼圖位置正確對上（允許一定的誤差），則顯示通過
4. 如果拼圖位置沒有對上，顯示驗(yàn)證失敗，圓形按鈕和拼圖復(fù)位

圓形按鈕只會(huì)沿水平方向移動(dòng)，而且只能在滑桿范圍內(nèi)移動(dòng)。

顯然，使用Axure也可以實(shí)現(xiàn)這種效果，雖然我們有時(shí)原型并不需要做得這么真實(shí)，但我們可以從中學(xué)習(xí)到一些Axure實(shí)戰(zhàn)技巧。

今天我們就來實(shí)現(xiàn)這種交互效果，從這個(gè)例子里我們可以學(xué)習(xí)到如下幾點(diǎn)：

1. 動(dòng)態(tài)面板的應(yīng)用：整體對象操作，拖動(dòng)事件支持
2. 沿水平方向移動(dòng)設(shè)置，移動(dòng)邊界的限制
3. 動(dòng)態(tài)面板拖動(dòng)事件、拖動(dòng)結(jié)束事件、鼠標(biāo)移入/移出事件
4. 函數(shù)表達(dá)式的用法，數(shù)學(xué)函數(shù)的應(yīng)用
5. 條件判斷的應(yīng)用
6. 形狀的合并與去除用法

完成后的效果圖如下：

點(diǎn)擊這里查看在線演示

一、界面布局

1.水平滑桿

（1）添加一個(gè)灰色無邊矩形，長寬為300*45，調(diào)整圓角為28

（2）添加個(gè)圓形，調(diào)整大小為54*54，放置到矩形左側(cè)，選中，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為button

完成后的效果圖如下：

2. 圖片部分

我們使用一個(gè)矩形框代替圖片，使用多個(gè)形狀的合并與去除來生成拼圖

（1）在水平滑桿上方添加一個(gè)灰色矩形，大小為330*170

（2）添加一個(gè)矩形50*50，兩個(gè)圓形20*20

（3）選擇正方形和其中一個(gè)圓形，在右側(cè)的樣式里選擇合并操作

（4）繼續(xù)選擇合并后的圖片，再選擇另外一個(gè)小圓形，在右側(cè)的樣式里選擇去除操作

完成后的圖形如下，用它作為拼圖：

（5）選擇這個(gè)拼圖，命名為src，復(fù)制/粘貼一份，命名為dest，作為目標(biāo)拼圖，將src順序設(shè)置為最頂層，這樣移動(dòng)過去時(shí)可以覆蓋dest，為了模擬缺失效果，設(shè)置它的有內(nèi)陰影效果：

（6）移動(dòng)兩個(gè)拼圖到指定位置

將第一個(gè)拼圖移動(dòng)到和滑桿上的圓形按鈕起始位置一致的地方，第二個(gè)拼圖保持和第一個(gè)拼圖的高度位置一致即可，將兩個(gè)拼圖和矩形選中，轉(zhuǎn)成動(dòng)態(tài)面板，命名為image，右鍵設(shè)置為隱藏。

添加個(gè)文本標(biāo)簽，命名為tips，顯示當(dāng)前拖動(dòng)狀態(tài)。

現(xiàn)在的界面布局如下：

二、事件處理

1.鼠標(biāo)移入移出事件

鼠標(biāo)經(jīng)過圓形按鈕時(shí)顯示上方動(dòng)態(tài)面板image，鼠標(biāo)移出時(shí)隱藏image：

2. 添加拖動(dòng)事件

拖動(dòng)按鈕時(shí)，只沿水平方向移動(dòng)按鈕，并限制移動(dòng)的邊界：

1. 選中圓形按鈕動(dòng)態(tài)面板
2. 添加拖動(dòng)時(shí)事件
3. 添加移動(dòng)動(dòng)作
4. 選擇當(dāng)前元件（圓形按鈕動(dòng)態(tài)面板）
5. 移動(dòng)方式為“水平拖動(dòng)”
6. 添加邊界限制，左側(cè)>=20，右側(cè)<=300

同理選擇拼圖src，設(shè)置同樣的操作，這樣保證了拖動(dòng)按鈕時(shí)的同步移動(dòng)。

設(shè)置提示信息tips內(nèi)容為“拖動(dòng)中…”

3. 添加拖動(dòng)結(jié)束事件

在拖動(dòng)按鈕到右側(cè)松開鼠標(biāo)前，判斷當(dāng)前按鈕和拼圖src之間的距離差，如果在一定范圍內(nèi)（這里是誤差在10以內(nèi)）則認(rèn)為拼圖正確，否則表示沒有拼上：

1. 選擇按鈕
2. 添加拖動(dòng)事件
3. 添加條件判斷
4. 通過表達(dá)式計(jì)算
5. LVAR1表示拼圖src，LVAR2表示拼圖2
6. 兩個(gè)拼圖的左邊位置差的絕對值
7. 絕對值小于等于10時(shí)
8. 設(shè)置文字提示為“驗(yàn)證通過”，并移動(dòng)按鈕和src拼圖的左邊位置和dest左邊位置相同：

(1)(2)移動(dòng)當(dāng)前元件（圓形按鈕）和src

(3)通過表達(dá)式計(jì)算位置

(4)局部變量LVAR1表示目標(biāo)拼圖dest

(5)設(shè)置為[[LVAR1.left]]，即保持和目標(biāo)拼圖左邊位置一致

在拼圖沒有對上時(shí)，復(fù)位圓形按鈕和src拼圖到原始位置，即設(shè)置拖動(dòng)結(jié)束時(shí)的另外一個(gè)事件分支：

1. 添加事件分支（雙擊“拖動(dòng)結(jié)束時(shí)”事件）
2. 先設(shè)置提示文字內(nèi)容為“驗(yàn)證失敗”
3. 等待500毫秒
4. 移動(dòng)元件
5. 移動(dòng)當(dāng)前元件（圓形按鈕）和拼圖src
6. 移動(dòng)“回到拖動(dòng)前位置”，添加線性動(dòng)畫效果，時(shí)長100毫秒

4. 動(dòng)態(tài)面板載入事件

考慮到每次目標(biāo)拼圖dest的位置應(yīng)該隨機(jī)的，我們定義一個(gè)全局變量start，然后設(shè)置一個(gè)隨機(jī)值，再將dest的x位置移動(dòng)到這個(gè)隨機(jī)的位置，達(dá)到dest初始位置隨機(jī)的效果：

定義全局變量：

動(dòng)態(tài)面板載入事件：

1. 選擇動(dòng)態(tài)面板
2. 添加載入時(shí)事件
3. 設(shè)置全局變量
4. 選擇全局變量start
5. 設(shè)置值=[[Math.random()*190+60]]，即初始位置為60~250之間
6. 移動(dòng)目標(biāo)拼圖dest到(start,50)位置，y方向位置不變

三、F5預(yù)覽

到里可以預(yù)覽了，按下F5鍵，鼠標(biāo)移動(dòng)到圓形按鈕上，上方顯示拼圖，拖動(dòng)按鈕開始拼圖：

拼圖對上后，顯示驗(yàn)證通過提示。

因?yàn)閮?nèi)容較多，如果沒有達(dá)到效果，請仔細(xì)檢查每一步的操作哦！

整個(gè)例子已經(jīng)完成，到這里去下載源文件吧：

作者鏈接: http://pan.baidu.com/s/1jHAbPK6 密碼: 5khn

官方鏈接: http://pan.baidu.com/s/1nuT8AzZ 密碼: pfzj

本文由 @Axure原型設(shè)計(jì)工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。