道理太多，先上車，路上慢慢說(shuō)~

登錄分析

一、什么是登錄？

供多人使用的網(wǎng)站或程序應(yīng)用系統(tǒng)為每位用戶配置了一套獨(dú)特的用戶名和密碼，用戶使用這套用戶名和密碼進(jìn)入系統(tǒng)的過(guò)程，以及系統(tǒng)驗(yàn)證進(jìn)入是成功或失敗的過(guò)程，稱為“登錄”。

二、為什么要登錄？

登錄成功后，系統(tǒng)能識(shí)別該用戶的身份，從而保持該用戶的使用習(xí)慣或使用數(shù)據(jù)。

三、什么時(shí)候需要登錄？

當(dāng)前操作/行為與服務(wù)器發(fā)生雙向互動(dòng)時(shí)，就需要登錄。

社交類：瀏覽其他用戶的公開(kāi)資料無(wú)需登錄，向?qū)Ψ桨l(fā)送好友請(qǐng)求則需要登錄。

購(gòu)物類：瀏覽商品信息無(wú)需登錄，加入購(gòu)物車無(wú)需登錄，下單結(jié)算則需要登錄。

四、誰(shuí)在登錄？

1. 正常用戶：新用戶、老用戶
2. 假用戶：微商、競(jìng)品拉用戶
3. 非法用戶：詐騙、駭客、‘短信轟炸機(jī)’、‘呼死你’

五、怎么登錄？有哪些登錄方式？

1. 手機(jī)號(hào)+驗(yàn)證碼
2. 第三方快捷方式
3. 系統(tǒng)賬號(hào)通行證
4. 中移動(dòng)“和通行證”
5. 賬號(hào)+密碼
6. 指紋
7. 聲紋
8. 人臉識(shí)別
9. 虹膜等其他生物識(shí)別技術(shù)

第1~4條，新、老用戶都適用；第5~9條，僅老用戶適用。

Ps：本文中，“新用戶登錄”就是指?jìng)鹘y(tǒng)意義的“注冊(cè)”概念。

六、登錄環(huán)節(jié)的目標(biāo)？

主要分為兩類：①安全問(wèn)題；②轉(zhuǎn)化成功率。

1. 企業(yè)安全問(wèn)題

• 第5條中，【駭客】【短信轟炸機(jī)】【呼死你】對(duì)企業(yè)有安全威脅。
• 第6條中，【賬號(hào)+密碼】對(duì)企業(yè)有重大安全威脅。

解決辦法：

• 使用驗(yàn)證碼登錄，把駭客風(fēng)險(xiǎn)轉(zhuǎn)移給運(yùn)營(yíng)商；
• 對(duì)短信驗(yàn)證碼設(shè)定限制，如：30分鐘內(nèi)最多獲取3條；
• 對(duì)語(yǔ)音驗(yàn)證碼設(shè)定限制，如：每天最多獲取10次；
• 去掉‘登錄密碼’概念。

2. 用戶安全問(wèn)題

• 第6條中，【賬號(hào)+密碼】對(duì)用戶有重大安全威脅。
• 每年都發(fā)生的登錄憑證數(shù)據(jù)庫(kù)泄露事件，讓撞庫(kù)登錄的威脅度越來(lái)越高。

解決辦法：

• 去掉‘登錄密碼’概念。

3. 老用戶便捷

• 移動(dòng)互聯(lián)網(wǎng)時(shí)代，老用戶幾乎是1~2年（換手機(jī)）才用一次登錄。
• 登錄密碼使用頻率極低，極易忘記密碼，而找回密碼又太麻煩。

解決辦法：

• 去掉‘登錄密碼’概念。

4. 新用戶轉(zhuǎn)化率

• 首次登錄，對(duì)用戶來(lái)說(shuō)是被迫行為，容易引起反感。操作和步驟越少，轉(zhuǎn)化率越高。

解決辦法：

• 去掉“注冊(cè)”概念，新/老用戶都使用“登錄”。
• 這樣，設(shè)置密碼、找回密碼、密碼/驗(yàn)證碼切換登錄、密碼格式判斷、明/密文開(kāi)關(guān)、登錄行為異常判斷、登錄憑證數(shù)據(jù)庫(kù)安全防護(hù)……等這一系列的功能和麻煩不攻自破。

七、總結(jié)

賬號(hào)體系，是一款A(yù)pp的根骨，只有一次加點(diǎn)的機(jī)會(huì)，請(qǐng)慎重。

