中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

第一步 登錄頁面制作

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

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

接下來我們回到動態面板狀態頁面，進行跳轉到注冊頁面設置，點擊那個“沒有賬號立即注冊”矩形框，設置鼠標單擊時用例:設置動態面板狀態為state2，跳轉到注冊界面。

第二步 注冊頁面制作

我們把動態面板第二個狀態state2作為注冊界面，在這個頁面我們需要準備的部件有6個矩形框，3個文本框：

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

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

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

將動態面板第三個狀態作為成功登錄后界面，拖拽兩個矩形框，一個輸入文字登錄成功，一個輸入文字“切換賬號，重新登錄”并設置用例：鼠標單擊，設置動態面板狀態為state1 跳轉回登錄界面，進行重新登錄。

第四步 進行登錄界面設置

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

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

PS：該原型作多用戶注冊登錄只用，如果只是注冊一個用戶然后登陸的話是不需要用中繼器來保存數據的，至于怎么實現，小伙伴們有興趣自己動手試試吧。

預覽地址：http://o65983.axshare.com

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

本文由 @會飛的魚 原創發布于人人都是產品經理。未經許可，禁止轉載。