提高登錄界面設計的7個設計模式

2021-02-15 花火圓桌

Sep 8  閱讀時長6分鐘 

作者：Jeremiah Lam

翻譯：高藍光、Fiona、Joyce陶陶然、桃幾

審校：Joyce陶陶然


登錄表單看起來很簡單，但當你的研究越深入，你將發現有越多複雜的問題會影響用戶體驗。

插畫：Ouch.pcs

為了從一開始就確保無縫銜接的用戶體驗，你必須要設計簡單易懂的登錄表單。「設計一個登錄表單這件事情有多難？」如果你曾思考過這個問題，你會驚訝於這個設計過程有太多的細節了，這些細節可能會給用戶帶來負面印象，也可能提高產品轉化率。畢竟，登錄表單可是你產品的門戶，我們都知道第一印象有多重要。

儘管看起來簡單，為登錄表單設計良好的用戶體驗對於整體的用戶體驗來說是至關重要的。這篇文章會涉及一些登錄模式，我將解釋為什麼我認為它們不理想以及這是如何影響到用戶體驗的。

登錄模式

Dribbble的註冊模式視覺效果雖好，但存在一些技術限制和缺陷

Dribbble的登錄模式視覺效果不錯，但這樣的設計存在一些限制和缺陷。主要缺點是沒有直接連結可以到登錄界面，這可能會給客戶支持團隊帶來麻煩。現在，他們不光需要給用戶一個連結，還需要給用戶一系列指令和步驟才能到登錄界面。

這也會給你的市場營銷團隊帶來問題，因為他們無法追蹤登錄頁面的訪問量。另一個問題是在營銷活動頁面中，CTA（譯者：call to action的簡稱， 中文多翻譯成「行動呼籲」或者「行為召喚」）為了創建用戶帳戶卻無法直接連結到帳戶登錄界面，取而代之的是用戶被引導到登錄頁（landing page）；另一個解決方案是為特定的營銷活動創建單獨的帳戶登錄界面。

多個步驟


Shopify網站要求用戶首先輸入商店地址

之後，需要用戶輸入他們的郵箱和相對應的密碼

我真的不能理解為什麼會有產品要這樣做！？把登錄頁面分成好幾個頁面是件非常煩人的事情。我聽到過其中一些原因，例如不想一次性給用戶過多的信息導致用戶超負荷，但是說真的，如果僅僅2-3個輸入框就能使你的用戶超負荷，那你的登錄頁面會讓用戶在超負荷之前就開始要瘋掉了。

這個模式也許對於有固定內容，比如結帳流程這樣的任務起作用，你需要用戶進行很多步驟操作（例如發貨選項、付款方式、帳單地址等等），但是對於登錄表單來說，多步驟的操作絕對是個用戶殺手，尤其是像Shopify這種登錄簡單的產品來說。

使用清晰的標題命名


第一眼看上去，你能區分出「註冊「和「登錄「的不同嗎？


你有沒有因為連結看起來太相似而點錯過？我們很容易就把「sign in「（登陸）和「sign up「 （註冊）弄混，因為這兩個英文短語長得太像了，尤其是我們的短時注意力，會讓我們在仔細再看一下之前就會進行點擊了。

對於用戶來說，這種選擇錯誤是很容易發生的。而且，當他們本來想要選擇登錄時，很大可能會選擇了註冊按鈕，因為這兩個選項之後需要填寫的內容都幾乎一樣（比如郵箱和密碼）。我建議用「login」（登陸）或者「create account」 （創建帳戶）來代替「sign up」（註冊）。這樣就能很清晰地跟「sign in」（登錄）區分開，用戶也不會點錯。

社交登陸


Airbnb登陸界面簡單但高效

我們必須要承認，人類因為有了所有這些超級便利的應用app以後正在變得越來越懶惰，我是說UberEats、Lyft、Amazon等等這些應用。這種行為也體現在使用登錄表單上，大多數的用戶傾向於使用他們的Facebook或者Google帳戶來登錄，而不是重新輸入或者記住一套新的密碼。

