編輯導語：用戶登錄是常見的用戶操作，一個有效、清晰的登錄過程在提升用戶登錄意願與産品體驗的同時，也能潛在地推動後續用戶轉化與留存。那麼具體而言，若想提高用戶登錄成功率，可以從哪些方面着手設計？本文作者就此進行了總結，不妨來看一下。

登錄頁面的設計也許看起來很簡單。我在 2020 年花了相當多的時間為一家社交媒體巨頭設計登錄和注冊流程，并從中了解到：海量的思考和測試才能确保用戶成功和輕松的登錄。

以下是我總結出來的重要經驗。

什麼是登錄？

登錄是進入一個應用程序、網站或服務的入口。幫助用戶建立他們的賬戶。

• 一個登錄流程通常包括一個主要的登錄頁和一個相當複雜的重置流程，其中包括 “忘記密碼”、重置密碼和其他登錄方法。
• 登錄的首要目标是确保用戶成功登錄到他們的賬戶。

什麼是登錄目标？

讓我們花點時間來定義一下“登錄目标”這個術語，這是在做設計決策時的關鍵。

登錄目标是指用戶進入登錄流程的意願。以有聲思維來表達，它可以是 “我想登錄”、”我想檢查我的電子郵件”、”帶我去那裡”，等等。

當用戶進入到登錄頁時，他們可能沒有登錄意願。可能會産生“嗯，我不在乎，以後再做”或“這太麻煩了”或“呀，我現在該怎麼辦？”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設備，都可能是缺乏登陸意願的迹象。‍

保留或增強登錄流程中的登陸意願是很好的目标，下面的準則都是為這個目标量身定做的。

一、設計熟悉的體驗 Design familiar experiences

設計熟悉的體驗，雖說不是設計師最喜歡的設計準則，但是與整個生态系統中最好的體驗保持一緻是非常重要的。例如使用簡單、公認的布局，使用衆所周知的術語和文案，都有助于用戶自信而輕松地進行熟悉的操作。

保持通用的設計也有助于将頁面輕松擴展到不同的形式和設備。

Pinterest 有一個傳統的、居中的覆蓋式登錄頁。

它有一個亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項。

滑到最後——有我對網絡上流行的成功登錄經驗的總結。這就把我們帶到了下一個問題——創新的界限在哪裡？

登錄是一個品牌展示的絕佳機會點。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營銷信息。和大多數設計問題一樣，登錄頁品牌展示的關鍵在于平衡。

登錄操作應該一直占據中心位置。頁面上的其他元素必須謹慎規劃好，不應該奪走登陸操作的注意力。一條優秀的經驗之談：用戶在登錄頁面上花費的時間越少越好。幫助他們繼續前進，盡快發現産品中的優點和價值。

二、聚焦設計 Design for focus

快速回顧一下：用戶在登錄頁面上花費的時間越少越好。根據這一點，登錄（或恢複）操作應當占據用戶的全部注意力。

• 最好是把登錄框放在頁面的中心。如果你打算把它放在一側，最好是賦予它核心視覺效果。
• 對于文案寫作來說，指明用戶在某一步驟中到底需要做什麼才是很重要的！比起冗長的解釋，一句簡單的 “輸入密碼 “就能起效。幽默、複雜的行話、技術術語和花哨的文筆在登錄體驗中是沒有用武之地的。

在恢複體驗中，将一套複雜的操作分解成多個步驟是很有效的。安排用戶一次隻做一件重要的事情！例如：輸入你的手機号碼和輸入發送到你手機上的驗證碼是兩個獨立的步驟。

Facebook 在頁面中保持用戶信息在右側，并将恢複流程分解為多個步驟。

亞馬遜把它的恢複流程分解成多個步驟。

它将次要的恢複選項設置為 “我需要更多幫助 “的可擴展部分，這有助于保持注意力集中在主要操作。

保持注意力集中在主要操作的技巧：

