起點(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教程 | 小白入門，制作web端注冊(cè)/登錄
做為一名年長(zhǎng)又不出色的產(chǎn)品經(jīng)理，這些年沒(méi)有什么出彩的產(chǎn)品產(chǎn)出。最近在聽(tīng)過(guò)幾本書之后，終于豁然開(kāi)朗，發(fā)現(xiàn)了自己為什么會(huì)一直在沒(méi)有產(chǎn)出的漩渦中沉淪。所以從今天起，作為一名產(chǎn)品小白開(kāi)重新打磨自己，通過(guò)分享Axure教程，讓喜歡產(chǎn)品的朋友們敲打自己的作品來(lái)提升自我水平，歡迎大家的批評(píng)。
這是第一篇Axure教程：小白入門，制作web端注冊(cè)/登錄模塊
先看演示gif
登錄：
注冊(cè)：
忘記密碼：
功能梳理和流程圖
（1）登錄功能
用戶通過(guò)輸入昵稱、手機(jī)號(hào)及密碼來(lái)完成登錄的過(guò)程。
- 昵稱需要判斷不為空；
- 手機(jī)號(hào)需要判斷手機(jī)號(hào)位數(shù)、是否符合手機(jī)號(hào)標(biāo)準(zhǔn)；
- 點(diǎn)擊登錄按鈕的時(shí)候進(jìn)行判斷，如出錯(cuò)，當(dāng)前頁(yè)面展示錯(cuò)誤，不跳轉(zhuǎn)頁(yè)面。
（2）注冊(cè)功能
用戶通過(guò)輸入昵稱、手機(jī)號(hào)、手機(jī)驗(yàn)證碼、密碼來(lái)完成注冊(cè)的過(guò)程。
- 昵稱可以登錄網(wǎng)站，需要（唯一性/去重）的判斷；
- 手機(jī)號(hào)需要判斷手機(jī)號(hào)位數(shù)、是否符合手機(jī)號(hào)標(biāo)準(zhǔn)；
- 發(fā)送驗(yàn)證碼需要確認(rèn)手機(jī)號(hào)字段符合要求，
- 重復(fù)發(fā)送驗(yàn)證碼有60s的重置時(shí)間，
- 已發(fā)送的驗(yàn)證碼具有5分鐘的生效時(shí)間，
- 已使用的驗(yàn)證碼立即銷毀；
- 密碼需要判斷不為空，需要符合安全標(biāo)準(zhǔn)。
（3）忘記密碼
用戶通過(guò)昵稱、手機(jī)號(hào)來(lái)完成密碼重置的過(guò)程。
- 昵稱需要判斷是否為空；
- 手機(jī)號(hào)需要判斷手機(jī)號(hào)位數(shù)、是否符合手機(jī)號(hào)標(biāo)準(zhǔn)；
- 發(fā)送驗(yàn)證碼需要確認(rèn)手機(jī)號(hào)字段符合要求；
- 重復(fù)發(fā)送驗(yàn)證碼有60s的重置時(shí)間；
- 已發(fā)送的驗(yàn)證碼具有5分鐘的生效時(shí)間；
- 已使用的驗(yàn)證碼立即銷毀；
- 重新輸入的密碼需要判斷不為空，需要符合安全標(biāo)準(zhǔn)；
- 第二次輸入的密碼需要判斷是否和第一編的密碼相同。
制作中的難點(diǎn)
（1）登錄頁(yè)面
交互通過(guò)切換元件的隱藏和顯示屬性就能完成。
判斷部分只需要設(shè)置【元件文字】等于【具體值】就可以。
加載圖片有朋友不太會(huì)做，可以參考我這里的設(shè)置，雖然不完美，但是實(shí)際點(diǎn)擊效果還是可以的。
（2）注冊(cè)頁(yè)面
注冊(cè)頁(yè)面中比較花費(fèi)實(shí)際的部分是【發(fā)送驗(yàn)證碼】的部分。
這里的流程是【點(diǎn)擊按鈕】->【60s倒計(jì)時(shí) ～ 0s倒計(jì)時(shí)】->恢復(fù)【點(diǎn)擊按鈕】，可以重復(fù)過(guò)程。
在這個(gè)交互的實(shí)現(xiàn)中，首先設(shè)置一個(gè)變量 keyNumber 值為60。
然后在【發(fā)送驗(yàn)證碼】按鈕上添加一個(gè)不會(huì)使用的交互用例，比如：我這里使用的是【旋轉(zhuǎn)時(shí)】。
設(shè)置【旋轉(zhuǎn)時(shí)】會(huì)觸發(fā)的兩個(gè)判斷條件：一個(gè)為 keyNumber > 0 , 一個(gè)為?keyNumber = 0。
上面這兩個(gè)判斷就能做到被觸發(fā)時(shí)，數(shù)字進(jìn)行倒計(jì)時(shí)，然后還需要一個(gè)觸發(fā)【旋轉(zhuǎn)時(shí)】的動(dòng)作。給【發(fā)送驗(yàn)證碼】按鈕添加一個(gè)【點(diǎn)擊】的交互用例，設(shè)置觸發(fā)事件，找到【當(dāng)前元素】設(shè)置交互用例。
像下圖這樣：
（3）忘記密碼頁(yè)面
忘記密碼頁(yè)面沒(méi)有交互上的難點(diǎn)，基本上是重復(fù)上面兩個(gè)頁(yè)面的交互動(dòng)作,。
最后
本此教程有些功能沒(méi)能實(shí)現(xiàn)，沒(méi)有做容錯(cuò)。比如：防刷機(jī)制需要在登錄提交、注冊(cè)提交、驗(yàn)證碼提交、忘記密碼的確認(rèn)賬號(hào)、第三方登錄的綁定賬號(hào)提交。（目前業(yè)內(nèi)通用的方式是增加各種圖片驗(yàn)證碼）
本文原型鏈接
鏈接（直接點(diǎn)或復(fù)制后在瀏覽器中打開(kāi)）：https://tk5yg4.axshare.com/#g=1
本文由 @jiantian 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
很好，能給原件嗎謝謝
最近在聽(tīng)過(guò)幾本書之后，終于豁然開(kāi)朗，能告訴看的什么書，豁然開(kāi)朗的嗎？多謝。
小白表示 沒(méi)有具體的步驟 只有難點(diǎn)解釋 真心做不出來(lái)
?? 這個(gè)一是可以自學(xué)下基礎(chǔ)操作。。。另外一個(gè)可以學(xué)習(xí)下官方的Axure實(shí)戰(zhàn)班
懵逼ing 我還是用傻瓜式工具墨刀來(lái)畫吧，素材廣場(chǎng)的原型直接可以復(fù)用??
流程圖是用什么工具畫的，挺好看的
流程圖用的就是axure
連接元件的效果是怎么實(shí)現(xiàn)的？
已經(jīng)弄清楚了 ??
我是純小白，這個(gè)是用了UI庫(kù)之類的東西么，這個(gè)按鈕還有輸入框都很好看啊…..
沒(méi)有用UI庫(kù)，用的 axure 的元件，進(jìn)行了微調(diào)。
icon圖標(biāo)用的是 FontAwesome部件
??
發(fā)送驗(yàn)證碼那個(gè)，搞復(fù)雜了，而且還出bug了。直接給按鈕設(shè)置一個(gè)禁用態(tài)，點(diǎn)擊后禁用，然后通過(guò)wait來(lái)改變按鈕文字，（60s 40s 20s即可）然后改按鈕為可用。
樓主用的是減10s，記得入行不久做這個(gè)功能的時(shí)候，用函數(shù)做的減1s，澄清需求的時(shí)候，一會(huì)議室人陪我尷尬的等了一分鐘。
收到，好方法，下次就改掉。
你之前的60秒也是醉了 ??
細(xì)致