登入頁需要注意的設計細節和邏輯,我都幫你總結好了

編輯導語:我們在使用大多產品時,剛進入軟體都需要一個登入或者註冊的動作,每個軟體的登陸方式頁面都差不多,但一些小的細節體驗最能影響使用者;本文作者分享了關於登入頁設計細節和邏輯,我們一起來了解一下。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

幾乎所有的登入頁看起來都大同小異,透過輸入賬號和密碼就能夠進入,但仔細思考會發現,每個登入頁都有自己差異化的點,而這些點正是產品無一物二的地方。

確保使用者成功且無壓力的登入體驗需要我們不斷地思考。

01 什麼是登入體驗?

登入體驗是指使用者透過入口進入應用、網站或服務,建立自己的身份。

登入流程通常由主登入流程和恢復流程組成,其中主登入流程包括填寫使用者名稱、手機號、密碼等,恢復流程包括忘記密碼、重置密碼、其他登入方式等。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

登入體驗的目標是確保使用者成功登入帳戶。

02 設計熟悉的登入流程

使用簡潔、常用的頁面佈局和文字,有助於使用者輕鬆執行熟悉的操作,保持設計簡單也有助於將體驗輕鬆擴充套件到不同裝置和螢幕尺寸。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

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

登入頁是強調品牌的首要接觸點。登入操作最好於中心位置,頁面上的其他元素應謹慎增加,避免注意力從登入任務上移開。

設計思考:

使用者花在登入頁上的時間越少越好,要讓使用者儘快發現產品中的優點和價值!

03 專注設計

登入(或恢復)操作應引起使用者的全部注意力:

  • 最好將登入頁表單放在頁面中心位置;
  • 不需要複雜或冗長的文字解釋,例如可以利用簡單的“輸入密碼”來提示使用者完成操作;
  • 要求使用者一次只做一件重要的事情,例如將找回密碼這種複雜的流程分解為多個步驟進行。
登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Facebook保留使用者的登入資訊,並將恢復流程分為幾個邏輯步驟。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

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

設計思考:

  • 使用卡片式佈局;
  • 將操作分為主要動作和次要動作;
  • 使用尺寸大而突出的登入按鈕;
  • 儘量減少次要操作的次數,以避免使頁面出現混亂。
04 給出明確反饋並在操作失敗時提供幫助

在登入過程的每個階段,使用者都可能會失敗;輸入錯誤的郵箱,忘記密碼或網路問題等,所有這些問題都可能導致登入意圖急劇下降。

因此清晰及時的反饋設計對使用者來說很重要。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

資訊輸入錯誤時會提示錯誤具體的原因。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

密碼輸入有誤時,Facebook會在下方增加“使用Google登入”選項。

設計思考:

  • 鼓勵使用者嘗試合適的替代方案;
  • 登入失敗後,將使用者導航到單獨頁面並組織其他登入方法;
  • 展示最有效的登入方法,並在發生問題時及時對使用者做出反饋。
05 多種登入方式提供靈活性

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

新增過多的登入方式會使頁面混亂,降低登入意圖,附加選項應該限制為2或3種方式。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Medium登入表單的設計儘管很清晰,但過多的登入方式會阻礙使用者的選擇和判斷。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Airbnb登入頁能看到大量的輔助登入方式,過多的選項可能會導致使用者的認知負荷。

設計思考:

當前無密碼登入正在迅速普及。在很多移動App中,基於手機號的身份驗證已成為常態,指紋和FaceID也出現在許多地方,從而實現了無縫和安全的身份驗證流程。

找到產品最適合的登入方式,並將其作為主要選擇能有效提升效率!

06 登入意味著信任

登入涉及使用者輸入敏感的個人資料,例如手機號、郵箱、密碼等,使用者願意輸入資訊意味著他們信任這個平臺或產品。

雖然減少與使用者的摩擦很重要,但有時網站也會提供額外的身份驗證來確保使用者資訊的安全。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

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

設計思考:

登入表單應該代表品牌的形象,任何視覺上的變化都必須慢慢進行,因為完全改變視覺設計可能會導致缺乏信任。

07 確定使用者型別

登入意圖是一種體驗,在這種體驗中使用者角色和型別可以無所不包。

可以嘗試以下方式來定義使用者的範圍以便更清楚的瞭解使用者:

  • 登入渠道:與PM合作找出在登入流程中使用者互動和退出的關鍵階段。
  • 登入入口:使用者是透過郵箱、搜尋引擎還是透過應用跳轉到登入頁?
  • 常用裝置:手機、瀏覽器等裝置可以為使用者帶來個性化的體驗。
  • 使用者群組:利用年齡或地理位置等方式也能進行分離使用者群主的劃分。
08 登入頁設計例項分析

透過分析具有代表性的登入頁設計來展示登陸頁的多種設計表達。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Google採用多階段的登入方式,郵箱和密碼分兩步進行輸入。這種格式對谷歌來說有一些安全優勢,也可以在下一步為使用者提供個性化的選擇。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Uber的登入頁採用簡單的樣式,注重使用體驗,引導使用者輸入手機號來進行下一步。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

Facebook利用右對齊的登入表單很好地集中注意力,左邊的空間被用來展示品牌的資訊和形象。

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

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

登入頁需要注意的設計細節和邏輯,我都幫你總結好了

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

作者:Clippp,微信公眾號:Clip設計夾。每週精選設計文章,專注分享關於產品、互動、UI視覺上的設計思考。

本文由 @Clippp 翻譯釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

版權宣告:本文源自 網路, 於,由 楠木軒 整理釋出,共 2165 字。

轉載請註明: 登入頁需要注意的設計細節和邏輯,我都幫你總結好了 - 楠木軒