今天來(lái)分享下使用Axure制作拖動(dòng)滑塊解鎖這個(gè)功能的方法，使用淘寶網(wǎng)的例子來(lái)還原制作過(guò)程。

如下圖：

相信很多人對(duì)這個(gè)界面都不陌生，這是淘寶網(wǎng)的注冊(cè)頁(yè)面，除此之外目前很多網(wǎng)站都有用這種方式來(lái)進(jìn)行驗(yàn)證，當(dāng)然也有同一種方法不同的表現(xiàn)形式，比如拖動(dòng)后完成拼圖，以防止頻繁的非正常請(qǐng)求，進(jìn)行人機(jī)驗(yàn)證。

操作描述：

• 拖動(dòng)滑塊時(shí)，滑塊水平左右運(yùn)動(dòng)，不可超出灰色邊框；
• 拖動(dòng)時(shí)，綠色的背景隨滑塊進(jìn)行移動(dòng)；
• 拖動(dòng)達(dá)到最右端時(shí)，顯示白色文字“加載中”，等待半秒鐘后顯示白色文字“通過(guò)驗(yàn)證”，并且「對(duì)勾」圖標(biāo)變?yōu)榫G色，同時(shí)“獲取短信驗(yàn)證碼”按鈕變?yōu)榭捎脿顟B(tài)；
• 如果拖動(dòng)并為達(dá)到最右端，滑塊則回到初始位置。

01

根據(jù)該效果圖準(zhǔn)備以下元件，其他部分元件仿照淘寶注冊(cè)頁(yè)面調(diào)整就行，我這里就不逐個(gè)列出了。

02

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

03

• 如過(guò)不滿(mǎn)足事件1所設(shè)定的條件時(shí)，執(zhí)行動(dòng)作為：“設(shè)置文本”于元件【Tips】為“富文本”，然后點(diǎn)擊編輯富文本為“加載中…”

添加動(dòng)作“等待”，時(shí)間為：500毫秒。

添加動(dòng)作：“設(shè)置文本”于元件【Tips】為“富文本”，然后點(diǎn)擊編輯富文本為“通過(guò)驗(yàn)證”。

繼續(xù)添加動(dòng)作“設(shè)置動(dòng)態(tài)面板狀態(tài)”于動(dòng)態(tài)面板【Slider】為“Tick”。

設(shè)置元件【Nextbutton】初始狀態(tài)為：“禁用”。

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

然后繼續(xù)回元件【Slider】的“Case 2”中，設(shè)置動(dòng)作“啟用”【Nextbutton】。

04

添加動(dòng)態(tài)面板【Slider】“拖動(dòng)結(jié)束時(shí)”事件case1。

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

當(dāng)滿(mǎn)足條件時(shí)的動(dòng)作設(shè)置為”移動(dòng)“動(dòng)態(tài)面板【Slider】”到達(dá)“ x=171，y=227 （此處坐標(biāo)視你操作時(shí)【Slider】面板的具體位置而定）。

添加動(dòng)態(tài)面板【Slider】“移動(dòng)時(shí)”事件case1。

設(shè)置case1動(dòng)作為“移動(dòng)”元件【Greenbox】“跟隨”當(dāng)前動(dòng)態(tài)面板移動(dòng)。

這樣，整個(gè)拖動(dòng)滑塊解鎖的原型就基本完成了，細(xì)節(jié)的地方如果需要美化的可自行研究，整個(gè)過(guò)程的難點(diǎn)主要在于對(duì)動(dòng)態(tài)面板移動(dòng)以及條件判斷的運(yùn)用，對(duì)于條件判斷不熟悉的同學(xué)可以多找些案例嘗試練習(xí)。

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

作者：杰森，公眾號(hào)：十八般產(chǎn)品

本文由 @杰森 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議