在設(shè)計(jì)登錄注冊(cè)模塊時(shí)，多用戶登錄和找回密碼的交互一直是設(shè)計(jì)難點(diǎn)之一；這篇文章給大家講解，如何通過中繼器完成注冊(cè)登錄的設(shè)計(jì)。

原型交互中的注冊(cè)、登錄、找回密碼，已經(jīng)是很成熟的案例了，大部分都是用預(yù)設(shè)用戶名、密碼，通過條件判斷來實(shí)現(xiàn)交互效果；或是通過全局變量以(用戶名：密碼)的形式進(jìn)行存儲(chǔ)和判斷。

這些做法的問題就在于：

1.客戶無法自主體驗(yàn)真實(shí)環(huán)境注冊(cè)、登錄、找回密碼功能，要按照原型制作者的要求輸入設(shè)定好的用戶名和密碼來體驗(yàn)。

2.對(duì)于例如像微信app，用戶名可以是手機(jī)、郵箱、微信號(hào)、qq號(hào)，這樣的多身份登錄，上述辦法就顯得很吃力了。比如下圖這種方式：

實(shí)際利用中繼器，非常方便實(shí)現(xiàn)真實(shí)的注冊(cè)、多身份登錄、找回密碼等功能，不用給客戶設(shè)置條件，完全是真實(shí)條件下的開發(fā)注冊(cè)。

演示效果如下：

交互功能：

• 用戶真實(shí)注冊(cè)、登錄，不用提前預(yù)設(shè)條件
• 對(duì)已經(jīng)注冊(cè)的用戶名、郵箱地址、手機(jī)號(hào)自主排重，即不能重復(fù)注冊(cè)
• 登錄和找回密碼功能，實(shí)時(shí)驗(yàn)證所填信息是否正確

元件準(zhǔn)備：

1、頁面中拖入動(dòng)態(tài)面板dz，并設(shè)置3個(gè)state，分別為dl、zc、zhmm

dl：登錄界面，元件分布如下：

zc：注冊(cè)界面，元件分布如下：

zhmm：找回密碼界面，元件分布如下：

2、在頁面中（不是在動(dòng)態(tài)面板中）拖入一個(gè)中繼器data，中繼器中刪除預(yù)設(shè)的矩形，無需放入任何元件，只做數(shù)據(jù)集布置，不放任何數(shù)據(jù)

添加交互：

首先從注冊(cè)界面zc開始添加交互：

本文主要講解中繼器的使用，對(duì)于注冊(cè)信息諸如用戶名不能包含漢字，字符不能超出12位字符、手機(jī)號(hào)碼不能少于11位，郵件必須包含@和.com、密碼必須包含大小寫字母、符號(hào)、數(shù)字不少于兩種組合，等等這些設(shè)置，我們?cè)诮窈蟮摹蹲址瘮?shù)應(yīng)用場(chǎng)景》中具體講解，在此不做講述，暫不做這些交互。

以u(píng)sername文本框添加交互為例：

以同樣的方法，為phonenumber、e-mai文本框添加交互：

password文本框交互非常簡單：

最后我們?yōu)樽?cè)按鈕zhuce添加交互：

接下來為登錄界面dl開始添加交互：

先為兩個(gè)文本框usernamedl和passworddl添加交互

接下來為登錄按鈕denglu添加交互

case1的講解：

篩選條件：因?yàn)槲覀兊奈谋究蛴刑崾荆嚎梢杂谩坝脩裘被颉班]件地址”或“手機(jī)號(hào)”進(jìn)行登錄，所有我們要手寫篩選條件。要勾選“移除其它篩選”

[[(Item.username==LVAR1&&Item.password==LVAR2)||Item.phonenumber==LVAR1&&Item.password==LVAR2)||(Item.email==LVAR1&&Item.password==LVAR2)]]

其中&&為布爾運(yùn)算符，意思為and，與

||為布爾運(yùn)算符，意思為or 或

所以篩選條件的意思為：“用戶名==中繼器中的用戶名”并且“密碼==中繼器中對(duì)應(yīng)的密碼”；或“手機(jī)號(hào)碼==中繼器中的手機(jī)號(hào)碼”并且“密碼==中繼器中對(duì)應(yīng)的密碼”或“郵件地址==中繼器中的郵件地址”并且“密碼==中繼器中對(duì)應(yīng)的密碼”

這樣就實(shí)現(xiàn)了多身份登錄。

最后為“注冊(cè)新用戶”和“找回密碼”添加交互：

為“welcome的關(guān)閉按鈕”添加交互

——————————登錄頁面的所有交互完畢————————————

最后為找回密碼界面zhmm開始添加交互：

先為兩個(gè)文本框添加交互：

為“提交按鈕”tijiao添加交互：

篩選條件：

[[Item.username==LVAR1&&Item.email==LVAR2]]

其中&&為布爾運(yùn)算符，意思為and，與

所以篩選條件的意思為：“用戶名==中繼器中的用戶名”并且“郵件地址==中繼器中的郵件地址”；

至此，所有交互完畢。

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

題圖來自網(wǎng)絡(luò)