在設計登錄註冊模塊時，多用戶登錄和找回密碼的交互一直是設計難點之一；這篇文章給大家講解，如何通過中繼器完成註冊登錄的設計。
原型交互中的註冊、登錄、找回密碼，已經是很成熟的案例了，大部分都是用預設用戶名、密碼，通過條件判斷來實現交互效果；或是通過全局變量以(用戶名：密碼)的形式進行存儲和判斷。
這些做法的問題就在於：
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 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自網絡
閱讀更多 人人都是產品經理 的文章
