| 一、概述

滑塊驗(yàn)證是一種新的交互驗(yàn)證方式，與傳統(tǒng)的圖文驗(yàn)證碼相比，更安全更智能。通常用于注冊、登錄、密碼修改等產(chǎn)品場景中。如圖1所示為滑塊驗(yàn)證的示意圖及元素拆解。

圖1-示意圖.png

| 二、交互分析

我們來分析上圖的滑塊驗(yàn)證都有哪些交互效果：

1. 鼠標(biāo)移入滑塊上方，顯示背景圖。

2. 鼠標(biāo)從滑塊上方移出，隱藏背景圖。

3. 拖拽滑塊，滑塊在滑動(dòng)區(qū)域范圍內(nèi)左右移動(dòng)。

4. 移動(dòng)滑塊時(shí)，滑塊左側(cè)的滑動(dòng)區(qū)域部分填充為灰色。

5. 移動(dòng)滑塊過程中和移動(dòng)滑塊結(jié)束時(shí)，均會(huì)顯示不同的提示信息。

6. 移動(dòng)滑塊時(shí)，滑動(dòng)圖片同步進(jìn)行水平移動(dòng)。

7. 松開鼠標(biāo)左鍵時(shí)即拖動(dòng)結(jié)束時(shí)，當(dāng)滑動(dòng)圖片與填充區(qū)域重合時(shí)，允許有一定的距離誤差，提示“驗(yàn)證成功”。

8. 松開鼠標(biāo)左鍵時(shí)即拖動(dòng)結(jié)束時(shí)，當(dāng)滑動(dòng)圖片與填充區(qū)域未重合時(shí)，提示“驗(yàn)證失敗”，同時(shí)滑動(dòng)圖片和滑塊復(fù)位，回到原來的初始位置。

| 三、素材準(zhǔn)備

1. 拖動(dòng)一個(gè)矩形至設(shè)計(jì)區(qū)域，寬高設(shè)置為40 x 40，矩形填充為灰色#7F7F7F，從icons庫拖動(dòng)一個(gè)向右的箭頭圖標(biāo)至設(shè)計(jì)區(qū)域，放置在矩形的中間，選中矩形和向右箭頭，鼠標(biāo)右鍵點(diǎn)擊選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，動(dòng)態(tài)面板命名為“滑塊”。

2. 拖動(dòng)一個(gè)矩形至設(shè)計(jì)區(qū)域，寬高設(shè)置為266 x 40，編輯矩形文字為“向右拖動(dòng)滑塊填充拼圖”，選中矩形，將其轉(zhuǎn)換為動(dòng)態(tài)面板，并命名為“滑動(dòng)區(qū)域”。選中“滑動(dòng)區(qū)域”動(dòng)態(tài)面板，為其增加一個(gè)狀態(tài)State2，狀態(tài)2中添加一個(gè)矩形，矩形填充為灰色#AAAAAA，矩形寬高設(shè)置為40 x 40。

3. 將“滑塊”與“滑動(dòng)區(qū)域”這兩個(gè)動(dòng)態(tài)面板進(jìn)行頂部對(duì)齊，左側(cè)對(duì)齊。如圖2所示。

   
   
   圖2-滑動(dòng)與滑動(dòng)區(qū)域.png

4. 從元件庫拖動(dòng)一個(gè)矩形至設(shè)計(jì)區(qū)域，矩形的寬高設(shè)置為266 x 132，為矩形填充顏色，矩形命名為“底圖”。

