原文鏈接：https://blog.prototypr.io/ux-guide-password-reset-user-flow-bfa35a16e527

00-前言

伴隨著五花八門(mén)的網(wǎng)站和應(yīng)用而來(lái)的除了豐富的信息咨詢(xún)還有長(zhǎng)短不一形態(tài)各異的登錄密碼。就算是記性再好的人也是會(huì)有不小心忘記密碼的時(shí)侯,尤其是對(duì)于那些不常登錄的網(wǎng)站和應(yīng)用來(lái)說(shuō)。既然這一流程是無(wú)法避免的,那么作為設(shè)計(jì)師,我們應(yīng)盡可能地將這一流程設(shè)計(jì)的更加流暢,且?guī)в腥の缎?。撇開(kāi)手機(jī)短信登錄這個(gè)選項(xiàng),今天跟大家分享下一個(gè)名為NPM的網(wǎng)站的密碼重置的用戶(hù)體驗(yàn)和交互流程，希望能為還在苦于找重置密碼交互流程參考的同學(xué)帶來(lái)些幫助。

01-重置密碼頁(yè)面

打開(kāi)NPM網(wǎng)站點(diǎn)擊忘記密碼選項(xiàng)后,將自動(dòng)跳轉(zhuǎn)至重置密碼頁(yè)。不得不說(shuō)NPM網(wǎng)站的重置密碼頁(yè)相當(dāng)?shù)臉?biāo)準(zhǔn)：

• 頁(yè)面標(biāo)題清晰：重置密碼
• 按鈕文案非常明確：按鈕文案應(yīng)用「發(fā)送重置密碼至我的電子郵箱」而不是含糊的「提交」或「發(fā)送」這類(lèi)表述模糊不清的微文案。
• 多個(gè)重置密碼方式選項(xiàng)：既可以使用電子郵件又可以使用用戶(hù)名重置
• 最棒的一點(diǎn)是，在重置密碼頁(yè)面中，他有一段幫助用戶(hù)減輕心理壓力的文案：「別擔(dān)心，我們都有過(guò)這樣的經(jīng)歷」，瞬間使得頁(yè)面充滿(mǎn)人情味，而且不會(huì)對(duì)頁(yè)面造成多余的混亂。

02-電子郵件

提交郵箱地址和密碼后，系統(tǒng)將彈出頁(yè)面提示「密碼重置鏈接已發(fā)送」。

盡管說(shuō)明很明確，但可以改進(jìn)「確認(rèn)文本」。最好說(shuō)「如果存在帳戶(hù)，將發(fā)送一封包含更多說(shuō)明的電子郵件」，而不是「已發(fā)送一封電子郵件」。

這樣不保證將電子郵件一定會(huì)發(fā)送到的行為即可不公開(kāi)數(shù)據(jù)庫(kù)中是否存在這個(gè)用戶(hù)名，從而鼓勵(lì)用戶(hù)自己檢查郵箱（以防未獲得鏈接），另外添加了一道保險(xiǎn)，可以阻止惡意釣魚(yú)攻擊。

這是收到的電子郵件：

03-臨時(shí)密碼鏈接

點(diǎn)擊電子郵件中的鏈接將打開(kāi)這個(gè)頁(yè)面：

我最喜歡的是復(fù)制臨時(shí)密碼的功能。將鼠標(biāo)懸停在臨時(shí)密碼上，密碼就會(huì)被突出現(xiàn)實(shí)，然后點(diǎn)擊后就可以立即復(fù)制到剪切板：

盡管這個(gè)改進(jìn)不太重要，但是對(duì)于異常忙碌只想快點(diǎn)推進(jìn)密碼重置流程的用戶(hù)來(lái)說(shuō)，這簡(jiǎn)直是一個(gè)救星一般的功能（滿(mǎn)足了用戶(hù)的爽點(diǎn)）。因?yàn)檎嬲膹?fù)制過(guò)程實(shí)在是浪費(fèi)時(shí)間，要從頭到位框選所有字符，右鍵喚出菜單然后點(diǎn)擊“復(fù)制”按鈕，這只可能更激怒用戶(hù)。

