做為一名年長又不出色的產品經理，這些年沒有什麼出彩的產品產出。最近在聽過幾本書之後，終於豁然開朗，發現了自己為什麼會一直在沒有產出的漩渦中沉淪。所以從今天起，作為一名產品小白開重新打磨自己，通過分享Axure教程，讓喜歡產品的朋友們敲打自己的作品來提升自我水平，歡迎大家的批評。
這是第一篇Axure教程：小白入門，製作web端註冊/登錄模塊
先看演示gif
登錄：
註冊：
忘記密碼：
功能梳理和流程圖
（1）登錄功能
用戶通過輸入暱稱、手機號及密碼來完成登錄的過程。
- 暱稱需要判斷不為空；
- 手機號需要判斷手機號位數、是否符合手機號標準；
- 點擊登錄按鈕的時候進行判斷，如出錯，當前頁面展示錯誤，不跳轉頁面。
（2）註冊功能
用戶通過輸入暱稱、手機號、手機驗證碼、密碼來完成註冊的過程。
- 暱稱可以登錄網站，需要（唯一性/去重）的判斷；
- 手機號需要判斷手機號位數、是否符合手機號標準；
- 發送驗證碼需要確認手機號字段符合要求，
- 重複發送驗證碼有60s的重置時間，
- 已發送的驗證碼具有5分鐘的生效時間，
- 已使用的驗證碼立即銷燬；
- 密碼需要判斷不為空，需要符合安全標準。
（3）忘記密碼
用戶通過暱稱、手機號來完成密碼重置的過程。
- 暱稱需要判斷是否為空；
- 手機號需要判斷手機號位數、是否符合手機號標準；
- 發送驗證碼需要確認手機號字段符合要求；
- 重複發送驗證碼有60s的重置時間；
- 已發送的驗證碼具有5分鐘的生效時間；
- 已使用的驗證碼立即銷燬；
- 重新輸入的密碼需要判斷不為空，需要符合安全標準；
- 第二次輸入的密碼需要判斷是否和第一編的密碼相同。
製作中的難點
（1）登錄頁面
交互通過切換元件的隱藏和顯示屬性就能完成。
判斷部分只需要設置【元件文字】等於【具體值】 就可以。
加載圖片有朋友不太會做，可以參考我這裡的設置，雖然不完美，但是實際點擊效果還是可以的。
（2）註冊頁面
註冊頁面中比較花費實際的部分是【發送驗證碼】的部分。
這裡的流程是【點擊按鈕】->【60s倒計時 ～ 0s倒計時】->恢復【點擊按鈕】，可以重複過程。
在這個交互的實現中，首先設置一個變量 keyNumber 值為60。
然後在【發送驗證碼】按鈕上添加一個不會使用的交互用例，比如：我這裡使用的是【旋轉時】。
設置【旋轉時】會觸發的兩個判斷條件：一個為 keyNumber > 0 , 一個為 keyNumber = 0。
上面這兩個判斷就能做到被觸發時，數字進行倒計時，然後還需要一個觸發【旋轉時】的動作。給【發送驗證碼】按鈕添加一個【點擊】的交互用例，設置觸發事件，找到【當前元素】設置交互用例。
像下圖這樣：
（3）忘記密碼頁面
忘記密碼頁面沒有交互上的難點，基本上是重複上面兩個頁面的交互動作,。
最後
本此教程有些功能沒能實現，沒有做容錯。比如：防刷機制需要在登錄提交、註冊提交、驗證碼提交、忘記密碼的確認賬號、第三方登錄的綁定賬號提交。（目前業內通用的方式是增加各種圖片驗證碼）
本文原型鏈接
鏈接（直接點或複製後在瀏覽器中打開）：https://tk5yg4.axshare.com/#g=1
本文由 @jiantian 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
