實(shí)例分析拆解：如何設(shè)計(jì)登錄注冊？

人人都是產(chǎn)品經(jīng)理 2018-08-09 18:42:15

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

最近對我們的APP的賬戶體系進(jìn)行了改版，研究了各類產(chǎn)品的設(shè)計(jì)。賬戶體系雖然幾乎是通用標(biāo)配功能，但是各APP的都有差別，都是針對當(dāng)前的產(chǎn)品形態(tài)、發(fā)展階段和用戶量級(jí)做出了符合自己的設(shè)計(jì)。賬戶體系的關(guān)鍵點(diǎn)在登錄注冊流程上。登錄注冊流程看似簡單，實(shí)際考量設(shè)計(jì)功力。網(wǎng)上關(guān)于登錄注冊的綜述有很多了，但是從零到一整合分析的很少，以下，將以實(shí)際的產(chǎn)品為例，精細(xì)分析如何設(shè)計(jì)賬戶體系。

一、立項(xiàng)背景

我們的產(chǎn)品第一版賬戶體系由于歷史原因，做的比較生硬。

初期主攻社交，希望可以沉淀用戶信息，手機(jī)賬號(hào)會(huì)是第一優(yōu)先選擇，當(dāng)時(shí)的方案是手機(jī)號(hào)注冊+賬號(hào)密碼登錄/第三登錄+立刻綁定手機(jī)賬號(hào)。

如你日常體驗(yàn)?zāi)菢樱谌降卿?立刻綁定手機(jī)的方式，直接抵消了第三方登錄的便利，比直接手機(jī)號(hào)注冊更麻煩。而且，設(shè)計(jì)上，手機(jī)號(hào)注冊需要設(shè)置兩次密碼，密碼需要一致；設(shè)置之后，還得進(jìn)入登錄界面，再次填寫賬號(hào)密碼，正確匹配才可以進(jìn)入APP。

總的來說，用戶進(jìn)入APP的路徑相當(dāng)長，步驟多，用戶體驗(yàn)低分。

近況是，產(chǎn)品方向探索，將重點(diǎn)落在商城上。完成交易的流程本身就多步驟，再疊加原來的登錄注冊，路徑過深，對拉新?lián)p耗大，急需改進(jìn)。

二、需求分析

從業(yè)務(wù)發(fā)展趨勢來看，微信會(huì)是重要的用戶來源，后續(xù)會(huì)布局更多的微信運(yùn)營活動(dòng)，和商城小程序，設(shè)計(jì)引流到APP，需重點(diǎn)突出微信登錄。

而商城交易需要保證安全性，同時(shí)兼容老用戶，手機(jī)注冊密碼登錄必不可少。考慮到用戶文化水平，和互聯(lián)網(wǎng)產(chǎn)品使用習(xí)慣，需要在常規(guī)的基礎(chǔ)上做簡化。

第三方登錄需要在關(guān)鍵點(diǎn)綁定，商城推廣員提現(xiàn)時(shí)變更銀行卡，需加以驗(yàn)證身份。

新用戶剛進(jìn)來，可以先瀏覽熟悉產(chǎn)品內(nèi)容，在需要身份信息時(shí)，再進(jìn)行引導(dǎo)登錄。

三、功能點(diǎn)梳理

登錄注冊流程：微信/QQ第三方登錄、驗(yàn)證碼登錄/注冊、密碼登錄、找回密碼。

賬戶體系配套：關(guān)鍵點(diǎn)引導(dǎo)綁定手機(jī)、關(guān)鍵點(diǎn)強(qiáng)制綁定手機(jī)、驗(yàn)證碼驗(yàn)證賬號(hào)、賬號(hào)相互綁定。

細(xì)節(jié)功能點(diǎn)見下方的賬戶體系功能點(diǎn)梳理圖。

四、流程圖（登錄注冊）

未登錄用戶，到達(dá)需要獲取用戶身份信息的界面（為了平衡效率和體驗(yàn)，一般是除一級(jí)界面以外的），則觸發(fā)注冊登錄流程。用戶完成注冊登錄之后，才可使用和操作絕大部分的功能。

本流程圖需要配合頁面交互原型理解。

五、關(guān)鍵頁面交互設(shè)計(jì)

登錄注冊體系將包含五個(gè)部分，主界面、驗(yàn)證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊，在實(shí)際流程操作中會(huì)根據(jù)用戶的選擇，和系統(tǒng)的判斷進(jìn)行切換。賬戶體系的配套將會(huì)略過，以下是登錄注冊的頁面交互設(shè)計(jì)、設(shè)計(jì)考量和功能點(diǎn)介紹。

1.主界面

• 布局：主界面集合三種登錄方式，將微信登錄作為主方式。
• 前提：成功登錄的前提條件是必須先勾選同意用戶協(xié)議，否則報(bào)錯(cuò)。
• 授權(quán)：第三方的登錄，點(diǎn)擊微信orQQ，授權(quán)成功后，即可登錄進(jìn)入APP，自動(dòng)獲取用戶的昵稱性別頭像信息填充社交頁。

