如何设计登录页更能体现细节且符合逻辑

登录页面的设计看似简单,但是我们仔细观察会发现不同的设计会给登陆页带来独特的体验和差异化。

  • 登录体验

登录体验是用户通过登录页面进入网站、应用或服务,在这些平台建立自己的身份。最终目的是确保用户成功登录自己的账号。

  • 登录流程

登录流程通常由一个主登录页面和一个较为复杂的恢复流程组成的,其中包括“忘记密码”,重置密码和其它登录方法等。

 

  • 设计用户熟悉的登录流程

简洁、常用的页面布局和文字,有利于用户操作更有亲和力。简洁的界面设计也有助于把更好的体验扩展到不同设备和屏幕尺寸。

▲Pinterest具有传统的,居中对齐的重叠式登录表单。它以醒目的红色显示突出的登录主按钮,并使用Google和Facebook作为其他社交登录选项。

登录窗口是突出品牌的一个绝佳界面。在视觉层面,可以使用品牌色彩,摄影,插图,甚至是营销信息。这需要我们在设计中把握如何更好的融合其中。登录窗口应该处于页面的中心位置。尽量避免其他不必要的元素影响登陆窗口的优先级。

设计法则:用户花在登录页面上的时间越少越好。

 

  • 专注设计

前面提到要让用户在登录界面花费的时间尽量少;

那首先登陆窗口在页面中就是首要被看到的,将其置于页面的中心位置为最佳选择;

界面提示不需要过于复杂的文字解释,利用简单明了的提示使用户快速理解并完成所需操作;

在遇到无法登录时,将一组操作流程分解为多个步骤进行,如忘记密码,利用邮箱找回密码和利用手机短信找回密码分解开;一个要求做一个操作。

Facebook保留用户上下文,并将恢复流程分为几个逻辑步骤。

亚马逊将其恢复流程分为几个逻辑步骤。它将辅助恢复选项分为“我需要更多帮助”可扩展部分,这有助于使主要操作保持重点。
  1. 使用卡片布局
  2. 将动作分为主要动作和次要动作
  3. 使用大而醒目的登录按钮
  4. 将次要操作的数量保持在最低限度—避免使用不是您的核心登录体验的任何内容来使页面混乱。
  5. 登录表单简洁明了

 

  • 让用户明确知道操作流程

在登录过程中的每个阶段,用户可能会失败。如错误的电子邮件地址输入,错误的密码或网络问题,这些都可能导致登录时间延长。因此,登录UI界面以最快速的方式响应用户非常重要。清晰,及时,精心设计的错误信息提示在这里尤为重要。

错误信息提示包含有关失败时可以做什么的有用的提示/提示

 

当您在密码步骤中失败时,Facebook添加了“使用Google登录”,但是您已关联了gmail ID

提示用户进行恢复的一些设计技巧:

  • 引导用户尝试合适的替代方案
  • 失败后,在将用户导航到单独页面时,给出其他登录方法
  • 在上下文中显示最有用的登录方法,并在发生危机时对用户具有超级响应能力!

 

平台应为登录方法提供一种不适合所有方法的选择。最好提供一种或两种其他方法(在用户名和密码旁边),以便用户可以选择,以防万一他们忘记了密码。这些可能是基于电话号码的登录名,生物识别信息,或者是最常见的社交登录名,例如Google,Twitter,LinkedIn或Facebook。如果您正在考虑社交登录,请为您的平台添加最流行和最安全的选项。

注意:添加更多方法会使页面混乱,因此可能会降低登录体验!将其他选项限制为2或3种方式为佳。

上图登录窗口虽然很表单清晰、设计合理,但登录选择确实有点过多,这个影响用户的选择与判断。

 

现在无密码登录方式正在迅速普及。基于手机号码的身份验证已成为趋势,特别是对于仅移动设备地理位置的应用程序。指纹和FaceID出现在很多应用中,从而实现了无缝和安全的身份验证流程。找到最适合平台(并且易于构建)的,并将其用作主要选择可以有效的提高效率!

 

用户选择在平台登录就意味着得到了用户认可;

登录涉及用户输入敏感的个人数据,例如电子邮件,密码和电话号码,这是信任敏感的时刻,它定义了他们与平台的关系!

登录表单应该代表您的品牌,并且任何视觉上的更改都必须逐步取消,因为完全更改的外观可能会导致缺乏信任。

虽然减少常规用户的摩擦很重要,但如果我们怀疑用户可能是黑客,那么进行其他身份验证可能就变得很重要。这可能是一个很好的机会,可以提醒用户有关可以采取哪些措施来增强其帐户安全性的措施,例如:强密码、双重身份验证等。

找出平台的用户类型

可以尝试以下几种方式定义平台的用户类型:

  1. 登录渠道:与PM一起找出用户在登录流程中互动和退出的关键阶段。
  2. 登录入口:用户是否通过电子邮件登录到您的登录页面?通过搜索引擎结果?当他们在客人体验流程中吗?在应用程式中?您可以从这些入口点使用提示,并为用户显示最相关的选项集。
  3. 常用设备:(手机,浏览器等)可以帮助用户展现亲切欢迎的个性化体验
  4. 用户群组:将网络/移动设备,年龄段和地理位置等用户隔离的其他方法也可能会有所帮助。

 

优秀的登录页设计案例

Google胜过标识符优先格式,这是一种多阶段登录,使用电子邮件和密码以不同的步骤进行。这种格式对Google有一些安全优势,也可以使他们在下一步中为用户提供个性化的选项。它也是最小的,全白色的并且非常集中。

 

一种简单,注重超级的体验,使用户可以输入他们的电话号码并继续进行下一步。

 

Facebook有几种可供选择的实验方法,可以进行AB测试-这是一种右对齐登录表单的示例,可以很好地集中注意力。左侧的空间已被用来创造积极的品牌时刻-总体上是一场胜利!

 

Pinterest使用简单的,居中对齐的叠加表格来填充大量的输入字段-总是吸引用户的注意!它以引人注目的红色显示突出的登录主按钮,以及一些其他社交登录选项。

 

尽管Airbnb的许多功能做对了,但感觉就像很多工作一样–可能是由于主要的基于电话的登录,或者大量的次要登录选项可能会导致相当大的认知负担!

 

 

LinkedIn通过一个大型的主登录按钮,使登录表单保持简单,集中和居中,这是一项出色的工作。

 

我对Dropbox登录页面不满意-插图虽然很棒,但是它的颜色与页面上的UI按钮类似-举例说明其他元素如何引起分散注意力。就个人而言,我喜欢在UI中大胆使用插图-但是评估使用插图的上下文会有所帮助。

 

亚马逊的登录表单在视觉设计上有些陈旧,是管理用户注意力的一个很好的例子-黄色的大“继续”按钮和页面上的分散注意力使任务显得简单快捷。

 

Figma的登录界面中表单位于重叠层的中心,突出显示了Google登录(可能是Figma的首选和推荐的登录方式吧),而且它非常简单,几乎像线框一样。
3
Fey.Fang

Fey.Fang

学习是进步的基石



微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

如何设计登录页更能体现细节且符合逻辑
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close