• 登錄框可以布局在一個主頁、疊加頁，或一個獨立頁面。
• 使用卡片式布局。
• 将操作分為主要和次要操作。
• 使用一個大而醒目的登錄按鈕。
• 盡量減少次要操作的數量——避免出現任何與核心登錄操作無關的内容。

三、給予明确的反饋并在用戶失敗時提供幫助 Give clear feedback & provide a helping hand in case users fail

在登錄過程的每個階段，用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網絡問題——所有這些都可能導緻登錄意願的急劇下降。

因此，登錄界面以最恰當的方式回應用戶是非常重要的。清晰、及時、精心編輯的錯誤提示信息能起到很大幫助。

錯誤信息包含有用的提示/暗示，指明你在失敗時可以做什麼

當你密碼登陸失敗，但你有一個 Gmail ID 時，Facebook 會增加一個 “用 Google 賬号登錄 “的功能

指導用戶恢複的技巧：

• 鼓勵用戶嘗試合适的替代方案。
• 在用戶失敗後，安排替代的登錄方案，同時将用戶導航至一個獨立的頁面。
• 在文本中展示出最有用的登錄方案，并在出現錯誤時對用戶做出積極響應！

四、盡量保留登錄痕迹 Retain context whenever possible

重點是讓用戶知道平台識别出了他們，并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意願。

保留登錄痕迹的方法：

• 像 “記住我 “這樣的功能。
• 預先填寫上一步收集到的字段，例如：在跳轉到恢複流程時，預先填寫登錄步驟中收集到的電子郵件 ID。
• 如果使用的是兩步式登錄，為用戶提供個性化的登錄方式是個不錯的主意 —— 用戶對電話OTP（一次性驗證碼）登錄更滿意？還是電子郵件 密碼？記住用戶上次選擇的登陸方式可以提升用戶的登錄意願，并讓他們感覺到登錄體驗的自然和舒适。
• 在企業 SSO（單點登錄） 中，用戶可能會用多個賬戶登錄。在檢測到多個賬戶的情況下，最好是将這些賬戶選項呈現給用戶，讓他們選擇他們想使用的賬戶。

五、靈活提供多種登錄方式 Multiple login methods provide flexibility

對于你的平台應該提供哪些登錄方法，沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法（除了用戶名 密碼），這樣用戶就有了選擇，以防他們忘記密碼。

這些方法可以是基于電話号碼的登錄、人臉識别，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平台添加最流行和最安全的方案。

需要注意的是——增加很多的登陸方法會使頁面變得混亂，可能會導緻登錄意願降低！将額外的選項限制在 2 或 3 種。

針對最常用的登陸方式進行優化，并明确區分主要和次要方式。這些選項通常被證明是需要重置密碼（以防用戶忘記密碼）的很好的替代方法，但同時也被認為是一個乏味的步驟。

情況允許時，應智能地浮現其他登陸選項并進行個性化處理。例如：如果用戶是通過電子郵件登錄，提供一個帶有一次性鍊接的登錄選項可能會有效。

在此提供 Medium 登錄頁的案例——雖然清晰且設計良好，但它确實有太多的登錄方法。不得不回訪 Medium 的設計者，如果這個設計對他們來說是好的！

無密碼登錄正火速流行起來。特别對于隻有移動端的應用程序來說，基于電話号碼的認證已常态化。指紋和 FaceID 在許多地方出現，使認證流程變得快速、安全。為平台找到最适合（且可開發）的方法，并将其作為主要登錄選項。

六、登錄是信任敏感的時刻 Know that login is a trust-sensitive moment

登錄涉及到用戶輸入敏感的個人數據，如電子郵件、密碼和電話号碼——這是決定了他們與平台關系的敏感時刻。

登錄框代表了品牌，任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。

登錄也是（有用的）保障——足以讓壞人無法進入系統！

雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那麼出現額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性——例如：強密碼、雙重認證等。

