導讀：很多網站都會設置登錄驗證以防止機器人登錄，滑塊拼圖驗證是比較常見的一種形式。本文作者用Axure9來制作一個帶拼圖驗證的完整登錄效果，希望對你有幫助。

一、交互效果說明

1.在賬戶密碼輸入界面點擊登錄，進行拼圖驗證，拖動滑塊，上方拼圖塊隨滑塊同步移動，拼圖失敗顯示文字提示，滑塊及拼圖返回初始位置；

2.拼圖驗證成功后返回賬戶密碼輸入界面，并通過上方文字提示賬戶密碼輸入的驗證結果。

預覽效果：

原型預覽地址：https://93yr89.axshare.com

二、制作交互效果

整個交互分成兩個部分，分別是拖動拼圖以及賬戶密碼輸入，我們需要拖入一個動態面板，命名為「content」，調整動態面板大小，創建以上兩個狀態。

1. 制作拖動拼圖效果

1）交互效果分析

1.拖動滑塊時，上方的拼圖塊隨著滑塊滑動而同步滑動，且滑動范圍不超過灰色背景條的兩端。

2.拖動結束時，若拼圖塊對齊缺口，彈出成功提示的彈層并且返回到登錄面板中。

3.拖動結束時，若拼圖塊未對齊缺口，滑塊和拼圖塊返回原來的位置，顯示文字提示。

元件準備

雙擊拖入的動態面板「content」，選擇【滑動驗證】狀態，按照圖示準備好以下元件并進行命名。

元件說明

1.「success notice」是拼圖成功的提示彈層，底部的矩形可以設置為透明度為70%白色填充，將整個組合置于圖片上方，點擊右鍵【設為不可見】。

2.「contact line」為寬度為4px的熱區，熱區是透明的元件，作為輔助用途，放到缺口的右側作為拼圖塊移動時接觸的條件；

3.選中文字「notice」，點擊右鍵，選擇【交互樣式】，添加【選中】效果時，設置字體顏色為紅色。

添加交互效果

1.給滑塊「slider」添加【拖動時】的交互，分別設置滑塊「slider」和拼圖塊「block」【跟隨水平拖動】，點擊【更多選項】，添加邊界值【左側≥30】【右側≤330】；

2.給滑塊「slider」添加【拖動結束時】的交互，點擊【添加情形】，【元件范圍】-「block」-接觸-【元件范圍】-「contact line」時，添加以下動作：

【顯示】彈層組合「success notice」；【等待1000ms】；【設置面板】「content」為【輸入賬號密碼】狀態；隱藏「success notice」；移動「slider」及「block」【回拖動前位置】，動畫為【線性500ms】；

3.繼續給滑塊「slider」添加【拖動結束時】的交互，設置和2中條件相反即【Else If為真】，添加以下動作：

移動「slider」及「block」【回拖動前位置】，動畫為【線性500ms】；【選中】提示文本「notice」；【設置文本】「notice」為：“請控制拼圖對齊缺口”。

做完以上步驟，拖動拼圖的效果就完成了，滑塊「slider」全部交互如圖：

2）賬號密碼輸入驗證

交互效果分析

對輸入內容為空/錯誤進行判斷并提示用戶，主要有以下幾種情形

1.用戶名輸入為空時，提示：請輸入用戶名

2.密碼輸入為空時，提示：請輸入密碼

3.用戶輸入錯誤時，提示：用戶名不存在

4.密碼輸入錯誤時，提示：密碼輸入錯誤

5.用戶名密碼均輸入正確時，提示：登錄成功

元件準備

雙擊拖入的動態面板「content」，選擇【賬號密碼輸入】狀態：

1.拖入一個矩形框，調整大小，設置邊框顏色為：#666EE8，透明度：20%，命名為「username-line」，在右側交互樣式面板中設置【元件選中時】的樣式為邊框顏色：#666EE8，透明度：100%，設置選項組名稱為「option」；

2.拖入一個文本框元件，置于「username-line」上方，隱藏邊框，命名為：「username-input」，在右側交互樣式面板中設置提示文字為：“請輸入賬號”

3.同理制作出密碼的輸入組件并進行命名。

4.拖入一個矩形元件，調整樣式，命名為：「login」；拖入一個文本標簽，置于用戶名輸入上方，命名為「notice」，點擊右鍵【設為不可見】。

所有元件及命名如下：

添加交互

1.給「username-input」添加【獲取焦點時】的交互，【選中「username-line」為真】；【失去焦點時】【選中「username-line」為假】；

2.同樣給「password-input」添加【獲取焦點時】的交互，【選中「password-line」為真】；【失去焦點時】【選中「password-line」為假】；

3.接下來給登錄按鈕「login」添加【單擊時】的交互，分別添加我們在交互分析中的上5個情形，并設置對應的動作，這里就不一一贅述了，所有的交互效果如下：

本文由 @Daisy 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議