2.驗(yàn)證碼登錄/注冊

（1）設(shè)計(jì)解析

• 手機(jī)賬號(hào)登錄，考慮簡單又快速進(jìn)行，突出驗(yàn)證碼快速登錄/注冊，輔以密碼注冊。
• 密碼注冊的弊端是很容易忘記密碼，忘記之后，找回密碼流程也繁瑣。
• 驗(yàn)證碼登錄，雖然對頻繁換手機(jī)的用戶是個(gè)噩耗，短信也有達(dá)到率的問題，但考慮到效率跟成本，特別在拉新環(huán)節(jié)，還是作為主方式。

其實(shí)基于驗(yàn)證碼到達(dá)率和安全性，我考慮過換移動(dòng)認(rèn)證，就是手機(jī)號(hào)碼一鍵登錄，無需密碼跟驗(yàn)證碼。可惜實(shí)際接洽的時(shí)候行不通，而放棄了，文本會(huì)介紹下這個(gè)事情。

（2）設(shè)計(jì)點(diǎn)

• 驗(yàn)證碼登錄：登錄注冊界面為驗(yàn)證碼登錄，附以密碼登錄。
• 按鈕：登錄注冊的按鈕合二為一。也就是說，用戶不需要選擇是登錄還是注冊，將判斷交給了后臺(tái)。只要用戶的手機(jī)號(hào)碼還在，直接憑驗(yàn)證碼進(jìn)入即可。比起選擇密碼登錄之后忘記密碼，或者是干脆就不記得自己是否注冊過，在錯(cuò)誤的界面輸入信息之后來回切換，二合一的方式更加友好，也是本次設(shè)計(jì)的一個(gè)亮點(diǎn)。
• 手機(jī)號(hào)碼：采用更加清晰的的3-3-4數(shù)值格式，輸入框末尾配清除按鈕，錯(cuò)誤輸入后可一鍵清除。手機(jī)號(hào)碼輸入框也有記憶功能，可獲取前一次登錄的手機(jī)賬號(hào)，可以獲取同一次登錄注冊已填過的賬號(hào)信息。
• 驗(yàn)證碼：手機(jī)號(hào)碼位數(shù)輸入正確類型和位數(shù)之后，才激活驗(yàn)證碼功能。否則點(diǎn)擊會(huì)報(bào)錯(cuò)。之后，驗(yàn)證碼的激活以變色表現(xiàn)，這是個(gè)視覺指示。輸入完成第一行，人眼會(huì)自然而言的落在第二行的開頭，如無例外，用戶需要尋找一番，才會(huì)覺知過來，去點(diǎn)擊獲取驗(yàn)證碼。
• 加載指示：數(shù)據(jù)傳輸?shù)椒?wù)端，判斷對錯(cuò)，再返回結(jié)果。這個(gè)流程費(fèi)些時(shí)間，用加載小菊花，表示后臺(tái)正在處理，舒緩下等待的焦急。

3.密碼登錄

（1）設(shè)計(jì)解析

密碼登錄考慮到向后兼容，老用戶的賬號(hào)以密碼登錄；也是適應(yīng)本期的新用戶注冊。

同時(shí)標(biāo)配忘記密碼，也可切換新用戶注冊，或驗(yàn)證碼登錄，這些元素的布置考慮，是基于流程的。

密碼的輸入，其實(shí)正如設(shè)置密碼，應(yīng)該做格式限制。但是因?yàn)榈谝话鏇]限制，不清楚用戶設(shè)置了什么，所以此處不能輕易填坑。

數(shù)據(jù)輸入都該考慮下限制的，為什么？在給產(chǎn)品經(jīng)理講技術(shù)這書里，要是你看到黑科技SQL注入攻擊也會(huì)很印象深刻的……

（2）流程

跟驗(yàn)證碼的簡單路徑不一樣，密碼登錄因重在流程上邏輯自洽，更需配流程圖查看才好理解。

正常流程是：輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->登錄成功。

異常流程是：

• 輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->提醒“未注冊”->點(diǎn)擊新用戶注冊or返回上一級(jí)驗(yàn)證碼登錄/注冊。
• 輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->提醒“未注冊”->賬號(hào)或密碼不對->重新輸入or忘記密碼or驗(yàn)證碼登錄。

4.忘記密碼

（1）設(shè)計(jì)解析

步驟：忘記密碼此處分兩步，一步驗(yàn)證，一步設(shè)置。設(shè)置完之后，直接登錄進(jìn)入APP，無需再重復(fù)密碼登錄的步驟。（記不住密碼更痛苦的事情是，忘記密碼剛找回來，在下一步重新登錄的時(shí)候又忘記了）。

異常流程：忘記密碼此處還有個(gè)異常流程，是該賬號(hào)不存在。有童鞋會(huì)說，正是密碼輸錯(cuò)才會(huì)到來這界面，這么還會(huì)有賬號(hào)不存在的情況？對，情理上其實(shí)不大可能發(fā)生，但是程序邏輯上有這個(gè)可能，但是又無法通過前面的步驟過濾掉，是要補(bǔ)充下的。

