提高登錄界面設(shè)計(jì)的7個(gè)設(shè)計(jì)模式

時(shí)間：2023-10-06 07:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-06 07:36:01 來源：網(wǎng)站運(yùn)營(yíng)

提高登錄界面設(shè)計(jì)的7個(gè)設(shè)計(jì)模式：Sep 8 閱讀時(shí)長(zhǎng)6分鐘

作者：Jeremiah Lam

翻譯：高藍(lán)光、Fiona、Joyce陶陶然、桃?guī)?br>
審校：Joyce陶陶然

---

登錄表單看起來很簡(jiǎn)單，但當(dāng)你的研究越深入，你將發(fā)現(xiàn)有越多復(fù)雜的問題會(huì)影響用戶體驗(yàn)。

插畫：Ouch.pcs

為了從一開始就確保無縫銜接的用戶體驗(yàn)，你必須要設(shè)計(jì)簡(jiǎn)單易懂的登錄表單?！霸O(shè)計(jì)一個(gè)登錄表單這件事情有多難？”如果你曾思考過這個(gè)問題，你會(huì)驚訝于這個(gè)設(shè)計(jì)過程有太多的細(xì)節(jié)了，這些細(xì)節(jié)可能會(huì)給用戶帶來負(fù)面印象，也可能提高產(chǎn)品轉(zhuǎn)化率。畢竟，登錄表單可是你產(chǎn)品的門戶，我們都知道第一印象有多重要。

盡管看起來簡(jiǎn)單，為登錄表單設(shè)計(jì)良好的用戶體驗(yàn)對(duì)于整體的用戶體驗(yàn)來說是至關(guān)重要的。這篇文章會(huì)涉及一些登錄模式，我將解釋為什么我認(rèn)為它們不理想以及這是如何影響到用戶體驗(yàn)的。




登錄模式

Dribbble的注冊(cè)模式視覺效果雖好，但存在一些技術(shù)限制和缺陷

Dribbble的登錄模式視覺效果不錯(cuò)，但這樣的設(shè)計(jì)存在一些限制和缺陷。主要缺點(diǎn)是沒有直接鏈接可以到登錄界面，這可能會(huì)給客戶支持團(tuán)隊(duì)帶來麻煩。現(xiàn)在，他們不光需要給用戶一個(gè)鏈接，還需要給用戶一系列指令和步驟才能到登錄界面。

這也會(huì)給你的市場(chǎng)營(yíng)銷團(tuán)隊(duì)帶來問題，因?yàn)樗麄儫o法追蹤登錄頁面的訪問量。另一個(gè)問題是在營(yíng)銷活動(dòng)頁面中，CTA（譯者：call to action的簡(jiǎn)稱， 中文多翻譯成“行動(dòng)呼吁”或者“行為召喚”）為了創(chuàng)建用戶帳戶卻無法直接鏈接到賬戶登錄界面，取而代之的是用戶被引導(dǎo)到登錄頁（landing page）；另一個(gè)解決方案是為特定的營(yíng)銷活動(dòng)創(chuàng)建單獨(dú)的賬戶登錄界面。




多個(gè)步驟

Shopify網(wǎng)站要求用戶首先輸入商店地址

之后，需要用戶輸入他們的郵箱和相對(duì)應(yīng)的密碼

我真的不能理解為什么會(huì)有產(chǎn)品要這樣做?。堪训卿涰撁娣殖珊脦讉€(gè)頁面是件非常煩人的事情。我聽到過其中一些原因，例如不想一次性給用戶過多的信息導(dǎo)致用戶超負(fù)荷，但是說真的，如果僅僅2-3個(gè)輸入框就能使你的用戶超負(fù)荷，那你的登錄頁面會(huì)讓用戶在超負(fù)荷之前就開始要瘋掉了。

這個(gè)模式也許對(duì)于有固定內(nèi)容，比如結(jié)賬流程這樣的任務(wù)起作用，你需要用戶進(jìn)行很多步驟操作（例如發(fā)貨選項(xiàng)、付款方式、賬單地址等等），但是對(duì)于登錄表單來說，多步驟的操作絕對(duì)是個(gè)用戶殺手，尤其是像Shopify這種登錄簡(jiǎn)單的產(chǎn)品來說。




使用清晰的標(biāo)題命名

第一眼看上去，你能區(qū)分出“注冊(cè)“和“登錄“的不同嗎？

你有沒有因?yàn)殒溄涌雌饋硖嗨贫c(diǎn)錯(cuò)過？我們很容易就把“sign in“（登陸）和“sign up“ （注冊(cè)）弄混，因?yàn)檫@兩個(gè)英文短語長(zhǎng)得太像了，尤其是我們的短時(shí)注意力，會(huì)讓我們?cè)谧屑?xì)再看一下之前就會(huì)進(jìn)行點(diǎn)擊了。

對(duì)于用戶來說，這種選擇錯(cuò)誤是很容易發(fā)生的。而且，當(dāng)他們本來想要選擇登錄時(shí)，很大可能會(huì)選擇了注冊(cè)按鈕，因?yàn)檫@兩個(gè)選項(xiàng)之后需要填寫的內(nèi)容都幾乎一樣（比如郵箱和密碼）。我建議用“l(fā)ogin”（登陸）或者“create account” （創(chuàng)建賬戶）來代替“sign up”（注冊(cè)）。這樣就能很清晰地跟“sign in”（登錄）區(qū)分開，用戶也不會(huì)點(diǎn)錯(cuò)。




