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

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

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

矩形、文本、輸入框、賬號(hào)/密碼/驗(yàn)證碼icon。

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

本次文章的重點(diǎn)是：輸入手機(jī)號(hào)后、點(diǎn)擊獲取驗(yàn)證碼、驗(yàn)證碼自動(dòng)填充的操作。

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

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

下面開(kāi)始剖解制作步驟。

制作方式

步驟一：畫(huà)出所有界面、Toast提示

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

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

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

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

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

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

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

為了方便理解，我們先來(lái)列一下整個(gè)的流程圖：

第一步：畫(huà)出注冊(cè)的第一個(gè)頁(yè)面，之前登陸界面原型有做好的話(huà)，可以直接拿過(guò)來(lái)用。界面如下：

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

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

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

第四步：

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

用例講解：

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

條件一

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

用例講解：

條件二

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

用例講解：

條件三

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

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

用例講解：

第六步：

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

提示：條件判斷只做場(chǎng)景展示，真實(shí)場(chǎng)景不止以上兩種。

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

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

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

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

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

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

步驟四：進(jìn)階

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

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

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

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

#相關(guān)閱讀#

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

#專(zhuān)欄作家#

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

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

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