此處判斷賬號(hào)不存在的提醒，是點(diǎn)擊獲取驗(yàn)證碼之后，亮點(diǎn)之一。這里是考慮辛辛苦苦獲取驗(yàn)證碼，填寫完畢之后才來告訴用戶賬號(hào)不存在，有些不厚道的……

（2）設(shè)計(jì)點(diǎn)：

驗(yàn)證賬號(hào)：常規(guī)的做法，先驗(yàn)證碼驗(yàn)證手機(jī)號(hào)，再下一步設(shè)置密碼。

有些APP會(huì)將驗(yàn)證賬號(hào)跟設(shè)置密碼放在同一個(gè)頁面，其實(shí)拆開會(huì)更清晰。而且，驗(yàn)證手機(jī)號(hào)碼步驟復(fù)用率是很高的，比如，可以復(fù)用到推廣員更改綁定銀行卡時(shí)，作為賬號(hào)驗(yàn)證。

設(shè)置密碼：密碼設(shè)置要限定格式，之后僅需輸入一次就可以直接登錄進(jìn)入了。

重復(fù)兩次數(shù)據(jù)，再次校驗(yàn)肯定更穩(wěn)妥，但是登錄成本提高了，以我們用戶的耐心，我們的產(chǎn)品就沒必要承擔(dān)這個(gè)教育成本了。如果說擔(dān)心手誤輸錯(cuò)了的，可以用驗(yàn)證碼登錄的，再不濟(jì)可以用找回密碼的。但是大多數(shù)用戶其實(shí)只考慮本次能快點(diǎn)進(jìn)入就好。

5.新用戶注冊

（1）設(shè)計(jì)解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程，區(qū)別在點(diǎn)擊獲取驗(yàn)證碼，此處的異常流程是該賬號(hào)已存在。此處設(shè)置優(yōu)化的流程，判斷是已有賬號(hào)之后，會(huì)直接跳轉(zhuǎn)到驗(yàn)證碼登錄/注冊界面處，直接獲取已填寫的手機(jī)號(hào)碼，驗(yàn)證就行，對新用戶盡量友好。

經(jīng)過前面的界面篩選，此處的賬號(hào)不存在的發(fā)生概率很少，但是作為關(guān)鍵流程而言，完整性是必要的。

（2）移動(dòng)認(rèn)證

文內(nèi)留個(gè)懸念要談?wù)勔苿?dòng)認(rèn)證，移動(dòng)認(rèn)證是什么？最直接的體驗(yàn)是，無需輸入任何數(shù)據(jù)，直接點(diǎn)擊授權(quán)就登錄。是不是很黑科技？！ 但是為什么最終放棄了呢，請聽細(xì)講。

理想情況：

移動(dòng)認(rèn)證是運(yùn)營商移動(dòng)提供的，基于手機(jī)sim卡和移動(dòng)網(wǎng)絡(luò)直接認(rèn)證登錄的技術(shù)，米家、愛回收跟同花順應(yīng)用在了自家APP里。當(dāng)時(shí)上手體驗(yàn)，驚艷，簡直零感登錄；況且移動(dòng)官網(wǎng)也有免費(fèi)的sdk，更是竊喜。以移動(dòng)認(rèn)證為主登錄的原型設(shè)計(jì)完畢，就立刻接洽移動(dòng)認(rèn)證sdk的接入。

現(xiàn)實(shí)情況：

但是呢，很快就被開發(fā)文檔打臉了，簡言之，就是層層篩選之下，能一鍵登錄的用戶遠(yuǎn)沒有想象的多。

移動(dòng)認(rèn)證的原理是基于移動(dòng)網(wǎng)絡(luò)通信的。首先基于sim卡識(shí)別本機(jī)號(hào)碼，在移動(dòng)網(wǎng)絡(luò)開啟的前提下傳輸信息以授權(quán)通過，此時(shí)可順利登陸；但是如果沒開移動(dòng)網(wǎng)絡(luò)，就沒轍了；如果WiFi跟移動(dòng)網(wǎng)絡(luò)同開，以WiFi為主，那將強(qiáng)制占道先驗(yàn)證再釋放WiFi。如果移動(dòng)網(wǎng)絡(luò)通信不成，那就通過短信收發(fā)來完成數(shù)據(jù)傳輸。

所以，這么流氓的做法蘋果肯定是不樂意的；電信不參與；oppo的ROM不支持此流程……層層篩選下來，加上關(guān)閉移動(dòng)網(wǎng)絡(luò)的，能順利使用的其實(shí)不多；而且，除非付費(fèi)，否則移動(dòng)認(rèn)證的logo說明只能用官方的，簡直是給移動(dòng)打廣告….這些阻力遠(yuǎn)高于收益，所以，果斷放棄了，采取了本文講述的方案。

果然，合適的才是最好的。

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

題圖來自 Pexels ，基于 CC0 協(xié)議