2023年登錄頁需要注意的設計細節(jié)和邏輯我都幫你總結好了

登錄頁需要注意的設計細節(jié)和邏輯，我都幫你總結好了！幾乎全部的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但認真思索會發(fā)覺，每個登錄頁都有自己差異化的點，而這些點正是產(chǎn)品無一物二的地方。

確保用戶勝利且無壓力的登錄體驗需要我們不斷地思索。

01什么是登錄體驗？

登錄體驗是指用戶通過入口進入應用、網(wǎng)站或服務，建立自己的身份。

登錄流程通常由主登錄流程和恢復流程組成，其中主登錄流程包括填寫用戶名、手機號、密碼等，恢復流程包括遺忘密碼、重置密碼、其他登錄方式等。

登錄體驗的目標是確保用戶勝利登錄帳戶。

02設計熟識的登錄流程

使用簡潔、常用的頁面布局和文字，有助于用戶輕松執(zhí)行熟識的操作，保持設計簡潔也有助于將體驗輕松擴展到不同設備和屏幕尺寸。

▲

Pinterest采納了居中對齊的重疊式登錄頁設計，用醒目的紅色按鈕來突出登錄動作，還支持Google和Facebook作為其他登錄方式。

登錄頁是強調(diào)品牌的首要接觸點。登錄操作最好于中心位置，頁面上的其他元素應謹慎增加，避開留意力從登錄任務上移開。

設計思索：

用戶花在登錄頁上的時間越少越好，要讓用戶盡快發(fā)覺產(chǎn)品中的優(yōu)點和價值！

03專注設計

登錄(或恢復)操作應引起用戶的全部留意力：

最好將登錄頁表單放在頁面中心位置；不需要簡單或冗長的文字解釋，例如可以利用簡潔的“輸入密碼”來提示用戶完成操作；要求用戶一次只做一件重要的事情，例如將找回密碼這種簡單的流程分解為多個步驟進行。

▲

Facebook保留用戶的登錄信息，并將恢復流程分為幾個規(guī)律步驟。

▲

亞馬遜將幫助恢復選項放在“更多關心”中，這有助于使主要操作保持重點。

設計思索：

使用卡片式布局；將操作分為主要動作和次要動作；使用尺寸大而突出的登錄按鈕；盡量削減次要操作的次數(shù)，以避開使頁面消失混亂。04給出明確反饋并在操作失敗時供應關心

在登錄過程的每個階段，用戶都可能會失?。惠斎脲e誤的郵箱，遺忘密碼或網(wǎng)絡問題等，全部這些問題都可能導致登錄意圖急劇下降。

因此清楚準時的反饋設計對用戶來說很重要。

▲

信息輸入錯誤時會提示錯誤詳細的緣由。

▲

密碼輸入有誤時，F(xiàn)acebook會在下方增加“使用Google登錄”選項。

設計思索：

鼓舞用戶嘗試合適的替代方案；登錄失敗后，將用戶導航到單獨頁面并組織其他登錄方法；展現(xiàn)最有效的登錄方法，并在發(fā)生問題時準時對用戶做出反饋。05多種登錄方式供應敏捷性

除了輸入賬號密碼這種登錄方式，最好供應一種或兩種附加的登錄方式以便用戶選擇，同時防止遺忘密碼造成無法登錄的狀況。

添加過多的登錄方式會使頁面混亂，降低登錄意圖，附加選項應當限制為2或3種方式。

▲

Medium登錄表單的設計盡管很清楚，但過多的登錄方式會阻礙用戶的選擇和推斷。

▲

Airbnb登錄頁能看到大量的幫助登錄方式，過多的選項可能會導致用戶的認知負荷。

設計思索：

當前無密碼登錄正在快速普及。在許多移動App中，基于手機號的身份驗證已成為常態(tài)，指紋和FaceID也消失在很多地方，從而實現(xiàn)了無縫和平安的身份驗證流程。

找到產(chǎn)品最適合的登錄方式，并將其作為主要選擇能有效提升效率！

06登錄意味著信任

登錄涉及用戶輸入敏感的個人數(shù)據(jù)，例如手機號、郵箱、密碼等，用戶情愿輸入信息意味著他們信任這個平臺或產(chǎn)品。

雖然削減與用戶的摩擦很重要，但有時網(wǎng)站也會供應額外的身份驗證來確保用戶信息的平安。

▲

B站利用文字驗證方式來增加用戶帳戶的平安性。

設計思索：

登錄表單應當代表品牌的形象，任何視覺上的變化都必需漸漸進行，由于完全轉變視覺設計可能會導致缺乏信任。

07確定用戶類型

登錄意圖是一種體驗，在這種體驗中用戶角色和類型可以無所不包。

可以嘗試以下方式來定義用戶的范圍以便更清晰的了解用戶：

登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關鍵階段。登錄入口：用戶是通過郵箱、搜尋引擎還是通過應用跳轉到登錄頁？常用設備：手機、掃瞄器等設備可以為用戶帶來共性化的體驗。用戶群組：利用年齡或地理位置等方式也能進行分別用戶群主的劃分。08登錄頁設計實例分析

通過分析具有代表性的登錄頁設計來展現(xiàn)登陸頁的多種設計表達。

▲

Google采納多階段的登錄方式，郵箱和密碼分兩步進行輸入。這種格式對谷歌來說有一些平安優(yōu)勢，也可以在下一步為用戶供應共性化的選擇。

▲

Uber的登錄頁采納簡潔的樣式，注意使用體驗，引導用戶輸入手機號來進行下一步。

▲

Facebook利用右對齊的登錄表單很好地集中留意力，左邊的空間被用來展現(xiàn)品牌的信息和形象。

▲

亞馬遜的登錄頁從視覺設計上看有些陳舊，但卻是管理用戶留意力的一個很好的例子。黃色的“連續(xù)”