當(dāng)我們遇到需要記錄用戶信息及行為歷史的產(chǎn)品時(shí)，肯定少不了注冊(cè)登錄這個(gè)流程，下面我們就一起來看下這樣的原型該怎么去制作吧。

第一步 登錄頁面制作

首先我們需要一個(gè)動(dòng)態(tài)面板，設(shè)置三種狀態(tài)。狀態(tài)1我們作為登錄界面，在其中拖拽兩個(gè)文本框，分別命名為：用戶名1，密碼1，對(duì)第二個(gè)文本框類型設(shè)置為密碼；接著拖拽三個(gè)矩形框，一個(gè)填充為灰色，輸入文字：登錄，作為登錄按鈕，一個(gè)輸入文字：沒有賬號(hào)，立即注冊(cè)，作為注冊(cè)界面觸發(fā)按鈕，一個(gè)輸入文字：用戶名或密碼不正確，請(qǐng)重新輸入，命名為登錄校驗(yàn)，字體可設(shè)置為紅色；最后，拖入一個(gè)中繼器（相當(dāng)于一個(gè)臨時(shí)數(shù)據(jù)庫）作為記錄注冊(cè)信息之用。如圖：

下面我們要進(jìn)入中繼器，進(jìn)行設(shè)置，中繼器點(diǎn)進(jìn)去之后會(huì)默認(rèn)有一個(gè)矩形，有一列Column 0，我們需要做的是先將矩形命名為：用戶名，然后清空這一列默認(rèn)的數(shù)據(jù)1，2，3，再添加一個(gè)矩形，命名為：密碼，接著在中繼器中添加一列Column 1,并且設(shè)置將兩列數(shù)據(jù)顯示在分別顯示在兩個(gè)矩形框中，如圖：

接下來我們回到動(dòng)態(tài)面板狀態(tài)頁面，進(jìn)行跳轉(zhuǎn)到注冊(cè)頁面設(shè)置，點(diǎn)擊那個(gè)“沒有賬號(hào)立即注冊(cè)”矩形框，設(shè)置鼠標(biāo)單擊時(shí)用例:設(shè)置動(dòng)態(tài)面板狀態(tài)為state2，跳轉(zhuǎn)到注冊(cè)界面。

第二步 注冊(cè)頁面制作

我們把動(dòng)態(tài)面板第二個(gè)狀態(tài)state2作為注冊(cè)界面，在這個(gè)頁面我們需要準(zhǔn)備的部件有6個(gè)矩形框，3個(gè)文本框：

第一個(gè)矩形框輸入提示文字“用戶名”，第二個(gè)矩形框輸入文字“密碼”，第三個(gè)矩形框輸入文字“密碼確認(rèn)”，第四個(gè)矩形框輸入文字“用戶名或密碼不能為空”并且命名為空值校驗(yàn)，文字設(shè)為紅色，第五個(gè)矩形框輸入文字“兩次密碼輸入不一致”并且命名為密碼校驗(yàn)，文字設(shè)為紅色，第六個(gè)矩形框輸入文字“注冊(cè)”，第一個(gè)文本框命名為“用戶名2”放在第一個(gè)矩形框下面，第二個(gè)文本框命名為“密碼2”類型設(shè)置為密碼放在第二個(gè)矩形框下面，第三個(gè)文本框命名為“密碼3”類型也設(shè)置為密碼放在第三個(gè)矩形框下面，為了稍顯好看，將前面五個(gè)矩形框的邊框取消掉，結(jié)果如圖所示

下面就是對(duì)我們的注冊(cè)信息進(jìn)行判斷了，判斷的邏輯有三個(gè)：第一個(gè)，當(dāng)用戶名和密碼都不為空，且兩次輸入的密碼相等的時(shí)候，則是注冊(cè)成功，自動(dòng)跳轉(zhuǎn)到登錄頁面，校驗(yàn)框都隱藏，這里有個(gè)關(guān)鍵事件，就是該條件下，要設(shè)置往中繼器添加行，將用戶框中的文字添加進(jìn)列Column 0中，將密碼框的文字添加進(jìn)Column 1中；第二個(gè)，當(dāng)用戶名密碼都不為空，兩次密碼校驗(yàn)不相等的時(shí)候，則顯示密碼校驗(yàn)框，隱藏空值判斷框；第三個(gè)，當(dāng)用戶名密碼有一個(gè)為空值，則顯示空值判斷框，隱藏密碼校驗(yàn)框。最后將兩個(gè)校驗(yàn)提示框狀態(tài)設(shè)置為隱藏，具體用例設(shè)置見下圖：

第三步 ?登錄成功界面制作

將動(dòng)態(tài)面板第三個(gè)狀態(tài)作為成功登錄后界面，拖拽兩個(gè)矩形框，一個(gè)輸入文字登錄成功，一個(gè)輸入文字“切換賬號(hào)，重新登錄”并設(shè)置用例：鼠標(biāo)單擊，設(shè)置動(dòng)態(tài)面板狀態(tài)為state1 跳轉(zhuǎn)回登錄界面，進(jìn)行重新登錄。

第四步 進(jìn)行登錄界面設(shè)置

這是最后一步，我們回到最開始的登錄界面，對(duì)登陸按鈕設(shè)置用例，當(dāng)用戶名和密碼是等于中繼器中的內(nèi)容時(shí)，判斷登錄成功，跳轉(zhuǎn)至state3狀態(tài)，否則顯示登錄校驗(yàn)；為了視覺效果，可以將矩形邊框及中繼器狀態(tài)設(shè)置為隱藏，給跳轉(zhuǎn)按鈕設(shè)置字體顏色以及下劃線互動(dòng)。

好了 經(jīng)過上面的一系列步驟這個(gè)原型我們就制作成功了，接下來就馬上去看一看吧?。?！

PS：該原型作多用戶注冊(cè)登錄只用，如果只是注冊(cè)一個(gè)用戶然后登陸的話是不需要用中繼器來保存數(shù)據(jù)的，至于怎么實(shí)現(xiàn)，小伙伴們有興趣自己動(dòng)手試試吧。

預(yù)覽地址：http://o65983.axshare.com

源文件下載：http://pan.baidu.com/s/1hrPOPAO

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