5. 從元件庫拖動(dòng)一個(gè)矩形至設(shè)計(jì)區(qū)域，矩形寬高設(shè)置為46 x 43，拖動(dòng)一個(gè)圓至矩形的左側(cè)，圓的寬高設(shè)置為20 x 20，選中矩形和圓，鼠標(biāo)右鍵點(diǎn)擊選擇“變換形狀”，選擇布爾運(yùn)算“去除”，進(jìn)行運(yùn)算，形成一個(gè)新的形狀。再添加一個(gè)圓至形狀的下方，選中新形狀和圓，鼠標(biāo)右鍵點(diǎn)擊選擇“變換形狀”，選擇布爾運(yùn)算“去除”，運(yùn)算后得到一個(gè)新的形狀，命名為“滑動(dòng)圖片”。按住shift鍵+option鍵或shift鍵+alt鍵，水平向右復(fù)制，復(fù)制后的形狀命名為“填充區(qū)域”，在右側(cè)樣式面板中，為“填充區(qū)域”設(shè)置一個(gè)內(nèi)部陰影效果。如圖3所示。

   
   
   圖3-滑動(dòng)圖片及填充區(qū)域.png

6. 拖動(dòng)一個(gè)矩形至設(shè)計(jì)區(qū)域，矩形的寬高設(shè)置為266 x 24，編輯矩形文本內(nèi)容為“拖動(dòng)滑塊，將懸浮圖片正確拼合”，選中矩形，將矩形轉(zhuǎn)換為動(dòng)態(tài)面板，命名為“提示信息”。將State1狀態(tài)的內(nèi)容復(fù)制三份，新增3個(gè)狀態(tài)，修改各狀態(tài)中矩形的文字內(nèi)容，State2、State3和State4的文字內(nèi)容分別為“滑塊拖動(dòng)中”、“驗(yàn)證通過”和“驗(yàn)證失敗”。為state3和state4增加一個(gè)對(duì)勾和關(guān)閉圖標(biāo)。

7. 選中提示信息和底圖，進(jìn)行左對(duì)齊和底部對(duì)齊。選中滑動(dòng)圖片、填充區(qū)域、底圖和提示信息，將其進(jìn)行組合，組合命名為“背景圖”。如圖4所示。

   
   
   圖4-背景圖.png

| 四、交互設(shè)置

1. 選中滑塊，點(diǎn)擊“新建交互”按鈕，選擇“鼠標(biāo)移入時(shí)”事件，選擇動(dòng)作“顯示/隱藏”，顯示背景圖，如圖5所示。

2. 選中滑塊，點(diǎn)擊“新建交互”按鈕，選擇“鼠標(biāo)移出時(shí)”事件，選擇動(dòng)作“顯示/隱藏”，隱藏背景圖，如圖6所示。

   
   
   圖5-顯示背景圖.png
   
   
   圖6-隱藏背景圖.png

3. 選中滑塊，點(diǎn)擊“新建交互”，選擇事件“拖動(dòng)時(shí)”，選擇動(dòng)作“移動(dòng)”，將當(dāng)前元件（滑塊）設(shè)置為水平移動(dòng)，設(shè)置移動(dòng)邊界，左側(cè)邊界大于等于330（滑動(dòng)區(qū)域最左側(cè)的位置），右側(cè)邊界小于等于596（滑動(dòng)區(qū)域最右側(cè)的位置），如圖7所示，點(diǎn)擊完成。點(diǎn)擊添加目標(biāo)，將滑動(dòng)圖片設(shè)置為水平移動(dòng)，設(shè)置移動(dòng)邊界，左側(cè)邊界大于等于滑動(dòng)圖片的左側(cè)位置，右側(cè)邊界小于等于596（滑動(dòng)區(qū)域右側(cè)的位置），如圖8所示，點(diǎn)擊完成。

   
   
   圖7-設(shè)置滑塊移動(dòng).png
   
   
   圖8-設(shè)置滑動(dòng)圖片移動(dòng).png

4. 為“拖動(dòng)時(shí)”事件添加動(dòng)作，點(diǎn)擊插入動(dòng)作，選擇“設(shè)置面板狀態(tài)”動(dòng)作，將滑動(dòng)區(qū)域的狀態(tài)設(shè)置為State2，點(diǎn)擊完成，如圖9所示。

   
   
   圖9-將滑動(dòng)區(qū)域的狀態(tài)設(shè)置為State2.png

