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

一、立項背景

我們的産品第一版賬戶體(tǐ)系由于曆史原因，做(zuò)的比較生(shēng)硬。

初期主攻社交，希望可(kě)以沉澱用戶信息，手機賬号會(huì)是第一優先選擇，當時(shí)的方案是手機号注冊+賬号密碼登錄/第三登錄+立刻綁定手機賬号。

如你(nǐ)日常體(tǐ)驗那(nà)樣，第三方登錄+立刻綁定手機的方式，直接抵消了第三方登錄的便利，比直接手機号注冊更麻煩。而且，設計(jì)上(shàng)，手機号注冊需要設置兩次密碼，密碼需要一緻；設置之後，還(hái)得(de)進入登錄界面，再次填寫賬号密碼，正确匹配才可(kě)以進入APP。

總的來(lái)說，用戶進入APP的路徑相當長，步驟多(duō)，用戶體(tǐ)驗低(dī)分。

近況是，産品方向探索，将重點落在商城上(shàng)。完成交易的流程本身就多(duō)步驟，再疊加原來(lái)的登錄注冊，路徑過深，對拉新損耗大(dà)，急需改進。

二、需求分析

從業務發展趨勢來(lái)看，微信會(huì)是重要的用戶來(lái)源，後續會(huì)布局更多(duō)的微信運營活動，和(hé)商城小(xiǎo)程序，設計(jì)引流到APP，需重點突出微信登錄。

而商城交易需要保證安全性，同時(shí)兼容老用戶，手機注冊密碼登錄必不可(kě)少(shǎo)。考慮到用戶文化水(shuǐ)平，和(hé)互聯網産品使用習慣，需要在常規的基礎上(shàng)做(zuò)簡化。

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

新用戶剛進來(lái)，可(kě)以先浏覽熟悉産品內(nèi)容，在需要身份信息時(shí)，再進行(xíng)引導登錄。

三、功能點梳理(lǐ)

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

賬戶體(tǐ)系配套：關鍵點引導綁定手機、關鍵點強制(zhì)綁定手機、驗證碼驗證賬号、賬号相互綁定。

細節功能點見下方的賬戶體(tǐ)系功能點梳理(lǐ)圖。

四、流程圖（登錄注冊）

未登錄用戶，到達需要獲取用戶身份信息的界面（為(wèi)了平衡效率和(hé)體(tǐ)驗，一般是除一級界面以外的），則觸發注冊登錄流程。用戶完成注冊登錄之後，才可(kě)使用和(hé)操作(zuò)絕大(dà)部分的功能。

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

五、關鍵頁面交互設計(jì)

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

1.主界面

布局：主界面集合三種登錄方式，将微信登錄作(zuò)為(wèi)主方式。

前提：成功登錄的前提條件是必須先勾選同意用戶協議，否則報錯。

授權：第三方的登錄，點擊微信orQQ，授權成功後，即可(kě)登錄進入APP，自動獲取用戶的昵稱性别頭像信息填充社交頁。

2.驗證碼登錄/注冊

（1）設計(jì)解析

手機賬号登錄，考慮簡單又快速進行(xíng)，突出驗證碼快速登錄/注冊，輔以密碼注冊。

密碼注冊的弊端是很(hěn)容易忘記密碼，忘記之後，找回密碼流程也繁瑣。

驗證碼登錄，雖然對頻繁換手機的用戶是個(gè)噩耗，短(duǎn)信也有(yǒu)達到率的問題，但(dàn)考慮到效率跟成本，特别在拉新環節，還(hái)是作(zuò)為(wèi)主方式。

其實基于驗證碼到達率和(hé)安全性，我考慮過換移動認證，就是手機号碼一鍵登錄，無需密碼跟驗證碼。可(kě)惜實際接洽的時(shí)候行(xíng)不通(tōng)，而放棄了，文本會(huì)介紹下這個(gè)事情。

（2）設計(jì)點

驗證碼登錄：登錄注冊界面為(wèi)驗證碼登錄，附以密碼登錄。

按鈕：登錄注冊的按鈕合二為(wèi)一。也就是說，用戶不需要選擇是登錄還(hái)是注冊，将判斷交給了後台。隻要用戶的手機号碼還(hái)在，直接憑驗證碼進入即可(kě)。比起選擇密碼登錄之後忘記密碼，或者是幹脆就不記得(de)自己是否注冊過，在錯誤的界面輸入信息之後來(lái)回切換，二合一的方式更加友(yǒu)好，也是本次設計(jì)的一個(gè)亮點。

手機号碼：采用更加清晰的的3-3- 4 數(shù)值格式，輸入框末尾配清除按鈕，錯誤輸入後可(kě)一鍵清除。手機号碼輸入框也有(yǒu)記憶功能，可(kě)獲取前一次登錄的手機賬号，可(kě)以獲取同一次登錄注冊已填過的賬号信息。