在密碼重置頁(yè)面上點(diǎn)擊“登錄按鈕”之后，您將進(jìn)入常規(guī)的登錄頁(yè)面：

可愛(ài)的小熊，在輸入密碼時(shí)還會(huì)拉上簾子，誰(shuí)會(huì)拒絕他？

04-設(shè)立新密碼

使用臨時(shí)密碼登錄后，將進(jìn)入更改密碼頁(yè)面，即可創(chuàng)建新密碼：

除了清晰的標(biāo)題和必要的文本外，這個(gè)頁(yè)面還提供了一個(gè)密碼強(qiáng)度建議。值得一提的是，盡管大多數(shù)產(chǎn)品都有高強(qiáng)度的密碼設(shè)定規(guī)則，但許多產(chǎn)品都無(wú)法將這個(gè)規(guī)則正確的傳達(dá)給用戶(hù)。這是造成很多用戶(hù)設(shè)置密碼時(shí)挫敗感的原因，因此，讓用戶(hù)在編寫(xiě)密碼前就知道哪些密碼是可以通過(guò)規(guī)則的很重要。

但是即使我們提供了詳細(xì)的規(guī)則，有時(shí)用戶(hù)仍然會(huì)嘗試創(chuàng)建一個(gè)不合規(guī)則的密碼。在這種情況下，我們應(yīng)該告訴用戶(hù)，哪里出現(xiàn)了問(wèn)題，以及怎樣做密碼能夠更保險(xiǎn)。NMP通過(guò)用戶(hù)「確認(rèn)更改密碼」后的錯(cuò)誤通知來(lái)解決這個(gè)問(wèn)題。

如果密碼太短，NPM會(huì)拋出錯(cuò)誤消息并將輸入框變?yōu)榧t色，從而指引你錯(cuò)誤的位置：

錯(cuò)誤通知：“在已知的已泄露密碼的公共列表中檢測(cè)到您輸入的密碼。請(qǐng)輸入其他密碼”。

如果密碼太普通或已被泄露，NPM也會(huì)讓您知道：

錯(cuò)誤通知：“提供的密碼太普通了。請(qǐng)選擇一個(gè)更獨(dú)特的密碼”。

NPM還提供了兩個(gè)列表的鏈接，這使您可以輕松快速地檢查密碼是否安全。

更改密碼后，NPM會(huì)立即將您登錄，因此無(wú)需重新進(jìn)行身份驗(yàn)證并再次輸入相關(guān)信息。這是另一個(gè)小功能，它表明NPM關(guān)心用戶(hù)并希望他們盡快返回產(chǎn)品的正常任務(wù)流程。

摘要

頁(yè)面應(yīng)具有清晰可見(jiàn)的標(biāo)題，例如 「恢復(fù)密碼」 要么 「更改密碼」

按鈕應(yīng)具有特定的操作文本，例如「通過(guò)電子郵件發(fā)送給我恢復(fù)鏈接」或「更改密碼」

如果提供臨時(shí)密碼，請(qǐng)?zhí)峁┛旖輳?fù)制方法。

提供有關(guān)重置密碼的詳細(xì)規(guī)則指南。

如果用戶(hù)密碼不符合規(guī)范，請(qǐng)告知他們應(yīng)該解決的問(wèn)題。

創(chuàng)建新密碼后立即幫助用戶(hù)登錄。

---

最后，值得記住的是，用戶(hù)是有感情的。他們的心情可能會(huì)受很多因素的影響。例如，我忘記NPM密碼的那一天就不好了。那一天都是出錯(cuò)的日子。

經(jīng)過(guò)無(wú)數(shù)次登錄NPM的失敗之后，我最終放棄并決定重設(shè)密碼，我預(yù)計(jì)這又是一個(gè)麻煩事。但是實(shí)際上這個(gè)過(guò)程使我心情舒暢，甚至使我剩余的時(shí)間都朝著積極的方向發(fā)展。

因?yàn)槿嗽诿鎸?duì)笑容時(shí)很難發(fā)火。

總結(jié)

以上是生活随笔為你收集整理的重置npm设置_密码重置用户流程4部曲的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。