七、通過調研确定用戶類型 Find out clues and determine your user type

之前有提到過，投入足夠的時間去調研用戶，有助于提高登錄意願！這一點是很重要的。

登錄是一種體驗，你的用戶角色可以是各種各樣的——每個人都可能擁有一個你平台的服務賬戶！如果可能的話，縮小你的角色範圍。

情況允許時，像我這樣（為社交媒體平台設計），可以嘗試以下方案：

1）登錄漏鬥——與項目管理人員合作，找出用戶在登錄流程中互動和放棄的關鍵點。

2）登錄入口——用戶是通過電子郵件進入登錄頁面？還是通過搜索引擎的結果？還是當他們在使用産品時？或是在應用程序中？你可以利用這些入口點作為線索，為用戶展現出最相關的選項。

3）已知的設備——手機、浏覽器和已知的設備可以有助于為用戶提供受歡迎的、個性化的登陸體驗。

4）用戶群組——根據用戶特性進行劃分，如網絡/移動、年齡組和地域，也能有幫助。

5）在用戶沒有登錄時，使用這些線索可以增加用戶的登錄意願。采取微小的步驟進行用戶識别，并且使用戶易于接受。這有助于你提高登錄成功率！反之這也會為你的平台帶來更多的活躍用戶，每個人都能成為赢家。

八、案例介紹 Best practices with examples

以下是我對網絡上我最喜歡的登錄頁進行的總結，包含一些我經常訪問的平台。歡迎推薦更多登錄頁！

Google（谷歌）打破了标識優先的格式——改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優勢，也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。

Uber 的登錄頁是簡單且聚焦的，允許用戶輸入他們的電話号碼并進入下一步。

Facebook 有幾個登錄方案，他們用這些方案進行實驗和 A/B 測試——這是一個右對齊的登錄框案例，它很好地突出了重點。左側的空間被用來打造積極的品牌形象——總體來說是成功的登錄體驗。

Pinterest 做了一個簡單居中的疊加表單，有碩大的輸入框——不斷吸引用戶！還有一個亮紅色的登錄主按鈕，以及一些額外的社交登錄選項。

盡管 Airbnb（愛彼迎）在很多方面都做得很好，但它的登錄頁讓人感到操作繁多——這也許是因為基于手機号碼登錄，也許是因為大量的次要登錄選項，導緻相當多的認知負荷！

LinkedIn（領英）很好地保持登錄框的簡介、聚焦和居中，有一個醒目的主登錄按鈕。

我對 Dropbox 的登錄頁面持猶豫态度——插圖很好看，但它的顔色與界面按鈕的顔色相似——這是附加元素分散注意力的案例。就我個人而言，我喜歡在界面中大膽使用插圖——但評估插圖的使用環境也很重要。

Amazon（亞馬遜）的登陸頁視覺設計上有些老舊，但對于管理用戶注意力是一個很好的案例——巨大的黃色“繼續”按鈕以及頁面上沒有任何幹擾，使登錄任務看起來簡單快速。

在登錄頁面上放置廣告可能不是一個好主意 —— 但同時 Yahoo（雅虎）有一個與衆不同的标識在登錄框中，其中設計了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)

我想把 Figma 納入優秀的登錄案例中——該頁居中于浮層，Google 登錄被突出展示（也許是 Figma 的首選和推廣的登錄形式？），它非常簡潔，幾乎是線框式的。用戶體驗非常好。

感謝我的産品合作夥伴 Apurva 和我一起學習。采取微小的步驟進行用戶識别，并且使用戶易于接受。這會使你的用戶登錄成功率越來越高！同時這也會為平台帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發，并應用于你自己的産品和設計工作中。

本文翻譯已獲得作者的正式授權（授權截圖如下）

作者：Shubhangi Salinkar

原文：https://medium.muz.li/a-guide-to-designing-successful-login-experiences-d9cdb81877ec

譯者：曹競羽；審核：李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報局 翻譯發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部