起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：拼圖身份驗(yàn)證如何設(shè)計(jì)？
拼拼圖進(jìn)行身份驗(yàn)證已經(jīng)越來(lái)越常見(jiàn)，這種驗(yàn)證方式趣味性十足，還能增強(qiáng)網(wǎng)絡(luò)安全性，那今天我們來(lái)看看這個(gè)功能的原型是怎么做出來(lái)的。
注：在做的過(guò)程中看到前輩做過(guò)類似的滑動(dòng)拼圖解鎖，但是我用的相關(guān)函數(shù)更簡(jiǎn)單易懂易操作，有興趣大家可以都看看，自己選擇適合的。
效果圖送給大家
實(shí)現(xiàn)原理
移動(dòng)拼圖的按鈕只能在杠桿中運(yùn)動(dòng)，移動(dòng)按鈕移動(dòng)時(shí)，拼圖跟著移動(dòng)，拼圖移動(dòng)到對(duì)應(yīng)位置的可允許誤差范圍內(nèi)松開(kāi)鼠標(biāo)時(shí)，拼圖驗(yàn)證成功，否則返回失敗結(jié)果，按鈕和拼圖返回初始位
教程如下
1、設(shè)置好基本元件
2、設(shè)置拼圖按鈕只能在杠桿中運(yùn)動(dòng)
3、設(shè)置拼圖面板在指定區(qū)域并跟隨按鈕面板移動(dòng)
4、設(shè)置一個(gè)圖像熱區(qū)做為拼圖的可允許誤差范圍，當(dāng)按鈕面板結(jié)束拖動(dòng)時(shí)，如果紅心面板沒(méi)有接觸到允許誤差范圍，則紅心面板和按鈕面板返回初始位置，矩形返回文字：驗(yàn)證失敗，請(qǐng)重新驗(yàn)證。
5、當(dāng)按鈕面板結(jié)束拖動(dòng)時(shí)，如果紅心面板接觸到允許誤差范圍時(shí)，紅心面板移到白心位置，矩形返回文字：驗(yàn)證成功。
6、哈哈，終于設(shè)置好了，快預(yù)覽看看效果，成就感滿滿是不是~~
本文由 @萍萍仔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
有視頻指導(dǎo)嗎
請(qǐng)問(wèn)，元件里的紅心和白心在哪里下載的呢？
用熱區(qū)好像范圍很大，碰到一點(diǎn)邊都算，哪里可以設(shè)置誤差啊
哇，很強(qiáng)也，蟹蟹指導(dǎo)
哈哈哈好棒 我第一次完整完成一次設(shè)計(jì)
給你點(diǎn)個(gè)贊 ??
非常好，非常清楚，蟹蟹
嘻嘻，收下你的蟹，白焯~好好吃