TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。登錄是非常常見的用戶操作，相信各位讀者經(jīng)常會(huì)體驗(yàn)到各種各樣的登錄過程。但是登錄并不是一個(gè)簡(jiǎn)單的操作過程，其中仍然有很多值得注意的地方。本文結(jié)合各類案例，仔細(xì)說明了登錄過程中的各類細(xì)節(jié)。

登錄頁面的設(shè)計(jì)也許看起來很簡(jiǎn)單。我在 2020 年花了相當(dāng)多的時(shí)間為一家社交媒體巨頭設(shè)計(jì)登錄和注冊(cè)流程，并從中了解到：海量的思考和測(cè)試才能確保用戶成功和輕松的登錄。以下是我總結(jié)出來的重要經(jīng)驗(yàn)。

什么是登錄?

登錄是進(jìn)入一個(gè)應(yīng)用程序 、網(wǎng)站或服務(wù)的入口。幫助用戶建立他們的賬戶。

一個(gè)登錄流程通常包括一個(gè)主要的登錄頁和一個(gè)相當(dāng)復(fù)雜的重置流程，其中包括 “忘記密碼”、重置密碼和其他登錄方法。

登錄的首要目標(biāo)是確保用戶成功登錄到他們的賬戶。

什么是登錄目標(biāo)?

讓我們花點(diǎn)時(shí)間來定義一下“登錄目標(biāo)”這個(gè)術(shù)語，這是在做設(shè)計(jì)決策時(shí)的關(guān)鍵。

登錄目標(biāo)是指用戶進(jìn)入登錄流程的意愿。以有聲思維來表達(dá)，它可以是 “我想登錄”、“我想檢查我的電子郵件”、“帶我去那里”，等等。

當(dāng)用戶進(jìn)入到登錄頁時(shí)，他們可能沒有登錄意愿?？赡軙?huì)產(chǎn)生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現(xiàn)在該怎么辦?”的想法。忘記密碼、半路遇到困難或切換到另一個(gè)頁面/設(shè)備，都可能是缺乏登陸意愿的跡象。

保留或增強(qiáng)登錄流程中的登陸意愿是很好的目標(biāo)，下面的準(zhǔn)則都是為這個(gè)目標(biāo)量身定做的。

設(shè)計(jì)熟悉的體驗(yàn)

設(shè)計(jì)熟悉的體驗(yàn)，雖說不是設(shè)計(jì)師最喜歡的設(shè)計(jì)準(zhǔn)則，但是與整個(gè)生態(tài)系統(tǒng)中最好的體驗(yàn)保持一致是非常重要的。例如使用簡(jiǎn)單、公認(rèn)的布局，使用眾所周知的術(shù)語和文案，都有助于用戶自信而輕松地進(jìn)行熟悉的操作。

保持通用的設(shè)計(jì)也有助于將頁面輕松擴(kuò)展到不同的形式和設(shè)備。

Pinterest 有一個(gè)傳統(tǒng)的、居中的覆蓋式登錄頁。它有一個(gè)亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項(xiàng)。

滑到最后，有我對(duì)網(wǎng)絡(luò)上流行的成功登錄經(jīng)驗(yàn)的總結(jié)。這就把我們帶到了下一個(gè)問題 —— 創(chuàng)新的界限在哪里?

登錄是一個(gè)品牌展示的絕佳機(jī)會(huì)點(diǎn)。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營(yíng)銷信息。和大多數(shù)設(shè)計(jì)問題一樣，登錄頁品牌展示的關(guān)鍵在于平衡。登錄操作應(yīng)該一直占據(jù)中心位置。頁面上的其他元素必須謹(jǐn)慎規(guī)劃好，不應(yīng)該奪走登陸操作的注意力。

一條優(yōu)秀的經(jīng)驗(yàn)之談：用戶在登錄頁面上花費(fèi)的時(shí)間越少越好。幫助他們繼續(xù)前進(jìn)，盡快發(fā)現(xiàn)產(chǎn)品中的優(yōu)點(diǎn)和價(jià)值。

聚焦設(shè)計(jì)