5. 點(diǎn)擊插入動(dòng)作，選擇動(dòng)作“設(shè)置尺寸”，將“滑動(dòng)區(qū)域”動(dòng)態(tài)面板狀態(tài)State2中的矩形寬度設(shè)置為[[LVAR1.x-LVAR2.x+LVAR1.width]]，其中LVAR1為滑塊，LVAR2為滑動(dòng)區(qū)域，如圖10所示。高度不變，設(shè)置為40，如圖11所示。

   
   
   圖10-設(shè)置寬度.png
   
   
   圖11-設(shè)置高度.png

6. 點(diǎn)擊插入動(dòng)作，選擇動(dòng)作“設(shè)置面板狀態(tài)”，將提示信息動(dòng)態(tài)面板的狀態(tài)設(shè)置為State2，即提示“滑塊拖動(dòng)中”，點(diǎn)擊完成，如圖12所示。

   
   
   圖12-提示狀態(tài)2.png

7. 選中滑塊，點(diǎn)擊“新建交互”按鈕，添加“拖動(dòng)結(jié)束時(shí)”事件，選擇動(dòng)作“設(shè)置面板狀態(tài)”，將提示信息動(dòng)態(tài)面板的狀態(tài)設(shè)置為State3，即提示“驗(yàn)證成功”。點(diǎn)擊插入動(dòng)作，選擇動(dòng)作“移動(dòng)”，將當(dāng)前元件（滑塊）移至與填充區(qū)域左側(cè)對(duì)齊，縱坐標(biāo)不變，如圖13和14所示。點(diǎn)擊添加目標(biāo)，將“滑動(dòng)圖片”移至與填充區(qū)域左側(cè)對(duì)齊，縱坐標(biāo)保持不變，如圖15所示。為情形添加邏輯條件，表達(dá)式的內(nèi)容為滑動(dòng)圖片與填充區(qū)域左側(cè)的距離差的絕對(duì)值小于等于10，表達(dá)式為[[Math.abs(LVAR1.x-LVAR2.x)]]≤10，假設(shè)允許誤差值在10以內(nèi)，其中LVAR1為滑動(dòng)圖片，LVAR2為填充區(qū)域，如圖16所示。

   
   
   圖13-設(shè)置滑塊橫坐標(biāo).png
   
   
   圖14-設(shè)置滑塊移動(dòng)后的位置.png
   
   
   圖15-設(shè)置滑動(dòng)圖片移動(dòng)后的位置.png
   
   
   圖16-條件表達(dá)式.png

8. 為“拖動(dòng)結(jié)束時(shí)”事件添加另外一個(gè)情形，添加動(dòng)作“設(shè)置面板狀態(tài)”，將提示信息動(dòng)態(tài)面板的狀態(tài)設(shè)置為State4，即提示“驗(yàn)證失敗”，如圖17所示；添加動(dòng)作“等待”，等待時(shí)間設(shè)置為500毫秒；添加動(dòng)作“移動(dòng)”，將當(dāng)前元件（滑塊）移動(dòng)至初始位置；添加目標(biāo)，將滑動(dòng)圖片也移動(dòng)至初始位置，如圖18所示；添加動(dòng)作“設(shè)置面板狀態(tài)”，將提示信息動(dòng)態(tài)面板的狀態(tài)設(shè)置為State1，即提示“拖動(dòng)滑塊，將懸浮圖片正確拼合”；添加目標(biāo)，將滑動(dòng)區(qū)域動(dòng)態(tài)面板的狀態(tài)設(shè)置為State1。如圖19所示。

   
   
   圖17-提示信息狀態(tài)設(shè)置為State4.png
   
   
   圖18-滑塊和滑動(dòng)圖片位置復(fù)原.png
   
   
   圖19-設(shè)置提示信息和滑動(dòng)區(qū)域的狀態(tài).png
9. 點(diǎn)擊預(yù)覽，在瀏覽器中查看原型效果。