登录页面设计html_被忽视的交互！隐藏在登录页面背后的7种设计模式

登录页面是我们再熟悉不过的了，不论是网站还是APP，用户在使用的第一步总是登录。这样习以为常的行为背后，究竟隐藏着怎么样的用户设计理念呢？简单7种设计模式，教你改善登录设计，快来学习吧！

Jeremiah Lam

Ex-Entrepreneur, UI Designer based in Singapore. Working to bring programmatic marketing to small businesses 

Illustration by Ouch.pics

 Illustration by Ouch.pics

为了确保您的用户体验从一开始就是无缝的，你应该将登录表单设计为尽可能直观。

“设计登录表单有多难？”

如果你有过这样的想法，你会惊讶于许多可能给你的用户留下负面印象的小细节; 或者提高产品的转化率。毕竟，登录表单用户是通往产品的门户，我们都知道第一印象很重要。

尽管看起来很简单，但为登录表单设计良好的用户体验对于设置整体用户体验至关重要。让我们来看一些登录模式，我将解释为什么我发现它们并不理想，以及它将如何影响用户体验。

登录模式

Dribble的注册模式看起来视觉上令人愉悦，但有几个技术限制和缺陷。

登录模式看起来很漂亮，但是种设计存在一些限制和缺陷。主要的缺点是无法直接链接到登录，这可能会给您的客户支持带来麻烦。现在，他们不只是给用户一个链接，他们必须给出一堆指令和步骤才能到达登录屏幕。

这会给你的营销团队带来问题，因为他们无法跟踪登录页面的访问。另一个问题是营销活动，其中CTA是创建帐户，没有办法直接链接到您的登录屏幕和用户将直接指向登录页面; 或者另一个解决方案是为特定的营销活动创建一个单独的登录页面。

*CTA：Call to Action 这里把它翻译为：行为召唤，或者说是用户行为号召。

  多个步骤

Shopify要求您先输入商店地址

之后，用户需要输入他们的电子邮件，最后输入他们的密码。

我真的不明白为什么有些产品会这样做！？将你的登录分成多个页面，这非常烦人！我听说过一些原因，比如不想让用户同时获得过多的信息，但这是认真的吗？如果只有2到3个输入字段会让你的用户超载，那么你的登陆页面可能会让他们在那之前大吃一惊。

这种模式可能对某些上下文非常有用，例如结帐流程，在这里你需要用户经历多个步骤(例如运送选项，付款方式，帐单地址等)，但是对于一个登录表单来说，这绝对是一个累赘 —— 尤其是对像Shopify这样简单的一个。

  使用明确的命名约定

乍一看，你能说出登录和注册之间的区别吗？

你有没有点过错误的链接，只是因为它看起来如此相似？“sign in”(登录)和“sign up”(注册)很容易混淆，考虑到这两个短语是多么相似，尤其是因为我们的注意力持续时间都很短，会在看第二遍之前点击。

用户很容易选择错误的选项，并且可能在他们打算登录时开始注册，因为两个字段要求相对相同(例如email & password 电子邮件和密码)。

我建议使用“login” 或是 “create account” 替代“sign up”。这将提供一个更清晰的区别，并防止用户错误地点击。

  社交登录

Airbnb登录界面 - 简单而有效

让我们面对现实——随着所有超便捷应用程序的出现，人类变得越来越懒惰。我说的是UberEats，Lyft，亚马逊等等等。在填写登录表单时也可以看到这种行为，这种行为也可以在填写登录表单时看到，大多数用户宁愿使用他们的Facebook或谷歌帐户注册，而不是打字或记住另一个该死的密码。

不过，鉴于最近社交媒体平台上的数据共享引发的争议，我想把它从登录表单中删除并不是完全没有道理的。也就是说，如果你重视道德而不是用户的便利。最终，用户仍然可以选择是选择社会化注册还是传统注册。

  大写锁定

第一个想到这一点的人是一个天才。曾经有一段时间我因为多次“错误的密码”错误消息而感到困惑和沮丧，最终发现原来是我的大写锁定已开启。通过立即向用户显示他们的大写锁定状态，可以节省时间，防止负面情绪膨胀。

另一种替代解决方案是添加“显示密码”选项，允许用户反复检查输入。尽管对我来说，与最初的解决方案相比，这种方法更被动(等待用户执行某个操作)，而初始解决方案能够更有效地反应并指出用户的错误。

  立即验证表格

Mailchimp创建帐户UI设计

我非常喜欢MailChimp如何进行登录表单验证。通过列出所有的需求，并在满足这些需求时将它们淡化，它减少了用户在提交时遇到错误的机会。我看到其他平台也实现了类似的功能，其中验证在输入或退出时显示，这也是可行的。

我讨厌在单击submit按钮后才出现错误：“密码需要8个字符或更多”非常感谢，你能不能早点告诉我这一点，不要浪费我1分钟的时间。如果用户能够知道他们需要什么，那么总是更加节省时间 - 因为不同的产品对他们的密码有不同的要求。

  记住你的用户

Google的登录界面设计

被别人记住总是好的。它能增强你的自尊，让你内心感到温暖。谷歌能够通过在他们的登录屏幕上复制这个场景来重新创建这些情绪。作为一个用户，每次我想重新登录到谷歌时都不必重新输入我的凭证，这感觉很好。

这很好用，特别是如果用户希望保持登录状态。但由于安全风险，通常会实施令牌时间限制以防止黑客利用它。因此，该功能将允许用户在未来轻松地重新登录。

  最后的想法

登录表单看起来似乎很简单，但深入研究后，你会发现存在许多可能影响初始用户体验的复杂问题。希望本文能够能对你今后在设计或修改你的产品时有所帮助。

原文：

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

想了解更多作品集与留学资讯，欢迎添加下图公众号

更多精彩

交互 | 产品 | 工业 | 服务

留学 | 经验 | 访谈 | 辅导

美国 | 英国 | 欧洲 | 香港

?更多资讯，请关注交互设计小站?