用戶注冊(cè)/登錄模塊實(shí)踐
前言
最近負(fù)責(zé)的網(wǎng)站項(xiàng)目正式進(jìn)入開(kāi)發(fā)階段砸西，首先面臨的當(dāng)然就是用戶登錄模塊的設(shè)計(jì)與實(shí)現(xiàn)了蒿往。說(shuō)起來(lái)自己雖然不是第一次進(jìn)行類似模塊的開(kāi)發(fā)咽块，但這次作為項(xiàng)目的負(fù)責(zé)人潮剪，突然就感覺(jué)有必要對(duì)以后交付的產(chǎn)品進(jìn)行一次深度打磨锭碳，畢竟產(chǎn)品就是咱最好的名片嘛袁稽，哈哈，以后吃飯喝粥就靠它了擒抛。那么問(wèn)題來(lái)了推汽，一個(gè)設(shè)計(jì)美觀大方补疑，功能完善，用戶體驗(yàn)舒適的登錄模塊究竟是如何實(shí)現(xiàn)的呢歹撒？我用兩個(gè)小時(shí)搜集了一些信息莲组，這一搜，卻還真搜出了個(gè)三四五六暖夭，且聽(tīng)我細(xì)細(xì)道來(lái)锹杈。
需求分析
一個(gè)操作繁瑣，設(shè)計(jì)糟糕的用戶注冊(cè)模塊迈着，往往是我們?cè)趯⒃L客轉(zhuǎn)化為注冊(cè)用戶過(guò)程中最不希望見(jiàn)到的東西首先竭望，咱們來(lái)理一理，一個(gè)完整的用戶注冊(cè)/登錄模塊究竟需要哪些功能裕菠。
用戶信息表格 (User Sign-Up Form)
用戶信息表格是網(wǎng)站收集用戶信息的最重要的入口咬清，從用戶訪問(wèn)網(wǎng)站開(kāi)始直至整個(gè)用戶行為的結(jié)束，80%以上的信息都來(lái)自用戶初次注冊(cè)時(shí)所填的表單奴潘，因此在設(shè)計(jì)該表單時(shí)旧烧，我們必須從需求上厘清信息的必要性，也即是画髓，什么信息在后續(xù)業(yè)務(wù)中至關(guān)重要掘剪，必須要求用戶填寫(xiě)（有些應(yīng)用會(huì)考慮通過(guò)后續(xù)激勵(lì)來(lái)誘導(dǎo)用戶添加信息，但顯然在注冊(cè)時(shí)完成這一步驟更加簡(jiǎn)單）雀扶，以及什么信息可以暫時(shí)忽略，等等肆汹。常見(jiàn)的用戶信息包括:
用戶名
郵箱
手機(jī)號(hào)碼
密碼
密碼確認(rèn)
手機(jī)驗(yàn)證碼確認(rèn)
等愚墓， 對(duì)于英文網(wǎng)站，F(xiàn)irst Name 和 Last Name 也是常見(jiàn)的必填選項(xiàng)昂勉。下面是一個(gè)中規(guī)中矩的注冊(cè)頁(yè)面浪册，考慮到業(yè)務(wù)需求，該頁(yè)面特別地將信息進(jìn)行了分類岗照，并通過(guò)圖標(biāo)區(qū)分開(kāi)來(lái)村象。它的設(shè)計(jì)上則是采用簡(jiǎn)單的淺背景色+樸素的灰/藍(lán)色，很多JQuery 模板插件都以這種形式出現(xiàn)攒至。
再來(lái)看看谷歌的注冊(cè)頁(yè)厚者，純白背景加無(wú)邊框的Material Design設(shè)計(jì)顯然清爽了許多，我們可以看到頁(yè)面兩邊進(jìn)行了刻意的留白迫吐，通過(guò)左邊的 Icon 和 Banner 填補(bǔ)視覺(jué)上的空缺库菲，整個(gè)頁(yè)面看起來(lái)簡(jiǎn)潔大方。但不得不吐槽的一點(diǎn)是志膀，谷歌娘要求填寫(xiě)的信息實(shí)在太多了熙宇，而且驗(yàn)證機(jī)制也不夠人性化鳖擒，果然大公司就是不一樣 :P。
講完注冊(cè)咱們?cè)僦v講登錄烫止，登錄表格嘛蒋荚，大家都知道，一個(gè)用戶名/郵箱/手機(jī)馆蠕，一個(gè)密碼期升，一個(gè)驗(yàn)證碼，完事兒荆几，但真有那么簡(jiǎn)單嘛吓妆？細(xì)心的朋友們可能會(huì)發(fā)現(xiàn)，由于現(xiàn)在大多數(shù)流行的APP都提供本地儲(chǔ)存吨铸，用戶打開(kāi)APP之后很少需要重復(fù)登錄行拢。那么顯然，當(dāng)一個(gè)用戶被引導(dǎo)到注冊(cè)頁(yè)的時(shí)候诞吱，很可能是他第一次使用這個(gè)應(yīng)用舟奠，因而作為產(chǎn)品的設(shè)計(jì)者，我們則應(yīng)把用戶對(duì)頁(yè)面布局的不熟悉而出現(xiàn)誤填操作的情況考慮進(jìn)去房维，對(duì)登錄頁(yè)和注冊(cè)頁(yè)進(jìn)行明顯的區(qū)分沼瘫。以下是一個(gè)典型的反例：
同樣的布局，配色咙俩，乃至圖標(biāo)耿戚，不仔細(xì)點(diǎn)看還真容易點(diǎn)錯(cuò)，所謂不良用戶體驗(yàn)就是這么出來(lái)的阿趁。
接下來(lái)咱們?cè)僦v講登錄信息的反饋膜蛔，當(dāng)用戶登錄失敗時(shí)，我們有必要返回相應(yīng)的原因脖阵，從而推動(dòng)用戶進(jìn)行進(jìn)一步操作皂股。 簡(jiǎn)單來(lái)說(shuō)就是，當(dāng)用戶誤填用戶名時(shí)命黔，要及時(shí)通知“該用戶名不存在”呜呐，或者“該用戶已被鎖定”，而當(dāng)密碼輸入錯(cuò)誤時(shí)悍募，則應(yīng)提示“用戶名與密碼不匹配”等等蘑辑。更進(jìn)一步地，當(dāng)提示框彈出時(shí)坠宴，我們還可以在其中加入對(duì)應(yīng)操作的鏈接以躯，引導(dǎo)用戶點(diǎn)擊跳轉(zhuǎn)進(jìn)行相應(yīng)處理。
郵件激活 （Email Activation）
在現(xiàn)代應(yīng)用中，郵件激活與綁定已經(jīng)成為非常普遍的場(chǎng)景了忧设，甚至不少應(yīng)用直接使用郵箱作為唯一用戶名刁标，那么在這方面我們可以做些什么樣的改進(jìn)呢？
首先址晕，避免用戶的重復(fù)輸入膀懈。
很多應(yīng)用喜歡在郵件欄下方添加一個(gè)確認(rèn)郵件的輸入框，這種做法本意是好的谨垃，希望藉此避免用戶誤填信息启搂，但實(shí)際上[有研究?]發(fā)現(xiàn)，用戶在遇到此類文本框時(shí)刘陶，更加傾向于使用密碼管理器或是復(fù)制黏貼解決問(wèn)題胳赌，因此在現(xiàn)代應(yīng)用設(shè)計(jì)中，我們應(yīng)盡量避免無(wú)意義的內(nèi)容匙隔，只保留一個(gè)文本框即可疑苫。
從用戶體驗(yàn)的角度出發(fā)，文本框周圍應(yīng)提供足夠的提示信息纷责。
激活郵件是否已經(jīng)發(fā)送捍掺？發(fā)送地址是什么？用戶最慢需要多長(zhǎng)時(shí)間才能收到郵件再膳？這些都是我們可以考慮加入提示的內(nèi)容挺勿，下圖為一個(gè)簡(jiǎn)單的郵件提示效果。
手機(jī)短信驗(yàn)證 （SNS）
短信驗(yàn)證與郵件驗(yàn)證的設(shè)計(jì)十分類似喂柒，一個(gè)比較好的優(yōu)化是不瓶，允許用戶指定短信的發(fā)送目的國(guó)家和地區(qū)，從而實(shí)現(xiàn)相應(yīng)的號(hào)碼表單驗(yàn)證灾杰。微信這點(diǎn)上做的很好蚊丐，丟個(gè)例子，在此不加贅述吭露。
人機(jī)測(cè)試（CAPTCHAS）
人機(jī)測(cè)試的種類可謂五花八門(mén)了吠撮，但核心的需求卻是相同的尊惰，那就是防止用戶惡意注冊(cè)讲竿。
一個(gè)優(yōu)秀的人機(jī)測(cè)試設(shè)計(jì)，是能在不影響用戶體驗(yàn)的基礎(chǔ)上弄屡，給用戶帶來(lái)一定樂(lè)趣题禀。這里羅列幾種常見(jiàn)的人機(jī)測(cè)試手段：
1.文字識(shí)別類
給出一段機(jī)器處理后的文字，以聲音或圖片的形式傳遞到客戶端膀捷，只有當(dāng)用戶輸入成功匹配信息內(nèi)容時(shí)才算通過(guò)迈嘹。這種類型人機(jī)測(cè)試有一點(diǎn)需要注意，在設(shè)計(jì)驗(yàn)證時(shí)盡量給用戶提供多種形式的接收手段，圖片秀仲，聲音融痛，短信等等，從而確保驗(yàn)證同樣適用于一些患有認(rèn)知性疾病或者視力/肢體障礙的用戶神僵。
2.問(wèn)答類
這一類人機(jī)測(cè)試主要以問(wèn)答為主雁刷，常見(jiàn)的有數(shù)學(xué)題，成語(yǔ)題保礼，填字游戲等等沛励。
3.交互類
人機(jī)測(cè)試中比較有趣的自然要屬交互類了，設(shè)計(jì)師往往會(huì)在網(wǎng)頁(yè)上設(shè)計(jì)一兩個(gè)微游戲炮障，用戶通過(guò)鼠標(biāo)/屏幕操作達(dá)成目標(biāo)目派，從而通過(guò)驗(yàn)證。常見(jiàn)的交互類人機(jī)驗(yàn)證有拖滑塊胁赢，連連看等等企蹭。
在實(shí)踐中，大家可以根據(jù)網(wǎng)頁(yè)風(fēng)格和自身需求進(jìn)行相應(yīng)選擇徘键。
第三方登錄
第三方登錄是在常規(guī)登錄基礎(chǔ)上的一種延伸手段练对，同時(shí)也方便網(wǎng)站獲取用戶的個(gè)人信息，因此往往被許多網(wǎng)站采用吹害。常見(jiàn)的第三方登錄接口有微信螟凭，QQ，網(wǎng)易郵箱它呀，新浪微博螺男，facebook, gmail等等，需要注意的是第三方登錄最好能同時(shí)出現(xiàn)在登錄頁(yè)和注冊(cè)頁(yè)纵穿，方便用戶隨時(shí)進(jìn)行選擇下隧。
