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