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

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

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

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

一、立項背景

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

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

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

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

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

二、需求分析

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

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

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

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

三、功能點梳理

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

賬戶體系配套：關(guān)鍵點引導(dǎo)綁定手機、關(guān)鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。

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

四、流程圖（登錄注冊）

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

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

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

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

1.主界面

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

2.驗證碼登錄/注冊

（1）設(shè)計解析

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

其實基于驗證碼到達率和安全性，我考慮過換移動認(rèn)證，就是手機號碼一鍵登錄，無需密碼跟驗證碼?？上嶋H接洽的時候行不通，而放棄了，文本會介紹下這個事情。

（2）設(shè)計點

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

3.密碼登錄

（1）設(shè)計解析

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

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

密碼的輸入，其實正如設(shè)置密碼，應(yīng)該做格式限制。但是因為第一版沒限制，不清楚用戶設(shè)置了什么，所以此處不能輕易填坑。

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

（2）流程

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

正常流程是：輸入手機號->輸入密碼->點擊登錄->登錄成功。

異常流程是：

• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上一級驗證碼登錄/注冊。
• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->賬號或密碼不對->重新輸入or忘記密碼or驗證碼登錄。

4.忘記密碼

（1）設(shè)計解析

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

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

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

（2）設(shè)計點：

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

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

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

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

5.新用戶注冊

（1）設(shè)計解析

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

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

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

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

理想情況：

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

現(xiàn)實情況：

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

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

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

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

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

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