社交登陸



Airbnb登陸界面簡(jiǎn)單但高效

我們必須要承認(rèn)，人類因?yàn)橛辛怂羞@些超級(jí)便利的應(yīng)用app以后正在變得越來越懶惰，我是說UberEats、Lyft、Amazon等等這些應(yīng)用。這種行為也體現(xiàn)在使用登錄表單上，大多數(shù)的用戶傾向于使用他們的Facebook或者Google賬戶來登錄，而不是重新輸入或者記住一套新的密碼。

還要提及的是，最近社交網(wǎng)絡(luò)平臺(tái)數(shù)據(jù)共享這個(gè)問題引起諸多爭(zhēng)議，如果你重視道德規(guī)范高于用戶便利，這點(diǎn)在設(shè)計(jì)登錄表單的時(shí)候也不能忽略，因?yàn)槭怯蒙缃毁~號(hào)登錄還是傳統(tǒng)注冊(cè)登錄歸根結(jié)底是用戶的選擇。




開啟大寫字母模式



第一個(gè)想到“開啟大寫字母模式”的人簡(jiǎn)直是個(gè)天才。有好幾次，我因?yàn)槭盏胶芏唷懊艽a錯(cuò)誤”提示信息而困惑或者沮喪，到頭來發(fā)現(xiàn)是因?yàn)榇髮懽帜改Ｊ教幱陂_啟狀態(tài)中。向用戶即時(shí)展示他們的字母大寫模式正處于開啟中，節(jié)省時(shí)間并且避免負(fù)面情緒的膨脹。另外一個(gè)解決方案是增加“顯示密碼”選項(xiàng)，這允許用戶檢查他們的輸入。雖然對(duì)我來說，這個(gè)方法更為被動(dòng)（即等待用戶發(fā)起行動(dòng)），相比較之下，第一個(gè)解決方案對(duì)用戶所犯錯(cuò)誤的反應(yīng)和定位更為高效。




即時(shí)檢驗(yàn)表單

MailChimp的創(chuàng)建賬戶頁面

MailChimp在他們的登錄驗(yàn)證上做得就超棒的。填寫要求全部羅列出來，當(dāng)你填完一項(xiàng)，這項(xiàng)就會(huì)置灰，這樣的校驗(yàn)大大減少了用戶進(jìn)行提交時(shí)出錯(cuò)的概率。我注意到其他平臺(tái)也使用了類似的設(shè)計(jì)，在你填寫時(shí)或填寫完成后校驗(yàn)并打勾確認(rèn)，這也非常好用啊！

我最討厭的就是那種按了提交按鈕后才告訴我出錯(cuò)，需要返回修改的設(shè)計(jì)，“密碼設(shè)置至少8個(gè)字符”，就不能提前告訴我嗎，而不是浪費(fèi)我1分鐘的時(shí)間。如果用戶能夠清晰了解當(dāng)前表單的規(guī)則，流程將會(huì)變得更高效，畢竟不同的產(chǎn)品對(duì)于密碼設(shè)置都有自己的規(guī)則。




記住你的用戶



谷歌的登陸界面

被別人記住是種很棒的體驗(yàn)。這能增強(qiáng)你的自尊心并且發(fā)自內(nèi)心地感覺到溫暖。谷歌也將這種正面的心理情緒暗示應(yīng)用到登錄界面設(shè)計(jì)上。用戶只要在設(shè)備上登錄過谷歌，再次登錄的時(shí)候就不必重新輸入郵箱，這樣的用戶體驗(yàn)是很好的。

這個(gè)功能非常有效，尤其是用戶希望保持登錄狀態(tài)時(shí)。不過由于安全風(fēng)險(xiǎn)，通常會(huì)有一個(gè)時(shí)限，以防止黑客利用這一點(diǎn)?？偠灾@個(gè)功能使用戶在將來實(shí)現(xiàn)輕松再次登錄。




尾記

登錄表單看起來很簡(jiǎn)單，但當(dāng)你的研究越深入，你將發(fā)現(xiàn)有越多復(fù)雜的問題會(huì)影響用戶體驗(yàn)。我希望這篇文章能對(duì)你今后設(shè)計(jì)或修改產(chǎn)品起到啟示和幫助的作用。

設(shè)計(jì)快樂！

---

原文：https://uxdesign.cc/7-design-patterns-to-improve-your-login-design-e75c88a87ee0

感謝閱讀，以上內(nèi)容由花火譯文小組翻譯，轉(zhuǎn)載請(qǐng)注明出處！


- END -

花火圓桌

花火圓桌是由一群熱愛設(shè)計(jì)的BAT設(shè)計(jì)師發(fā)起的分享交流社群，目前已聚集了18000多位來自五湖四海的小伙伴，一起分享、解惑，并常有線上線下活動(dòng)共同成長(zhǎng)進(jìn)步。




關(guān)注公眾號(hào)：回復(fù)以下關(guān)鍵詞，會(huì)有海量資源哦 | UI | 手繪 | 交互 | 字體 | 軟件 |

加微信入群：huahuokefu還能得到更多