滑塊驗證是登錄環(huán)節(jié)經(jīng)常會使用到的驗證方式，那如何試用Axure實習滑塊驗證那，我們今天就來試試。

需求分析

根據(jù)我們在上面看的效果，滑塊驗證的需求如下：

（1）初始狀態(tài)：滑塊在最右側(cè)，并且顯示“ >> ”，“?下一步 ”按鈕禁用（灰色）；

（2）拖動狀態(tài)：當使用鼠標拖動的時候，滑塊隨著鼠標移動，并且滑塊移過的地方用綠色覆蓋；

（3）當滑塊移動到最右側(cè)時候，滑塊上面顯示”ok”，按鈕變成可用（白色）；

（4）如果滑塊在移動的過程中，沒有移動到最右側(cè)，滑塊退回初始位置，滑塊軌道還是被灰色覆蓋。

設(shè)計思路

（1）這個案例需要用到滑塊拖動，那需要動態(tài)面板實現(xiàn)滑塊；

（2）滑塊只能在滑道里面移動，需要設(shè)置滑塊移動范圍不能超過滑道；

（3）滑道背景的的改變，可以在滑塊后面設(shè)置一個綠色的背景矩形，背景矩形位于滑道的上層，當滑動移動端的時候，改變這個背景矩形的大小。

原型設(shè)計

（1）拖動3個矩形放入畫布，分別是滑塊(slider)、滑道(track)、背景(back)，這三個矩形的層次從前往后分別是滑塊、背景和滑道。

（2）把滑塊slider轉(zhuǎn)換為動態(tài)面板。

（3）拖入一個矩形作為“第一步”按鈕，并且設(shè)置該矩形為禁用。

（4）當然我們還要拖入一個輸入框，作為手機號碼輸入框。

到此，原型就設(shè)計完成，最后的效果如下：

交互設(shè)計

（1）設(shè)置動態(tài)面板slider的移動中事件，當slider移動中的時候，設(shè)置滑塊slider跟隨移動，并且設(shè)置綠色背景back的尺寸跟隨變化。

（2）當拖動結(jié)束時候，判斷是否已經(jīng)拖動到最右側(cè)，如果拖動到最右側(cè)，就把“下一步”按鈕設(shè)為可用狀態(tài)。

（3）如果拖動結(jié)束時，沒有拖動到最右側(cè)，則滑塊slider位置復原，背景back尺寸復原。

（4）設(shè)置按鈕下一步的交互樣式，當禁用的時候，用灰色填充。

到了這步，滑塊驗證的功能就算做好了，同學們趕緊去試試吧。

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

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