還要提及的是，最近社交網絡平臺數據共享這個問題引起諸多爭議，如果你重視道德規範高於用戶便利，這點在設計登錄表單的時候也不能忽略，因為是用社交帳號登錄還是傳統註冊登錄歸根結底是用戶的選擇。

開啟大寫字母模式



第一個想到「開啟大寫字母模式」的人簡直是個天才。有好幾次，我因為收到很多「密碼錯誤」提示信息而困惑或者沮喪，到頭來發現是因為大寫字母模式處於開啟狀態中。向用戶即時展示他們的字母大寫模式正處於開啟中，節省時間並且避免負面情緒的膨脹。另外一個解決方案是增加「顯示密碼」選項，這允許用戶檢查他們的輸入。雖然對我來說，這個方法更為被動（即等待用戶發起行動），相比較之下，第一個解決方案對用戶所犯錯誤的反應和定位更為高效。

即時檢驗表單


MailChimp的創建帳戶頁面

MailChimp在他們的登錄驗證上做得就超棒的。填寫要求全部羅列出來，當你填完一項，這項就會置灰，這樣的校驗大大減少了用戶進行提交時出錯的概率。我注意到其他平臺也使用了類似的設計，在你填寫時或填寫完成後校驗並打勾確認，這也非常好用啊！

我最討厭的就是那種按了提交按鈕後才告訴我出錯，需要返回修改的設計，「密碼設置至少8個字符」，就不能提前告訴我嗎，而不是浪費我1分鐘的時間。如果用戶能夠清晰了解當前表單的規則，流程將會變得更高效，畢竟不同的產品對於密碼設置都有自己的規則。

記住你的用戶


谷歌的登陸界面

被別人記住是種很棒的體驗。這能增強你的自尊心並且發自內心地感覺到溫暖。谷歌也將這種正面的心理情緒暗示應用到登錄界面設計上。用戶只要在設備上登錄過谷歌，再次登錄的時候就不必重新輸入郵箱，這樣的用戶體驗是很好的。

 

這個功能非常有效，尤其是用戶希望保持登錄狀態時。不過由於安全風險，通常會有一個時限，以防止黑客利用這一點。總而言之這個功能使用戶在將來實現輕鬆再次登錄。



尾記


登錄表單看起來很簡單，但當你的研究越深入，你將發現有越多複雜的問題會影響用戶體驗。我希望這篇文章能對你今後設計或修改產品起到啟示和幫助的作用。


設計快樂！



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

感謝閱讀，以上內容由花火譯文小組翻譯，轉載請註明出處！




- END -

花火圓桌是由一群熱愛設計的BAT設計師發起的分享交流社群，目前已聚集了18000多位來自五湖四海的小夥伴，一起分享、解惑，並常有線上線下活動共同成長進步。

關注公眾號：回復以下關鍵詞，會有海量資源哦

| UI | 手繪 | 交互 | 字體 | 軟體 |

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

