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

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

這些做法的問題就在于：

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

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

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

演示效果如下：

交互功能：

• 用戶真實注冊、登錄，不用提前預設條件
• 對已經注冊的用戶名、郵箱地址、手機號自主排重，即不能重復注冊
• 登錄和找回密碼功能，實時驗證所填信息是否正確

元件準備：

1、頁面中拖入動態面板dz，并設置3個state，分別為dl、zc、zhmm

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

zc：注冊界面，元件分布如下：

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

2、在頁面中（不是在動態面板中）拖入一個中繼器data，中繼器中刪除預設的矩形，無需放入任何元件，只做數據集布置，不放任何數據

添加交互：

首先從注冊界面zc開始添加交互：

本文主要講解中繼器的使用，對于注冊信息諸如用戶名不能包含漢字，字符不能超出12位字符、手機號碼不能少于11位，郵件必須包含@和.com、密碼必須包含大小寫字母、符號、數字不少于兩種組合，等等這些設置，我們在今后的《字符串函數應用場景》中具體講解，在此不做講述，暫不做這些交互。

以username文本框添加交互為例：

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

password文本框交互非常簡單：

最后我們為注冊按鈕zhuce添加交互：

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

先為兩個文本框usernamedl和passworddl添加交互

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

case1的講解：

篩選條件：因為我們的文本框有提示：可以用“用戶名”或“郵件地址”或“手機號”進行登錄，所有我們要手寫篩選條件。要勾選“移除其它篩選”

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

其中&&為布爾運算符，意思為and，與

||為布爾運算符，意思為or 或

所以篩選條件的意思為：“用戶名==中繼器中的用戶名”并且“密碼==中繼器中對應的密碼”；或“手機號碼==中繼器中的手機號碼”并且“密碼==中繼器中對應的密碼”或“郵件地址==中繼器中的郵件地址”并且“密碼==中繼器中對應的密碼”

這樣就實現了多身份登錄。

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

為“welcome的關閉按鈕”添加交互

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

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

先為兩個文本框添加交互：

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

篩選條件：

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

其中&&為布爾運算符，意思為and，與

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

至此，所有交互完畢。

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

題圖來自網絡