繼上次解析登錄部分的高保真設(shè)計，本次將講解《登錄·高保真設(shè)計》下部分，注冊賬號、重置密碼的部分。因注冊賬號和重置密碼的操作基本一致，本次將一并說完。

登錄界面結(jié)構(gòu)

需要準(zhǔn)備哪些東西

矩形、文本、輸入框、賬號/密碼/驗證碼icon。

學(xué)完將學(xué)會什么

本次文章的重點是：輸入手機(jī)號后、點擊獲取驗證碼、驗證碼自動填充的操作。

除此之外，還可以了解注冊賬號、重置密碼的基礎(chǔ)布局以及各種元素，用戶操作時需要有哪些反饋，怎么做體驗較好。

前面有人說內(nèi)容有些偏基礎(chǔ)沒有做條件判斷，所有本次在各類操作中將加入一些交互的判斷。其中toast提示消息提示模塊，只列舉較為基礎(chǔ)的，有不完善的地方需要自行補(bǔ)充，以下學(xué)完相信你會做出更好的交互原型。

下面開始剖解制作步驟。

制作方式

步驟一：畫出所有界面、Toast提示

前面已經(jīng)講解怎么畫原型，現(xiàn)在只要從原來的基礎(chǔ)上，把注冊賬號、重置密碼的界面畫出來即可。

從上面可以看出，注冊賬號（1、2）和重置密碼（3、4）的界面除了標(biāo)題，其他基本一致了。里面的輸入框、樣式、以上一篇的照舊，若沒看過的可以先去看“登錄”篇。

把所有toast提示，均放入一個專門收集toast的動態(tài)面板里面，命名為toast提示。設(shè)置多個面板狀態(tài)，默認(rèn)隱藏，備用。

步驟二：設(shè)置交互樣式

此處也不過多講解，還是引用“登錄”篇的做法，做好的同學(xué)們甚至可以直接復(fù)制過來使用。

步驟三：場景設(shè)置

到了本篇文章的重點了，本次課程主要講解用戶在輸入手機(jī)號后，獲取驗證碼的高保真效果。

為了方便理解，我們先來列一下整個的流程圖：

第一步：畫出注冊的第一個頁面，之前登陸界面原型有做好的話，可以直接拿過來用。界面如下：

第二步：設(shè)置好“獲取驗證碼”、“下一步”按鈕的交互樣式，用禁用狀態(tài)，然后默認(rèn)禁用它（點擊元件右鍵可見），如下：

第三步：在輸入手機(jī)號的輸入框中，設(shè)置第四個用例（紅框中的那個）。設(shè)置輸入框的元件文字長度判斷，當(dāng)輸入超過13位字符時，自動啟用“獲取驗證碼”。

這里需要注意一下，由之前設(shè)置的用例因為函數(shù)設(shè)置的緣故，手機(jī)號會展示為“334”的模式，中間先出現(xiàn)兩個空格，所以需要13位字符；若沒有之前的用例，只需設(shè)置為11位字符即可（國內(nèi)手機(jī)號均為11位數(shù)）。

第四步：

1. 做一個動態(tài)面板控制大小隨意，需要設(shè)置兩個面板狀態(tài)用于循環(huán)用，隨意命名；
2. 點擊“獲取驗證碼”按鈕，設(shè)置用例點擊時，禁用This；
3. 設(shè)置前面做的動態(tài)面板用于循環(huán)，間隔為1000毫秒；
4. 顯示toast提示且設(shè)置toast的狀態(tài)為“已發(fā)送驗證碼”，然后兩秒后隱藏它。

用例講解：

第五步：設(shè)置一個文本，輸入為“60”，字體樣式隨意，命名為“倒計時”。隨意選擇一個地方放置（可以學(xué)我放在動態(tài)面板里面，這樣不怕丟）。

條件一