相關焦點

  • 15 個華麗的平面風格的登錄界面設計 - OSCHINA - 中文開源技術...
    色彩非常棒，用於移動應用的平面登錄界面設計，簡單、漂亮。 你肯定不能再對這個界面做任何簡化了，使用了全屏設計方案，讓整個登錄界面更加時髦。   #3: Flat login design on Behance
  • 關於登錄界面的設計,我還想說...
    （關聯閱讀：想要表單用著爽，這份設計指南要收好）的時候已經對比過登錄界面的例子，這次想更詳細地分享下自己的觀點。路徑清晰登錄頁面通常包含多個入口：註冊、登錄方式A、登錄方式B、第三方帳號登錄等，我們無法準確預測用戶會究竟要選擇哪一個，因此，各個路徑必須一目了然。再一次以google、大眾點評和美團為例：在我看來三個界面在我看來都不及格。
  • 界面設計:設計沒亮點怎麼辦?(下)
    在設計時評價一個界面的好壞並不是你的界面如何炫酷，而是你的功能是否滿足用戶使用，你的交互是否讓用戶有一個好的體驗，最後才是你的界面要讓用戶覺得舒服。但是功能和交互在設計時我們大多的參考來自競品，以及我們常用的軟體。所以我們的設計稿就會出現上面說的太常規的問題，並沒有結合產品具體來考慮，那麼我們如何才能讓我們的功能和交互有亮點呢？
  • 初學Sketch:登錄界面設計
    確定你的圖形仍處於被選擇狀態，看觀察器面板，選擇陰影選項，顏色R=38 G=30 B=10 Alpha=50 X=0 Y=20 Blur（模糊）=20 Spread（擴展）=0。最後你的圖形應蓋像如下的樣子：
  • 探討APP登錄設計方式以及如何設計登錄模塊
    今天，我們從移動APP產品經理的角度再來聊一聊APP登錄設計方式和如何去設計這些有意思的APP登錄模塊。如果你是一名移動APP產品經理，以下的乾貨值得你收藏！25學堂的小編跟大家來探討的進行APP登錄的設計的目的， 考慮的主要是用戶信息的安全性和便利性。
  • 淺析用戶體驗在APP界面設計中的表現及應用
    如果用戶為了避免自己的隱私洩露而選擇了不開啟定位，系統則自動為用戶切換到了「宮格式」選擇界面，「宮格式」界面存在著熱門語言以及各大洲的選項，從而也會使用戶能夠在手動模式下以相對最快的速度選擇到自己所需要的語言。這充分的考慮到了用戶所使用的不同場景，儘可能的尊重了用戶的使用習慣，也節約了用戶的時間成本。
  • 30個優秀的後臺管理界面設計案例分享
    今天這篇文章收集了30個漂亮的應用程式後臺管理界面分享給大家。
  • 人機界面設計原則及設計思想
    小編通過搜集整理資料對有關人機界面設計原則、設計思想及設計所包含的內容作了簡單的歸納總結。　　什麼是人機界面設計　　人機界面設計是指通過一定的手段對用戶界面有目標和計劃的一種創作活動。大部分為商業性質、少部分為藝術性質。
  • 如何讓登錄體驗更佳:10個頁面設計技巧和例子
    登錄頁面設計是網站用戶體驗流程的關鍵部分。好的設計有助於推動訪問者訪問你的網站，並把新用戶進行轉化。它也給返回用戶一個簡單的方式登錄到您的網站。以下案例中我們將提供：當你設計你的登錄界面的時候，你應該做什麼和不應該做什麼。不是所有的提示和例子都適用於你的產品。關鍵是選擇最適合你的。
  • APP界面設計的視覺原則!
    因此，對於界面設計師來說領悟軟體界面特性和設計規則至關重要。界面布局的簡潔簡潔的設計理念在手機軟體界面的設計中尤為重要。簡潔有度的排版布局設計能為用戶思想的融入留出空間，有效提高人機互動的效率。當下是一個大規模生產以及信息過剩的時代，處在激烈競爭、事物繁忙狀態中的人們，生活步調在不停地加快，根本無暇顧及過多的裝飾細節。
  • 合肥UI設計培訓學校,界面設計培訓
    合肥UI設計培訓學校,界面設計培訓,零基礎小班授課在合肥字帆電腦培訓學校學完全全部UI設計課程之後，設計經驗相當於一年左右的設計經驗設計師
  • 21個免費的UI界面設計工具、資源及網站
    內容很豐富，適合用戶體驗設計師、界面設計師、產品設計師、JS前段開發、手機產品設計以及iPad和平板電腦產品設計等使用。 Lumzy 官方地址：http://www.lumzy.com/ Lumzy是一個網站應用和原型界面製作工具。使用Lumzy，您可以輕鬆創建UI模型並即時發送到客戶電腦中。
  • 子彈簡訊APP的用戶體驗及界面設計淺析
    本文作者僅從一個用戶和設計從業者的角度，來說說自己的使用感受及對子彈簡訊App界面設計的淺析。僅從一個用戶和設計從業者的角度來說說自己的使用感受及對子彈簡訊App界面設計的淺析。有機會了解到這個App也是源於設計圈有朋友建了一個子彈簡訊的設計師交流群，目前這個群已經達到500人上限，接下來我將以從註冊到體驗全程的先後感受以及在整體框架下對各模塊的下的界面美觀性及設計規範做一些初淺分析（以下分析界面截圖為iphone 6s @2x下的手機截圖）。
  • 註冊登錄功能設計(一):全面的邏輯分析
    編輯導語：我們下載一個APP、登錄一個網站往往都需要進行註冊或者登錄，由此可見，註冊登錄功能的設計有多麼重要。本文作者對此進行了全面的邏輯分析，看看註冊登錄功能如何設計才能提升用戶的體驗感吧。
  • UI界面設計是什麼?
    UI界面設計是什麼？我們來解釋一下。對於用戶的界面，我們想一下，我們日常生活中接觸到的哪些是用戶界面？我們的手機界面、電腦界面、iPad界面、還有車載系統界面、VR界面等。將這些界面設計劃分為三類：PC端UI設計、移動端UI設計、其他UI設計。
  • 界面設計的理念分歧: 關於iOS 7的思考和吐槽
    自打幾個月前，有消息說 iOS 界面將迎來一次重大轉型開始，iOS 7 這個名字就不斷被提起。各種扁平化設計的概念視頻吸引著大量點擊率，凡是對科技新聞稍感興趣的人們應該都好奇真正的 iOS 7 是個什麼樣子。
  • 電商APP界面設計的思考
    想要設計好一款電商APP，除了要掌握電商APP設計中的常識技巧外，設計師還需要不斷吸收一些優秀的APP視覺設計作品的靈感和思路，特別是國外一些很棒、但簡潔的電商APP界面也有很好的借鑑價值，正所謂「他山之石可以攻玉「。
  • 從認知負荷理論看界面設計,讓產品更加簡單易上手
    而認知負荷理論就是通過合理的設計，讓信息接受者能利用有限的認知資源達成最佳信息獲取效果的理論。認知負荷的來源有三個，內容的性質（難度，數量等），用戶的已有經驗（比如相對於老年人來說年輕人對於一款新手遊更容易上手），內容的呈現方式。
  • UI設計模式大閱兵
    互動設計師在設計線框圖原型時，熟知常見的Web設計模式很有幫助，做到「心中有數」才能創造出符合需求，用戶易學易用的界面來。常見的設計模式有哪些呢？在商業中有哪些案例呢？某公司互動設計師張雅秋寫了一篇博文對此進行了總結，現轉載於此，全文如下：互動設計師在設計線框圖原型時，熟知常見的Web設計模式很有幫助，做到「心中有數」才能創造出符合需求，用戶易學易用的界面來。所謂「沒有必要重複發明輪子」，模式往往容易解決常見問題，正確的模式能幫用戶熟悉界面、提高效率。常見的UI設計模式如下圖：
  • 10個最新手機美食APP界面設計欣賞
    以下為大家介紹10個最新優質美食app UI 界面設計實例，希望能幫助你把握美食軟體設計的特點和趨勢的同時，獲得靈感： 1.其界面利用網格模式，展示了許多製作精美且可口的美食，方便烹飪愛好者們簡單地瀏覽這些推薦菜式，找尋到到他們喜愛的美食。當然，如果用戶不想嘗試推薦的各種菜式，也可直接打開軟體設置的獨立的搜索頁面， 輸入關鍵詞或點擊展示的菜品分類搜尋到心儀的美食/菜譜。