起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：登錄·高保真設計（下）
繼上次解析登錄部分的高保真設計，本次將講解《登錄·高保真設計》下部分，注冊賬號、重置密碼的部分。因注冊賬號和重置密碼的操作基本一致，本次將一并說完。
登錄界面結構
需要準備哪些東西
矩形、文本、輸入框、賬號/密碼/驗證碼icon。
學完將學會什么
本次文章的重點是：輸入手機號后、點擊獲取驗證碼、驗證碼自動填充的操作。
除此之外，還可以了解注冊賬號、重置密碼的基礎布局以及各種元素，用戶操作時需要有哪些反饋，怎么做體驗較好。
前面有人說內容有些偏基礎沒有做條件判斷，所有本次在各類操作中將加入一些交互的判斷。其中toast提示消息提示模塊，只列舉較為基礎的，有不完善的地方需要自行補充，以下學完相信你會做出更好的交互原型。
下面開始剖解制作步驟。
制作方式
步驟一：畫出所有界面、Toast提示
前面已經講解怎么畫原型，現在只要從原來的基礎上，把注冊賬號、重置密碼的界面畫出來即可。
從上面可以看出，注冊賬號（1、2）和重置密碼（3、4）的界面除了標題，其他基本一致了。里面的輸入框、樣式、以上一篇的照舊，若沒看過的可以先去看“登錄”篇。
把所有toast提示，均放入一個專門收集toast的動態面板里面，命名為toast提示。設置多個面板狀態，默認隱藏，備用。
步驟二：設置交互樣式
此處也不過多講解，還是引用“登錄”篇的做法，做好的同學們甚至可以直接復制過來使用。
步驟三：場景設置
到了本篇文章的重點了，本次課程主要講解用戶在輸入手機號后，獲取驗證碼的高保真效果。
為了方便理解，我們先來列一下整個的流程圖：
第一步：畫出注冊的第一個頁面，之前登陸界面原型有做好的話，可以直接拿過來用。界面如下：
第二步：設置好“獲取驗證碼”、“下一步”按鈕的交互樣式，用禁用狀態，然后默認禁用它（點擊元件右鍵可見），如下：
第三步：在輸入手機號的輸入框中，設置第四個用例（紅框中的那個）。設置輸入框的元件文字長度判斷，當輸入超過13位字符時，自動啟用“獲取驗證碼”。
這里需要注意一下，由之前設置的用例因為函數設置的緣故，手機號會展示為“334”的模式，中間先出現兩個空格，所以需要13位字符；若沒有之前的用例，只需設置為11位字符即可（國內手機號均為11位數）。
第四步：
- 做一個動態面板控制大小隨意，需要設置兩個面板狀態用于循環用，隨意命名；
- 點擊“獲取驗證碼”按鈕，設置用例點擊時，禁用This；
- 設置前面做的動態面板用于循環，間隔為1000毫秒；
- 顯示toast提示且設置toast的狀態為“已發送驗證碼”，然后兩秒后隱藏它。
用例講解：
第五步：設置一個文本，輸入為“60”，字體樣式隨意，命名為“倒計時”。隨意選擇一個地方放置（可以學我放在動態面板里面，這樣不怕丟）。
條件一
- 點擊動態面板，設置用例狀態改變時，設置“倒計時”的條件，數值≥1時，設置“倒計時”為“[[Target.text-1]]”；
- 設置文字“獲取驗證碼”為“[[Time]]秒后可重發”，“Time”為“倒計時”的局部變量，可用“T”代替。
用例講解：
條件二
- 點擊動態面板，設置用例狀態改變時，設置“倒計時”的條件，數值＜1時，設置循環動態面板為“停止循環”；
- 設置“倒計時”為“60”，且文字“獲取驗證碼”的按鈕為“重發驗證碼”；
- 啟用“獲取驗證碼”按鈕。
用例講解：
條件三
- 點擊動態面板，設置用例狀態改變時，設置“倒計時”的條件，數值=5時，為驗證碼輸入框填充隨機驗證碼（函數和使用方法在下）；
- 啟用“下一步”按鈕。
使用函數：[[Math.floor(Math.random()*10)]]
用例講解：
第六步：
- 設置“下一步”按鈕的條件判斷，為：“驗證碼錯誤”、“驗證碼正確”，toast提示依舊放在toast動態面板以內，操作跟上面操作一致：顯示——選擇狀態——2秒后隱藏；
- 驗證碼錯誤時，toast提示。驗證碼正確時，跳轉至“設置密碼”頁面。
提示：條件判斷只做場景展示，真實場景不止以上兩種。
第七步：設置注冊第二個頁面，該頁面只需設置登錄密碼。
該頁面有兩個做法：一是只做一個密碼輸入框，默認密碼為顯示狀態，右側“眼睛”按鈕可點擊顯示隱藏；二是做兩個密碼輸入框，一個叫輸入密碼，另一個叫確定密碼。（本文為簡單講解將選擇第一種，你們可以自由選擇做法）。
設置“注冊”按鈕的條件判斷為：“密碼需要有6-12位字符”、“注冊成功”，toast提示依舊放在toast動態面板以內，操作跟上面操作一致：顯示——選擇狀態——2秒后隱藏。
密碼少于6-12位字符時，toast提示“密碼需要有6-12位字符”?！白猿晒Α睍r，toast提示“注冊成功”，然后跳轉至“登錄”頁面。
以上就是注冊的制作步驟的全部解析，重置密碼的步驟與注冊完全一致，只需要把“注冊”改為“重置密碼”即可。
接下來，就是頁面跳轉的做法了。
步驟四：進階
做完以上步驟（注冊、重置密碼的頁面）的同學，可以開始一下操作了，我們需要把所有頁面都合起來，形成一個包含登錄、注冊、重置密碼的高保真demo。
我們在demo里面，直接把之前做好的登錄全選后，右鍵轉為動態面板，命名為demo。然后新建幾個面板狀態，把注冊第一、二步，重置密碼第一、二步都放入這個動態面板里面。
然后在各個返回按鈕（即左上角的按鈕）或“下一步”（有兩個，需要注意跳轉頁面）、“注冊”、“重置密碼”的按鈕都需要設置跳轉。
講解也就到此結束，以上就是這么登錄高保真下篇的全部了。有些沒細講、沒講全的?？梢运较抡椅覝贤?。
#相關閱讀#
#專欄作家#
Donny，微信公眾號：UE_diary，人人都是產品經理專欄作家。工作兩年多的產品交互設計師，不定分享一些產品交互細節。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
案例預覽鏈接：https://mxamrw.axshare.com