其實(shí)，郵箱時(shí)代，也是可以使用郵件驗(yàn)證碼來(lái)精簡(jiǎn)掉“注冊(cè)”模塊的。

登錄——每頁(yè)只能有一個(gè)焦點(diǎn)

一、新 / 老用戶，登錄入口的默認(rèn)設(shè)定不同

根據(jù)上文分析，得出登錄頁(yè)面的設(shè)計(jì)原則：

1. 每頁(yè)只有一個(gè)視覺(jué)主焦點(diǎn)；
2. 要有不影響主焦點(diǎn)的平行備選方案出口，或異常解決的出口。
3. 登錄頁(yè)本質(zhì)，就是讓用戶登錄成功，所以第三方登錄最佳。
4. 老板：“手機(jī)號(hào)，盡量引導(dǎo)一下，但也要兼顧登錄轉(zhuǎn)化率。”；
5. 產(chǎn)品：“……”

以上原則不包括特殊類型的App：

• 例如滴滴，它必須用手機(jī)號(hào)為用戶提供服務(wù)，所以只能通過(guò)手機(jī)號(hào)登錄。
• 例如婚戀類，沒(méi)有性別就沒(méi)法向用戶展示任何內(nèi)容，反而最合適微信登錄（自帶性別）。

在工作中，我學(xué)習(xí)臻龍大神，用 Axure 寫 PRD。然后又集各家所長(zhǎng)，結(jié)合自己的一些創(chuàng)新，形成了我自己的PRD風(fēng)格，如上圖（為了投稿，樣式稍微優(yōu)化過(guò)）。在寫了無(wú)數(shù)說(shuō)明文檔、畫了無(wú)數(shù)流程圖，電子的、紙質(zhì)的都試過(guò)之后，無(wú)奈發(fā)現(xiàn)開(kāi)發(fā)哥哥們根本不看那玩意兒~~~

開(kāi)發(fā)哥哥姐姐們說(shuō)：（都是真實(shí)回答）

1. 從不看產(chǎn)品文檔，跟著UI圖做，看不懂就去打PM。

2. 太多了，看的眼暈?；臼亲鲆徊娇匆徊?。

3. 哦，這樣啊~，我是靠著感覺(jué)寫的，那我改改。

從產(chǎn)品角度想，PRD的用戶是開(kāi)發(fā)哥哥們，人家不看說(shuō)明是PRD寫的有問(wèn)題。遇到問(wèn)題解決問(wèn)題，就形成了上圖右側(cè)的文檔形式。文檔用兩組 if else，詳解了左側(cè)兩個(gè)頁(yè)面的業(yè)務(wù)邏輯。這樣的說(shuō)明文檔，對(duì)程序員來(lái)說(shuō)，效率高、邏輯清晰、兼具高可讀性。這些優(yōu)點(diǎn)，是流程圖和純文字文檔是無(wú)法做到的。

當(dāng)然，細(xì)節(jié)也很重要，比如：像素級(jí)的對(duì)齊、【圖二】輸入框中沒(méi)有光標(biāo)…

二、言歸正傳，手機(jī)號(hào)登錄，如下圖：

第三方登錄無(wú)需頁(yè)面，常見(jiàn)問(wèn)題：第三方App未安裝、App互相拉起權(quán)限、返回?cái)?shù)據(jù)異常等等，只需服務(wù)器處理異常即可，這里只說(shuō)手機(jī)號(hào)登錄：

在這個(gè)頁(yè)面，輸入框是重點(diǎn)。手機(jī)號(hào)框，要用很大的字號(hào)，并分段顯示。驗(yàn)證碼框，增加粘貼按鈕，方便Android用戶粘貼。另外，遵循平行備選方案出口原則，在用戶輸入手機(jī)號(hào)之后，不隱藏掉第三方登錄，只弱化處理。

初始登錄頁(yè)到驗(yàn)證碼登錄頁(yè)，一定要使用動(dòng)效，用動(dòng)效把兩個(gè)頁(yè)面連接起來(lái)，讓用戶感覺(jué)只是同一頁(yè)面的微小變化，一切盡在掌握，避免產(chǎn)生負(fù)面情緒。

三、獲取驗(yàn)證碼后，超時(shí)未輸入

Android的智能化越來(lái)越成熟，但是權(quán)限系統(tǒng)也日趨完善。在驗(yàn)證碼輸入環(huán)節(jié)，這二者就產(chǎn)生沖突了。在用戶首登時(shí)就彈窗索取權(quán)限，顯然不太友好。但如果不授權(quán)，就無(wú)法使用自動(dòng)填寫驗(yàn)證碼這樣的功能。這里根據(jù)自身情況設(shè)定，如果后續(xù)會(huì)頻繁使用驗(yàn)證碼，或判斷出是老用戶，則可以先要權(quán)限。