快速回顧一下：用戶在登錄頁面上花費(fèi)的時(shí)間越少越好。根據(jù)這一點(diǎn)，登錄(或恢復(fù))操作應(yīng)當(dāng)占據(jù)用戶的全部注意力。

最好是把登錄框放在頁面的中心。如果你打算把它放在一側(cè)，最好是賦予它核心視覺效果。

對(duì)于文案寫作來說，指明用戶在某一步驟中到底需要做什么才是很重要的!比起冗長(zhǎng)的解釋，一句簡(jiǎn)單的 “輸入密碼”就能起效。幽默、復(fù)雜的行話、技術(shù)術(shù)語和花哨的文筆在登錄體驗(yàn)中是沒有用武之地的。

在恢復(fù)體驗(yàn)中，將一套復(fù)雜的操作分解成多個(gè)步驟是很有效的。安排用戶一次只做一件重要的事情!例如：輸入你的手機(jī)號(hào)碼和輸入發(fā)送到你手機(jī)上的驗(yàn)證碼是兩個(gè)獨(dú)立的步驟。

Facebook 在頁面中保持用戶信息在右側(cè)，并將恢復(fù)流程分解為多個(gè)步驟。

亞馬遜把它的恢復(fù)流程分解成多個(gè)步驟。它將次要的恢復(fù)選項(xiàng)設(shè)置為 “我需要更多幫助 ”的可擴(kuò)展部分，這有助于保持注意力集中在主要操作。

保持注意力集中在主要操作的技巧：

• 登錄框可以布局在一個(gè)主頁、疊加頁，或一個(gè)獨(dú)立頁面。
• 使用卡片式布局
• 將操作分為主要和次要操作
• 使用一個(gè)大而醒目的登錄按鈕
• 盡量減少次要操作的數(shù)量 —— 避免出現(xiàn)任何與核心登錄操作無關(guān)的內(nèi)容。

給予明確的反饋并在用戶失敗時(shí)提供幫助

在登錄過程的每個(gè)階段，用戶都可能失敗。電子郵件地址輸入錯(cuò)誤、密碼輸入錯(cuò)誤或忘記密碼、網(wǎng)絡(luò)問題，所有這些都可能導(dǎo)致登錄意愿的急劇下降。因此，登錄界面以最恰當(dāng)?shù)姆绞交貞?yīng)用戶是非常重要的。清晰、及時(shí)、精心編輯的錯(cuò)誤提示信息能起到很大幫助。

錯(cuò)誤信息包含有用的提示/暗示，指明你在失敗時(shí)可以做什么。

當(dāng)你密碼登陸失敗，但你有一個(gè) Gmail ID 時(shí)，F(xiàn)acebook 會(huì)增加一個(gè) “用 Google 賬號(hào)登錄 ”的功能。

指導(dǎo)用戶恢復(fù)的技巧：

• 鼓勵(lì)用戶嘗試合適的替代方案
• 在用戶失敗后，安排替代的登錄方案，同時(shí)將用戶導(dǎo)航至一個(gè)獨(dú)立的頁面
• 在文本中展示出最有用的登錄方案，并在出現(xiàn)錯(cuò)誤時(shí)對(duì)用戶做出積極響應(yīng)!

盡量保留登錄痕跡

重點(diǎn)是讓用戶知道平臺(tái)識(shí)別出了他們，并提供一個(gè)歡迎回歸的體驗(yàn)。這有助于提升用戶的登錄意愿。

保留登錄痕跡的方法：

• 像 “記住我”這樣的功能
• 預(yù)先填寫上一步收集到的字段，例如：在跳轉(zhuǎn)到恢復(fù)流程時(shí)，預(yù)先填寫登錄步驟中收集到的電子郵件 ID
• 如果使用的是兩步式登錄，為用戶提供個(gè)性化的登錄方式是個(gè)不錯(cuò)的主意 —— 用戶對(duì)電話OTP(一次性驗(yàn)證碼)登錄更滿意?還是電子郵件+密碼?記住用戶上次選擇的登陸方式可以提升用戶的登錄意愿，并讓他們感覺到登錄體驗(yàn)的自然和舒適。
• 在企業(yè) SSO(單點(diǎn)登錄) 中，用戶可能會(huì)用多個(gè)賬戶登錄。在檢測(cè)到多個(gè)賬戶的情況下，最好是將這些賬戶選項(xiàng)呈現(xiàn)給用戶，讓他們選擇他們想使用的賬戶。