• 點擊動態(tài)面板，設(shè)置用例狀態(tài)改變時，設(shè)置“倒計時”的條件，數(shù)值≥1時，設(shè)置“倒計時”為“[[Target.text-1]]”；
• 設(shè)置文字“獲取驗證碼”為“[[Time]]秒后可重發(fā)”，“Time”為“倒計時”的局部變量，可用“T”代替。

用例講解：

條件二

• 點擊動態(tài)面板，設(shè)置用例狀態(tài)改變時，設(shè)置“倒計時”的條件，數(shù)值＜1時，設(shè)置循環(huán)動態(tài)面板為“停止循環(huán)”；
• 設(shè)置“倒計時”為“60”，且文字“獲取驗證碼”的按鈕為“重發(fā)驗證碼”；
• 啟用“獲取驗證碼”按鈕。

用例講解：

條件三

• 點擊動態(tài)面板，設(shè)置用例狀態(tài)改變時，設(shè)置“倒計時”的條件，數(shù)值=5時，為驗證碼輸入框填充隨機(jī)驗證碼（函數(shù)和使用方法在下）；
• 啟用“下一步”按鈕。

使用函數(shù)：[[Math.floor(Math.random()*10)]]

用例講解：

第六步：

• 設(shè)置“下一步”按鈕的條件判斷，為：“驗證碼錯誤”、“驗證碼正確”，toast提示依舊放在toast動態(tài)面板以內(nèi)，操作跟上面操作一致：顯示——選擇狀態(tài)——2秒后隱藏；
• 驗證碼錯誤時，toast提示。驗證碼正確時，跳轉(zhuǎn)至“設(shè)置密碼”頁面。

提示：條件判斷只做場景展示，真實場景不止以上兩種。

第七步：設(shè)置注冊第二個頁面，該頁面只需設(shè)置登錄密碼。

該頁面有兩個做法：一是只做一個密碼輸入框，默認(rèn)密碼為顯示狀態(tài)，右側(cè)“眼睛”按鈕可點擊顯示隱藏；二是做兩個密碼輸入框，一個叫輸入密碼，另一個叫確定密碼。（本文為簡單講解將選擇第一種，你們可以自由選擇做法）。

設(shè)置“注冊”按鈕的條件判斷為：“密碼需要有6-12位字符”、“注冊成功”，toast提示依舊放在toast動態(tài)面板以內(nèi)，操作跟上面操作一致：顯示——選擇狀態(tài)——2秒后隱藏。

密碼少于6-12位字符時，toast提示“密碼需要有6-12位字符”?！白猿晒Α睍r，toast提示“注冊成功”，然后跳轉(zhuǎn)至“登錄”頁面。

以上就是注冊的制作步驟的全部解析，重置密碼的步驟與注冊完全一致，只需要把“注冊”改為“重置密碼”即可。

接下來，就是頁面跳轉(zhuǎn)的做法了。

步驟四：進(jìn)階

做完以上步驟（注冊、重置密碼的頁面）的同學(xué)，可以開始一下操作了，我們需要把所有頁面都合起來，形成一個包含登錄、注冊、重置密碼的高保真demo。

我們在demo里面，直接把之前做好的登錄全選后，右鍵轉(zhuǎn)為動態(tài)面板，命名為demo。然后新建幾個面板狀態(tài)，把注冊第一、二步，重置密碼第一、二步都放入這個動態(tài)面板里面。

然后在各個返回按鈕（即左上角的按鈕）或“下一步”（有兩個，需要注意跳轉(zhuǎn)頁面）、“注冊”、“重置密碼”的按鈕都需要設(shè)置跳轉(zhuǎn)。

講解也就到此結(jié)束，以上就是這么登錄高保真下篇的全部了。有些沒細(xì)講、沒講全的?？梢运较抡椅覝贤ā?/p>

#相關(guān)閱讀#

Axure教程：登錄·高保真設(shè)計

#專欄作家#

Donny，微信公眾號：UE_diary，人人都是產(chǎn)品經(jīng)理專欄作家。工作兩年多的產(chǎn)品交互設(shè)計師，不定分享一些產(chǎn)品交互細(xì)節(jié)。

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

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