接聽(tīng)語(yǔ)音驗(yàn)證碼，我將其定義為“解決異常情況的一個(gè)出口”，所以默認(rèn)不顯示，只有短信驗(yàn)證碼超時(shí)未填寫時(shí)，才會(huì)出現(xiàn)。兼顧頁(yè)面整潔和場(chǎng)景需求。

四、登錄模塊的其他頁(yè)面

選擇登錄方式時(shí)，主流程都未被打斷過(guò)，這些頁(yè)面當(dāng)然也不能打斷主流程。

1. 左側(cè)標(biāo)簽欄下滑可關(guān)閉彈層，右側(cè)下滑到頂，繼續(xù)下滑可關(guān)閉彈層。
2. 右側(cè)內(nèi)容區(qū)域，上滑到底，繼續(xù)上滑可切換左側(cè)下一個(gè)標(biāo)簽。
3. 雙語(yǔ)為中文和目標(biāo)國(guó)家語(yǔ)言。
4. 國(guó)家名字太長(zhǎng)的，用縮寫。
5. iOS 和 Android 的操作列表不同。
6. 點(diǎn)擊撥打，跳轉(zhuǎn)到系統(tǒng)撥號(hào)界面。
7. 點(diǎn)擊復(fù)制，Toast提示復(fù)制成功…。
8. 用戶協(xié)議，每次打開(kāi)都從服務(wù)器獲取網(wǎng)頁(yè)內(nèi)容，不讀取本地緩存數(shù)據(jù)。
9. 文本可滾動(dòng)，滾動(dòng)時(shí)能查看到文本區(qū)域邊界。

五、登錄環(huán)節(jié)的異常情況

上圖，自動(dòng)執(zhí)行時(shí)出現(xiàn)的錯(cuò)誤提示，也要遵循一個(gè)焦點(diǎn)原則。

1. 圖一，是在輸完11位號(hào)碼后，自動(dòng)檢測(cè)號(hào)碼格式錯(cuò)誤，出現(xiàn)的提示，修正后才消失。
2. 圖二，是在自動(dòng)執(zhí)行登錄時(shí)，服務(wù)器返回驗(yàn)證碼錯(cuò)誤，出現(xiàn)的提示，內(nèi)容發(fā)生變化才消失。

———————————分割線———————————

上圖，手動(dòng)觸發(fā)的錯(cuò)誤提示。

1. 圖一，號(hào)碼格式錯(cuò)誤 or 未輸完，點(diǎn)擊獲取驗(yàn)證碼?or 登錄，出現(xiàn)的提示，2秒后消失。
2. 圖二，驗(yàn)證碼為空 or 未輸完，點(diǎn)擊登錄，出現(xiàn)的提示，2秒后消失。
3. 圖三，倒計(jì)時(shí)未結(jié)束，點(diǎn)擊倒計(jì)時(shí)，出現(xiàn)的提示，2秒后消失。

———————————分割線———————————

上圖，防作弊與兩種吐司展示

1. 圖一，防作弊環(huán)節(jié)，對(duì)轉(zhuǎn)化率傷害還是挺大的。我在PRD中寫過(guò)，如果能收到運(yùn)動(dòng)傳感器數(shù)據(jù)，可判斷為真人，可去掉校驗(yàn)碼。（傳感器這些基礎(chǔ)權(quán)限，系統(tǒng)默認(rèn)開(kāi)啟的）
2. 圖二，登錄-Loading，不可進(jìn)行其他操作；全局吐司樣式，2秒。
3. 圖三，Android的SnakBar還是挺好用的，建議 iOS 手動(dòng)實(shí)現(xiàn)一下。2秒。

———————————分割線———————————

觸發(fā)安全機(jī)制導(dǎo)致的登錄信息過(guò)期，再次登錄時(shí)，需要進(jìn)行兩種安全驗(yàn)證才能登錄。

———————————分割線———————————

此處細(xì)節(jié)還是挺多的，比如：會(huì)員時(shí)長(zhǎng)、相冊(cè)、好友、動(dòng)態(tài)、資料，這些信息能否合并？合并后，被解綁的賬號(hào)是真刪除還是假刪除？

這些細(xì)節(jié)，極特殊情況時(shí)才需要考慮，比如企業(yè)收購(gòu)導(dǎo)致賬號(hào)體系合并。