靈活提供多種登錄方式

對(duì)于你的平臺(tái)應(yīng)該提供哪些登錄方法，沒有一個(gè)放之四海而皆準(zhǔn)的方案。最好是提供一到兩種額外的方法(除了用戶名+密碼)，這樣用戶就有了選擇，以防他們忘記密碼。這些方法可以是基于電話號(hào)碼的登錄、人臉識(shí)別，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平臺(tái)添加最流行和最安全的方案。

需要注意的是 —— 增加很多的登陸方法會(huì)使頁面變得混亂，可能會(huì)導(dǎo)致登錄意愿降低!將額外的選項(xiàng)限制在 2 或 3 種。

針對(duì)最常用的登陸方式進(jìn)行優(yōu)化，并明確區(qū)分主要和次要方式。這些選項(xiàng)通常被證明是需要重置密碼(以防用戶忘記密碼)的很好的替代方法，但同時(shí)也被認(rèn)為是一個(gè)乏味的步驟。情況允許時(shí)，應(yīng)智能地浮現(xiàn)其他登陸選項(xiàng)并進(jìn)行個(gè)性化處理。例如：如果用戶是通過電子郵件登錄，提供一個(gè)帶有一次性鏈接的登錄選項(xiàng)可能會(huì)有效。

在此提供 Medium 登錄頁的案例。雖然清晰且設(shè)計(jì)良好，但它確實(shí)有太多的登錄方法。不得不回訪 Medium 的設(shè)計(jì)者，如果這個(gè)設(shè)計(jì)對(duì)他們來說是好的!

無密碼登錄正火速流行起來。特別對(duì)于只有移動(dòng)端的應(yīng)用程序來說，基于電話號(hào)碼的認(rèn)證已常態(tài)化。指紋和 FaceID 在許多地方出現(xiàn)，使認(rèn)證流程變得快速、安全。為平臺(tái)找到最適合(且可開發(fā))的方法，并將其作為主要登錄選項(xiàng)。

登錄是信任敏感的時(shí)刻

登錄涉及到用戶輸入敏感的個(gè)人數(shù)據(jù)，如電子郵件、密碼和電話號(hào)碼 —— 這是決定了他們與平臺(tái)關(guān)系的敏感時(shí)刻。

登錄框代表了品牌，任何視覺上的改變都必須緩慢進(jìn)行——因?yàn)檎w的視覺變化可能會(huì)失去用戶信任。

登錄也是(有用的)保障 —— 足以讓壞人無法進(jìn)入系統(tǒng)!

雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那么出現(xiàn)額外的認(rèn)證也變得很重要。這可能是一個(gè)很好的機(jī)會(huì)去提醒用戶能夠采取哪些措施來加強(qiáng)他們賬戶的安全性 —— 例如：強(qiáng)密碼、雙重認(rèn)證等。

通過調(diào)研確定用戶類型

之前有提到過，投入足夠的時(shí)間去調(diào)研用戶，有助于提高登錄意愿!這一點(diǎn)是很重要的。

登錄是一種體驗(yàn)，你的用戶角色可以是各種各樣的 —— 每個(gè)人都可能擁有一個(gè)你平臺(tái)的服務(wù)賬戶!如果可能的話，縮小你的角色范圍。

情況允許時(shí)，像我這樣(為社交媒體平臺(tái)設(shè)計(jì))，可以嘗試以下方案：

• 登錄漏斗 —— 與項(xiàng)目管理人員合作，找出用戶在登錄流程中互動(dòng)和放棄的關(guān)鍵點(diǎn)。
• 登錄入口 —— 用戶是通過電子郵件進(jìn)入登錄頁面?還是通過搜索引擎的結(jié)果?還是當(dāng)他們?cè)谑褂卯a(chǎn)品時(shí)?或是在應(yīng)用程序中?你可以利用這些入口點(diǎn)作為線索，為用戶展現(xiàn)出最相關(guān)的選項(xiàng)。
• 已知的設(shè)備 —— 手機(jī)、瀏覽器和已知的設(shè)備可以有助于為用戶提供受歡迎的、個(gè)性化的登陸體驗(yàn)。
• 用戶群組 —— 根據(jù)用戶特性進(jìn)行劃分，如網(wǎng)絡(luò)/移動(dòng)、年齡組和地域，也能有幫助。

