編輯導語：我們在使用大多產品時，剛進入軟件都需要一個登錄或者註冊的動作，每個軟件的登陸方式頁面都差不多，但一些小的細節體驗最能影響用户；本文作者分享了關於登錄頁設計細節和邏輯，我們一起來了解一下。
幾乎所有的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但仔細思考會發現，每個登錄頁都有自己差異化的點，而這些點正是產品無一物二的地方。
確保用户成功且無壓力的登錄體驗需要我們不斷地思考。
01 什麼是登錄體驗？登錄體驗是指用户通過入口進入應用、網站或服務，建立自己的身份。
登錄流程通常由主登錄流程和恢復流程組成，其中主登錄流程包括填寫用户名、手機號、密碼等，恢復流程包括忘記密碼、重置密碼、其他登錄方式等。
登錄體驗的目標是確保用户成功登錄帳户。
02 設計熟悉的登錄流程使用簡潔、常用的頁面佈局和文字，有助於用户輕鬆執行熟悉的操作，保持設計簡單也有助於將體驗輕鬆擴展到不同設備和屏幕尺寸。
Pinterest採用了居中對齊的重疊式登錄頁設計，用醒目的紅色按鈕來突出登錄動作，還支持Google和Facebook作為其他登錄方式。
登錄頁是強調品牌的首要接觸點。登錄操作最好於中心位置，頁面上的其他元素應謹慎增加，避免注意力從登錄任務上移開。
設計思考：
用户花在登錄頁上的時間越少越好，要讓用户儘快發現產品中的優點和價值！
03 專注設計登錄(或恢復)操作應引起用户的全部注意力：
- 最好將登錄頁表單放在頁面中心位置；
- 不需要複雜或冗長的文字解釋，例如可以利用簡單的“輸入密碼”來提示用户完成操作；
- 要求用户一次只做一件重要的事情，例如將找回密碼這種複雜的流程分解為多個步驟進行。
Facebook保留用户的登錄信息，並將恢復流程分為幾個邏輯步驟。
亞馬遜將輔助恢復選項放在“更多幫助”中，這有助於使主要操作保持重點。
設計思考：
- 使用卡片式佈局；
- 將操作分為主要動作和次要動作；
- 使用尺寸大而突出的登錄按鈕；
- 儘量減少次要操作的次數，以避免使頁面出現混亂。
在登錄過程的每個階段，用户都可能會失敗；輸入錯誤的郵箱，忘記密碼或網絡問題等，所有這些問題都可能導致登錄意圖急劇下降。
因此清晰及時的反饋設計對用户來説很重要。
信息輸入錯誤時會提示錯誤具體的原因。
密碼輸入有誤時，Facebook會在下方增加“使用Google登錄”選項。
設計思考：
- 鼓勵用户嘗試合適的替代方案；
- 登錄失敗後，將用户導航到單獨頁面並組織其他登錄方法；
- 展示最有效的登錄方法，並在發生問題時及時對用户做出反饋。
除了輸入賬號密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用户選擇，同時防止忘記密碼造成無法登錄的情況。
添加過多的登錄方式會使頁面混亂，降低登錄意圖，附加選項應該限制為2或3種方式。
Medium登錄表單的設計儘管很清晰，但過多的登錄方式會阻礙用户的選擇和判斷。
Airbnb登錄頁能看到大量的輔助登錄方式，過多的選項可能會導致用户的認知負荷。
設計思考：
當前無密碼登錄正在迅速普及。在很多移動App中，基於手機號的身份驗證已成為常態，指紋和FaceID也出現在許多地方，從而實現了無縫和安全的身份驗證流程。
找到產品最適合的登錄方式，並將其作為主要選擇能有效提升效率！
06 登錄意味着信任登錄涉及用户輸入敏感的個人數據，例如手機號、郵箱、密碼等，用户願意輸入信息意味着他們信任這個平台或產品。
雖然減少與用户的摩擦很重要，但有時網站也會提供額外的身份驗證來確保用户信息的安全。
B站利用文字驗證方式來增強用户帳户的安全性。
設計思考：
登錄表單應該代表品牌的形象，任何視覺上的變化都必須慢慢進行，因為完全改變視覺設計可能會導致缺乏信任。
07 確定用户類型登錄意圖是一種體驗，在這種體驗中用户角色和類型可以無所不包。
可以嘗試以下方式來定義用户的範圍以便更清楚的瞭解用户：
- 登錄渠道：與PM合作找出在登錄流程中用户交互和退出的關鍵階段。
- 登錄入口：用户是通過郵箱、搜索引擎還是通過應用跳轉到登錄頁？
- 常用設備：手機、瀏覽器等設備可以為用户帶來個性化的體驗。
- 用户羣組：利用年齡或地理位置等方式也能進行分離用户羣主的劃分。
通過分析具有代表性的登錄頁設計來展示登陸頁的多種設計表達。
Google採用多階段的登錄方式，郵箱和密碼分兩步進行輸入。這種格式對谷歌來説有一些安全優勢，也可以在下一步為用户提供個性化的選擇。
Uber的登錄頁採用簡單的樣式，注重使用體驗，引導用户輸入手機號來進行下一步。
Facebook利用右對齊的登錄表單很好地集中注意力，左邊的空間被用來展示品牌的信息和形象。
亞馬遜的登錄頁從視覺設計上看有些陳舊，但卻是管理用户注意力的一個很好的例子。黃色的“繼續”按鈕和簡潔的頁面使登錄看起來簡單而快速。
Figma的登錄頁位於畫面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁面整體的設計利用線框組成，非常簡潔高效。
作者：Clippp，微信公眾號：Clip設計夾。每週精選設計文章，專注分享關於產品、交互、UI視覺上的設計思考。
本文由 @Clippp 翻譯發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。