電視上沒什麼節目，所以你正在用手機上網。
你的手指落在一個很久沒開啟的書籤上。哇，他們好像最近做了一些升級！
你很確定自己在這個網站上有賬戶。但是是哪個郵箱？密碼又是什麼？登入頁面沒有任何線索，而且顯然升級漏掉了這個頁面。它真是醜爆了。
也許你停止訪問這個網站是有原因的。
對於網站所有者來說，這讀起來就像一個恐怖故事。但實際上，這更像是一個警示故事。你需要搞定你的登入頁面設計——否則……
不知道從哪裡開始？在本指南中，我們將提供人類已知的最佳登入頁面設計示例——並結合技術背景，幫助你打造驚豔的使用者體驗。
客戶需要信任訊號的示例
登入頁面是您網站的大門，又或是通往您城堡的吊橋。
它應該為真實使用者提供便捷的訪問，並防止惡意攻擊者入侵。
您的使用者本能地理解這一點。他們渴望看到您認真對待安全問題。
以下示例提供了充足的保障，非常適合依賴信任的網站：金融、醫療保健等。
1. Stripe：帶有安全標識的簡潔設計
支付處理商 Stripe 擁有簡潔而有效的登入頁面。設計風格簡約，但有很多線索表明他們正在執行安全的操作。
我們喜歡的：
- 多種安全的登入方式：Stripe 立即提供 WebAuthn、生物識別和單點登入 (SSO)。這意味著使用者可以輕鬆選擇他們信任的方式。
- 雙重身份驗證備受關注：主表單下方的微妙提示鼓勵使用者保護自己的賬戶。它也有助於營造安全的氛圍。
- 簡潔、低調的品牌推廣：Stripe 的使用者都是忙碌的企業主。這個登入頁面簡潔明瞭，同時提供了足夠的品牌推廣，讓使用者確信“是的，這是正確的頁面”。
實施說明：
關鍵要點：在同一個設計中建立信任並減少摩擦是可能的。
2. MyChart：醫療保健品牌隱私
無需成為“Sherlock”，您也能在 MyChart 上找到隱私憑證。這個醫療保健平臺的登入頁面將令人印象深刻的安全履歷融入自定義品牌中。
其工作原理：
- 與特定醫療服務提供商聯合品牌：這讓患者確信他們來對了地方。
- 密碼欄位的可見性切換：使用者可以檢查自己輸入的字元是否正確，同時仍能保護隱私。
- 支援多種語言：西班牙語使用者可以透過右上角的連結快速切換到母語，其他語言使用者則可以透過資訊按鈕進行切換。
實施說明：
- 對於醫療保健行業而言，無障礙訪問是重中之重。請使用清晰的標籤和強烈的對比。
- MyChart 提供無需完整登入的“訪客付費”選項，這有利於打造更流暢的使用者體驗。
關鍵要點：簡潔易用的設計永遠比華而不實的設計更勝一籌。
3. 巴克萊銀行：安全展示為善意之舉
某些網站透過表面展示來欺騙使用者，但巴克萊銀行透過一點“表演”來提供可見的安全訊號。這是值得給予高度評價的做法。
成功原因：
- 清晰的信任訊號被清晰地展示在顯著位置：右上角的“安全”連結提供了保障，並連結到巴克萊銀行安全措施的頁面。
- 登入頁面上的常見問題解答：為了安撫那些登入困難、驚慌失措的使用者，巴克萊銀行提供了一些實用的故障排除技巧。
- 官方、低調的品牌形象：這裡的設計就像西裝革履一樣：幹練、值得信賴、專業。
實施說明：
- 對於高安全性的網站和應用，可以考慮提供靈活的識別符號（例如使用者名稱、電子郵件、電話）。
- HSTS 強制瀏覽器使用安全的 https:// 版本訪問網站。
關鍵要點：如果您正在從事安全工作，那麼炫耀它並沒有錯。
4. 美國銀行：以透明贏得信任
贏得使用者信任的一個好方法是真誠開放。美國銀行的登入頁面正是如此，並取得了良好的效果。
成功原因：
- FDIC 保險資訊醒目顯示：頁面頂部的政府支援資訊立即表明此頁面合法。
- 多層次的支援選項：兩個不同的幫助部分（“登入幫助”、“不使用網上銀行？”）以及子查詢，可以預測不同的使用者需求，而不會使主表單顯得雜亂。
- 結合上下文進行移動應用推廣：銀行詳細介紹了移動應用的安全性和便捷性優勢，從而建立了使用者對移動渠道的信任。
實施說明：
- 請注意，使用者透過唯一的 ID 號登入，而不是使用電子郵件。對於金融平臺來說，這種額外的保護措施是一個好主意。
- 頁尾中的“您的隱私選擇”選項表明網站遵守 CCPA 並尊重使用者資料權利。
關鍵要點：您可以在登入頁面上包含大量選項和資訊 – 只需將內容分塊以避免造成混亂。
簡潔至上
並非每個登入頁面都需要強調安全性。
如果使用者只是想播放自己喜歡的歌曲或做個數字筆記，那麼速度和易用性應該是首要考慮因素。
以下是一些簡潔易用的登入頁面的優秀案例：
5. Spotify：引導使用者加快登入速度
許多登入頁面仍然優先考慮電子郵件地址和密碼組合。但 Spotify 將 OAuth 放在首位，允許使用者使用他們可能已登入的帳戶登入。音樂愛好者們，歡呼吧。
工作原理：
- 優先考慮安全、流暢的登入方式：OAuth 對大多數使用者來說更安全、更便捷，因此 Spotify 優先提供這些選項。
- 提升易用性的品牌標識：Spotify 明亮的綠色品牌色有助於突出最重要的功能，包括實用的“記住我”切換開關。
- 便捷的後備方案：如果您沒有帳戶或忘記密碼，補救措施顯而易見。
實施說明：
- 使用 React、core-js 和 styled-components 構建。
- 根據受眾的使用習慣排列您的登入選項。保持佈局一致，以幫助使用者形成肌肉記憶。
關鍵要點：大多數使用者更喜歡社交登入，而且社交登入通常被認為更安全。
6. Notion：一鍵登入零摩擦
Notion 的登入頁面毫不浮誇，這與這款筆記平臺簡約的美感完美契合。它最大的亮點是什麼？它擁有流暢的登入流程。
成功原因：
- 強調零輸入流程：使用者擁有眾多便捷的登入選項可供選擇，每個選項都配有清晰的圖示標識。
- 魔法連結作為原生路徑：輸入郵箱地址，獲取連結，點選登入。無需記住或輸入密碼。
- 漸進式資訊披露做得恰到好處：介面僅在您需要時顯示所需內容。只有您選擇該路徑時，密碼欄位才會顯示。
實施說明：
- 如果您的產品面向團隊，單點登入 (SSO) 整合（SAML、Okta）至關重要。
- 使用智慧輸入檢測自動驗證郵箱格式。它可以避免大量與輸入錯誤相關的麻煩。
關鍵要點：隱藏密碼欄位可以鼓勵更安全的登入方式。
7. Slack：快速訪問所有工作區
雖然 Slack 只是一個訊息平臺，但它在登入方面面臨著一個獨特的挑戰：許多使用者同時屬於多個工作區。為了解決這個問題，Slack 開發了一個非常智慧的登入頁面。
工作原理：
- 電子郵件優先的方法引導您進入入口：輸入您的電子郵件地址，Slack 即可找到您的所有工作區；無需記住公司網址。
- 清晰的工作區切換器：已經在某個地方登入？工作區網格讓您只需點選一下即可在團隊之間切換。
- 更便捷的預設設定：Google 登入選項在這裡佔據了主導地位，因為許多工作場所帳戶都使用 Google Workspace。
實施說明：
- 如果您的應用支援多個帳戶或組織，請構建快速切換功能。
- 預設使用魔法連結登入意味著使用者無需儲存或記住多個工作區的密碼。
關鍵要點：您可以在同一平臺上允許多個帳戶登入，而不會給使用者帶來登入麻煩。
8. Shopify：為商家打造
雖然 Shopify 面向不同的受眾群體，但它仍然是一個工作場所。這個電商平臺的登入頁面讓商家無需先解謎即可繼續工作。
成功原因：
- 美觀且專注的設計：漸變色背景增添了視覺趣味，而白色卡片則將焦點集中在登入操作上。
- 金鑰身份驗證位置醒目：“使用金鑰登入”選項表明 Shopify 正在採用安全方面的最佳實踐。
- 便捷的社交登入：Apple、Facebook 和 Google 選項可滿足不同使用者的偏好，並提供快速的一鍵訪問。
實施說明：
- Shopify 是一個使用 Ruby on Rails 構建平臺的著名示例。
- 透過 WebAuthn API 為您自己的登入頁面新增金鑰選項。
關鍵要點：B2B 登入頁面應針對日常重複使用進行最佳化，而非一次性轉換。
社羣至上
社羣平臺必須保持微妙的平衡。你希望你的網路安全，但又不希望門口有保鏢恐嚇常客。
這些例子展示瞭如何在登入介面既強大又熱情。
9. Discord：遊戲風格的登入
Discord 的登入方式不像安全檢查站，更像是加入一個線上多人遊戲大廳。這部分是因為許多使用者都是遊戲玩家，但這種氛圍在其他社羣也同樣適用。
成功原因：
- 友好的歡迎語：不止一個，而是兩個以感嘆號結尾的問候語。Discord 非常期待看到回頭客。
- 移動使用者二維碼登入：如果使用者已經登入，可以使用手機掃描二維碼；這對於在不同裝置之間切換的使用者來說非常實用。
- 使用者名稱優先：與以電子郵件為中心的平臺不同，Discord 知道使用者可以透過使用者名稱進行身份識別。
實施說明：
- 要提供二維碼登入，請在伺服器上釋出一個短期登入令牌，將其編碼為二維碼，並透過 WebSocket 等待兌換。
- 低調的品牌背景可以讓您的頁面顯得生動活潑，同時又不會分散登入流程的注意力。
關鍵要點：您的登入頁面應該體現您社羣的個性。
10. Pinterest：登入前的視覺趣味
作為一個圖片分享社羣，Pinterest 是一個非常注重視覺效果的平臺。登入頁面的視覺效果令人賞心悅目，這一點並不令人意外。
成功原因：
- 引人入勝的設計：背景預覽了 Pinterest 標誌性的磚石結構帖子佈局，讓使用者充滿期待。
- 內建機器人和垃圾郵件檢測：Pinterest 在登入時使用 reCAPTCHA 來防止他人建立虛假賬戶。
- 更大的輸入欄位，提升移動端可用性：很大一部分社羣使用者使用手機和平板電腦訪問。
實施說明：
- 雖然遊戲玩家和開發者喜歡夜間模式，但大多數使用者更喜歡明亮的螢幕。
- 如果您想促進使用者增長，可以考慮將“註冊”按鈕設定為與“登入”按鈕一樣醒目。
關鍵要點：尊重使用者隱私偏好，同時明確賬戶的益處。
11. Medium：直達內容
部落格平臺 Medium 有兩種型別的使用者：閱讀使用者和寫作使用者。這兩類使用者都會被引導至同一個精簡的登入頁面。
工作原理：
- 電子郵件登入是最後的選擇：Medium 會推薦您使用 OAuth 提供商；如果您選擇電子郵件登入，則只會看到傳統的登入表單。
- 最大程度地減少對閱讀流程的干擾：在大多數頁面上，登入表單會以視窗的形式顯示在您正在檢視的內容上方。
- 引人入勝的後備選項：問答形式引導使用者找到問題的解決方案。例如：“忘記電子郵件或登入遇到問題？獲取幫助。”
實施說明：
- 考慮使用模態疊加層，而不是單獨的登入頁面。這可以讓使用者繼續他們的旅程，而不會被登入流程分散注意力。
- 跟蹤使用者在登入過程中遇到的問題，以最佳化何時應該請求身份驗證。
關鍵要點：登入不應轉移使用者旅程。
電商轉化率成關鍵
對於電商網站來說，即使是最輕微的摩擦也可能導致購物車被放棄，收入損失。登入頁面也不例外。
以下是一些讓購物者滿意的線上商店示例。
12. 亞馬遜：極致最佳化
你找不到比亞馬遜更最佳化的線上商店了。登入頁面也不例外。其設計極其簡潔，幾乎不會造成任何混淆。
成功原因：
- 選擇郵箱或手機號碼：使用者可以使用他們能記住的任何ID登入。
- “保持登入狀態”預設勾選：雖然有點爭議，但這確實意味著顧客不必每次購物都登入。
- 即時建立賬戶選項：新使用者無需離開流程即可建立賬戶。
實施說明：
- 亞馬遜使用廣泛的 A/B 測試對網站的關鍵區域進行實驗——小型商店應該效仿這種做法。
- 會話令牌採用滾動過期機制，無需無休止地重新驗證，確保可靠的安全性。
關鍵要點：在電子商務中，每次增加摩擦的點選都會降低轉化率，因此應儘量減少摩擦。
13. Nike：加入時尚俱樂部
Nike 的登入頁面給人的感覺與其說是安全感，不如說更像是進入了一個專屬俱樂部。它只有一個區域，其餘的設計都由留白和標誌性的 logo 組成。
成功原因：
- 強大的品牌形象：Swoosh 標誌和 Jordan 標誌雖然尺寸不大，但視覺衝擊力十足。
- 強調會員權益：“加入我們”的訊息強調的是福利，而不是義務。
- 整合登入和註冊流程：這裡只有一條通道，首先輸入您的郵箱地址。然後，您可以選擇登入或建立賬戶。
實現說明：
- 此登入頁面使用 React、Emotion 和 core-js 混合構建。
- 請注意位置選擇器；這使得 Nike 能夠為每個地區的訪客提供合適的隱私政策。
關鍵要點：奢侈品和生活方式品牌應該讓登入感覺像是加入了一個特別的平臺。
14. ASOS：專為註冊打造
將登入和註冊流程結合起來是電商領域的常用策略。其訣竅在於避免打擾回頭客。ASOS 就巧妙地實現了平衡，既鼓勵客戶建立賬戶，又不破壞登入流程。
成功原因：
- 以優勢為先的宣傳：如果使用者尚未建立賬戶，ASOS 會向他們提供建立賬戶的幾個理由。
- 策略性地運用顏色：登入頁面的大多數元素都是黑白的。其他顏色則留給關鍵元素，例如 OAuth 按鈕和“免費”標籤。
- 左對齊表單以吸引眼球：研究表明，網頁載入時，人們通常從左上角開始瀏覽。
實現說明：
- 此頁面使用 Preact（React 的一個小巧替代品），以提供非常流暢的效能。
- 在此示例中，註冊的優勢透過簡單的插圖和標籤傳達——但您可以新增更多資訊的連結。
關鍵要點：如果您預先推銷這些好處，使用者就更有可能費心建立帳戶。
15. 宜家：清晰透明
減少摩擦的最佳方法之一是儘早設定預期。宜家在這方面做得非常出色，從一開始就告知使用者他們將透過電子郵件收到一次性驗證碼。
成功原因：
- 引導使用者使用雙重身份驗證 (2FA) 的設計：宜家允許您使用密碼登入，但頁面的視覺層次會引導您使用一次性驗證碼。
- 簡潔明瞭的文案：使用者會獲得清晰的指示。我們尤其喜歡這句：“請輸入您的電子郵件地址以接收一次性驗證碼。”
- 獨立品牌標識，提升易用性：使用宜家的品牌色（醒目的藍色和黃色）構建表單頗具挑戰性，因此設計團隊選擇了分體佈局。
實施說明：
- 此登入頁面使用 Java、React 和 styled-components 製作。
- 驗證碼並非擊敗機器人的唯一方法；宜家正在使用 Cloudflare Turnstile 作為替代方案。
關鍵要點：您不必強制在登入表單中新增品牌標識。
打造卓越登入頁面的七大戒律
我們剛剛巡視了 15 個登入頁面，就像使用者體驗選美比賽的評委一樣。但我們真正學到了什麼呢？
以下是一些關鍵要點：
- 密碼輸入框已經過時了（但無論如何都要保留）：魔法連結和金鑰是未來趨勢，但 Martha 姨媽仍然想輸入“Password123！”，感覺自己像個駭客。新增一些花哨的東西，但始終要提供安全出口。
- 你的登入頁面不是你的個人藝術畫廊：把 Three.js 的粒子效果留到你的作品集裡吧。如果使用者需要一個花哨的 GPU 來渲染你的登入表單，那你就輸了。
- 社交登入按鈕不是寶可夢——你不需要所有選項：三個選項好，十五個選項不好。衡量使用者實際使用的內容，然後毫不留情地淘汰剩餘的選項。這不是自助餐。
好的開始，但我們承諾了七大戒律。因此，以下是一些優秀登入設計的更多原則：
- 速率限制……因為有些人無法理解提示：指數退避演算法，並帶有可見的倒計時器。“您可以在 14:59 後重試……”，這其實是有效的安全手段。
- 錯誤訊息應該真正有幫助：“憑據無效”毫無用處。資訊要具體，否則只會幫助駭客。例如，“找不到郵箱”對使用者有幫助。但“john.doe@example.com 的密碼不正確”卻會幫助攻擊者。
- 移動使用者有拇指，而不是手術器械：點選目標至少要達到 44×44 畫素，使用合適的輸入型別（type=”email” 是最佳選擇），並用真人拇指進行測試。
- 隱私不再是可有可無的：顯示隱私連結，並透明地公開資料儲存。對了，“記住我”開關不應該意味著“收割我的靈魂用於定向廣告”。
為您的使用者提供他們應得的登入體驗
無論您是在打造下一個 Facebook，還是僅僅在部落格上設定評論，登入頁面都值得關注。
您對設計、登入流程和安全性的選擇會真正影響使用者對您網站的感受。這也可能決定訪問者是憤怒地退出您的網站，還是在未來幾年繼續使用您的網站。
評論留言