幾乎所有的登錄頁(yè)看起來(lái)都大同小異，通過(guò)輸入賬號(hào)和密碼就能夠進(jìn)入，但仔細(xì)思考會(huì)發(fā)現(xiàn)，每個(gè)登錄頁(yè)都有自己差異化的點(diǎn)，而這些點(diǎn)正是產(chǎn)品無(wú)一無(wú)二的地方。

確保用戶成功且無(wú)壓力的登錄體驗(yàn)需要我們不斷地思考。

什么是登錄體驗(yàn)？

登錄體驗(yàn)是指用戶通過(guò)入口進(jìn)入應(yīng)用、網(wǎng)站或服務(wù)，建立自己的身份。

登錄流程通常由主登錄流程和恢復(fù)流程組成，其中主登錄流程包括填寫(xiě)用戶名、手機(jī)號(hào)、密碼等，恢復(fù)流程包括忘記密碼、重置密碼、其他登錄方式等。

設(shè)計(jì)熟悉的登錄流程

使用簡(jiǎn)潔、常用的頁(yè)面布局和文字，有助于用戶輕松執(zhí)行熟悉的操作。保持設(shè)計(jì)簡(jiǎn)單也有助于將體驗(yàn)輕松擴(kuò)展到不同設(shè)備和屏幕尺寸。

△ Pinterest采用了居中對(duì)齊的重疊式登錄頁(yè)設(shè)計(jì)，用醒目的紅色按鈕來(lái)突出登錄動(dòng)作，還支持Google和Facebook作為其他登錄方式。

登錄頁(yè)是強(qiáng)調(diào)品牌的首要接觸點(diǎn)。登錄操作最好在中心位置，頁(yè)面上的其他元素應(yīng)謹(jǐn)慎增加，避免注意力從登錄任務(wù)上移開(kāi)。

設(shè)計(jì)思考：

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

專注設(shè)計(jì)

登錄（或恢復(fù)）操作應(yīng)引起用戶的全部注意力，最好將登錄頁(yè)表單放在頁(yè)面中心位置；

不需要復(fù)雜或冗長(zhǎng)的文字解釋，例如可以利用簡(jiǎn)單的“輸入密碼”來(lái)提示用戶完成操作；

要求用戶一次只做一件重要的事情，例如將找回密碼這種復(fù)雜的流程分解為多個(gè)步驟進(jìn)行。

△ Facebook保留用戶的登錄信息，并將恢復(fù)流程分為幾個(gè)邏輯步驟。

△ 亞馬遜將輔助恢復(fù)選項(xiàng)放在“更多幫助”中，這有助于使主要操作保持重點(diǎn)。

設(shè)計(jì)思考：

• 使用卡片式布局；
• 將操作分為主要?jiǎng)幼骱痛我獎(jiǎng)幼鳎?/li>
• 使用尺寸大而突出的登錄按鈕；
• 盡量減少次要操作的次數(shù)，以避免使頁(yè)面出現(xiàn)混亂。

給出明確反饋并在操作失敗時(shí)提供幫助

在登錄過(guò)程的每個(gè)階段，用戶都可能會(huì)失敗。輸入錯(cuò)誤的郵箱，忘記密碼或網(wǎng)絡(luò)問(wèn)題等，所有這些問(wèn)題都可能導(dǎo)致登錄意圖急劇下降。

因此清晰及時(shí)的反饋設(shè)計(jì)對(duì)用戶來(lái)說(shuō)很重要。

△ 信息輸入錯(cuò)誤時(shí)會(huì)提示錯(cuò)誤具體的原因。

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

設(shè)計(jì)思考：

• 鼓勵(lì)用戶嘗試合適的替代方案；
• 登錄失敗后，將用戶導(dǎo)航到單獨(dú)頁(yè)面并組織其他登錄方法；
• 展示最有效的登錄方法，并在發(fā)生問(wèn)題時(shí)及時(shí)對(duì)用戶做出反饋。

多種登錄方式提供靈活性

除了輸入賬號(hào)密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用戶選擇，同時(shí)防止忘記密碼造成無(wú)法登錄的情況。

