登录页面的设计可能看起来很简单。 我在 2020 年花了相当多的时间为一家社交媒体巨头设计登录和注册流程，并了解到需要大量的思考和测试才能确保用户成功且轻松地登录。
以下是我学到的主要教训。
什么是登录？
登录是应用程序、网站或服务的入口点。 帮助用户设置他们的帐户。
什么是登录目标？
让我们花点时间来定义术语“登录目标”，这是做出设计决策时的关键。
登录目标是指用户进入登录流程的意愿。 表达为有声思考，可以是“我想登录”、“我想检查我的电子邮件”、“带我去那里”等。
当用户到达登录页面时，他们可能没有登录的意图。可能会有诸如“好吧，我不在乎，我稍后再做”或“这太麻烦了”或“哎呀，现在我该怎么做？” 忘记密码、半途卡住或切换到另一个页面/设备都可能是不愿意登录的迹象。
在登录过程中保留或增强登录意图是一个很好的目标，以下准则是针对此目标量身定制的。
1. 设计熟悉的体验
为熟悉的体验进行设计可能不是设计师最喜欢的设计原则，但与整个生态系统中的最佳体验保持一致很重要。 例如，使用简单、可识别的布局以及使用众所周知的术语和文案将帮助用户自信而轻松地执行熟悉的操作。
保持通用设计还有助于页面轻松扩展到不同的格式和设备。
有一个传统的居中覆盖着陆页。
它有一个亮红色的主登录按钮，并提供附加的社交登录选项。
滚动到最后 - 这是我对互联网上流行的成功登录经验的总结。 这就引出了下一个问题——创新的边界在哪里？
登录是品牌曝光的绝佳机会。 在视觉上，它可能会使用品牌颜色、品牌照片、品牌插图，甚至营销信息。 与大多数设计问题一样，着陆页品牌的关键是平衡。
登录操作应该始终占据中心位置。 页面上的其他元素必须仔细规划，并且不应分散对登录操作的注意力。 一个好的经验法则是：用户在着陆页上花费的时间越少越好。 帮助他们尽快前进并发现您产品的优点和价值。
2.焦点设计
快速回顾一下：用户在着陆页上花费的时间越少越好。 基于此，登录（或恢复）操作应该占据用户的全部注意力。
在恢复经验中twitter网页版登录入口，将一组复杂的操作分解为多个步骤是有效的。 安排用户一次只做一件重要的事情！ 例如：输入您的手机号码和输入发送到您手机的验证码是两个独立的步骤。
将用户信息保留在页面右侧，并将恢复过程分解为多个步骤。
亚马逊将其恢复过程分为多个步骤。
它将辅助恢复选项设置到“我需要更多帮助”的可扩展部分中，这有助于将注意力集中在主要操作上。
将注意力集中在主要操作上的提示：
3. 当用户失败时提供清晰的反馈并提供帮助Give clear & a hand in case users
在登录过程的每个阶段，用户都可能会失败。 错误的电子邮件地址、错误或忘记的密码、网络问题——所有这些都可能导致登录意愿急剧下降。
因此，登录界面以最合适的方式响应用户是非常重要的。 清晰、及时且经过精心编辑的错误消息可以大有帮助。
错误消息包含有用的提示/提示，告诉您在失败时可以做什么
当您的密码登录失败但您有Gmail ID时，将添加“使用帐户登录”功能。
指导用户恢复的提示：
4. 尽量保留登录痕迹
重点是让用户知道平台认可他们并提供欢迎他们回来的体验。 这有助于提高用户登录的意愿。
如何保留登录痕迹：
5.灵活提供多种登录方式进行登录
对于您的平台应提供哪些登录方法，没有一种一刀切的解决方案。 最好提供一两个额外的方法（除了用户名+密码），以便用户在忘记密码时有选择。
这些方法可以是基于电话号码的登录、面部识别或最常见的社交登录，例如 、 、 或 。 如果您正在考虑社交登录，请考虑向平台添加最受欢迎和安全的选项。
需要注意的是，添加过多的登录方式会使页面变得混乱，并可能导致登录意愿下降！ 将附加选项限制为 2 或 3 个。
针对最常见的登录方法进行优化，并明确区分主要方法和次要方法。 这些选项通常被证明是要求重置密码（以防用户忘记密码）的良好替代方案，但也被认为是一个乏味的步骤。
在可能的情况下，其他登录选项应该智能地显示和个性化。 例如：如果用户通过电子邮件登录，提供带有一次性链接的登录选项可能会有效。
这是一个登录页面的示例 - 虽然清晰且设计良好，但它确实有太多登录方式。如果设计对他们有利，设计师必须回电！
无密码登录正在蓬勃发展。 特别是对于仅限移动应用程序，基于电话号码的身份验证已成为常态。 指纹出现在很多地方，使得身份验证过程快速且安全。 找到最适合该平台（且可开发）的方法，并将其作为您的主要登录选项。
6. 登录是一个信任敏感时刻。 知道登录是一种信任-
登录涉及用户输入敏感的个人数据，例如电子邮件、密码和电话号码，这是决定他们与平台关系的敏感时刻。
登录框代表品牌，任何视觉变化都必须缓慢进行——因为整体视觉变化可能会失去用户信任。
登录也是（有用的）保护措施——足以防止坏人进入系统！
虽然减少普通用户所需操作的数量很重要，但如果我们怀疑用户可能是黑客，那么进行额外的身份验证也变得很重要。 这可能是提醒用户可以采取的措施来加强帐户安全的好机会 - 例如：强密码、双因素身份验证等。
7. 通过研究找出线索和你的用户类型
如前所述，投入足够的时间进行用户研究将有助于提高登录意愿！ 这个非常重要。
登录是一种体验，您的用户角色可以多种多样 - 每个人都可能在您的平台上拥有一个服务帐户！ 如果可能的话，缩小你的角色范围。
当情况允许时，像我（为社交媒体平台设计）一样，可以尝试以下解决方案：
1) 登录渠道 – 与项目管理人员合作，确定登录流程中用户交互和放弃的关键点。
2) 登录门户 - 用户是否通过电子邮件进入登录页面？ 还是通过搜索引擎结果？ 或者他们什么时候使用该产品？ 或者在应用程序中？ 您可以使用这些入口点作为线索，向用户呈现最相关的选项。
3) 已知设备——移动电话、浏览器和已知设备可以帮助为用户提供温馨、个性化的登录体验。
4) 用户组——基于用户特征（例如在线/移动、年龄组和地理位置）的细分也有帮助。
5）当用户未登录时，利用这些线索可以增加用户登录的意愿。采取小步骤来识别用户并使其变得用户友好。 这将帮助您提高登录成功率！ 这反过来将为您的平台带来更多活跃用户，每个人都可以成为赢家。
8.案例介绍最佳搭配
以下是我最喜欢的网络登陆页面的汇总，包括我经常访问的一些平台。 欢迎推荐更多登陆页面！
（谷歌）摆脱了徽标优先的格式 - 转向逐步登录模型，在该模型中，电子邮件和密码是在单独的步骤中输入的。 这种模式具有安全优势，也允许他们在后续步骤中为用户提供个性化选择。 该页面也是最小的、全白的、重点突出的。
Uber 的登录页面简单而集中，允许用户输入电话号码并继续下一步。
他们使用多种登录方案进行实验和 A/B 测试 - 这是一个右对齐登录框的示例，很好地突出了这一点。 左侧的空间用于创建积极的品牌形象 - 以及总体上成功的登录体验。
我制作了一个简单的居中叠加表单，带有一个巨大的输入框 - 不断吸引用户！ 还有一个亮红色的主登录按钮，以及一些额外的社交登录选项。
虽然[]在很多方面做得很好，但它的登录页面感觉工作量很大——也许是因为根据手机号码登录，或者可能是因为辅助登录选项数量众多，导致相当多的麻烦。 认知负荷！
（）在保持登录框简洁、重点突出和居中方面做得很好twitter网页版登录入口，并有一个突出的主登录按钮。
我对登录页面犹豫不决 - 插图很好，但它的颜色与界面按钮类似 - 这是附加元素分散注意力的情况。 就我个人而言，我喜欢在界面中大胆使用插图 - 但评估使用插图的上下文也很重要。
（亚马逊）登陆页面在视觉上有点过时，但它是管理用户注意力的一个很好的例子——黄色的大“继续”按钮和页面上没有任何干扰使登录任务看起来简单快捷。
在登录页面上放置广告可能不是一个好主意 - 但与此同时，雅虎在登录框中有一个独特的徽标，其中有一些巧妙的功能旨在帮助用户减少打字。 （参考下图）
我想将 Figma 包含在一个很棒的登录示例中 - 页面位于覆盖层的中心，登录被突出显示（也许 Figma 首选和推广的登录形式？），而且它非常干净，几乎像线框一样。 用户体验非常好。
感谢我的产品合作伙伴与我一起学习。 采取小步骤来识别用户并使其变得用户友好。 这将使您的用户登录成功率越来越高！ 同时，这也将为平台带来更多活跃用户。 
我希望您能受到本文的启发，并将其应用到您自己的产品和设计工作中。
本文翻译已获得作者官方授权（授权截图如下）
国外苹果ID/美日韩台、新加坡、香港等——韩国区已过年龄认证17+ 19+ 的苹果id游戏应用下载——独享美区ID小火箭账号-——正版苹果商店礼品卡、软件兑换码点击购买
谷歌锁区号/谷歌邮箱老号-购买商城-谷歌PLAY锁区账号/美区、日区，韩区，台区，新加坡谷歌账号等谷歌账号购买、代注册谷歌账号，代申诉解封———>点击购买
原文链接：2020年社交媒体巨头设计登录和注册流程的重要经验，转载请注明来源！