整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)讀：幾乎每一個(gè)APP都需要用戶登錄注冊(cè)，這是一個(gè)產(chǎn)品的基礎(chǔ)功能。這樣一個(gè)簡(jiǎn)單的基礎(chǔ)功能，也會(huì)隨著用戶使用場(chǎng)景和產(chǎn)品的特性變化。本文作者對(duì)APP登錄注冊(cè)的細(xì)節(jié)設(shè)計(jì)發(fā)表了自己的見解，與你分享。
移動(dòng)設(shè)備屬于個(gè)人私密性較高的設(shè)備，用戶在進(jìn)行操作時(shí)，可對(duì)輸入密碼進(jìn)行有效的保護(hù)；
移動(dòng)設(shè)備隨身攜帶，隨時(shí)隨地在變換位置，網(wǎng)絡(luò)狀況不穩(wěn)定因素很多；
移動(dòng)設(shè)備顯示區(qū)域均較小，登錄注冊(cè)頁面通常都會(huì)有3個(gè)頁面（M站通常在一個(gè)頁面），需要用戶填寫的內(nèi)容要精簡(jiǎn)；
移動(dòng)設(shè)備輸入更多是手指觸屏操作，人機(jī)交互有其獨(dú)特性，例如虛擬鍵盤的設(shè)計(jì)，特效的設(shè)計(jì)等。
在開始設(shè)計(jì)產(chǎn)品之前，一定要先想清楚：
假設(shè)前面的問題都搞清楚了。那么我們來設(shè)計(jì)登錄注冊(cè)。
第一步：梳理腦圖，梳理現(xiàn)有的登錄模式和信息結(jié)構(gòu)；（一般會(huì)用xmind，操作簡(jiǎn)單易用，最主要是免費(fèi)）
第二步：梳理業(yè)務(wù)流程，把每一步操作都流程化，做好各種情況的處理方案（梳理流程非常非常非常重要）；
第三步：畫出草圖/線框圖，對(duì)頁面元素和布局進(jìn)行初步設(shè)計(jì)；
第四步：交互設(shè)計(jì)，對(duì)每一項(xiàng)頁面元素、頁面跳轉(zhuǎn)、操作反饋、異常處理、按鈕和頁面的各種狀態(tài)等做出設(shè)計(jì)；
第五步：自檢測(cè)試，對(duì)線框圖和交互設(shè)計(jì)進(jìn)行自檢，最好是用Axure等交互軟件進(jìn)行交互設(shè)計(jì)操作，建立自己的自檢清單；
第六步：輸出PRD、線框圖和交互設(shè)計(jì)稿。
由于每個(gè)頁面都要設(shè)計(jì)很耗費(fèi)時(shí)間和精力，所以我只做簡(jiǎn)單地總結(jié)。
以注冊(cè)為例，注冊(cè)通用流程：是填寫手機(jī)號(hào)碼——獲取驗(yàn)證碼——填寫密碼。
賬號(hào)有無格式的要求，如果只是手機(jī)號(hào)碼，前端是否需要驗(yàn)證手機(jī)號(hào)碼的有效性？
手機(jī)號(hào)碼為純數(shù)字，是否彈出純數(shù)字鍵盤方便用戶快速填寫及避免用戶來回切換？
手機(jī)號(hào)碼的數(shù)字如何呈現(xiàn)？哪種格式？
驗(yàn)證碼的格式，是四/六位數(shù)字驗(yàn)證碼，還是英文+數(shù)字驗(yàn)證碼，英文是否區(qū)分大小寫？
按鈕默認(rèn)顯示狀態(tài)、用戶輸入信息后按鈕顏色變化效果，該如何設(shè)計(jì)比較好？
倒計(jì)時(shí)如何設(shè)置？button還是label ？用哪個(gè)好？為什么好（好在哪里）？如何設(shè)計(jì)？
驗(yàn)證碼的倒計(jì)時(shí)一般默認(rèn)采用60秒的居多，但是一般驗(yàn)證碼的有效期為5分鐘。之所以設(shè)置60秒是因?yàn)樵诮^大多數(shù)情況下，60秒內(nèi)驗(yàn)證碼是能夠發(fā)出的，如獲取不到，讓用戶所等待的時(shí)間又不至于太長(zhǎng)，降低用戶焦慮，提升體驗(yàn)。
最少和最多字符設(shè)置，提示文字為“位”還是“字符”？如“請(qǐng)輸入6-16位字母或數(shù)字”
密碼是否要限制特殊字符？如“空格”、“/”等，為什么要限制？有沒有安全方面的考慮？
密碼設(shè)置好后，注冊(cè)按鈕如何變化？點(diǎn)擊“注冊(cè)”后，在網(wǎng)絡(luò)較慢的情況下，頁面和按鈕如何響應(yīng)，是否要加鎖屏浮層+緩沖提示語？
錯(cuò)誤時(shí)的報(bào)錯(cuò)提示文字是什么，提示格式是彈窗、Toast、還是在當(dāng)前頁面文字顯示？
Toast是沒有焦點(diǎn)的，而且Toast顯示的時(shí)間有限，過一定的時(shí)間就會(huì)自動(dòng)消失。
彈框會(huì)阻斷用戶操作，需要手動(dòng)點(diǎn)擊確認(rèn)以后才會(huì)消失。
在當(dāng)前頁面文字顯示的話，提示文字?jǐn)[放的位置，頁面格式根據(jù)提示文字的變化，需要有怎樣的視覺效果
點(diǎn)擊【獲取驗(yàn)證碼】，檢測(cè)手機(jī)號(hào)已被注冊(cè)，如無置灰設(shè)置，輸入框?yàn)榭?，手機(jī)號(hào)碼無效的情況，故需提示：
點(diǎn)擊【注冊(cè)】時(shí)，可能會(huì)有輸入框?yàn)榭眨?yàn)證碼無效等情況，如無置灰設(shè)置，故需提示：
短信驗(yàn)證碼一般通過第三方通道發(fā)送，在技術(shù)側(cè)做規(guī)避，還需要在產(chǎn)品規(guī)則上做一定限制；
驗(yàn)證碼的格式需要簡(jiǎn)單明了，如“880207，XX驗(yàn)證碼?！綳XX】。
驗(yàn)證碼的字?jǐn)?shù)限制，一般為6位純數(shù)字。
注冊(cè)是否為邀請(qǐng)注冊(cè)？如是邀請(qǐng)注冊(cè)，邀請(qǐng)碼格式如何設(shè)計(jì)？
邀請(qǐng)碼錯(cuò)誤提示，填寫了邀請(qǐng)的用戶和沒填的用戶，在注冊(cè)成功后有何區(qū)別？有邀請(qǐng)碼的用戶是否有獎(jiǎng)勵(lì)？
注冊(cè)成功后同時(shí)切換為登錄狀態(tài)，登錄狀態(tài)賬號(hào)密碼保存是否設(shè)置期限？
給予注冊(cè)成功的提示并跳轉(zhuǎn)到相應(yīng)頁面，目標(biāo)頁面狀態(tài)如何是否有緩存，是否需要緩存？
之前是在需要token的頁面跳轉(zhuǎn)到注冊(cè)頁面的話，注冊(cè)成功后需自動(dòng)跳轉(zhuǎn)回之前的頁面
注冊(cè)之前有第三方登錄，用戶注冊(cè)后還需要用戶綁定第三方賬號(hào)嗎？
手機(jī)號(hào)碼輸入框，手機(jī)號(hào)碼顯示一般是344格式，這樣便于用戶檢查號(hào)碼是否正確，如：188 8888 8888；
對(duì)輸入手機(jī)號(hào)的判斷，首數(shù)字必須以1 開頭，非1字符及提示錯(cuò)誤，第二位數(shù)字必須在3到9之間（包括3到9），不在范圍即提示錯(cuò)誤等等
驗(yàn)證碼輸入框，長(zhǎng)度一般比較短；
密碼輸入框，默認(rèn)一般為密文顯示，為了更好的交互可以設(shè)置明文顯示按鈕，最好只設(shè)置一次密碼，為什么這樣？
按鈕設(shè)計(jì)，提交按鈕和文字按鈕的位置和主次布局設(shè)計(jì)；
按鈕狀態(tài)的設(shè)計(jì)，不同的狀態(tài)操作都要考慮，默認(rèn)置灰和高亮的條件，按鈕置灰的意義何在？
按鈕提交反饋，點(diǎn)擊操作要給出響應(yīng)或反饋。
驗(yàn)證碼的格式，字母、數(shù)字、字符等，一般為數(shù)字4位或者6位；
驗(yàn)證碼的有效時(shí)間，根據(jù)不同的產(chǎn)品設(shè)計(jì)不同的有效時(shí)間，在有效時(shí)間內(nèi)的驗(yàn)證碼操作需要給出明確的反饋；
驗(yàn)證碼的獲取次數(shù)上限，技術(shù)限制和產(chǎn)品設(shè)s計(jì)限制同步，避免被無限制獲取；
驗(yàn)證碼獲取時(shí)間，一般為第三方發(fā)送，但時(shí)間最好限定在5秒內(nèi)讓用戶獲取到
驗(yàn)證碼是怎么觸發(fā)得到的？為什么有些設(shè)計(jì)為點(diǎn)擊那妞頁面跳轉(zhuǎn)時(shí)獲取，有些頁面跳轉(zhuǎn)后再次點(diǎn)擊才能獲?。繛槭裁从胁煌?/p>
觸發(fā)后倒計(jì)時(shí)狀態(tài)有何變化？重新獲取驗(yàn)證碼后，原驗(yàn)證碼如何處理？
短時(shí)間內(nèi)多次獲取驗(yàn)證碼是否還要給用戶發(fā)送驗(yàn)證碼？還是提示驗(yàn)證碼已發(fā)送請(qǐng)輸入？
在注冊(cè)、找回密碼、第三方登錄等操作流程中，返回時(shí)需要特別注意點(diǎn)擊返回后的操作提示；比如注冊(cè)手機(jī)的修改，驗(yàn)證碼提交后設(shè)置密碼等。
點(diǎn)擊返回時(shí)，干擾了正常流程的操作一般需要強(qiáng)提示，提示彈窗注意文案和按鈕文字設(shè)計(jì)
點(diǎn)擊返回后，當(dāng)前頁面和目標(biāo)頁面狀態(tài)是否變化？例如手機(jī)號(hào)碼是置空還是顯示已輸入的手機(jī)號(hào)碼？
瀏覽應(yīng)用過程中進(jìn)入登錄頁面，登錄頁面是否需要有返回按鈕？
登錄注冊(cè)的設(shè)計(jì)涉及到很多方面，是最常見也是最容易被設(shè)計(jì)者忽視的地方。每一個(gè)元素的設(shè)計(jì)都要獨(dú)立思考，不能照搬全抄，也不能異想天開，需要提前理解和思考，多想幾個(gè)為什么，多問自己幾個(gè)為什么？而在實(shí)際設(shè)計(jì)的過程中，需要重點(diǎn)考慮實(shí)際的應(yīng)用場(chǎng)景。
本文由 @一月的肖邦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
個(gè)合格的注冊(cè)登錄頁面，應(yīng)該是具有清晰的操作流程，良好的交互細(xì)節(jié)和美觀的視覺設(shè)計(jì)。
移動(dòng)互聯(lián)網(wǎng)盛行下，基本所有APP都會(huì)有注冊(cè)登錄功能，它不僅能讓用戶扭頭就走，也能讓產(chǎn)品獲得新用戶的芳心。
一個(gè)合格的注冊(cè)登錄頁面，應(yīng)該是具有清晰的操作流程，良好的交互細(xì)節(jié)和美觀的視覺設(shè)計(jì)。
1、大部分免費(fèi)使用
2、一般功能都比較單一，不會(huì)記錄用戶的歷史行為，打開即用。
如：小工具較多、手電筒、指南針、計(jì)算器…
特征：工具類型產(chǎn)品盈利模式主要是靠廣告盈利。
1、渴望用戶的信息，對(duì)用戶身份信息敏感
2、對(duì)用戶賬號(hào)安全有保護(hù)，注重用戶的數(shù)據(jù)保護(hù)
如：社交類app、運(yùn)動(dòng)健身類、招聘類…
特征：這類產(chǎn)品的特質(zhì)（功能、服務(wù)）強(qiáng)烈的吸引著用戶，用戶非常愿意使用此類用戶。
1、靠?jī)?nèi)容與產(chǎn)品支撐，通過內(nèi)容與產(chǎn)品的優(yōu)勢(shì)
2、吸引用戶，促使用戶轉(zhuǎn)化
如：電商類、新聞?lì)?、知識(shí)類…
特征：
1、這類產(chǎn)品的特質(zhì)（功能、服務(wù)）并未強(qiáng)烈的吸引著用戶，需要用戶體驗(yàn)
2、發(fā)展期、初創(chuàng)期的產(chǎn)品需要多的用戶數(shù)量，所以不會(huì)在登錄注冊(cè)時(shí)強(qiáng)制執(zhí)行，給用戶帶來困擾。
默認(rèn)優(yōu)先“登錄頁”還是“注冊(cè)頁”呢？
1、可體驗(yàn)全部功能，直接進(jìn)入產(chǎn)品核?區(qū)域。
2、可獲取用戶信息，個(gè)性化推薦
常用于社交或定制化較強(qiáng)的APP，例如：QQ，微信，抖音，keep，?紅書.... 缺點(diǎn)：門檻較高，還沒看到整個(gè)應(yīng)用的全貌就要填寫個(gè)人 信息，考驗(yàn)?戶耐心。
優(yōu)點(diǎn)：
1 、所提供的內(nèi)容和功能，需建立在?戶基本信息之上
2、 產(chǎn)品初期成?長(zhǎng)階段，需通過強(qiáng)化注冊(cè)?口提高新增?戶量
適用場(chǎng)景：
1、前期在web端積累大量用戶，轉(zhuǎn)移到移動(dòng)端時(shí)；
2、產(chǎn)品發(fā)展穩(wěn)定期，已擁有大量的用戶基礎(chǔ)且新增用戶增長(zhǎng)較為緩慢時(shí)。
優(yōu)點(diǎn)：方便老用戶，進(jìn)入應(yīng)用效率較高
缺點(diǎn)：通常情況下，用戶會(huì)選擇下方的第三方一鍵登錄，如果后期平臺(tái)需要用戶提交個(gè)人信息來享用更多功能時(shí)，需要謹(jǐn)慎引導(dǎo)否則引起用戶反感
優(yōu)點(diǎn)： 方便快捷，轉(zhuǎn)化率高
淺色背景
1、簡(jiǎn)化了背景的視覺，突顯賬號(hào)區(qū)域的內(nèi)容
2、聚焦注冊(cè)/登錄的信息錄入，提高轉(zhuǎn)化
品牌色背景
突出品牌信息，加深用戶對(duì)品牌的認(rèn)知，樹立品牌在用戶心中的印象。
圖片視頻背景
給用戶營(yíng)造一種產(chǎn)品氛圍，是情感化設(shè)計(jì)的一種，應(yīng)景的圖片提前讓用戶產(chǎn)生代入感，促使用戶融入到產(chǎn)品中。
品牌元素引導(dǎo)
目的是為了進(jìn)一步強(qiáng)大用戶對(duì)品牌的認(rèn)知，讓用戶熟悉產(chǎn)品，了解產(chǎn)品、對(duì)產(chǎn)品產(chǎn)生足夠的印象，擴(kuò)大品牌效應(yīng)。
當(dāng)以品牌名或LOGO體現(xiàn)的時(shí)候，背景的設(shè)計(jì)一般會(huì)弱化。
文案引導(dǎo)
更有親和力，與用戶對(duì)話，同時(shí)更加聚焦每一步操作任務(wù)！
插畫引導(dǎo)
1、使用與產(chǎn)品氣質(zhì)一致的插畫，可以強(qiáng)化品牌感
2、同時(shí)更具有趣味性，也能讓用戶感受到產(chǎn)品設(shè)計(jì)的態(tài)度。
第三方快捷登錄
以增加用戶量為主要目的時(shí)，可采用快捷登錄方式，它給用戶提供了一種更為便捷的選擇方式，無形中減少了用戶的選擇負(fù)擔(dān)。
信息輸入表單
以留存用戶信息為目的時(shí)，讓用戶通過輸入自己的賬號(hào)、密碼、手機(jī)號(hào)碼、驗(yàn)證碼等方式完成的登錄注冊(cè)操作。
1、默認(rèn)狀態(tài)（input&Btn）
2、激活狀態(tài)（input）
3、輸入狀態(tài)（input&Btn）
4、校驗(yàn)報(bào)錯(cuò)（前/后端校驗(yàn)）
5、清除方式
6、密碼可/不可見
7、驗(yàn)證碼讀秒/獲取
設(shè)計(jì)方式：
1、明確注冊(cè)/登錄的功能定位
2、參照操作邏輯使用
Bilibili注冊(cè)登錄定位為一個(gè)獨(dú)立模塊，該模塊高于其他模塊。
如Bilibili：
感謝您耐心的讀完，真心希望你能獲得新知哦～
相關(guān)推薦：
幫你全面掌握投影設(shè)計(jì)
UI底部標(biāo)簽欄設(shè)計(jì)總結(jié)
UI設(shè)計(jì)師必看，作品集制作注意要點(diǎn)
怎么做好彈框設(shè)計(jì)？有哪些注意事項(xiàng)？
為你全面分析移動(dòng)端APP搜索框應(yīng)該怎樣設(shè)計(jì)
天的主題是和注冊(cè)登錄相關(guān)的內(nèi)容，相對(duì)比較簡(jiǎn)單，大家應(yīng)該都很熟悉。
注冊(cè)登錄一直是應(yīng)用中必不可少的一環(huán)，用戶打開應(yīng)用可能第一步就是登錄頁面，這相當(dāng)于一款應(yīng)用的臉面，也是用戶使用產(chǎn)品的源頭。當(dāng)然也是因?yàn)椴怀１挥玫剿愿钊菀妆缓鲆暎鳛橐豁?xiàng)基礎(chǔ)功能，使用場(chǎng)景一般是用戶初次使用應(yīng)用或者退出登錄，又或是大版本更新和登錄過期才會(huì)使用到。
注冊(cè)登錄的意義就在于給用戶獨(dú)有的個(gè)人中心，包括數(shù)據(jù)的同步，或是用戶注冊(cè)后會(huì)通過用戶已完善的資料進(jìn)行相關(guān)的內(nèi)容推薦。
登錄相對(duì)而言屬于高頻次的操作，注冊(cè)、修改密碼等屬于相對(duì)低頻次的操作，但是他們都會(huì)關(guān)聯(lián)到產(chǎn)品內(nèi)的個(gè)人資料和設(shè)置模塊。幾乎所有的社交應(yīng)用都是需要注冊(cè)登錄的，用戶擁有了個(gè)人賬號(hào)才能繼續(xù)使用產(chǎn)品。
當(dāng)然也有一些系統(tǒng)的應(yīng)用是不需要注冊(cè)登錄就可以使用的，比如：系統(tǒng)自帶的計(jì)算器、日歷、天氣等或是一些第三方的輕應(yīng)用，這里就不多贅述了，下面主要還是說說需要用到注冊(cè)登錄功能的情況。
還是先來看一下整體結(jié)構(gòu)：
（以下圖片來源于應(yīng)用截圖，僅作為學(xué)習(xí)交流使用）
這種方式比較少但是無疑是最快捷的方式，相信大家平時(shí)應(yīng)該用這種方式也比較多，因?yàn)榭梢员苊馐褂檬謾C(jī)注冊(cè)帶來的繁瑣步驟，可以節(jié)約很多時(shí)間。
你在第三方應(yīng)用中進(jìn)行授權(quán)后產(chǎn)品會(huì)直接調(diào)用接口，生成ID登錄后，你的頭像、昵稱等個(gè)人信息甚至可能同時(shí)會(huì)獲取你的好友列表，讓你知道還有哪些好友也在使用產(chǎn)品，可以有效地減少對(duì)產(chǎn)品的陌生感，同時(shí)也便于應(yīng)用在第三方中進(jìn)行分享。
當(dāng)然這種方式對(duì)產(chǎn)品也很有利，因?yàn)橄嘈藕芏嘤脩粼诓涣私猱a(chǎn)品的情況下，用戶可能只是想初步了解一下產(chǎn)品，但是又不想進(jìn)行手機(jī)注冊(cè)那么麻煩，所以就直接使用第三方進(jìn)行注冊(cè)吧，待進(jìn)入應(yīng)用初步使用了解后，再通過產(chǎn)品的用戶引導(dǎo)（比如：紅點(diǎn)標(biāo)記或是局部引導(dǎo)等）功能再進(jìn)行手機(jī)號(hào)/郵箱/微信/微博等賬號(hào)的綁定，這樣做對(duì)新用戶的產(chǎn)生有積極作用。
我遇到過當(dāng)已經(jīng)使用了第三方應(yīng)用注冊(cè)登錄了之后，會(huì)立即出現(xiàn)讓用戶綁定手機(jī)號(hào)的頁面，這樣做是想快速產(chǎn)生新用戶，出發(fā)點(diǎn)是好的，但是我覺得用戶在不了解產(chǎn)品的情況下，綁定手機(jī)號(hào)的可能性很低。
所以最好可以在綁定手機(jī)號(hào)頁面有“跳過”功能，給用戶選擇的余地，不要強(qiáng)制用戶，待初步了解產(chǎn)品后再通過引導(dǎo)進(jìn)行綁定，這樣做最佳。
使用手機(jī)號(hào)獲取驗(yàn)證碼是目前最常用的注冊(cè)登錄方式，這種方式的優(yōu)勢(shì)不必多說，相信大家都很熟悉流程，通過發(fā)送短信獲取驗(yàn)證碼在60-90秒內(nèi)進(jìn)行注冊(cè)登錄，這么做是為了確認(rèn)用戶擁有該手機(jī)號(hào)的使用權(quán)。手機(jī)號(hào)+密碼是用戶常用的方式，而手機(jī)號(hào)+驗(yàn)證碼是比較簡(jiǎn)便的方式。
這里注意一點(diǎn)的是在輸入手機(jī)號(hào)后，為了讓用戶查看是否輸入正確，建議手機(jī)號(hào)顯示樣式為3-4-4模式（比如：156 5555 5555），這些都是細(xì)微之處，雖然無關(guān)大雅，但是可以看出一個(gè)產(chǎn)品的用心之處，比如：下圖可以對(duì)比一下，明顯圖二更優(yōu)。
手機(jī)號(hào)也是商家進(jìn)行用戶維護(hù)的有效手段，畢竟手機(jī)都是隨身攜帶，可以在節(jié)假日發(fā)送祝福或是促銷短信，也可以在你長(zhǎng)期未使用產(chǎn)品，進(jìn)行短信提示，避免你將產(chǎn)品遺忘，但是過度的短信轟炸則會(huì)讓用戶感到反感。
另外使用手機(jī)號(hào)注冊(cè)登錄，需要做一個(gè)判斷，是否是第一次登錄，是的話就跳轉(zhuǎn)引導(dǎo)頁，不是的話就跳轉(zhuǎn)至首頁。
這里插一句題外話，你們有沒有遇到過在已經(jīng)注冊(cè)成功后，但是還需要重新輸入賬號(hào)密碼登錄的情況，其實(shí)這種做法個(gè)人覺得是比較多余的，可能2次輸入賬號(hào)密碼可以加強(qiáng)用戶的記憶。但是可能很多人用手機(jī)號(hào)注冊(cè)都是用的一個(gè)同密碼，因?yàn)楝F(xiàn)在的應(yīng)用可選擇的余地實(shí)在是太多了，如果每個(gè)應(yīng)用都使用不同的密碼可能很難記得住。
這種樣式是最常見的，也是上面兩種樣式的結(jié)合，這種樣式給用戶留有選擇的余地，自愿使用手機(jī)號(hào)或是第三方。但是一般這樣的組合方式多數(shù)是希望用戶使用手機(jī)號(hào)注冊(cè)，所以手機(jī)注冊(cè)登錄比較突出，第三方注冊(cè)會(huì)置于頁面底部，相對(duì)弱化。
但是還有一類是希望用戶使用第三方登錄，弱化手機(jī)號(hào)注冊(cè)登錄的情況。BAT旗下的眾多應(yīng)用，會(huì)使用一個(gè)賬號(hào)或是進(jìn)行賬號(hào)關(guān)聯(lián)，比如：阿里旗下的應(yīng)用閑魚、菜鳥裹裹等，登錄時(shí)為了用戶數(shù)據(jù)之間連接，會(huì)推薦用戶使用淘寶賬號(hào)進(jìn)行登錄，從而弱化了手機(jī)號(hào)注冊(cè)登錄，這是出于產(chǎn)品屬性或是戰(zhàn)略需求考慮，無可厚非。
使用郵箱進(jìn)行注冊(cè)登錄也是比較常用的方式，多數(shù)用于pc端，郵箱容易記憶，便于頻繁使用的產(chǎn)品，注冊(cè)后郵箱會(huì)收到驗(yàn)證鏈接，驗(yàn)證成功后會(huì)自動(dòng)跳轉(zhuǎn)進(jìn)入該網(wǎng)頁首頁。因?yàn)閣eb端屏幕較大，還是和移動(dòng)端有點(diǎn)差別，需要填寫的表單可能也會(huì)比較多，關(guān)于表單的設(shè)計(jì)可以參照我早期的文章：《進(jìn)行表單設(shè)計(jì)需要注意這十點(diǎn)》
當(dāng)然移動(dòng)端也有使用郵箱注冊(cè)的，可能是國(guó)外的應(yīng)用居多，比如：facebook、twitter、dribbble…或是國(guó)內(nèi)的應(yīng)用同時(shí)擁有網(wǎng)頁和移動(dòng)端，可以將用戶數(shù)據(jù)進(jìn)行同步。
這種方式也很多見，一般多為閱讀類、游戲類或是電商類產(chǎn)品，用戶多為游客狀態(tài)，可能只是進(jìn)來逛逛，可能暫時(shí)還沒有使用到添加、收藏、關(guān)注、評(píng)論、購(gòu)買等功能，如果使用這些功能就必須要進(jìn)行注冊(cè)登錄了，注意在完成注冊(cè)登錄后記得頁面要回到之前瀏覽的頁面，而不是回到首頁。
比較少見的一種方式，通過編輯短信發(fā)送至XXX后，可獲取賬號(hào)和密碼。這種方式屬于早期的一種方式，現(xiàn)在基本用不到了，就不多說了。
iOS 11更新帶動(dòng)了新的設(shè)計(jì)趨勢(shì)，大標(biāo)題+留白被廣泛使用，注冊(cè)登錄也不例外，現(xiàn)在很多產(chǎn)品都使用相對(duì)簡(jiǎn)潔的設(shè)計(jì)（下面左圖），僅使用大標(biāo)題和必要的線框和提示語，讓用戶只聚焦注冊(cè)登錄本身，去除多余的干擾元素，可以節(jié)省用戶的時(shí)間。
相對(duì)早期的設(shè)計(jì)手法是在頁面中加入logo（下面右圖），好處是可以進(jìn)一步強(qiáng)化用戶對(duì)產(chǎn)品品牌的記憶點(diǎn)。兩種方式各有優(yōu)點(diǎn)，沒有對(duì)錯(cuò)，產(chǎn)品可以酌情使用。
現(xiàn)在有很多應(yīng)用是采用分步驟進(jìn)行注冊(cè)的，比如先輸入手機(jī)號(hào)，點(diǎn)擊“下一步”的同時(shí)，系統(tǒng)查詢?cè)撌謾C(jī)號(hào)是否可以注冊(cè)，通過的話則進(jìn)入輸入驗(yàn)證碼頁面，這樣做的好處是可以及時(shí)反饋給用戶，避免了用戶在輸完手機(jī)號(hào)和驗(yàn)證碼之后出現(xiàn)錯(cuò)誤toast的情況。
需要注意的是步驟不宜過多，建議3步以內(nèi)，如果你的產(chǎn)品對(duì)用戶來說不是非用不可，可能會(huì)有很多用戶會(huì)放棄注冊(cè)。
這種方式和分步驟注冊(cè)類似，將注冊(cè)和登錄合到一起，不管你是否有注冊(cè)，只要輸入手機(jī)號(hào)再填寫驗(yàn)證碼，成功后即可使用產(chǎn)品，比如：小黃車就是使用這一方式。
輸入框提示語是必不可少的，措詞需要簡(jiǎn)潔，大部分的做法是點(diǎn)擊輸入框后提示語自動(dòng)消失，這樣做也是可以，畢竟需要填寫的選項(xiàng)不是很多，用戶不易忘記。當(dāng)然更好的做法是保留提示語，比如：星巴克的登錄頁面，在點(diǎn)擊輸入框后，提示語會(huì)上移，依舊保留，只是這樣的開發(fā)成本可能會(huì)稍大一點(diǎn)。
忘記密碼的功能一般都是放在登錄頁面，因?yàn)閮烧哂休^強(qiáng)的關(guān)聯(lián)性。使用忘記密碼功能一般是通過手機(jī)號(hào)發(fā)送驗(yàn)證碼，驗(yàn)證通過后再進(jìn)行新密碼的設(shè)置。如果起初是用郵箱注冊(cè)登錄的話，就要到郵箱中進(jìn)行驗(yàn)證，驗(yàn)證通過后再進(jìn)行新密碼的設(shè)置。
這里的toast提示一般用于有錯(cuò)誤發(fā)生的情況下，比如：賬號(hào)不存在、賬號(hào)已被占用、密碼錯(cuò)誤、驗(yàn)證碼錯(cuò)誤等，及時(shí)的反饋給用戶注冊(cè)登錄不成功的地方在哪里，以免用戶摸不著頭腦，憤而離開應(yīng)用。
出于安全考慮，有些應(yīng)用會(huì)讓用戶輸入圖形驗(yàn)證碼、字符驗(yàn)證碼、旋轉(zhuǎn)圖片、滑動(dòng)驗(yàn)證等方式，目的是確認(rèn)是人為注冊(cè)而非軟件惡意注冊(cè)。
用戶協(xié)議看似非常的不起眼，用戶也很少會(huì)去點(diǎn)擊查看，出現(xiàn)在注冊(cè)頁面的情況居多。早期一般是默認(rèn)被選中狀態(tài)或是點(diǎn)擊注冊(cè)即視為同意協(xié)議條款（圖一），用戶填完賬戶密碼之后點(diǎn)擊注冊(cè)就完成了。
但是前去年支付寶默認(rèn)用戶協(xié)議被選中導(dǎo)致的一系列新聞提醒我們，用戶協(xié)議最好需要用戶自己去點(diǎn)擊確認(rèn)，現(xiàn)在很多應(yīng)用也開始這么做，在沒有勾選用戶協(xié)議之前，“注冊(cè)”button是無法點(diǎn)擊的（圖二）。
出于使用場(chǎng)景考慮，比如：在戶外或是注冊(cè)登錄時(shí)身邊有人，為了有效保護(hù)用戶的密碼隱私，可在輸入密碼時(shí)關(guān)閉眼睛icon，只顯示密碼點(diǎn)。開啟眼睛icon時(shí)是為了讓用戶清楚的看見自己的密碼，避免密碼輸入錯(cuò)誤。
這個(gè)功能是給用戶在注冊(cè)登錄頁面輸入有誤或是切換賬戶時(shí)使用，可以有效減少用戶的點(diǎn)擊次數(shù)，提升用戶體驗(yàn)。
在用戶曾登錄過的情況下，應(yīng)該保留用戶的賬戶名數(shù)據(jù)，這樣用戶重新登錄時(shí)只需填寫密碼或驗(yàn)證碼即可。當(dāng)然，用戶如果想重新輸入賬戶名，一鍵刪除數(shù)據(jù)的功能也顯得很有必要。
還有一點(diǎn)是多賬戶之間的登錄切換，在登錄時(shí)可以選擇多個(gè)賬號(hào)，這個(gè)功能在to C類應(yīng)用比較少，一般是to B類應(yīng)用可能會(huì)用到，因?yàn)槠髽I(yè)可能會(huì)擁有多個(gè)賬號(hào)，這個(gè)功能就會(huì)顯得很有必要。
這種針對(duì)使用郵箱注冊(cè)，比如說在用戶填寫賬戶名輸入@的同時(shí)，關(guān)聯(lián)出@qq.com、@163.com等，可以減少用戶的輸入，體驗(yàn)也會(huì)更好。
在注冊(cè)登錄時(shí)也會(huì)有一些比較多余的操作，比如：二次確認(rèn)密碼、完善個(gè)人資料等，這些操作最好是放置在個(gè)人中心或是設(shè)置里讓用戶自行填寫，在注冊(cè)登錄頁面只保留必須填寫的內(nèi)容。
綜上所述，注冊(cè)登錄看似是很簡(jiǎn)單的頁面布局，并且容易忽視，但是它的地位是不可忽視的，其中的交互方式和細(xì)微之處還需要我們多多考慮，不同的產(chǎn)品需要根據(jù)自己的屬性來選擇符合自己的方式。
如有遺漏，歡迎大家留言補(bǔ)充，一起交流~
作者：EasonZhang，公眾號(hào)：Eason張UED（ID：EasonZhangUED）
本文由 @EasonZhang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