去年雙十一阿里贈(zèng)送的優(yōu)酷會(huì)員，需使用支付寶登錄優(yōu)酷，然而賬號(hào)不能合并。結(jié)果就是優(yōu)酷新增了用戶，阿里送禮長(zhǎng)了面子，用戶則一臉懵逼。

相信已經(jīng)是優(yōu)酷會(huì)員的，且之前未綁定支付寶的，誰(shuí)也沒(méi)用過(guò)阿里送的優(yōu)酷會(huì)員。

你們是嗎？

以上，登錄環(huán)節(jié)的異常情況也就差不多了，網(wǎng)絡(luò)異常吐司提示即可。權(quán)限獲取失敗，前面也提到過(guò)，盡量不要在登錄環(huán)節(jié)向用戶要權(quán)限。

iOS 11 暫時(shí)還沒(méi)研究；Android 方面，華為市場(chǎng)的默認(rèn)權(quán)限不統(tǒng)一，同一分類的App，安裝后，初始權(quán)限數(shù)量不等，有的多有的少，暫時(shí)還沒(méi)搞清楚原因。不知是否可以向華為花錢買初始權(quán)限，有了解的大神，可以在評(píng)論區(qū)指點(diǎn)一下，謝謝！

六、登錄頁(yè) – 其他形態(tài)

基礎(chǔ)功能不登錄也能使用的App，使用彈層登錄頁(yè)更好。注意遮罩的透明度，要保證頁(yè)面整潔。

———————————分割線———————————

臨時(shí)退出，或者安全機(jī)制退出，可用生物識(shí)別登錄。疊加使用更安全。

七、探索永無(wú)止境

我在PRD中，每個(gè)大功能模塊下面都有一個(gè)探索頁(yè)面，放不同的設(shè)計(jì)和方案，做 A/B 測(cè)試能用到。最主要的還是當(dāng)做終極力量，威懾程序猿們。

需求這種武器，腦洞有多大，威力就有多大。

對(duì)于登錄模塊的探索，有些有意思的資料和想法：

中移動(dòng)的和通行證：

1. 三個(gè)功能：一鍵免密登錄（SDK）、本機(jī)號(hào)碼校驗(yàn)（SDK）、二次號(hào)查詢。
2. 這兩套SDK，都需要“撥號(hào)”和“讀取本機(jī)識(shí)別碼”權(quán)限。
3. 如果你的App默認(rèn)擁有這兩個(gè)權(quán)限，用著很不錯(cuò)，手機(jī)號(hào)都不用輸，一鍵登錄。
4. 小米 MIUI 9 已經(jīng)全面接入了和通行證，全體系支持一鍵登錄。
5. 本機(jī)號(hào)碼校驗(yàn)，可用于安全驗(yàn)證。
6. 客服：“目前三網(wǎng)都支持，但是為了保障以后的使用，建議找回各自運(yùn)營(yíng)商對(duì)接?！?/li>

登錄頁(yè)，定制鍵盤：

1. 第三方登錄、撥號(hào)盤、刪除、清空、粘貼、語(yǔ)音輸入、登錄按鈕，都融合在一個(gè)鍵盤上，一點(diǎn)兒也不擁擠，哈哈哈。
2. 其實(shí)語(yǔ)音輸入手機(jī)號(hào)，還是很方便的，目前還沒(méi)見(jiàn)過(guò)有App使用。

八、完結(jié)

在實(shí)際PRD中，我把每個(gè)頁(yè)面的內(nèi)部規(guī)則也寫到文檔中。例如：

1. 手機(jī)號(hào)、驗(yàn)證碼輸入框，只能輸入數(shù)字；
2. 檢測(cè)鍵盤高度，防止遮擋到登錄按鈕；
3. 驗(yàn)證碼為4位數(shù)字，30分鐘有效。
4. 30分鐘內(nèi)最多獲取3次驗(yàn)證碼，且內(nèi)容相同。
5. 每天最多獲取10次驗(yàn)證碼。
6. 不同種類的驗(yàn)證碼，分別計(jì)數(shù)。如：語(yǔ)音和短信驗(yàn)證碼。
7. 不同種類的驗(yàn)證碼，規(guī)則不同。如：登錄和支付驗(yàn)證碼。
8. 登錄成功，獲取哪些數(shù)據(jù)，檢查哪些接口等等。

準(zhǔn)備的素材基本用完了，文章結(jié)束。

PRD內(nèi)自用的流程圖就不貼出來(lái)了，反正開(kāi)發(fā)大哥大姐們都不看。

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

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議