做為一名年長又不出色的產(chǎn)品經(jīng)理，這些年沒有什么出彩的產(chǎn)品產(chǎn)出。最近在聽過幾本書之后，終于豁然開朗，發(fā)現(xiàn)了自己為什么會一直在沒有產(chǎn)出的漩渦中沉淪。所以從今天起，作為一名產(chǎn)品小白開重新打磨自己，通過分享Axure教程，讓喜歡產(chǎn)品的朋友們敲打自己的作品來提升自我水平，歡迎大家的批評。

這是第一篇Axure教程：小白入門，制作web端注冊/登錄模塊

先看演示gif

登錄：

注冊：

忘記密碼：

功能梳理和流程圖

（1）登錄功能

用戶通過輸入昵稱、手機(jī)號及密碼來完成登錄的過程。

• 昵稱需要判斷不為空；
• 手機(jī)號需要判斷手機(jī)號位數(shù)、是否符合手機(jī)號標(biāo)準(zhǔn)；
• 點擊登錄按鈕的時候進(jìn)行判斷，如出錯，當(dāng)前頁面展示錯誤，不跳轉(zhuǎn)頁面。

（2）注冊功能

用戶通過輸入昵稱、手機(jī)號、手機(jī)驗證碼、密碼來完成注冊的過程。

• 昵稱可以登錄網(wǎng)站，需要（唯一性/去重）的判斷；
• 手機(jī)號需要判斷手機(jī)號位數(shù)、是否符合手機(jī)號標(biāo)準(zhǔn)；
• 發(fā)送驗證碼需要確認(rèn)手機(jī)號字段符合要求，
• 重復(fù)發(fā)送驗證碼有60s的重置時間，
• 已發(fā)送的驗證碼具有5分鐘的生效時間，
• 已使用的驗證碼立即銷毀；
• 密碼需要判斷不為空，需要符合安全標(biāo)準(zhǔn)。

（3）忘記密碼

用戶通過昵稱、手機(jī)號來完成密碼重置的過程。

• 昵稱需要判斷是否為空；
• 手機(jī)號需要判斷手機(jī)號位數(shù)、是否符合手機(jī)號標(biāo)準(zhǔn)；
• 發(fā)送驗證碼需要確認(rèn)手機(jī)號字段符合要求；
• 重復(fù)發(fā)送驗證碼有60s的重置時間；
• 已發(fā)送的驗證碼具有5分鐘的生效時間；
• 已使用的驗證碼立即銷毀；
• 重新輸入的密碼需要判斷不為空，需要符合安全標(biāo)準(zhǔn)；
• 第二次輸入的密碼需要判斷是否和第一編的密碼相同。

制作中的難點

（1）登錄頁面

交互通過切換元件的隱藏和顯示屬性就能完成。

判斷部分只需要設(shè)置【元件文字】等于【具體值】就可以。

加載圖片有朋友不太會做，可以參考我這里的設(shè)置，雖然不完美，但是實際點擊效果還是可以的。

（2）注冊頁面

注冊頁面中比較花費(fèi)實際的部分是【發(fā)送驗證碼】的部分。

這里的流程是【點擊按鈕】->【60s倒計時 ～ 0s倒計時】->恢復(fù)【點擊按鈕】，可以重復(fù)過程。

在這個交互的實現(xiàn)中，首先設(shè)置一個變量 keyNumber 值為60。

然后在【發(fā)送驗證碼】按鈕上添加一個不會使用的交互用例，比如：我這里使用的是【旋轉(zhuǎn)時】。

設(shè)置【旋轉(zhuǎn)時】會觸發(fā)的兩個判斷條件：一個為 keyNumber > 0 , 一個為?keyNumber = 0。

上面這兩個判斷就能做到被觸發(fā)時，數(shù)字進(jìn)行倒計時，然后還需要一個觸發(fā)【旋轉(zhuǎn)時】的動作。給【發(fā)送驗證碼】按鈕添加一個【點擊】的交互用例，設(shè)置觸發(fā)事件，找到【當(dāng)前元素】設(shè)置交互用例。

像下圖這樣：

（3）忘記密碼頁面

忘記密碼頁面沒有交互上的難點，基本上是重復(fù)上面兩個頁面的交互動作,。

最后

本此教程有些功能沒能實現(xiàn)，沒有做容錯。比如：防刷機(jī)制需要在登錄提交、注冊提交、驗證碼提交、忘記密碼的確認(rèn)賬號、第三方登錄的綁定賬號提交。（目前業(yè)內(nèi)通用的方式是增加各種圖片驗證碼）

本文原型鏈接

鏈接（直接點或復(fù)制后在瀏覽器中打開）：https://tk5yg4.axshare.com/#g=1

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

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