注冊(cè)/登錄，用著感覺(jué)很簡(jiǎn)單，但是細(xì)細(xì)分析起來(lái)，都是坑。試著還原兩個(gè)產(chǎn)品的登錄注冊(cè)流程，滿滿的都是套路。

首先推薦兩篇文章：

1. 最完整注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考（by啟辰菌）
2. APP注冊(cè)登錄流程設(shè)計(jì)與淺析（by Thor_datou）

理論性的內(nèi)容基本上面兩篇文章都有涉及到，這里只分析表面的東西，主要根據(jù)下面的思維導(dǎo)圖，結(jié)合真實(shí)app實(shí)現(xiàn)，來(lái)整理各種注冊(cè)登錄流程。

注冊(cè)和登錄統(tǒng)一，例子：餓了么

餓了么有個(gè)小小的體驗(yàn)缺陷，手機(jī)驗(yàn)證碼登錄中，手機(jī)號(hào)輸入框中的格式校驗(yàn)只是簡(jiǎn)單的校驗(yàn)（位數(shù)=11，純數(shù)字，以1開(kāi)頭），當(dāng)輸入了一個(gè)不存在但符合格式的手機(jī)號(hào)（比如10012341234）時(shí)，依然可以點(diǎn)擊“獲取驗(yàn)證碼”調(diào)出圖形驗(yàn)證碼的輸入框，但是輸入完成后永遠(yuǎn)提示“圖形驗(yàn)證碼輸入錯(cuò)誤”。但是這種畢竟是可以忽略的事件，如果需要改進(jìn)的話，需要在點(diǎn)擊“獲取驗(yàn)證碼”時(shí)，再加上一個(gè)后端校驗(yàn)號(hào)碼格式的過(guò)程（下面的『要出發(fā)』就是如此）。此外也可以完善“獲取驗(yàn)證碼”按鈕的可點(diǎn)擊狀態(tài)判斷條件，但是這個(gè)校驗(yàn)過(guò)程一般是前端的，風(fēng)險(xiǎn)太大。關(guān)于手機(jī)號(hào)碼的校驗(yàn)可以參考js正則驗(yàn)證手機(jī)號(hào)碼有效性，不過(guò)這個(gè)有效性規(guī)則有不同的版本，沒(méi)深入分析對(duì)錯(cuò)，這個(gè)是比較寬松的驗(yàn)證規(guī)則。

注冊(cè)和登錄分開(kāi)，例子：要出發(fā)

在還原這兩個(gè)注冊(cè)登錄流程，關(guān)于手機(jī)號(hào)的校驗(yàn)規(guī)則差點(diǎn)就轉(zhuǎn)暈了。登錄注冊(cè)是產(chǎn)品的一個(gè)很重要的流程，因此對(duì)于輸入框數(shù)據(jù)的校驗(yàn)很重要，校驗(yàn)流程盡可能放到后臺(tái)校驗(yàn)，如果校驗(yàn)放到前端，一旦檢驗(yàn)規(guī)則發(fā)生改變，那將影響的是多個(gè)版本。兩個(gè)產(chǎn)品的注冊(cè)流程中都只是把手機(jī)號(hào)的簡(jiǎn)單校驗(yàn)（比如長(zhǎng)度，純數(shù)字，1開(kāi)頭）置于前端上，而把一些具體的判斷置于后臺(tái)校驗(yàn)。

原型下載鏈接：https://pan.baidu.com/s/1bo3axqR（密碼: dgy7）

個(gè)人畫(huà)著練習(xí)，有不對(duì)的地方歡迎指出交流。

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