上篇文章跟大家聊到啟動(dòng)頁(yè)、廣告頁(yè)、引導(dǎo)頁(yè)面的設(shè)計(jì)思想。今天跟大家聊聊登錄設(shè)計(jì)的那些事。

登陸模塊在產(chǎn)品中占的權(quán)重自然不用多說(shuō)，在產(chǎn)品構(gòu)建初期就要考慮好登陸模塊的設(shè)計(jì)，登錄采取的賬號(hào)類(lèi)型決定開(kāi)發(fā)根據(jù)賬號(hào)類(lèi)型建立用戶(hù)數(shù)據(jù)表，同時(shí)用戶(hù)賬號(hào)又與后期的用戶(hù)成長(zhǎng)體系直接關(guān)聯(lián)。

所以不要小看一個(gè)小小的登錄，登陸設(shè)計(jì)是初始之重，初期考慮不齊全后續(xù)會(huì)給產(chǎn)品帶來(lái)“災(zāi)難”性問(wèn)題，有可能會(huì)面臨整個(gè)登陸模塊的重構(gòu)，本次給大家分享登錄模塊設(shè)計(jì)分：《登錄前和登錄后用戶(hù)可以做什么》、《常見(jiàn)的登錄方式有那些》、《登錄之后數(shù)據(jù)融合如何處理》、《游客賬號(hào)與正式賬號(hào)的區(qū)別》、今天先分享第一部分。

登錄前用戶(hù)可以做什么？

先來(lái)看一個(gè)場(chǎng)景：

• 場(chǎng)景1：用戶(hù)A被某商場(chǎng)的廣告吸引決定去某商場(chǎng)逛逛，走到商場(chǎng)門(mén)口進(jìn)入大門(mén)就直接進(jìn)入商場(chǎng)瀏覽商品。
• 場(chǎng)景2：用戶(hù)B被某商場(chǎng)的廣告吸引決定去某商場(chǎng)逛逛，走到商場(chǎng)門(mén)口保安人員要求用戶(hù)B必須出示身份證才可以進(jìn)入商場(chǎng)。

這兩個(gè)場(chǎng)景前者不需要出示身份證（無(wú)門(mén)檻）直接進(jìn)去隨便逛，后者要求必須有身份證才可以進(jìn)去（有門(mén)檻的），這里跟我們的登錄場(chǎng)景是一樣的。

登陸前用戶(hù)行為1：無(wú)門(mén)檻案例

用戶(hù)打開(kāi)圖下APP就可以直接進(jìn)入APP首頁(yè),瀏覽商品、查看資訊等。用戶(hù)操作行為屬于用完即走，后臺(tái)不做任何記錄側(cè)重點(diǎn)在于“瀏覽”，而用戶(hù)是否能夠通過(guò)快速的“瀏覽”吸引用戶(hù)要想“操作”產(chǎn)品，取決于產(chǎn)品功能、界面設(shè)計(jì)以及頁(yè)面引導(dǎo)。（如下圖）

登陸前用戶(hù)行為分解

• Step1：打開(kāi)APP
• Step2：進(jìn)入啟動(dòng)頁(yè)面
• Step3：進(jìn)入引導(dǎo)頁(yè)面（引導(dǎo)頁(yè)面根據(jù)產(chǎn)品需求是否每次展示）
• Step2：進(jìn)入首頁(yè)瀏覽信息（查看商品或者查看直播信息）
• Step3：觸發(fā)點(diǎn)擊事件（購(gòu)買(mǎi)/觀看）
• Step4：事件回饋（提示需要用戶(hù)需要登陸才可以？）
• Step5：結(jié)果：執(zhí)行或者放棄下一個(gè)動(dòng)作（操作登陸）

登陸前用戶(hù)行為2：有門(mén)檻案例

登陸前用戶(hù)行為2分解

• Step1：打開(kāi)APP
• Step2：進(jìn)入啟動(dòng)頁(yè)面
• Step3：進(jìn)入引導(dǎo)頁(yè)面（引導(dǎo)頁(yè)面根據(jù)產(chǎn)品需求是否每次展示）
• Step4：進(jìn)入登陸頁(yè)面

兩種方式對(duì)比

案例1對(duì)應(yīng)的就是場(chǎng)景1，案例2對(duì)應(yīng)是場(chǎng)景2，有些童鞋在做登錄的時(shí)候會(huì)糾結(jié)”我到底要不要用戶(hù)登錄”才可以使用產(chǎn)品，來(lái)我們對(duì)比下優(yōu)劣勢(shì)：

