大家好，我是Clippp。今天為大家分享的文章是「登錄頁」設(shè)計。幾乎所有的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但仔細思考會發(fā)現(xiàn)，每個登錄頁都有差異化的點，而這些點正是產(chǎn)品無一物二的地方。

1、什么是登錄體驗？

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

登錄流程通常由主登錄流程和恢復(fù)流程組成，其中主登錄流程包括填寫用戶名、手機號、密碼等，恢復(fù)流程包括忘記密碼、重置密碼、其他登錄方式等。登錄體驗的目標是確保用戶成功登錄帳戶。

2、設(shè)計熟悉的登錄流程

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

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

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

設(shè)計思考：

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

3、專注設(shè)計

登錄(或恢復(fù))操作應(yīng)引起用戶的全部注意力：

• 最好將登錄頁表單放在頁面中心位置；

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

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

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

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

設(shè)計思考：

使用卡片式布局；

將操作分為主要動作和次要動作；

使用尺寸大而突出的登錄按鈕；

盡量減少次要操作的次數(shù)，以避免使頁面出現(xiàn)混亂。

4、給出明確反饋并在操作失敗時提供幫助

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

因此清晰及時的反饋設(shè)計對用戶來說很重要。

▲ 信息輸入錯誤時會提示錯誤具體的原因。

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

設(shè)計思考：

鼓勵用戶嘗試合適的替代方案；

登錄失敗后，將用戶導(dǎo)航到單獨頁面并組織其他登錄方法；

展示最有效的登錄方法，并在發(fā)生問題時及時對用戶做出反饋。

5、多種登錄方式提供靈活性

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

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

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

▲ Airbnb登錄頁能看到大量的輔助登錄方式，過多的選項可能會導(dǎo)致用戶的認知負荷。

設(shè)計思考：

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

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

6、登錄意味著信任

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

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

▲ B站利用文字驗證方式來增強用戶帳戶的安全性。

設(shè)計思考：

登錄表單應(yīng)該代表品牌的形象，任何視覺上的變化都必須慢慢進行，因為完全改變視覺設(shè)計可能會導(dǎo)致缺乏信任。

7、確定用戶類型

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

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

登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關(guān)鍵階段。

登錄入口：用戶是通過郵箱、搜索引擎還是通過應(yīng)用跳轉(zhuǎn)到登錄頁？

常用設(shè)備：手機、瀏覽器等設(shè)備可以為用戶帶來個性化的體驗。

用戶群組：利用年齡或地理位置等方式也能進行分離用戶群主的劃分。

8、登錄頁設(shè)計實例分析 

通過分析具有代表性的登錄頁設(shè)計來展示登陸頁的多種設(shè)計表達。

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

▲ Uber的登錄頁采用簡單的樣式，注重使用體驗，引導(dǎo)用戶輸入手機號來進行下一步。

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

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

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

文章來源：展開  作者：Clippp

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)