如何讓你的登錄頁面留住用戶？

網站留住用戶一個重要的特徵就是用戶在網站上註冊了賬號，這一點很重要。有一些網站為了能有更多的註冊用戶，不斷的做出「誘惑」程序誘導用戶註冊，這在一些網頁遊戲網站中很常見，誘導用戶註冊算是一種營銷推廣行為，但是，網頁在註冊頁面的設計上一定要簡潔。

註冊流程：

對於一個不涉及到支付的APP，註冊頁面上僅需手機號-驗證碼-密碼（密碼提供可視化輸入）這幾個流程就夠了。現在非常流行的第三方授權登錄、使用郵箱註冊、使用手機號註冊。

第三方授權登錄：優勢是省去用戶註冊這一流程，讓用戶可以在第三方授權下迅速登錄，非常短時間內就可以瀏覽內容，所需付出的時間和精力都大大降低，非常友好。劣勢是用戶不是你的用戶，是第三方的用戶，流量可能只是暫時的，而且轉化起來比較難。如果想要增加用戶粘性，可以在後期進行有針對性的轉化—給用戶一系列個性化設置、綁定手機號的操作流程。

最最不可取的是在第三方登錄後又粗暴的讓用戶二次綁定！！！會流失很大一部分用戶！！！

對於用郵箱註冊還是用手機號註冊，取決於用戶的使用場景：如果是在移動設備上最好用手機號註冊，如果是在web端則建議使用郵箱註冊。

GIF

提示文字：

信息欄位是你必須要做的（即輸入框中的提示語，如：輸入手機號碼、輸入驗證碼）。

為了使界面簡潔，現在很多的登錄頁面都選擇取消框外的提示信息而採用框內用淺灰的的文字提示。如果採用這種設計方式，當用戶點擊輸入框還沒有寫內容時，提示信息不該消失，因為用戶很有可能下一秒就會忘記自己要填什麼，當用戶已經輸入第一個字後再消失。

千萬不要相信用戶的記憶。

--不會代碼的UI不是一個好交互--

這種設計的前端實現方式為：HTML 5 標籤中加入placeholder屬性。例：

用戶登錄：

最好採用獎勵提示的方法：比如下次登錄的時候保留上次的賬號（密碼看情況保留），或留有7天內自動登錄的選項。如果每次進入都要重新輸入用戶名和密碼，這無疑給用戶增加干擾，對於用戶來說干擾越少，用戶就更輕易的可以登錄。

GIF

密碼展示：

雖然出於安全考慮用戶輸入密碼時都會用黑點代替，但這就如同盲人過河。當用戶在使用移動設備時，由於操作空間小所以需要進行多次輸入的可能性會大大增加，在多次的嘗試中，用戶就會產生焦躁心理，甚至產生沮喪和挫敗感。

--不會代碼的UI不是一個好交互--

當將標籤的type值設置為"password"時，會自動將輸入的內容變成黑點。

如果想要密碼可見的交互效果:

方法1：放兩個input，一個是password，一個是text，共同監聽用戶的輸入事件，用戶每次切換我們用JS控制兩個input的顯示與隱藏來實現此效果。JS實現點擊事件的交替操作：開始密碼是隱藏的，點擊後面的小眼睛圖標顯示密碼，也就是把password的input隱藏然後把text的input顯示出來，同時注意要把password的值傳到text裡面去。

//隱藏text block，顯示password block

function showPsw(){

var val = inputInVisible.value;//將password的值傳給text

inputVisible.value = val;

}

//隱藏password，顯示text

function hidePsw(){

var val=inputVisible.value;//將text的值傳給password

inputInVisible.value = val;

}

方法2：直接用JS將input的password屬性動態改為text屬性。

//隱藏text block，顯示password block

function hideShowPsw(){

if (demoInput.type == "password") {

demoInput.type = "text";

demo_img.src = "invisible.png";

}else {

demoInput.type = "password";

demo_img.src = "visible.png";

}

密碼錯誤：

如果當點擊登錄時提示非常籠統的「用戶名或密碼錯誤」，並沒有明確給出到底是哪裡出了問題，用戶很有可能生氣的推出應用，

解決的辦法是給出具體的提示，如「用戶名錯誤」「用戶名不存在」「密碼錯誤」等。

對於使用用戶名登錄這個問題，如果只有這一個登錄選項，是不可取的。當用戶被迫絞盡腦汁申請到系統里沒有被註冊過的用戶名後（如微博名稱、百度賬號稱），由於這個用戶名對他們沒有任何意義，過一會兒可能就忘記了。因此在讓用戶登錄時，有多種方式可供選擇才是正確的做法。

增加一個「忘記密碼」的選項。

安全：

為了避免強迫進入和暴力攻擊，許多網頁和應用在一系列的錯誤嘗試之後關閉賬戶。在鎖住賬號之前一定要告訴用戶還可以進行多少次嘗試。

驗證碼和密碼在同一個頁面提交

由於系統限制，手機號的驗證碼一旦正確提交，手機號就不能再被使用，而註冊一定要填寫密碼才算最終完成。如果中途由於網路或者技術原因造成非常規性退出，密碼還沒有填寫，下次再想註冊時就會被提示手機號已經被佔用了。所以驗證碼和密碼得在同一個頁面提交給系統，不能分成兩步。

移動端的鍵盤彈出：

英文鍵盤或者是數字鍵盤？手機號和驗證碼一定是數字鍵盤、密碼一般都是英文鍵盤，這件顯而易見的事情，有很多APP卻並不注意，導致用戶體驗並不是那麼的貼心。

不能讓彈出的鍵盤擋住登錄按鈕。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！