起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：滑塊驗(yàn)證
滑塊驗(yàn)證是登錄環(huán)節(jié)經(jīng)常會(huì)使用到的驗(yàn)證方式，那如何試用Axure實(shí)習(xí)滑塊驗(yàn)證那，我們今天就來(lái)試試。
需求分析
根據(jù)我們?cè)谏厦婵吹男Ч瑝K驗(yàn)證的需求如下：
（1）初始狀態(tài)：滑塊在最右側(cè)，并且顯示“ >> ”，“?下一步 ”按鈕禁用（灰色）；
（2）拖動(dòng)狀態(tài)：當(dāng)使用鼠標(biāo)拖動(dòng)的時(shí)候，滑塊隨著鼠標(biāo)移動(dòng)，并且滑塊移過(guò)的地方用綠色覆蓋；
（3）當(dāng)滑塊移動(dòng)到最右側(cè)時(shí)候，滑塊上面顯示”ok”，按鈕變成可用（白色）；
（4）如果滑塊在移動(dòng)的過(guò)程中，沒(méi)有移動(dòng)到最右側(cè)，滑塊退回初始位置，滑塊軌道還是被灰色覆蓋。
設(shè)計(jì)思路
（1）這個(gè)案例需要用到滑塊拖動(dòng)，那需要?jiǎng)討B(tài)面板實(shí)現(xiàn)滑塊；
（2）滑塊只能在滑道里面移動(dòng)，需要設(shè)置滑塊移動(dòng)范圍不能超過(guò)滑道；
（3）滑道背景的的改變，可以在滑塊后面設(shè)置一個(gè)綠色的背景矩形，背景矩形位于滑道的上層，當(dāng)滑動(dòng)移動(dòng)端的時(shí)候，改變這個(gè)背景矩形的大小。
原型設(shè)計(jì)
（1）拖動(dòng)3個(gè)矩形放入畫布，分別是滑塊(slider)、滑道(track)、背景(back)，這三個(gè)矩形的層次從前往后分別是滑塊、背景和滑道。
（2）把滑塊slider轉(zhuǎn)換為動(dòng)態(tài)面板。
（3）拖入一個(gè)矩形作為“第一步”按鈕，并且設(shè)置該矩形為禁用。
（4）當(dāng)然我們還要拖入一個(gè)輸入框，作為手機(jī)號(hào)碼輸入框。
到此，原型就設(shè)計(jì)完成，最后的效果如下：
交互設(shè)計(jì)
（1）設(shè)置動(dòng)態(tài)面板slider的移動(dòng)中事件，當(dāng)slider移動(dòng)中的時(shí)候，設(shè)置滑塊slider跟隨移動(dòng)，并且設(shè)置綠色背景back的尺寸跟隨變化。
（2）當(dāng)拖動(dòng)結(jié)束時(shí)候，判斷是否已經(jīng)拖動(dòng)到最右側(cè)，如果拖動(dòng)到最右側(cè)，就把“下一步”按鈕設(shè)為可用狀態(tài)。
（3）如果拖動(dòng)結(jié)束時(shí)，沒(méi)有拖動(dòng)到最右側(cè)，則滑塊slider位置復(fù)原，背景back尺寸復(fù)原。
（4）設(shè)置按鈕下一步的交互樣式，當(dāng)禁用的時(shí)候，用灰色填充。
到了這步，滑塊驗(yàn)證的功能就算做好了，同學(xué)們趕緊去試試吧。
本文由 @馬白龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
請(qǐng)問(wèn)有操作視頻嗎？
應(yīng)該再加一個(gè)已經(jīng)驗(yàn)證成功無(wú)法往左拖