今天來分享下使用Axure制作拖動滑塊解鎖這個功能的方法，使用淘寶網的例子來還原制作過程。

如下圖：

相信很多人對這個界面都不陌生，這是淘寶網的注冊頁面，除此之外目前很多網站都有用這種方式來進行驗證，當然也有同一種方法不同的表現形式，比如拖動后完成拼圖，以防止頻繁的非正常請求，進行人機驗證。

操作描述：

• 拖動滑塊時，滑塊水平左右運動，不可超出灰色邊框；
• 拖動時，綠色的背景隨滑塊進行移動；
• 拖動達到最右端時，顯示白色文字“加載中”，等待半秒鐘后顯示白色文字“通過驗證”，并且「對勾」圖標變為綠色，同時“獲取短信驗證碼”按鈕變為可用狀態；
• 如果拖動并為達到最右端，滑塊則回到初始位置。

01

根據該效果圖準備以下元件，其他部分元件仿照淘寶注冊頁面調整就行，我這里就不逐個列出了。

02

• 選中動態面板【Slider】，為“拖動時”添加事件1
• 先添加條件，判斷“元件范圍”是【Slider】面板“未接觸”到【Touchpoint】——（我的Axure沒漢化，重要的地方用紅字標注了）
• 設置滿足條件的動作：移動【Slider】為“水平拖動”
• 單擊“界限”后的“添加邊界”，設置在X軸的移動范圍為“181-482”，此處范圍根據【Touchpoint】元件實際擺放的位置而定。

03

• 如過不滿足事件1所設定的條件時，執行動作為：“設置文本”于元件【Tips】為“富文本”，然后點擊編輯富文本為“加載中…”

添加動作“等待”，時間為：500毫秒。

添加動作：“設置文本”于元件【Tips】為“富文本”，然后點擊編輯富文本為“通過驗證”。

繼續添加動作“設置動態面板狀態”于動態面板【Slider】為“Tick”。

設置元件【Nextbutton】初始狀態為：“禁用”。

注意：【Nextbutton】元件的“可用”狀態是鮮艷的顏色，需要事先設定好，而且需要在屬性中設定“不可用”狀態的顏色為灰色。

然后繼續回元件【Slider】的“Case 2”中，設置動作“啟用”【Nextbutton】。

04

添加動態面板【Slider】“拖動結束時”事件case1。

為case1添加條件判斷，判斷“元件范圍”【Slider】“未接觸” “元件范圍”【Touchpoint】。（具體圖示可參看上文步驟2）

當滿足條件時的動作設置為”移動“動態面板【Slider】”到達“ x=171，y=227 （此處坐標視你操作時【Slider】面板的具體位置而定）。

添加動態面板【Slider】“移動時”事件case1。

設置case1動作為“移動”元件【Greenbox】“跟隨”當前動態面板移動。

這樣，整個拖動滑塊解鎖的原型就基本完成了，細節的地方如果需要美化的可自行研究，整個過程的難點主要在于對動態面板移動以及條件判斷的運用，對于條件判斷不熟悉的同學可以多找些案例嘗試練習。

另外需要提醒的是，如果嘗試模仿別的功能來練習，在開始前一定要弄清楚操作描述并寫下來，這對流程的理解和條件判斷的設定，以及元件層級的擺放合理性都起到重要的作用，我也會繼續分享更多案例給大家一起實操。

作者：杰森，公眾號：十八般產品

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

題圖來自Unsplash，基于CC0協議