整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
輯導(dǎo)語：用戶登錄是常見的用戶操作，一個有效、清晰的登錄過程在提升用戶登錄意愿與產(chǎn)品體驗的同時，也能潛在地推動后續(xù)用戶轉(zhuǎn)化與留存。那么具體而言，若想提高用戶登錄成功率，可以從哪些方面著手設(shè)計？本文作者就此進行了總結(jié)，不妨來看一下。
登錄頁面的設(shè)計也許看起來很簡單。我在 2020 年花了相當(dāng)多的時間為一家社交媒體巨頭設(shè)計登錄和注冊流程，并從中了解到：海量的思考和測試才能確保用戶成功和輕松的登錄。
以下是我總結(jié)出來的重要經(jīng)驗。
什么是登錄？
登錄是進入一個應(yīng)用程序、網(wǎng)站或服務(wù)的入口。幫助用戶建立他們的賬戶。
什么是登錄目標？
讓我們花點時間來定義一下“登錄目標”這個術(shù)語，這是在做設(shè)計決策時的關(guān)鍵。
登錄目標是指用戶進入登錄流程的意愿。以有聲思維來表達，它可以是 “我想登錄”、”我想檢查我的電子郵件”、”帶我去那里”，等等。
當(dāng)用戶進入到登錄頁時，他們可能沒有登錄意愿。可能會產(chǎn)生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現(xiàn)在該怎么辦？”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設(shè)備，都可能是缺乏登陸意愿的跡象。?
保留或增強登錄流程中的登陸意愿是很好的目標，下面的準則都是為這個目標量身定做的。
一、設(shè)計熟悉的體驗 Design familiar experiences
設(shè)計熟悉的體驗，雖說不是設(shè)計師最喜歡的設(shè)計準則，但是與整個生態(tài)系統(tǒng)中最好的體驗保持一致是非常重要的。例如使用簡單、公認的布局，使用眾所周知的術(shù)語和文案，都有助于用戶自信而輕松地進行熟悉的操作。
保持通用的設(shè)計也有助于將頁面輕松擴展到不同的形式和設(shè)備。
Pinterest 有一個傳統(tǒng)的、居中的覆蓋式登錄頁。
它有一個亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項。
滑到最后——有我對網(wǎng)絡(luò)上流行的成功登錄經(jīng)驗的總結(jié)。這就把我們帶到了下一個問題——創(chuàng)新的界限在哪里？
登錄是一個品牌展示的絕佳機會點。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營銷信息。和大多數(shù)設(shè)計問題一樣，登錄頁品牌展示的關(guān)鍵在于平衡。
登錄操作應(yīng)該一直占據(jù)中心位置。頁面上的其他元素必須謹慎規(guī)劃好，不應(yīng)該奪走登陸操作的注意力。一條優(yōu)秀的經(jīng)驗之談：用戶在登錄頁面上花費的時間越少越好。幫助他們繼續(xù)前進，盡快發(fā)現(xiàn)產(chǎn)品中的優(yōu)點和價值。
快速回顧一下：用戶在登錄頁面上花費的時間越少越好。根據(jù)這一點，登錄（或恢復(fù)）操作應(yīng)當(dāng)占據(jù)用戶的全部注意力。
在恢復(fù)體驗中，將一套復(fù)雜的操作分解成多個步驟是很有效的。安排用戶一次只做一件重要的事情！例如：輸入你的手機號碼和輸入發(fā)送到你手機上的驗證碼是兩個獨立的步驟。
Facebook 在頁面中保持用戶信息在右側(cè)，并將恢復(fù)流程分解為多個步驟。
亞馬遜把它的恢復(fù)流程分解成多個步驟。
它將次要的恢復(fù)選項設(shè)置為 “我需要更多幫助 “的可擴展部分，這有助于保持注意力集中在主要操作。
保持注意力集中在主要操作的技巧：
三、給予明確的反饋并在用戶失敗時提供幫助 Give clear feedback & provide a helping hand in case users fail
在登錄過程的每個階段，用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網(wǎng)絡(luò)問題——所有這些都可能導(dǎo)致登錄意愿的急劇下降。
因此，登錄界面以最恰當(dāng)?shù)姆绞交貞?yīng)用戶是非常重要的。清晰、及時、精心編輯的錯誤提示信息能起到很大幫助。
錯誤信息包含有用的提示/暗示，指明你在失敗時可以做什么
當(dāng)你密碼登陸失敗，但你有一個 Gmail ID 時，F(xiàn)acebook 會增加一個 “用 Google 賬號登錄 “的功能
指導(dǎo)用戶恢復(fù)的技巧：
四、盡量保留登錄痕跡 Retain context whenever possible
重點是讓用戶知道平臺識別出了他們，并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意愿。
保留登錄痕跡的方法：
五、靈活提供多種登錄方式 Multiple login methods provide flexibility
對于你的平臺應(yīng)該提供哪些登錄方法，沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法（除了用戶名+密碼），這樣用戶就有了選擇，以防他們忘記密碼。
這些方法可以是基于電話號碼的登錄、人臉識別，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平臺添加最流行和最安全的方案。
需要注意的是——增加很多的登陸方法會使頁面變得混亂，可能會導(dǎo)致登錄意愿降低！將額外的選項限制在 2 或 3 種。
針對最常用的登陸方式進行優(yōu)化，并明確區(qū)分主要和次要方式。這些選項通常被證明是需要重置密碼（以防用戶忘記密碼）的很好的替代方法，但同時也被認為是一個乏味的步驟。
情況允許時，應(yīng)智能地浮現(xiàn)其他登陸選項并進行個性化處理。例如：如果用戶是通過電子郵件登錄，提供一個帶有一次性鏈接的登錄選項可能會有效。
在此提供 Medium 登錄頁的案例——雖然清晰且設(shè)計良好，但它確實有太多的登錄方法。不得不回訪 Medium 的設(shè)計者，如果這個設(shè)計對他們來說是好的！
無密碼登錄正火速流行起來。特別對于只有移動端的應(yīng)用程序來說，基于電話號碼的認證已常態(tài)化。指紋和 FaceID 在許多地方出現(xiàn)，使認證流程變得快速、安全。為平臺找到最適合（且可開發(fā)）的方法，并將其作為主要登錄選項。
六、登錄是信任敏感的時刻 Know that login is a trust-sensitive moment
登錄涉及到用戶輸入敏感的個人數(shù)據(jù)，如電子郵件、密碼和電話號碼——這是決定了他們與平臺關(guān)系的敏感時刻。
登錄框代表了品牌，任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。
登錄也是（有用的）保障——足以讓壞人無法進入系統(tǒng)！
雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那么出現(xiàn)額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性——例如：強密碼、雙重認證等。
七、通過調(diào)研確定用戶類型 Find out clues and determine your user type
之前有提到過，投入足夠的時間去調(diào)研用戶，有助于提高登錄意愿！這一點是很重要的。
登錄是一種體驗，你的用戶角色可以是各種各樣的——每個人都可能擁有一個你平臺的服務(wù)賬戶！如果可能的話，縮小你的角色范圍。
情況允許時，像我這樣（為社交媒體平臺設(shè)計），可以嘗試以下方案：
1）登錄漏斗——與項目管理人員合作，找出用戶在登錄流程中互動和放棄的關(guān)鍵點。
2）登錄入口——用戶是通過電子郵件進入登錄頁面？還是通過搜索引擎的結(jié)果？還是當(dāng)他們在使用產(chǎn)品時？或是在應(yīng)用程序中？你可以利用這些入口點作為線索，為用戶展現(xiàn)出最相關(guān)的選項。
3）已知的設(shè)備——手機、瀏覽器和已知的設(shè)備可以有助于為用戶提供受歡迎的、個性化的登陸體驗。
4）用戶群組——根據(jù)用戶特性進行劃分，如網(wǎng)絡(luò)/移動、年齡組和地域，也能有幫助。
5）在用戶沒有登錄時，使用這些線索可以增加用戶的登錄意愿。采取微小的步驟進行用戶識別，并且使用戶易于接受。這有助于你提高登錄成功率！反之這也會為你的平臺帶來更多的活躍用戶，每個人都能成為贏家。
以下是我對網(wǎng)絡(luò)上我最喜歡的登錄頁進行的總結(jié)，包含一些我經(jīng)常訪問的平臺。歡迎推薦更多登錄頁！
Google（谷歌）打破了標識優(yōu)先的格式——改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優(yōu)勢，也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。
Uber 的登錄頁是簡單且聚焦的，允許用戶輸入他們的電話號碼并進入下一步。
Facebook 有幾個登錄方案，他們用這些方案進行實驗和 A/B 測試——這是一個右對齊的登錄框案例，它很好地突出了重點。左側(cè)的空間被用來打造積極的品牌形象——總體來說是成功的登錄體驗。
Pinterest 做了一個簡單居中的疊加表單，有碩大的輸入框——不斷吸引用戶！還有一個亮紅色的登錄主按鈕，以及一些額外的社交登錄選項。
盡管 Airbnb（愛彼迎）在很多方面都做得很好，但它的登錄頁讓人感到操作繁多——這也許是因為基于手機號碼登錄，也許是因為大量的次要登錄選項，導(dǎo)致相當(dāng)多的認知負荷！
LinkedIn（領(lǐng)英）很好地保持登錄框的簡介、聚焦和居中，有一個醒目的主登錄按鈕。
我對 Dropbox 的登錄頁面持猶豫態(tài)度——插圖很好看，但它的顏色與界面按鈕的顏色相似——這是附加元素分散注意力的案例。就我個人而言，我喜歡在界面中大膽使用插圖——但評估插圖的使用環(huán)境也很重要。
Amazon（亞馬遜）的登陸頁視覺設(shè)計上有些老舊，但對于管理用戶注意力是一個很好的案例——巨大的黃色“繼續(xù)”按鈕以及頁面上沒有任何干擾，使登錄任務(wù)看起來簡單快速。
在登錄頁面上放置廣告可能不是一個好主意 —— 但同時 Yahoo（雅虎）有一個與眾不同的標識在登錄框中，其中設(shè)計了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)
我想把 Figma 納入優(yōu)秀的登錄案例中——該頁居中于浮層，Google 登錄被突出展示（也許是 Figma 的首選和推廣的登錄形式？），它非常簡潔，幾乎是線框式的。用戶體驗非常好。
感謝我的產(chǎn)品合作伙伴 Apurva 和我一起學(xué)習(xí)。采取微小的步驟進行用戶識別，并且使用戶易于接受。這會使你的用戶登錄成功率越來越高！同時這也會為平臺帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發(fā)，并應(yīng)用于你自己的產(chǎn)品和設(shè)計工作中。
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
作者：Shubhangi Salinkar
原文：https://medium.muz.li/a-guide-to-designing-successful-login-experiences-d9cdb81877ec
譯者：曹競羽；審核：李澤慧、張聿彤；編輯：孫淑雅
本文由@TCC翻譯情報局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于 CC0 協(xié)議
錄頁面設(shè)計是網(wǎng)站用戶體驗流程的關(guān)鍵部分。好的設(shè)計有助于推動訪問者訪問你的網(wǎng)站，并把新用戶進行轉(zhuǎn)化。它也給返回用戶一個簡單的方式登錄到您的網(wǎng)站。
以下案例中我們將提供：當(dāng)你設(shè)計你的登錄界面的時候，你應(yīng)該做什么和不應(yīng)該做什么。不是所有的提示和例子都適用于你的產(chǎn)品。關(guān)鍵是選擇最適合你的。
你不應(yīng)該讓你的用戶到處尋找登錄區(qū)域。他們找的時間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。
一個很好的例子就是Gmail的登錄頁面。
你可以確切地知道你需要在何處登錄，以及要在輸入?yún)^(qū)域輸入什么內(nèi)容，上面的例子，如果你沒有Gmail帳戶，它允許你通過單擊“創(chuàng)建帳戶”來輕松地創(chuàng)建一個帳戶。
好的用戶體驗是使你的登錄區(qū)域明顯，使你的用戶盡可能容易地進行登錄操作。
第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產(chǎn)品創(chuàng)建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。
通過允許用戶使用用戶的第三方賬戶中的信息來創(chuàng)建一個賬戶，可以解決所有關(guān)于這些問題。
讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式：
甚至還有更方便的注冊登錄方式，手機短信驗證碼在注冊的同時登錄：
一些產(chǎn)品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗，但是產(chǎn)品的角度去思考就不一樣了，產(chǎn)品為了獲取用戶更多的信息，則需要這樣來設(shè)計流程。
這種設(shè)計流程該不該用，這需要在產(chǎn)品和用戶之間進行權(quán)衡，第三方與手機短信驗證碼登錄，在提高用戶體驗的同時，可以提高用戶的效率，使界面更加直觀。
因為環(huán)境不同，在中國很多網(wǎng)頁端的網(wǎng)站，第三方登錄很高效的產(chǎn)品很少。
例如，如果你的QQ沒有在電腦端登錄，因為即使選擇第三方QQ登錄，你也要拿出手機—打開QQ—打開掃一掃，進行掃碼登錄等一些列的操作。
又或者，當(dāng)你想要登錄behance,只要瀏覽器有記錄之前的第三登錄，點擊第三方登錄即可直接進入該網(wǎng)站，甚至不用注冊。
可以看下面的騰訊網(wǎng)與behance的網(wǎng)頁登錄：
好的登錄體驗應(yīng)該只有賬號、密碼兩個輸入字段，或者手機號碼、短信驗證碼兩個字段，以及使用第三方登錄的選項。在簡單、高效的同時，并為用戶提供了很好的體驗。
如果一個用戶來到你的網(wǎng)站進行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應(yīng)該去哪里。
我們通過使用登錄字段與注冊字段的區(qū)別來幫助他們，讓我們看看下面的dribbble注冊界面：
創(chuàng)建賬戶的按鈕已dribbble的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字。看到上面“sign in ”字段了嗎？
dribbble使用了不同的顏色、布局去區(qū)分注冊按鈕與登錄的入口，這樣更加清晰明了。
同時可以看看dribbble的主頁面，他們會把sign in 與 sign up 的進行區(qū)分，在 sign up 加上微邊框，讓用戶能更快區(qū)分兩者的不同。
讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法，為用戶省去記錄你產(chǎn)品的用戶名的麻煩，應(yīng)該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。
ins讓用戶有機會用他們的電話號碼或電子郵件地址登錄。
反例：
盡可能讓用戶同時用手機號碼或郵件地址來登錄，因為用戶可能會忘記他們用來登錄你的產(chǎn)品的電子郵件地址，所以這時，用戶能使用手機號碼進行登錄。
給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當(dāng)輸錯的同時，可進行對錯的字段進行糾正，不用全部刪掉重新來。
讓我們來下面的脈脈和片刻：
還有什么比再次到你之前登錄的網(wǎng)站或app,卻發(fā)現(xiàn)你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?
當(dāng)你的用戶返回到你的網(wǎng)站時，請確保他們已經(jīng)登錄了，或者為了方便登錄，提前為他們預(yù)先填充賬戶和密碼等字段。
谷歌在這方面做得很棒。每當(dāng)用戶需要重新登錄到Y(jié)ouTube、Gmail、或任何其他谷歌品牌時，他們的登錄信息都會被記住，使登錄過程更加簡單。
盟友銀行允許用戶勾選 “保存用戶名” 復(fù)選框，允許網(wǎng)站在用戶到達網(wǎng)站時默認記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據(jù)自己產(chǎn)品與用戶需求來進行把控。
有時你的用戶會忘記他們的登錄信息。當(dāng)這種情況發(fā)生時，盡量讓恢復(fù)過程盡可能的輕松。
公眾號的賬戶密碼輸入欄有記住密碼復(fù)選框，以防用戶忘記他們的用戶名和密碼，不用每次進來都輸入賬戶密碼進行登錄。
印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。
這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。
如果用戶忘記了他們的登錄信息，要讓他們清楚應(yīng)該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產(chǎn)品。
我們都有過這樣的經(jīng)歷：令人沮喪地輸入和重新輸入你的密碼都無濟于事，結(jié)果卻發(fā)現(xiàn)你一直開著大寫鎖定鍵。
可以通過警告你的用戶，防止這種情況發(fā)生。微軟的Edge瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。
讓你的移動用戶使用無密碼登錄，現(xiàn)在很多特別是金融類app，都可以讓用戶進行指紋登錄，因為不像其他app一樣可以一直保持用戶已登錄狀態(tài)，在保障安全的同時能更便捷。
以上的設(shè)計技巧與案例希望能幫助各位讀者提高產(chǎn)品的用戶體驗，更多用戶體驗文章閱讀可以關(guān)注公眾號！！！
譯文地址：https://mp.weixin.qq.com/s/DZ4CUu6kK-N_lyeXjWxwKQ
編譯作者：設(shè)計探，公眾號：設(shè)計探
本文由 @設(shè)計探 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
這個常見做法是，在路由跳轉(zhuǎn)的時候做判斷，通過router鉤子函數(shù)判斷頁面是否需要登錄
首先在router配置 meta屬性
然后在鉤子函數(shù)里面判斷
to.meta.requireAuth為true就跳去登錄頁面登錄，否則就直接到要訪問的頁面
首先在store的index.js中，state，增加頁面要保存的變量，并且將它們的值和sessionStorage里面的綁定
然后再新增mutations，這是將變量寫入sessionStorage的方法
接著就可以在登錄函數(shù)中這樣調(diào)用，登錄成功后將需要的變量寫進sessionStorage
在路由的鉤子函數(shù)里面可以這樣將變量取回來，那樣頁面刷新后，也能將刷新前的狀態(tài)保持
我們在網(wǎng)頁中，常常有一個功能，就是像下圖那樣，勾選后幾天內(nèi)免登錄，也就是記住登錄狀態(tài)
這個較上面的功能有一個不一樣的地方就是，上面的刷新，假如我是登錄狀態(tài)，我將瀏覽器關(guān)閉之后再打開，再打開瀏覽器，我還是需要登錄的
那如果我勾選了幾天內(nèi)免登錄，登錄后沒有退出，然后把瀏覽器關(guān)閉了，再重新打開，是不需要登錄的，這個功能怎么實現(xiàn)呢?
這就要用到localStorage來實現(xiàn)了
首先，一樣需要在store的index.js中，state，增加頁面要保存的變量，并且將它們的值和localStorage里面的綁定
然后再新增mutations，這是將變量寫入localStorage的方法
需要一個自動登錄的方法，如果是勾選了就為true，然后就會將需要用到的變量寫到localStorage
當(dāng)然還有登出的
接著就可以在登錄函數(shù)中，根據(jù)有沒有勾選自動登錄來判斷，是不是在登錄成功后將需要的變量寫進localStorage
最后在路由的鉤子函數(shù)里面做相應(yīng)的處理
是不是需要登錄，然后有沒有勾選自動登錄，根據(jù)布爾值來進行不同的路由操作，然后需要用到的變量操作其實和上面保持頁面刷新后的是大同小異的
當(dāng)然這里還需要一個后臺的校驗接口，就是在勾選了自動登錄后，如果是10天期限，那就要在進入true 的分支后再請求后臺去校驗token是否過期，如果過期就要重新登錄了，否則就一切照常
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
