如(rú)何為(wèi)網站(zhàn)設計(jì)用(yòng)戶登錄流程是(shì®₹ε¶)一(yī)個(gè)老(lǎo)生(shēng)常談的(de)話(huà)題。随著(z≈™£σhe)時(shí)代的(de)發展，新用(yòng)戶注冊、✘σ登錄到(dào)真正加入一(yī)個(gè)網站(zhàn)的(de)過程一(yī)直在ε↔變化(huà)，從(cóng)簡單的(de)信息填寫<♣¥發展到(dào)全面的(de)注冊方式，再從(cóng)系統的(d±§'$e)注冊回歸簡約直觀的(de)登錄體(tǐ)驗，新用(yòng)戶的(de)登錄流程經¥γ↓×曆了(le)一(yī)個(gè)迂回的(de)變遷過程。現(xiàn)如(rú)今，絕大↕Ω¶§(dà)多(duō)數(shù)的(de)網站(zhàn)已經放(fàn≈ ↔πg)棄了(le)複雜(zá)、繁複的(de↕•♣∞)注冊流程，将用(yòng)戶可(kě)能(néng)會(hu¶<‌₽ì)遭遇障礙、引起用(yòng)戶反感和(hé)煩躁的(de)±π∏♣部分(fēn)去(qù)除，盡可(kě) £♥能(néng)簡單的(de)讓用(yòng)戶完成注冊和(hé)登π>錄流程。

天貓&京東(dōng),內(nèi)蒙古電(diàn)商品牌策劃,內(nèi)蒙古微(wēi)信營銷,內(nèi)蒙古微(wēi)網站(zhàn),呼和('→hé)浩特電(diàn)商品牌策劃,呼和(h→∏★é)浩特微(wēi)信營銷,呼和(hé)浩特微(wēi)網站(zhàn),內(nèi)✔‌σ蒙古網站(zhàn)制(zhì)作(zuò)，內(nèi)蒙古網站(≠÷zhàn)設計(jì)，內(nèi)蒙古網站(zhàn)建設，呼和(hé)浩特網站§≥  (zhàn)建設，呼和(hé)浩特網站(zhàn)制(zhì)作(zuò)β ®§、呼和(hé)浩特網站(zhàn)設計(jì)首選內(nèi)蒙古呼和‌♠(hé)浩特先誠網絡科(kē)技(jì)公司。先€δ誠官網：/&"

當用(yòng)戶完成注冊之後，可(kě)以選擇性地¥"(dì)提供額外(wài)的(de)信息，而這(π€∑≥zhè)些(xiē)信息可(kě)能(néng)會(huì)給給用(yòng)戶帶來$<(lái)更加定制(zhì)化(huà)的(de)用(yòng)戶體(tǐ)驗。為(wèi)₽↓了(le)安全起見(jiàn)，絕大(dà)多(duō)數(sδ‍ hù)的(de)網站(zhàn)還(hái)是(shì)提供了(le)郵箱↓₽♠驗證甚至電(diàn)話(huà)驗證的(de)環節，甚至提供備用(yòng)安全↔∞§≠郵箱的(de)驗證機(jī)制(zhì) →。

總而言之，在今天我們來(lái)審視(shì)網站(zhσ♠àn)的(de)新用(yòng)戶注冊登錄流程，這(zhè)是(shì)一Ωφ>(yī)套系統、完善且具備完整約定俗成規則的(de)設計(jì)環•₹π≤節。

登錄與注冊

随著(zhe)注冊流程的(de)優化(huà)和(hé)簡化(huà)，登錄界面和(hé)α≤∑✔注冊界面現(xiàn)在很(hěn)容易被混淆。造成這(zhè)種混淆的(d✔ ☆φe)原因不(bù)止是(shì)簡化(hπλ®©uà)。首先許多(duō)網站(zhàn)會(hu¥↔"≈ì)選擇将登錄和(hé)注冊界面設計(jì)地(dì)非常相(xiàng)似，甚至将其直≠&↕接容納到(dào)同一(yī)個(gè)界面當中去(qù→•© )。許多(duō)用(yòng)戶不(bù)經意間(jiān)在一>α₽ (yī)個(gè)網站(zhàn)注冊過好(hǎo)幾$☆&<個(gè)帳号的(de)事(shì)情，并不(bù)鮮見(jiàn)。

問(wèn)題不(bù)僅僅存在于流程上(shàng)。在中文(wén)中，“登錄”和(hé)‍ဓ注冊”兩個(gè)詞在視(shì)覺上(shàng)有(y β ǒu)很(hěn)明(míng)顯的(de)差異，但(dàn)是(shì)英文(w₹∏én)中，“Sign Up”和(hé)“÷‌↔Sign In”也(yě)是(shì)很(hěn)容易引起混淆的(de)。

所以，為(wèi)了(le)讓用(yòng)戶不(bù)再有(yǒu)✔"₩不(bù)必要(yào)的(de)混淆，最好(hǎo)是(shì)設計(jì)不(bù®♣γ∏)同的(de)界面，并進行(xíng)差異化(huà)的(de)視(shì)覺和(hé)λ©‌內(nèi)容的(de)設計(jì)，确保用(yòng)戶不(bù)會(huì)誤判。在這(zhè‌σ)裡(lǐ)說(shuō)說(shuō)反例，AxureShare 的(de)登錄/注冊界面就(jiù)非常典型地(dì)勾勒出簡化(huà¥≤<→)後的(de)重複布局是(shì)具有(yǒu)何等φ→的(de)迷惑性。

郵箱地(dì)址和(hé)用(yòng)戶名

在注冊環節，還(hái)有(yǒu)一(yī)個(≤ $gè)特别值得(de)注意的(de)問(wèn)題就(jiù)是(shì÷ ♥)用(yòng)戶名和(hé)注冊郵箱的(de)問(wèn)題。當用(yònΩ←≈βg)戶注冊時(shí)候，最好(hǎo)不(bù)要(yào)讓用(yòng&Ω₽)戶去(qù)創建獨特的(de)用(yòng)戶名，并且以此用(y¶β✔òng)作(zuò)登錄服務的(de)唯一(yī)憑證。絕大(dà)多(duō)數(✘Ωshù)的(de)用(yòng)戶會(huì)有(yǒu)至少(shǎo)2個(gè)郵箱—÷ ∏≥—一(yī)個(gè)用(yòng)作(zuò)工(gōng)作(zuò)，一(yī)βδ >個(gè)用(yòng)作(zuò)私人(rén)用(yòng)（在中國(guó)許多(d©±↔₽uō)人(rén)可(kě)能(néng)隻有≈₩→(yǒu)一(yī)個(gè)郵箱，QQ郵箱……）。所以，最好(hǎγ♥¥≈o)的(de)方式是(shì)讓用(yòng)戶使用(yòng)郵≤∏£'箱登錄，注冊用(yòng)戶可(kě)以在登錄之後修改信息，增加輔助郵箱，可(←<♥kě)以添加用(yòng)戶名。

stripe_payments

另外(wài)，在移動端發展迅猛的(de)今天，讓用(yòng)戶使用(yòng)↔₹手機(jī)号登錄也(yě)是(shì)非常不(bù)錯(cuò)的(de)"‍ $方案。首先手機(jī)号具有(yǒu)獨特性，作(zuò)為(wèi)登錄帳号擁有(yǒu)便捷性¥≠€和(hé)易于記憶的(de)特征，作(zuò)為(wèi)常用(yòng)的(de)帳号存在，更易Ω∑±于用(yòng)戶使用(yòng)。

值得(de)一(yī)提的(de)是(shì)，手機(j↔÷÷↕ī)号還(hái)符合目前流行(xíng)的(de)兩步驗證安全機"₩(jī)制(zhì)，系統可(kě)以更加便捷地↕↕£(dì)為(wèi)用(yòng)戶發送驗證碼。

展現(xiàn)流程

進度條是(shì)用(yòng)戶界面中最重要‌ (yào)的(de)存在之一(yī)，它為(wèi)用∞ &(yòng)戶呈現(xiàn)進度，設定目标，并将信息反饋給用(yòng)÷"•戶。進度條讓用(yòng)戶可(kě)以清晰地(dì)了(le)∞×$解他(tā)已經完成多(duō)少(shǎo)，還(hái)有(yǒu)多(duō)少(shǎo)§§↑‍有(yǒu)待完成。也(yě)正是(shì)有(σλ↔πyǒu)了(le)進度條，複雜(zá)的(de)加入環節才得(de)以分(fēn)割、簡化(hu βà)，并且顯得(de)更加清晰。

LinkedIn 在這(zhè)方面做(zuò)<×的(de)相(xiàng)當突出，它将用(yò÷©ng)戶信息的(de)完成度完全量化(huà& δ)，激勵用(yòng)戶不(bù)斷添加內(n "èi)容完善個(gè)人(rén)信息。

動效

動效是(shì)目前最常用(yòng)也(yě)最實用(yòng)的(de)元素之一(yī)。使用↔♠(yòng)動效來(lái)告訴用(yòng)β₽€戶如(rú)何填寫表單，将動效和(hé)行(xíng)為(wèi)召喚按鈕等設計(jì$π×)結合到(dào)一(yī)起，可(kě)以讓用(yòng)戶明(míng)白(bái)下(xià≈±Ω)一(yī)步的(de)操作(zuò)流程。

在 Readme.io 這(zhè)個(gè)網站(zhàn)中，貓頭鷹會(h>≥γ™uì)随著(zhe)操作(zuò)而變化(huà)，當用(yòng)戶輸入密碼的↕∞(de)時(shí)候，會(huì)非常可(kě)愛(ài)地(dì)蓋住$Ωδ₽自(zì)己的(de)眼睛。動效和(hé)動畫(huà)的(de)加★✘入讓頁面無形中加入了(le)更多(duō)的(de)互動，顯得™$β (de)更加引人(rén)入勝了(le)。同樣的(dεε→λe)，Shopify 在注冊界面中，會(huì)用(β‍♥™yòng)彈出的(de)标簽動效來(lái)幫助用(✔↓βεyòng)戶了(le)解下(xià)一(yī)個(&♠↕gè)操作(zuò)步驟。

第三方登錄

雖然并不(bù)是(shì)每個(gè)用(yòng)戶都(d♣≠σōu)會(huì)使用(yòng)第三方的(de)帳号（微(wēi)博、π≤★★微(wēi)信、Facebook、Twitter、Link☆π↕£edIn等）來(lái)注冊/登錄網站(zhàn×¥★)服務，但(dàn)是(shì)預留第三方帳号登錄的(de)選項是(shì)很(hěn)有(yγ®ǒu)必要(yào)——這(zhè)樣的(de)登錄方式更加  便捷。

顯示密碼

越來(lái)越多(duō)的(de)網站(zhà ​ ÷n)和(hé)APP的(de)注冊流程中，密碼不(bù)再是(shì)輸入兩次，這(zhè)樣 €↕'的(de)情景下(xià)，注冊時(shí)密碼輸入錯(cuò)誤幾乎是(shì)緻命的(de)，πφ₩所以為(wèi)用(yòng)戶提供密碼顯示可(kě)以有(yǒu)效的(de)避免這π §(zhè)個(gè)問(wèn)題。要(yào)知(zhī)道(dào←♠γ)，目前許多(duō)注冊都(dōu)是(shì)在移動端上(shàng)完成的(→∑de)，拇指在屏幕上(shàng)輸入密碼比在鍵盤上(sπ®&hàng)輸入的(de)失誤率更高(gāo)。

超過82%的(de)人(rén)有(yǒu)忘記網站(zhàn)登錄密碼✘ γ的(de)經曆，随著(zhe)網站(zhàn)、AP ΩP和(hé)各類服務的(de)增長(chá$≈βng)，這(zhè)個(gè)數(shù)字隻會(huì)增加不(÷✔>bù)會(huì)減少(shǎo)。

提醒大(dà)寫鎖定

當用(yòng)戶輸入密碼的(de)時(shí)候，提醒他(tā)們鍵盤是(shγ ì)否有(yǒu)大(dà)寫鎖定，也(yě)是(shì)值得(de)ε₩±注意的(de)點。為(wèi)用(yòng)戶提λ§供文(wén)本提醒或者視(shì)覺提醒都(dōu)有(yǒu)助于避免多(duō)次輸δ∑≠入錯(cuò)誤，降低(dī)用(yòng)戶浏覽受挫機(jī)率。大(dà)多(duō)數(s‍γ✘hù)的(de)浏覽器(qì)已經集成了(le)大(dà)寫α★®鎖定提醒，所以這(zhè)個(gè)問(wèn)題隻要(yào)稍加注意就(jiù☆')可(kě)以看(kàn)到(dào)。不(bù)過，用(yòng)戶在屬于✔™§<密碼的(de)時(shí)候注意力大(dà)都(dō​π±u)集中在輸入的(de)內(nèi)容上(shàng)，所以大(dà)寫鎖定提醒必須優雅又(≥£yòu)醒目。

避免反模式設計(jì)

設計(jì)模式的(de)存在，順應用(yòng)戶的(de)習(xí)慣和(hé)交互₩®♠÷的(de)規律，讓用(yòng)戶可(kě)以更好(hǎo)地(dì)與界面進行(xíng)操₩σπ作(zuò)。反模式的(de)存在，同樣可(kě)以引導用(yòng)戶行(xín↔​ g)為(wèi)，但(dàn)是(shì)引導的•♦(de)結果往往不(bù)可(kě)控或者無法達成目标≥ ¥。常見(jiàn)的(de)反模式設計(jì)并不($&•bù)少(shǎo)：

·用(yòng)戶輸入信息失誤的(de)時(shí)候報(b<☆ào)錯(cuò)，然後删除所有(yǒu)輸入的(de♣↔≈)而內(nèi)容

·當用(yòng)戶已經擁有(yǒu)帳号的(de)時(shí)候，依然允許用( ₽✔←yòng)戶使用(yòng)該用(yòng)戶進↓&行(xíng)注冊

·為(wèi)用(yòng)戶添加了(le)看(kφ ₹§àn)似可(kě)點擊但(dàn)是(shì)實則無法點擊的(de)标簽

·限制(zhì)用(yòng)戶輸入字段長(cháng)度但(dàn)是(shì)→₽ ♣完全不(bù)給予提醒

去(qù)除驗證碼

移除驗證碼可(kě)以有(yǒu)效的(de)提高(gāo)轉化(huà)率♦α ≤。雖然驗證碼可(kě)以很(hěn)好(hǎo)的(de)避免注冊機(jī)，但∞✔(dàn)是(shì)驗證碼對(duì)于用(yòng)戶÷→€™而言的(de)挫折更多(duō)，12306 堪稱反人(ré≤•n)類的(de)驗證碼就(jiù)是(shì)個(gβ✘è)很(hěn)好(hǎo)的(de)反例。據統計(jì)，有♣≤(yǒu)38%的(de)用(yòng)戶會(huì)在第≤ 一(yī)次輸入驗證碼的(de)時(shí)候輸錯(cuò)，15%的(de)用(yòng)戶會♥₩(huì)一(yī)直輸錯(cuò)，而這(zhèπσ≠λ)類用(yòng)戶通(tōng)常在第五次輸錯(cuò)"$之後徹底放(fàng)棄注冊。

REDDIT 就(jiù)徹底移除了(le)注≠"'冊環節的(de)驗證碼，去(qù)除之後網站(zhàn)的(de)××新用(yòng)戶注冊率同比增長(chá€&ng)8%。當然，反注冊機(jī)和(hé)機(jī)器(qì)人(réδ​n)還(hái)是(shì)很(hěn)有(yǒu)必要(y✔ ào)的(de)，如(rú)果情況比較嚴重可(kě)以選擇比較人(rén)性化♠₩¥↕(huà)的(de)驗證機(jī)制(zhì)來(lái)規避。

結語

想要(yào)提升新用(yòng)戶注冊的(de)轉化(huà)率，絕大(dà)多(duō)φ"✘數(shù)要(yào)應對(duì)的(de)用(yòng)戶體(tǐ)驗的(de)問(σ ×πwèn)題，了(le)解用(yòng)戶的(de)痛點，除了(le)要(yào)≥£©→考慮傳統的(de)桌面端用(yòng)戶的(de)問(wèn)題，還(hái)要(yào$<)應對(duì)移動端用(yòng)戶的(♥×"÷de)新需求。在好(hǎo)體(tǐ)驗和(hé)安全性之間(jiān)把握好(h↓βδǎo)平衡點，這(zhè)也(yě)是(shì)新用(yòng)戶注冊環節∑←最難兩全的(de)問(wèn)題。

原文(wén)地(dì)址：adobe

優設譯文(wén)：http://www.uisdc.com/designing-login-regi♠>stration-pages

注：本文(wén)均來(lái)自(zì)百度搜索，如≠®(rú)涉及版權問(wèn)題，請(qǐng)聯系我們，我們會(huì)λ∞±£第一(yī)時(shí)間(jiān)解決。