添加過(guò)多的登錄方式會(huì)使頁(yè)面混亂，降低登錄意圖，附加選項(xiàng)應(yīng)該限制為 2 或 3 種方式。

△ Medium登錄表單的設(shè)計(jì)盡管很清晰，但過(guò)多的登錄方式會(huì)阻礙用戶的選擇和判斷。

△ Airbnb登錄頁(yè)能看到大量的輔助登錄方式，過(guò)多的選項(xiàng)可能會(huì)導(dǎo)致用戶的認(rèn)知負(fù)荷。

設(shè)計(jì)思考：

當(dāng)前無(wú)密碼登錄正在迅速普及。在很多移動(dòng) App 中，基于手機(jī)號(hào)的身份驗(yàn)證已成為常態(tài)，指紋和 FaceID 也出現(xiàn)在許多地方，從而實(shí)現(xiàn)了無(wú)縫和安全的身份驗(yàn)證流程。

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

登錄意味著信任

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

雖然減少與用戶的摩擦很重要，但有時(shí)網(wǎng)站也會(huì)提供額外的身份驗(yàn)證來(lái)確保用戶信息的安全。

△ B站利用文字驗(yàn)證方式來(lái)增強(qiáng)用戶帳戶的安全性。

設(shè)計(jì)思考：

登錄表單應(yīng)該代表品牌的形象，任何視覺(jué)上的變化都必須慢慢進(jìn)行，因?yàn)橥耆淖円曈X(jué)設(shè)計(jì)可能會(huì)導(dǎo)致缺乏信任。

確定用戶類型

登錄意圖是一種體驗(yàn)，在這種體驗(yàn)中用戶角色和類型可以無(wú)所不包。

可以嘗試以下方式來(lái)定義用戶的范圍以便更清楚的了解用戶：

• 登錄渠道：與 PM 合作找出在登錄流程中用戶交互和退出的關(guān)鍵階段。
• 登錄入口：用戶是通過(guò)郵箱、搜索引擎還是通過(guò)應(yīng)用跳轉(zhuǎn)到登錄頁(yè)？
• 常用設(shè)備：手機(jī)、瀏覽器等設(shè)備可以為用戶帶來(lái)個(gè)性化的體驗(yàn)。
• 用戶群組：利用年齡或地理位置等方式也能進(jìn)行分離用戶群主的劃分。

登錄頁(yè)設(shè)計(jì)實(shí)例分析

通過(guò)分析具有代表性的登錄頁(yè)設(shè)計(jì)來(lái)展示登陸頁(yè)的多種設(shè)計(jì)表達(dá)。

△ Google采用多階段的登錄方式，郵箱和密碼分兩步進(jìn)行輸入。這種格式對(duì)谷歌來(lái)說(shuō)有一些安全優(yōu)勢(shì)，也可以在下一步為用戶提供個(gè)性化的選擇。

△ Uber的登錄頁(yè)采用簡(jiǎn)單的樣式，注重使用體驗(yàn)，引導(dǎo)用戶輸入手機(jī)號(hào)來(lái)進(jìn)行下一步。

△ Facebook利用右對(duì)齊的登錄表單很好地集中注意力，左邊的空間被用來(lái)展示品牌的信息和形象。

△ 亞馬遜的登錄頁(yè)從視覺(jué)設(shè)計(jì)上看有些陳舊，但卻是管理用戶注意力的一個(gè)很好的例子。黃色的“繼續(xù)”按鈕和簡(jiǎn)潔的頁(yè)面使登錄看起來(lái)簡(jiǎn)單而快速。

△ Figma的登錄頁(yè)位于畫(huà)面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁(yè)面整體的設(shè)計(jì)利用線框組成，非常簡(jiǎn)潔高效。

最后

為了激發(fā)更多靈感，幫大家整理了一套優(yōu)質(zhì)的登錄頁(yè)設(shè)計(jì)素材，附件下載！

如覺(jué)得有幫助，歡迎關(guān)注作者微信公眾號(hào)：「Clip設(shè)計(jì)夾」