驗證碼：手機号碼位數(shù)輸入正确類型和(hé)位數(shù)之後，才激活驗證碼功能。否則點擊會(huì)報錯。之後，驗證碼的激活以變色表現，這是個(gè)視(shì)覺指示。輸入完成第一行(xíng)，人(rén)眼會(huì)自然而言的落在第二行(xíng)的開(kāi)頭，如無例外，用戶需要尋找一番，才會(huì)覺知過來(lái)，去點擊獲取驗證碼。

加載指示：數(shù)據傳輸到服務端，判斷對錯，再返回結果。這個(gè)流程費些(xiē)時(shí)間(jiān)，用加載小(xiǎo)菊花(huā)，表示後台正在處理(lǐ)，舒緩下等待的焦急。 

3.密碼登錄

（1）設計(jì)解析

密碼登錄考慮到向後兼容，老用戶的賬号以密碼登錄；也是适應本期的新用戶注冊。同時(shí)标配忘記密碼，也可(kě)切換新用戶注冊，或驗證碼登錄，這些(xiē)元素的布置考慮，是基于流程的。

密碼的輸入，其實正如設置密碼，應該做(zuò)格式限制(zhì)。但(dàn)是因為(wèi)第一版沒限制(zhì)，不清楚用戶設置了什麽，所以此處不能輕易填坑。

數(shù)據輸入都該考慮下限制(zhì)的，為(wèi)什麽？在給産品經理(lǐ)講技(jì)術(shù)這書(shū)裏，要是你(nǐ)看到黑(hēi)科技(jì)SQL注入攻擊也會(huì)很(hěn)印象深刻的……

（2）流程

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

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

異常流程是：

輸入手機号->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上(shàng)一級驗證碼登錄/注冊。

輸入手機号->輸入密碼->點擊登錄->提醒“未注冊”->賬号或密碼不對->重新輸入or忘記密碼or驗證碼登錄。

4.忘記密碼

（1）設計(jì)解析

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

異常流程：忘記密碼此處還(hái)有(yǒu)個(gè)異常流程，是該賬号不存在。有(yǒu)童鞋會(huì)說，正是密碼輸錯才會(huì)到來(lái)這界面，這麽還(hái)會(huì)有(yǒu)賬号不存在的情況？對，情理(lǐ)上(shàng)其實不大(dà)可(kě)能發生(shēng)，但(dàn)是程序邏輯上(shàng)有(yǒu)這個(gè)可(kě)能，但(dàn)是又無法通(tōng)過前面的步驟過濾掉，是要補充下的。

此處判斷賬号不存在的提醒，是點擊獲取驗證碼之後，亮點之一。這裏是考慮辛辛苦苦獲取驗證碼，填寫完畢之後才來(lái)告訴用戶賬号不存在，有(yǒu)些(xiē)不厚道(dào)的……

（2）設計(jì)點：

驗證賬号：常規的做(zuò)法，先驗證碼驗證手機号，再下一步設置密碼。

有(yǒu)些(xiē)APP會(huì)将驗證賬号跟設置密碼放在同一個(gè)頁面，其實拆開(kāi)會(huì)更清晰。而且，驗證手機号碼步驟複用率是很(hěn)高(gāo)的，比如，可(kě)以複用到推廣員更改綁定銀行(xíng)卡時(shí)，作(zuò)為(wèi)賬号驗證。

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

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

5.新用戶注冊

（1）設計(jì)解析新用戶注冊界面近乎跟忘記密碼是一樣的流程，區(qū)别在點擊獲取驗證碼，此處的異常流程是該賬号已存在。此處設置優化的流程，判斷是已有(yǒu)賬号之後，會(huì)直接跳(tiào)轉到驗證碼登錄/注冊界面處，直接獲取已填寫的手機号碼，驗證就行(xíng)，對新用戶盡量友(yǒu)好。

經過前面的界面篩選，此處的賬号不存在的發生(shēng)概率很(hěn)少(shǎo)，但(dàn)是作(zuò)為(wèi)關鍵流程而言，完整性是必要的。

移動認證

文內(nèi)留個(gè)懸念要談談移動認證，移動認證是什麽？

最直接的體(tǐ)驗是，無需輸入任何數(shù)據，直接點擊授權就登錄。是不是很(hěn)黑(hēi)科技(jì)？

！但(dàn)是為(wèi)什麽最終放棄了呢，請(qǐng)聽(tīng)細講。

理(lǐ)想情況：

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

現實情況：

但(dàn)是呢，很(hěn)快就被開(kāi)發文檔打臉了，簡言之，就是層層篩選之下，能一鍵登錄的用戶遠沒有(yǒu)想象的多(duō)。

移動認證的原理(lǐ)是基于移動網絡通(tōng)信的。首先基于sim卡識别本機号碼，在移動網絡開(kāi)啓的前提下傳輸信息以授權通(tōng)過，此時(shí)可(kě)順利登陸；但(dàn)是如果沒開(kāi)移動網絡，就沒轍了；如果WiFi跟移動網絡同開(kāi)，以WiFi為(wèi)主，那(nà)将強制(zhì)占道(dào)先驗證再釋放WiFi。如果移動網絡通(tōng)信不成，那(nà)就通(tōng)過短(duǎn)信收發來(lái)完成數(shù)據傳輸。

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

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