優(yōu)勢(shì)：使用無(wú)門(mén)檻方式，用戶(hù)可以快速進(jìn)入APP了解產(chǎn)品功能，若頁(yè)面比較吸引用戶(hù)可觸發(fā)用戶(hù)登錄轉(zhuǎn)換為正式用戶(hù)；使用有門(mén)檻方式，用戶(hù)注冊(cè)成功，新增一條用戶(hù)數(shù)據(jù)有利于新增，因必須登錄才可以進(jìn)入APP，前端只需要判斷一次即可。

劣勢(shì)：使用無(wú)門(mén)檻方式，用戶(hù)快速進(jìn)入APP了解產(chǎn)品功能，若頁(yè)面沒(méi)有吸引用戶(hù)的地方會(huì)快速離開(kāi)不點(diǎn)一點(diǎn)痕跡，并且前端需要做多次解發(fā)判斷；使用有門(mén)檻方式增加用戶(hù)進(jìn)入APP成本。

總結(jié)：不管采用那一種方式都沒(méi)有好與不好之分，取決于產(chǎn)品屬性，適合的就是最好的。

登錄后用戶(hù)可以做什么？

對(duì)用戶(hù)

登陸后即我們所說(shuō)的登陸成功，會(huì)給用戶(hù)一個(gè)賬號(hào)，用戶(hù)擁有賬號(hào)之后可以在APP內(nèi)使用該賬號(hào)對(duì)應(yīng)的權(quán)限。

賬號(hào)會(huì)跟用戶(hù)成長(zhǎng)體系關(guān)聯(lián)，不同的賬號(hào)擁用不同的查看和操作權(quán)限。如同我們?nèi)ド虉?chǎng)購(gòu)物、普通會(huì)員跟VIP會(huì)員所享受的待遇是不同的。

對(duì)應(yīng)用

獲取用戶(hù)信息

• QQ登錄：可以獲取頭像跟昵稱(chēng)。
• 微信登錄：可以獲取頭像跟昵稱(chēng)。
• 手機(jī)登錄：后臺(tái)隨機(jī)給用戶(hù)生成用戶(hù)昵稱(chēng)以及顯示默認(rèn)頭像。

常見(jiàn)登錄問(wèn)題

Token過(guò)期的處理

在當(dāng)前的開(kāi)發(fā)中，大多數(shù)情況下，用戶(hù)登陸成功之后，會(huì)有服務(wù)端下發(fā)一個(gè)Token作為用戶(hù)的身份證明，其中包含了用戶(hù)的部分個(gè)人信息，在以后的請(qǐng)求過(guò)程中，客戶(hù)端需要將Token參數(shù)傳給服務(wù)端，作發(fā)送給服務(wù)器作為用戶(hù)身份驗(yàn)證的一個(gè)步驟，因Token存在有效期這里就會(huì)出現(xiàn)Token失效的問(wèn)題，出現(xiàn)Token失效問(wèn)題，用戶(hù)就無(wú)法使用APP，處理方式如下：

登錄成功刷新問(wèn)題

用戶(hù)登錄成功有時(shí)會(huì)存在個(gè)人中心獲取不到用戶(hù)信息（請(qǐng)注意開(kāi)發(fā)會(huì)說(shuō)這是網(wǎng)絡(luò)問(wèn)題沒(méi)有顯示出來(lái)）這是刷新問(wèn)題導(dǎo)致的，刷新沒(méi)有做好會(huì)導(dǎo)致用戶(hù)信息時(shí)有時(shí)無(wú)（這個(gè)坑實(shí)打打的踩過(guò)來(lái)的），前端需要做刷新處理。

第三方取消授權(quán)

用戶(hù)使用第三方登錄需要用戶(hù)同意授權(quán)才可以，如果用戶(hù)不同意授權(quán)返回登錄頁(yè)面顯示TIPS：登錄未授權(quán)。（提示語(yǔ)可以自己定義）

同一個(gè)賬號(hào)在多個(gè)設(shè)備上登錄

當(dāng)同一個(gè)賬號(hào)在不同的設(shè)備或者操作系統(tǒng)上登錄時(shí)，另一個(gè)賬號(hào)需要自動(dòng)擠下線(xiàn)（如微信登錄處理方式），用戶(hù)在此點(diǎn)擊頁(yè)面時(shí)引導(dǎo)用戶(hù)跳轉(zhuǎn)到登錄頁(yè)面。

作者將自己踩過(guò)的坑做總結(jié)復(fù)盤(pán)，因時(shí)間關(guān)系部分沒(méi)有寫(xiě)的很祥細(xì)到位，歡迎大家補(bǔ)充。

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

題圖來(lái)自PEXELS，基于CC0協(xié)議