2019-12-2 資深UI設計者
看似簡單的登錄框，暗藏了多少值得推敲的用戶體驗？這10個細節，就是你和設計高手的區別。
你不應該讓你的用戶到處尋找登錄區域。他們找的時間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。
一個很好的例子就是 Gmail 的登錄頁面。
你可以確切地知道你需要在何處登錄，以及要在輸入區域輸入什么內容，上面的例子，如果你沒有 Gmail 帳戶，它允許你通過單擊「創建帳戶」來輕松地創建一個帳戶。
好的用戶體驗是使你的登錄區域明顯，使你的用戶盡可能容易地進行登錄操作。
第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產品創建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。
通過允許用戶使用用戶的第三方賬戶中的信息來創建一個賬戶，可以解決所有關于這些問題。
讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式：
甚至還有更方便的注冊登錄方式，手機短信驗證碼在注冊的同時登錄：
一些產品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗，但是產品的角度去思考就不一樣了，產品為了獲取用戶更多的信息，則需要這樣來設計流程。
這種設計流程該不該用，這需要在產品和用戶之間進行權衡，第三方與手機短信驗證碼登錄，在提高用戶體驗的同時，可以提高用戶的效率，使界面更加直觀。
因為環境不同，在中國很多網頁端的網站，第三方登錄很的產品很少。
例如，如果你的 QQ 沒有在電腦端登錄，因為即使選擇第三方 QQ 登錄，你也要拿出手機—打開 QQ —打開掃一掃，進行掃碼登錄等一些列的操作。
又或者，當你想要登錄 behance，只要瀏覽器有記錄之前的第三登錄，點擊第三方登錄即可直接進入該網站，甚至不用注冊。
可以看下面的騰訊網與 behance 的網頁登錄：
好的登錄體驗應該只有賬號、密碼兩個輸入字段，或者手機號碼、短信驗證碼兩個字段，以及使用第三方登錄的選項。在簡單、的同時，并為用戶提供了很好的體驗。
如果一個用戶來到你的網站進行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應該去哪里。
我們通過使用登錄字段與注冊字段的區別來幫助他們，讓我們看看下面的 dribbble 注冊界面：
創建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字。看到上面「sign in 」字段了嗎？
dribbble 使用了不同的顏色、布局去區分注冊按鈕與登錄的入口，這樣更加清晰明了。
同時可以看看 dribbble 的主頁面，他們會把 sign in 與 sign up 的進行區分，在 sign up 加上微邊框，讓用戶能更快區分兩者的不同。
讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法，為用戶省去記錄你產品的用戶名的麻煩，應該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。
ins 讓用戶有機會用他們的電話號碼或電子郵件地址登錄。
反例：
盡可能讓用戶同時用手機號碼或郵件地址來登錄，因為用戶可能會忘記他們用來登錄你的產品的電子郵件地址，所以這時，用戶能使用手機號碼進行登錄。
給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當輸錯的同時，可進行對錯的字段進行糾正，不用全部刪掉重新來。
讓我們來下面的脈脈和片刻：
還有什么比再次到你之前登錄的網站或 app，卻發現你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?
當你的用戶返回到你的網站時，請確保他們已經登錄了，或者為了方便登錄，提前為他們預先填充賬戶和密碼等字段。
谷歌在這方面做得很棒。每當用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時，他們的登錄信息都會被記住，使登錄過程更加簡單。
盟友銀行允許用戶勾選 「保存用戶名」 復選框，允許網站在用戶到達網站時默認記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據自己產品與用戶需求來進行把控。
有時你的用戶會忘記他們的登錄信息。當這種情況發生時，盡量讓恢復過程盡可能的輕松。
公眾號的賬戶密碼輸入欄有記住密碼復選框，以防用戶忘記他們的用戶名和密碼，不用每次進來都輸入賬戶密碼進行登錄。
印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。
這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。
如果用戶忘記了他們的登錄信息，要讓他們清楚應該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產品。
我們都有過這樣的經歷：令人沮喪地輸入和重新輸入你的密碼都無濟于事，結果卻發現你一直開著大寫鎖定鍵。
可以通過警告你的用戶，防止這種情況發生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。
讓你的移動用戶使用無密碼登錄，現在很多特別是金融類 app，都可以讓用戶進行指紋登錄，因為不像其他 app 一樣可以一直保持用戶已登錄狀態，在保障安全的同時能更便捷。
以上的設計技巧與案例希望能幫助各位讀者提高產品的用戶體驗。
歡迎關注作者的微信公眾號：「設計探」