看似簡單的登錄框，暗藏了多少值得推敲的用戶體驗？這10個細節(jié)，就是你和設(shè)計高手的區(qū)別。

技巧1：更明顯

你不應(yīng)該讓你的用戶到處尋找登錄區(qū)域。他們找的時間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。

一個很好的例子就是 Gmail 的登錄頁面。

你可以確切地知道你需要在何處登錄，以及要在輸入?yún)^(qū)域輸入什么內(nèi)容，上面的例子，如果你沒有 Gmail 帳戶，它允許你通過單擊「創(chuàng)建帳戶」來輕松地創(chuàng)建一個帳戶。

好的用戶體驗是使你的登錄區(qū)域明顯，使你的用戶盡可能容易地進行登錄操作。

技巧2：使用第三方登錄

第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產(chǎn)品創(chuàng)建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。

通過允許用戶使用用戶的第三方賬戶中的信息來創(chuàng)建一個賬戶，可以解決所有關(guān)于這些問題。

讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式：

甚至還有更方便的注冊登錄方式，手機短信驗證碼在注冊的同時登錄：

一些產(chǎn)品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗，但是產(chǎn)品的角度去思考就不一樣了，產(chǎn)品為了獲取用戶更多的信息，則需要這樣來設(shè)計流程。

這種設(shè)計流程該不該用，這需要在產(chǎn)品和用戶之間進行權(quán)衡，第三方與手機短信驗證碼登錄，在提高用戶體驗的同時，可以提高用戶的效率，使界面更加直觀。

技巧3：更簡單

因為環(huán)境不同，在中國很多網(wǎng)頁端的網(wǎng)站，第三方登錄很的產(chǎn)品很少。

例如，如果你的 QQ 沒有在電腦端登錄，因為即使選擇第三方 QQ 登錄，你也要拿出手機—打開 QQ —打開掃一掃，進行掃碼登錄等一些列的操作。

又或者，當你想要登錄 behance，只要瀏覽器有記錄之前的第三登錄，點擊第三方登錄即可直接進入該網(wǎng)站，甚至不用注冊。

可以看下面的騰訊網(wǎng)與 behance 的網(wǎng)頁登錄：

好的登錄體驗應(yīng)該只有賬號、密碼兩個輸入字段，或者手機號碼、短信驗證碼兩個字段，以及使用第三方登錄的選項。在簡單、的同時，并為用戶提供了很好的體驗。

技巧4：區(qū)分注冊與登錄

如果一個用戶來到你的網(wǎng)站進行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應(yīng)該去哪里。

我們通過使用登錄字段與注冊字段的區(qū)別來幫助他們，讓我們看看下面的 dribbble 注冊界面：

創(chuàng)建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字。看到上面「sign in 」字段了嗎？

dribbble 使用了不同的顏色、布局去區(qū)分注冊按鈕與登錄的入口，這樣更加清晰明了。

同時可以看看 dribbble 的主頁面，他們會把 sign in 與 sign up 的進行區(qū)分，在 sign up 加上微邊框，讓用戶能更快區(qū)分兩者的不同。

技巧5：跳過用戶名

讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法，為用戶省去記錄你產(chǎn)品的用戶名的麻煩，應(yīng)該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。

ins 讓用戶有機會用他們的電話號碼或電子郵件地址登錄。

反例：

盡可能讓用戶同時用手機號碼或郵件地址來登錄，因為用戶可能會忘記他們用來登錄你的產(chǎn)品的電子郵件地址，所以這時，用戶能使用手機號碼進行登錄。

技巧6：密碼可顯示

給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當輸錯的同時，可進行對錯的字段進行糾正，不用全部刪掉重新來。

讓我們來下面的脈脈和片刻：

技巧7：記住用戶信息

還有什么比再次到你之前登錄的網(wǎng)站或 app，卻發(fā)現(xiàn)你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?

當你的用戶返回到你的網(wǎng)站時，請確保他們已經(jīng)登錄了，或者為了方便登錄，提前為他們預(yù)先填充賬戶和密碼等字段。

谷歌在這方面做得很棒。每當用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時，他們的登錄信息都會被記住，使登錄過程更加簡單。

盟友銀行允許用戶勾選 「保存用戶名」 復(fù)選框，允許網(wǎng)站在用戶到達網(wǎng)站時默認記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據(jù)自己產(chǎn)品與用戶需求來進行把控。

技巧8：輕松恢復(fù)密碼

有時你的用戶會忘記他們的登錄信息。當這種情況發(fā)生時，盡量讓恢復(fù)過程盡可能的輕松。

公眾號的賬戶密碼輸入欄有記住密碼復(fù)選框，以防用戶忘記他們的用戶名和密碼，不用每次進來都輸入賬戶密碼進行登錄。

印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。

這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。

如果用戶忘記了他們的登錄信息，要讓他們清楚應(yīng)該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產(chǎn)品。

技巧9：讓用戶知道大寫鎖定已開啟

我們都有過這樣的經(jīng)歷：令人沮喪地輸入和重新輸入你的密碼都無濟于事，結(jié)果卻發(fā)現(xiàn)你一直開著大寫鎖定鍵。

可以通過警告你的用戶，防止這種情況發(fā)生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。

技巧10：無密碼登錄

讓你的移動用戶使用無密碼登錄，現(xiàn)在很多特別是金融類 app，都可以讓用戶進行指紋登錄，因為不像其他 app 一樣可以一直保持用戶已登錄狀態(tài)，在保障安全的同時能更便捷。

以上的設(shè)計技巧與案例希望能幫助各位讀者提高產(chǎn)品的用戶體驗。

歡迎關(guān)注作者的微信公眾號：「設(shè)計探」