在用戶沒有登錄時(shí)，使用這些線索可以增加用戶的登錄意愿。采取微小的步驟進(jìn)行用戶識(shí)別，并且使用戶易于接受。這有助于你提高登錄成功率!反之這也會(huì)為你的平臺(tái)帶來更多的活躍用戶，每個(gè)人都能成為贏家。

案例介紹

以下是我對(duì)網(wǎng)絡(luò)上我最喜歡的登錄頁進(jìn)行的總結(jié)，包含一些我經(jīng)常訪問的平臺(tái)。歡迎推薦更多登錄頁!

Google(谷歌)打破了標(biāo)識(shí)優(yōu)先的格式 —— 改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對(duì)于 Google 有安全優(yōu)勢(shì)，也可以使他們?cè)诮酉聛淼牟襟E中為用戶提供個(gè)性化的選擇。頁面也是最小的、全白的、聚焦的。

Uber 的登錄頁是簡(jiǎn)單且聚焦的，允許用戶輸入他們的電話號(hào)碼并進(jìn)入下一步。

Facebook 有幾個(gè)登錄方案，他們用這些方案進(jìn)行實(shí)驗(yàn)和 A/B 測(cè)試 —— 這是一個(gè)右對(duì)齊的登錄框案例，它很好地突出了重點(diǎn)。左側(cè)的空間被用來打造積極的品牌形象 —— 總體來說是成功的登錄體驗(yàn)。

Pinterest 做了 一個(gè)簡(jiǎn)單居中的疊加表單，有碩大的輸入框 —— 不斷吸引用戶!還有一個(gè)亮紅色的登錄主按鈕，以及一些額外的社交登錄選項(xiàng)。

盡管 Airbnb(愛彼迎)在很多方面都做得很好，但它的登錄頁讓人感到操作繁多，這也許是因?yàn)榛谑謾C(jī)號(hào)碼登錄，也許是因?yàn)榇罅康拇我卿涍x項(xiàng)，導(dǎo)致相當(dāng)多的認(rèn)知負(fù)荷!

LinkedIn(領(lǐng)英)很好地保持登錄框的簡(jiǎn)介、聚焦和居中，有一個(gè)醒目的主登錄按鈕。

我對(duì) Dropbox 的登錄頁面持猶豫態(tài)度——插圖很好看，但它的顏色與界面按鈕的顏色相似。這是附加元素分散注意力的案例。就我個(gè)人而言，我喜歡在界面中大膽使用插圖，但評(píng)估插圖的使用環(huán)境也很重要。

Amazon(亞馬遜)的登陸頁視覺設(shè)計(jì)上有些老舊，但對(duì)于管理用戶注意力是一個(gè)很好的案例，巨大的黃色“繼續(xù)”按鈕以及頁面上沒有任何干擾，使登錄任務(wù)看起來簡(jiǎn)單快速。

在登錄頁面上放置廣告可能不是一個(gè)好主意，但同時(shí) Yahoo(雅虎)有一個(gè)與眾不同的標(biāo)識(shí)在登錄框中，其中設(shè)計(jì)了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)

我想把 Figma 納入優(yōu)秀的登錄案例中，該頁居中于浮層，Google 登錄被突出展示(也許是 Figma 的首選和推廣的登錄形式?)，它非常簡(jiǎn)潔，幾乎是線框式的。用戶體驗(yàn)非常好。

感謝我的產(chǎn)品合作伙伴 Apurva 和我一起學(xué)習(xí)。采取微小的步驟進(jìn)行用戶識(shí)別，并且使用戶易于接受。這會(huì)使你的用戶登錄成功率越來越高!同時(shí)這也會(huì)為平臺(tái)帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發(fā)，并應(yīng)用于你自己的產(chǎn)品和設(shè)計(jì)工作中。