2021-9-26 資深UI設計者
登錄是進入一個應用程序 、網(wǎng)站或服務的入口。幫助用戶建立他們的賬戶。
讓我們花點時間來定義一下“登錄目標”這個術語，這是在做設計決策時的關鍵。
登錄目標是指用戶進入登錄流程的意愿。以有聲思維來表達，它可以是 “我想登錄”、“我想檢查我的電子郵件”、“帶我去那里”，等等。
當用戶進入到登錄頁時，他們可能沒有登錄意愿。可能會產(chǎn)生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現(xiàn)在該怎么辦？”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設備，都可能是缺乏登陸意愿的跡象。
我們得到了登陸目標
保留或增強登錄流程中的登陸意愿是很好的目標，下面的準則都是為這個目標量身定做的。
設計熟悉的體驗，雖說不是設計師最喜歡的設計準則，但是與整個生態(tài)系統(tǒng)中最好的體驗保持一致是非常重要的。例如使用簡單、公認的布局，使用眾所周知的術語和文案，都有助于用戶自信而輕松地進行熟悉的操作。
保持通用的設計也有助于將頁面輕松擴展到不同的形式和設備。
Pinterest 有一個傳統(tǒng)的、居中的覆蓋式登錄頁。它有一個亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項。
滑到最后，有我對網(wǎng)絡上流行的成功登錄經(jīng)驗的總結(jié)。這就把我們帶到了下一個問題 —— 創(chuàng)新的界限在哪里？
登錄是一個品牌展示的絕佳機會點。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營銷信息。和大多數(shù)設計問題一樣，登錄頁品牌展示的關鍵在于平衡。登錄操作應該一直占據(jù)中心位置。頁面上的其他元素必須謹慎規(guī)劃好，不應該奪走登陸操作的注意力。
一條優(yōu)秀的經(jīng)驗之談：用戶在登錄頁面上花費的時間越少越好。幫助他們繼續(xù)前進，盡快發(fā)現(xiàn)產(chǎn)品中的優(yōu)點和價值。
快速回顧一下：用戶在登錄頁面上花費的時間越少越好。根據(jù)這一點，登錄（或恢復）操作應當占據(jù)用戶的全部注意力。
在恢復體驗中，將一套復雜的操作分解成多個步驟是很有效的。安排用戶一次只做一件重要的事情！例如：輸入你的手機號碼和輸入發(fā)送到你手機上的驗證碼是兩個獨立的步驟。
Facebook 在頁面中保持用戶信息在右側(cè)，并將恢復流程分解為多個步驟。
亞馬遜把它的恢復流程分解成多個步驟。它將次要的恢復選項設置為 “我需要更多幫助 ”的可擴展部分，這有助于保持注意力集中在主要操作。
保持注意力集中在主要操作的技巧：
在登錄過程的每個階段，用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網(wǎng)絡問題，所有這些都可能導致登錄意愿的急劇下降。因此，登錄界面以最恰當?shù)姆绞交貞脩羰欠浅Ｖ匾摹Ｇ逦⒓皶r、精心編輯的錯誤提示信息能起到很大幫助。
錯誤信息包含有用的提示/暗示，指明你在失敗時可以做什么
當你密碼登陸失敗，但你有一個 Gmail ID 時，F(xiàn)acebook 會增加一個 “用 Google 賬號登錄 ”的功能
指導用戶恢復的技巧：
重點是讓用戶知道平臺識別出了他們，并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意愿。
保留登錄痕跡的方法：
對于你的平臺應該提供哪些登錄方法，沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法（除了用戶名+密碼），這樣用戶就有了選擇，以防他們忘記密碼。這些方法可以是基于電話號碼的登錄、人臉識別，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平臺添加最流行和最安全的方案。
需要注意的是 —— 增加很多的登陸方法會使頁面變得混亂，可能會導致登錄意愿降低！將額外的選項限制在 2 或 3 種。
針對最常用的登陸方式進行優(yōu)化，并明確區(qū)分主要和次要方式。這些選項通常被證明是需要重置密碼（以防用戶忘記密碼）的很好的替代方法，但同時也被認為是一個乏味的步驟。情況允許時，應智能地浮現(xiàn)其他登陸選項并進行個性化處理。例如：如果用戶是通過電子郵件登錄，提供一個帶有一次性鏈接的登錄選項可能會有效。
在此提供 Medium 登錄頁的案例。雖然清晰且設計良好，但它確實有太多的登錄方法。不得不回訪 Medium 的設計者，如果這個設計對他們來說是好的！
無密碼登錄正火速流行起來。特別對于只有移動端的應用程序來說，基于電話號碼的認證已常態(tài)化。指紋和 FaceID 在許多地方出現(xiàn)，使認證流程變得快速、安全。為平臺找到最適合（且可開發(fā)）的方法，并將其作為主要登錄選項。
登錄涉及到用戶輸入敏感的個人數(shù)據(jù)，如電子郵件、密碼和電話號碼 —— 這是決定了他們與平臺關系的敏感時刻。
登錄框代表了品牌，任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。
登錄也是（有用的）保障 —— 足以讓壞人無法進入系統(tǒng)!
雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那么出現(xiàn)額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性 —— 例如：強密碼、雙重認證等。
之前有提到過，投入足夠的時間去調(diào)研用戶，有助于提高登錄意愿！這一點是很重要的。
登錄是一種體驗，你的用戶角色可以是各種各樣的 —— 每個人都可能擁有一個你平臺的服務賬戶！如果可能的話，縮小你的角色范圍。
情況允許時，像我這樣（為社交媒體平臺設計），可以嘗試以下方案：
以下是我對網(wǎng)絡上我最喜歡的登錄頁進行的總結(jié)，包含一些我經(jīng)常訪問的平臺。歡迎推薦更多登錄頁！
Google（谷歌）打破了標識優(yōu)先的格式 —— 改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優(yōu)勢，也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。
Uber 的登錄頁是簡單且聚焦的，允許用戶輸入他們的電話號碼并進入下一步。
Facebook 有幾個登錄方案，他們用這些方案進行實驗和 A/B 測試 —— 這是一個右對齊的登錄框案例，它很好地突出了重點。左側(cè)的空間被用來打造積極的品牌形象 —— 總體來說是成功的登錄體驗。
Pinterest 做了 一個簡單居中的疊加表單，有碩大的輸入框 —— 不斷吸引用戶！還有一個亮紅色的登錄主按鈕，以及一些額外的社交登錄選項。
盡管 Airbnb（愛彼迎）在很多方面都做得很好，但它的登錄頁讓人感到操作繁多，這也許是因為基于手機號碼登錄，也許是因為大量的次要登錄選項，導致相當多的認知負荷！
LinkedIn（領英）很好地保持登錄框的簡介、聚焦和居中，有一個醒目的主登錄按鈕。
我對 Dropbox 的登錄頁面持猶豫態(tài)度——插圖很好看，但它的顏色與界面按鈕的顏色相似。這是附加元素分散注意力的案例。就我個人而言，我喜歡在界面中大膽使用插圖，但評估插圖的使用環(huán)境也很重要。
Amazon（亞馬遜）的登陸頁視覺設計上有些老舊，但對于管理用戶注意力是一個很好的案例，巨大的黃色“繼續(xù)”按鈕以及頁面上沒有任何干擾，使登錄任務看起來簡單快速。
在登錄頁面上放置廣告可能不是一個好主意，但同時 Yahoo（雅虎）有一個與眾不同的標識在登錄框中，其中設計了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)
我想把 Figma 納入優(yōu)秀的登錄案例中，該頁居中于浮層，Google 登錄被突出展示（也許是 Figma 的首選和推廣的登錄形式？），它非常簡潔，幾乎是線框式的。用戶體驗非常好。
感謝我的產(chǎn)品合作伙伴 Apurva 和我一起學習。采取微小的步驟進行用戶識別，并且使用戶易于接受。這會使你的用戶登錄成功率越來越高！同時這也會為平臺帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發(fā)，并應用于你自己的產(chǎn)品和設計工作中。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務