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

00-前言

伴隨著五花八門的網站和應用而來的除了豐富的信息咨詢還有長短不一形態各異的登錄密碼。就算是記性再好的人也是會有不小心忘記密碼的時侯,尤其是對于那些不常登錄的網站和應用來說。既然這一流程是無法避免的,那么作為設計師,我們應盡可能地將這一流程設計的更加流暢,且帶有趣味性。撇開手機短信登錄這個選項,今天跟大家分享下一個名為NPM的網站的密碼重置的用戶體驗和交互流程，希望能為還在苦于找重置密碼交互流程參考的同學帶來些幫助。

01-重置密碼頁面

打開NPM網站點擊忘記密碼選項后,將自動跳轉至重置密碼頁。不得不說NPM網站的重置密碼頁相當的標準：

• 頁面標題清晰：重置密碼
• 按鈕文案非常明確：按鈕文案應用「發送重置密碼至我的電子郵箱」而不是含糊的「提交」或「發送」這類表述模糊不清的微文案。
• 多個重置密碼方式選項：既可以使用電子郵件又可以使用用戶名重置
• 最棒的一點是，在重置密碼頁面中，他有一段幫助用戶減輕心理壓力的文案：「別擔心，我們都有過這樣的經歷」，瞬間使得頁面充滿人情味，而且不會對頁面造成多余的混亂。

02-電子郵件

提交郵箱地址和密碼后，系統將彈出頁面提示「密碼重置鏈接已發送」。

盡管說明很明確，但可以改進「確認文本」。最好說「如果存在帳戶，將發送一封包含更多說明的電子郵件」，而不是「已發送一封電子郵件」。

這樣不保證將電子郵件一定會發送到的行為即可不公開數據庫中是否存在這個用戶名，從而鼓勵用戶自己檢查郵箱（以防未獲得鏈接），另外添加了一道保險，可以阻止惡意釣魚攻擊。

這是收到的電子郵件：

03-臨時密碼鏈接

點擊電子郵件中的鏈接將打開這個頁面：

我最喜歡的是復制臨時密碼的功能。將鼠標懸停在臨時密碼上，密碼就會被突出現實，然后點擊后就可以立即復制到剪切板：

盡管這個改進不太重要，但是對于異常忙碌只想快點推進密碼重置流程的用戶來說，這簡直是一個救星一般的功能（滿足了用戶的爽點）。因為真正的復制過程實在是浪費時間，要從頭到位框選所有字符，右鍵喚出菜單然后點擊“復制”按鈕，這只可能更激怒用戶。

在密碼重置頁面上點擊“登錄按鈕”之后，您將進入常規的登錄頁面：

可愛的小熊，在輸入密碼時還會拉上簾子，誰會拒絕他？

04-設立新密碼

使用臨時密碼登錄后，將進入更改密碼頁面，即可創建新密碼：

除了清晰的標題和必要的文本外，這個頁面還提供了一個密碼強度建議。值得一提的是，盡管大多數產品都有高強度的密碼設定規則，但許多產品都無法將這個規則正確的傳達給用戶。這是造成很多用戶設置密碼時挫敗感的原因，因此，讓用戶在編寫密碼前就知道哪些密碼是可以通過規則的很重要。

但是即使我們提供了詳細的規則，有時用戶仍然會嘗試創建一個不合規則的密碼。在這種情況下，我們應該告訴用戶，哪里出現了問題，以及怎樣做密碼能夠更保險。NMP通過用戶「確認更改密碼」后的錯誤通知來解決這個問題。

如果密碼太短，NPM會拋出錯誤消息并將輸入框變為紅色，從而指引你錯誤的位置：

錯誤通知：“在已知的已泄露密碼的公共列表中檢測到您輸入的密碼。請輸入其他密碼”。

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

錯誤通知：“提供的密碼太普通了。請選擇一個更獨特的密碼”。

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

更改密碼后，NPM會立即將您登錄，因此無需重新進行身份驗證并再次輸入相關信息。這是另一個小功能，它表明NPM關心用戶并希望他們盡快返回產品的正常任務流程。

摘要

頁面應具有清晰可見的標題，例如 「恢復密碼」 要么 「更改密碼」

按鈕應具有特定的操作文本，例如「通過電子郵件發送給我恢復鏈接」或「更改密碼」

如果提供臨時密碼，請提供快捷復制方法。

提供有關重置密碼的詳細規則指南。

如果用戶密碼不符合規范，請告知他們應該解決的問題。

創建新密碼后立即幫助用戶登錄。

---

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

經過無數次登錄NPM的失敗之后，我最終放棄并決定重設密碼，我預計這又是一個麻煩事。但是實際上這個過程使我心情舒暢，甚至使我剩余的時間都朝著積極的方向發展。

因為人在面對笑容時很難發火。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。