登入註冊經驗總結(一)設計前的思考+註冊
本人根據自己平時工作生活中遇到的登入註冊情況作一個總結與整理,希望能夠幫助大家更好的理解登入註冊。
本章只討論前兩個部分:
設計前需要思考的幾個問題
註冊
1. 設計前需要思考的幾個問題
1.1 登入註冊功能的價值
在設計一個登入註冊的功能時,需要先考慮自己的產品是否真的需要這個功能。
登入註冊的價值一般可以從以下幾個點來考慮:
1)便於使用者跨裝置使用,也便於使用者使用同意註冊登入不同賬號
2)使用者與其他使用者互動,產生更多個性化內容
3)使用者需要記錄自己的個性化內容
4)交易性的產品,賬號系統提高安全性
5)便於業務採集使用者資訊,比如手機號、姓名等。
6)便於通過使用者資料輔助產品規劃方向
1.2 選擇哪種登入註冊方式,為什麼?
主流的註冊方式包括 手機號 、 郵箱 、 第三方賬號 註冊,主要為前兩種,第三方賬號一般作為備選。
註冊成功後,可以考慮是否需要設定密碼。對於一些安全性要求比較高的產品,需要考慮密碼以及一些其他的安全機制。
目前主流的登入方式有 簡訊驗證碼登入 、 密碼登入 、 第三方登入 。
因為簡訊驗證碼登入需要簡訊服務,所以成本會高於密碼登入,並且也需要考慮一些防盜刷的安全機制。但驗證碼登入因為方便快捷的更好體驗而被更多平臺使用。
第三方賬號範圍很廣,可以根據具體的目標使用者自行選擇合適的第三方賬號。常用的有:微信、QQ、微博,但也可以根據具體的目標使用者自行選擇合適的第三方賬號。
對於同平臺多產品的情況,還可以使用同一賬號共同管理,比如淘寶賬號適用於淘寶、支付寶、阿里巴巴等。
1.3 有哪些與登入註冊相關的其他功能
關於登入註冊的設計不止於登入/註冊成功,還需要考慮到與之相關的其他功能,比如,忘記密碼、修改密碼、修改繫結手機號/郵箱、修改繫結的第三方賬號、退出登入、登出賬號等。根據自己產品的定位,選擇需要的功能,完成登入註冊的閉環。
1.4 根據產品的具體定位,選擇哪種型別的安全機制
常見的安全機制包括
1)行為式驗證碼(滑動拼圖、智慧點選等)
2)生物ID驗證(指紋、面部識別)
3)驗證次數設定上限,達到上限後APP上鎖
在登入註冊流程中,可以在以下幾個場景考慮安全機制:
1)在同一個登入/註冊回合中,使用者多次呼叫驗證碼
2)在同一個登入回合中,密碼多次錯誤
1.5 註冊資訊
產品定位不同,註冊方式不同,使用者需要提供的資料也有所不同
在設計註冊流程前,需要確定在這個階段需要使用者必須提供哪些資訊,一些不太重要的資訊可以之後引導使用者去填。
1.6 登入註冊的展示方式
目前市面上有兩類展示
第一類:登入後才可以使用
這類應用通常對賬號系統有較強的依賴,或者產品本身比較強勢,或對安全性要求較高,比如支付寶、微信、拉勾
第二類:先體驗,再登入
這是市面上較多應用的方式,先讓使用者對產品有了初步的瞭解後,使用者只有登入之後才可以使用所有的功能。市面上許多應用都是採取這種方式,比如:下廚房、豆瓣、微博
2.註冊
2.1 註冊流程的必要性和展現方式
一個賬號系統中,註冊的必須存在,但是註冊流程有兩種展現方式:
1)與登入合併
這類註冊流程混在登入流程中,將註冊於登入併入一個入口

根據下方的流程圖判斷執行註冊流程還是登陸流程。這類流程通常與驗證碼登入配合使用,系統判斷時,需要判斷該欄位是否在賬號系統資料庫中存在

這類設計的優點在於:簡單,使用者在登入頁不需要多思考
這類設計也有缺點:使用者會忘記是否註冊過,易出現一個使用者有多個賬號而感到困惑的情況;對於需要補充很多資訊的註冊流程,這樣的體驗不太好,會提高使用者流失率
2)區分於登入
這類註冊流程會在登入頁單獨開一個入口,有明確目標的使用者會選擇直接登入,這種型別的設計在市場上使用比較普遍
這兩種方式在體驗上來說區別不大,第一種更使用於需要填寫的使用者資訊較少時,第二種更適用於需要填寫的使用者資訊較多時

2.2 註冊方式
主流的註冊方式有三種:手機號、郵箱、第三方賬號註冊,我們從門檻、便捷性、安全性三個方面來看一下各自的優缺點

接下來針對手機號註冊進行詳細描述
1)手機號註冊
這類方式通常使用簡訊驗證碼的方式註冊,這種操作對使用者來說方便、快捷,不需要多的思考就可以完成,是比較好的設計。
但需要考慮好使用者更改手機號之後的操作,舊手機號可能出現無法接收簡訊的情況,這時需要其他的安全驗證,比如人工核實、身份證驗證、以往訂單核實、好友核實等。都需要根據自己的業務來量身設計。
另外,對於海外使用者而言,手機號被視為一種隱私,同時,多種型別的海外手機號也是比較難驗證的,所以,針對海外使用者,多選郵箱註冊。
第一步:輸入手機號
手機號在輸入的時候最好顯示為344的方式展示,這樣看起來更直觀,體驗更好。
對於手機號的驗證,一般做到11位數字驗證就夠了,因為現在的手機號數字越來越大,已經有2開頭的手機號出現。可以通過按鈕置灰來直接說明當前輸入的內容位數錯誤。
輸入手機號時,對應的軟鍵盤為數字軟鍵盤,輸入框分為啟用和非啟用、為空和不為空幾種狀態,具體的展現方式如下:

第二步:獲取驗證碼
輸入手機號+輸入驗證碼的操作可以在一個頁面完成,也可以分步驟搞定。如果在提交了驗證碼後還需要補充更多資訊,最好採用分步驟的方式
獲取驗證碼時,可能出現多種失敗情況,大致有以下幾種:
1)網路不好
2)伺服器內部異常
3)簡訊服務欠費
4)簡訊服務被第三方攻擊
5)獲取的loarding超時(20s)
對應不同的錯誤情況,展示不同的錯誤提示,可以使用toast或者頁面內高亮文字提示的方式

第三步:輸入驗證碼
驗證碼分為6位或4位,因為有各類安全機制的使用,6位與4位的安全性差別不大。
對於傳送的驗證碼文字,最好在簡訊前部寫出平臺名稱和驗證碼內容,比如:【七麥資料】您的驗證碼為5843,請於10分鐘內正確輸入,如非本人操作,請忽略此簡訊。
為了更好的體驗,可以設定在一次業務流程中,第一次驗證碼傳送之後的10分鐘之內,若該驗證碼未被驗證過,這10分鐘之內再次請求的驗證碼保持不變。
目前Android系統和iOS12系統已經可以支援自動填充簡訊的驗證碼內容,不過為了低版本裝置的相容性,仍然需要保留手動輸入的邏輯。
2)郵箱註冊
郵箱註冊也是一種比較常用的註冊方式,但也存在很多問題:
1)郵箱註冊的驗證方式比較麻煩;
2)賬號安全受郵箱安全的影響;
3)一部分人沒有使用郵箱的習慣;
4)無法控制同一使用者註冊的賬號數量,難以實名制
一個郵箱註冊的設計流程如下:
第一步:輸入郵箱
由於郵箱的格式比較固定,且選擇較多,為了更好的體驗,輸入框自動填充尾部資訊,或提供多個尾部資訊進行選擇
郵箱的輸入框也分為未啟用和啟用、為空和不為空幾個狀態,具體的展示如下

第二步:獲取驗證碼+第三步:驗證
驗證碼有兩種方式:點選連結驗證 或 驗證碼驗證
點選連結驗證需要在登入頁設定一個定時任務(或者按鈕),判斷當前使用者是否已經點選了連結
驗證碼驗證方式與手機號的簡訊驗證類似。
3)第三方註冊
第三方登入是非常快捷、方便的,自出現以來被廣泛的使用。
以下以APP端微信第三方登入為例做詳細描述:
獲取微信第三方登入的流程如下:
a. 判斷當前裝置是否安裝微信
b. 判斷當前是否有已登入的微訊號
c. 使用AppID向微信開放平臺(客戶端)傳送登入請求
d. 客戶端載入授權頁面,請求使用者確認
e. 微信客戶端拉起三方應用,並將臨時授權碼(code)傳遞給三方應用,予授權完成
f. 三方應用使用臨時授權碼(code)、AppID和AppSecret,通過https協議向微信開放平臺(伺服器)請求access_token
需要考慮各個步驟可能出現的異常情況,並設計好對應的提示文字
2.3 註冊填寫資訊
一般會有密碼、使用者基本資訊(頭像、使用者名稱)的填寫,對於微信登入的使用者可以直接取使用者當前的微信頭像和暱稱做頭像和使用者名稱。
輸入密碼時,分為明文和非明文狀態,具體如下

如果需要填寫的內容較多,建議通過分步驟的方式,減輕使用者在每一頁的負擔,配合進度條使用讓使用者心裡有預期。對於一些非必填的內容,可以增加一個跳過的選項,並引導使用者進入app後再補充。總之,儘量不要在註冊階段花費使用者太多心思,具體的平衡需要產品去衡量。
總結:
本章主要總結了設計登入註冊前需要考慮的事情和註冊的一些設計經驗,都是平時工作生活中的總結,希望能給大家帶來幫助。
tips:
1)若多個錯誤原因對應同樣的提示文字,為了更快的定位錯誤原因,可以在提示文字後面加一個編號,比如:toast提示(1s):伺服器忙,請稍後重試-01。
2)對於所有的錯誤提示,一定給使用者一個原因,不能只提示的“操作失敗”,使用者會蒙圈的
3)登入註冊是一個多步驟的功能,設計的時候不僅要考慮正向流程,還要考慮返回到哪個頁面,什麼狀態,是否需要清除已有的登入狀態。
4)有了登入資訊後,app再次啟動時走一個自動登入的流程,需要考慮這個流程是在哪個頁面進行判斷,首頁還是登入頁?
5)註冊成功後進入app的提示語,需要更人性化的關懷,比如“歡迎你,大南”,是不是比“註冊成功”聽著好聽得多
下一章內容:
詳解三大登入方式:簡訊驗證碼登入、密碼登入、第三方登入