TCC推荐：大家好，这里是TCC译文局，我是李泽辉。登录是一个很常见的用户操作，相信读者会经常体验到各种登录流程。但是登录并不是一个简单的操作，还有很多值得注意的地方。本文结合各种案例，仔细讲解登录过程中的各种细节。登录页面的设计看似简单。我在2020年花了相当多的时间为一家社交媒体巨头设计登录和注册流程，并从中学到了很多东西：为了确保用户成功且无忧地登录，我进行了大量的思考和测试。以下是我总结的重要教训。什么是登录？登录是应用程序、网站或服务的入口点。帮助用户设置他们的帐户。登录流程通常由主登录页面和相当复杂的重置流程组成，其中包括“忘记密码”、重置密码和其他登录方法。登录的主要目标是确保用户成功登录到他们的帐户。什么是登录目标？让我们花点时间来定义术语“登录目标”，这是制定设计决策时的关键。登录目标是指用户进入登录流程的意愿。大声表达为一个想法，可能是“我想登录”、“我想查看我的电子邮件”、“带我去那里”等。当用户登陆登录页面时，他们可能不想登录像“好吧，我不在乎，我以后再做”或“这太麻烦了”或“是的，我现在该怎么办？”这样的想法。可能出现。忘记密码、卡在路上或切换到另一个页面/设备都可能是缺乏登录意愿的迹象。在入职流程中保留或增强入职意图是一个很好的目标，下面的指南都是量身定制的到那个目标。设计熟悉的体验设计熟悉的体验虽然不是设计师最喜欢的设计原则，但对于与整个生态系统的最佳体验保持一致非常重要。例如，使用简单、公认的布局，使用众所周知的术语和文案，都可以帮助用户自信、轻松地执行熟悉的操作。保持通用设计还有助于轻松地将页面扩展到不同的格式和设备。Pinterest有一个传统的居中覆盖着陆页。它有一个鲜红色的主登录按钮，并提供谷歌和Facebook作为额外的社交登录选项。滑到最后是我总结的网上流行的登录成功经验。这就引出了下一个问题——创新的边界在哪里？登录是品牌推广的绝佳机会点。在视觉上，它可能会使用品牌颜色、品牌照片、品牌插图，甚至是营销信息。与大多数设计问题一样，着陆页品牌化的关键是平衡。登录操作应始终占据中心位置。页面上的其他元素必须仔细规划，不应分散登录操作的注意力。一个好的经验法则：用户在登录页面上花费的时间越少越好。帮助他们继续前进，尽快发现产品的好处和价值。快速回顾一下重点设计：用户花在登录页面上的时间越少越好。据此，登录（或恢复）操作应该占据用户的全部注意力。登录框最好放在页面中央。如果你打算把它放在一边，最好给它一个核心视觉。对于文案来说，明确某个步骤用户需要做什么是非常重要的！无需冗长的解释，简单的“输入密码”即可。幽默、复杂的行话、技术行话和花哨的文字在登录体验中没有立足之地。在恢复体验中，将一组复杂的操作分解为多个步骤是有效的。安排用户一次做一件重要的事情！例如：输入您的电话号码和输入发送到您手机的验证码是两个独立的步骤。Facebook将用户信息保存在页面右侧，并将恢复过程分解为多个步骤。亚马逊将其恢复过程分解为多个步骤。它将辅助恢复选项设置为“我需要更多帮助”的可扩展部分，这有助于将注意力集中在主要操作上。将注意力集中在主要操作上的提示：登录框可以布置在主页、叠加层或独立页面上。使用卡片布局将操作拆分为主要操作和次要操作使用大而突出的登录按钮尽量减少次要操作的数量-避免任何与核心登录操作无关的操作。在用户失败时提供明确的反馈并提供帮助在登录过程的每个阶段，用户都可能会失败。输入错误的电子邮件地址、输入错误或忘记的密码、网络问题，所有这些都会导致登录意愿急剧下降。因此，登录屏幕以最合适的方式响应用户非常重要。清晰、及时、编辑良好的错误消息大有帮助。错误消息包含有关失败时您可以做什么的有用提示。当您的密码登录失败但您有GmailID时，Facebook正在添加“使用Google登录”功能。指导用户恢复的提示：鼓励用户尝试合适的替代方案在用户失败后安排备用登录方案，同时将用户导航到单独的页面以文本形式展示最有用的登录方案，并在出现错误时进行更正用户积极响应！尽可能保留登录痕迹。重点是让用户知道该平台认可他们并提供欢迎他们回来的体验。这有助于提高用户登录的意愿。保留登录痕迹的方法：“记住我”等功能预填在上一步中收集的字段，例如：在跳转到恢复流程时，预填在上一步中收集的电子邮件ID登录步骤如果使用二次登录，最好为用户提供个性化的登录方式——用户对手机OTP（一次性验证码）登录更满意吗？还是邮箱+密码？记住用户上次选择的登录方式，可以提高用户登录的意愿，让用户感到登录体验自然舒适。在企业SSO（单点登录）中，用户可以使用多个账号登录。在检测到多个帐户的情况下，最好将这些帐户选项呈现给用户，让他们选择要使用的帐户。灵活提供多种登录方式您的平台应该提供哪些登录方式，没有一刀切的解决方案。最好提供一种或两种额外的方法（除了用户名+密码），以便用户在忘记密码时有选择。这些方法可以是基于电话号码的登录、面部识别或最常见的社交登录，例如Google、Twitter、LinkedIn或Facebook。如果您正在考虑社交登录，请考虑向平台添加最受欢迎和最安全的选项。提醒一句——添加太多登录方法会使页面混乱，并可能导致登录意愿降低！将额外选项限制为2或3。优化最常见的登录方法，明确区分主要方法和次要方法。这些选项通常被证明是需要重置密码（以防用户忘记密码）的一个很好的替代方法，但也被认为是一个乏味的步骤。其他登录选项应该智能地显示出来，并根据情况进行个性化设置。示例：如果用户通过电子邮件登录，提供带有一次性链接的登录选项可能会很有效。此处提供了一个中等登陆页面的示例。虽然清晰且设计良好，但它确实有太多登录方法。如果这对他们来说是一个好的设计，就必须回到Medium的设计师那里！无密码登录正在起飞。特别是对于仅限移动应用程序，基于电话号码的身份验证已成为常态。指纹和FaceID出现在许多地方，使身份验证过程快速且安全。为平台找到最合适（和可开发）的方法，并将其作为主要登录选项。登录是信任敏感时刻登录涉及用户输入敏感的个人数据，例如电子邮件、密码和电话号码——定义他们与平台关系的敏感时刻。登录框代表品牌，任何视觉变化都必须慢慢进行——因为整体视觉变化可能会失去用户信任。登录也是一个（有用的）安全措施——足以让坏人远离系统！虽然减少普通用户的操作很重要，但如果我们怀疑用户可能是黑客，则进行额外的身份验证也很重要。这可能是一个很好的机会来提醒用户他们可以采取哪些步骤来加强他们帐户的安全性——例如：强密码、双因素身份验证等。通过研究确定用户类型如前所述，投入足够的时间来研究用户将有助于提高登录意愿！这个非常重要。登录是一种体验，您的用户角色可以有各种形状和大小——每个人都可能拥有您平台服务的帐户！如果可能的话，缩小你的人物角色。在可能的情况下，像我一样（为社交媒体平台设计），尝试以下方法：登录漏斗-与项目管理人员合作，确定登录流程中用户交互和放弃的关键点。登陆入口点——用户是否通过电子邮件进入登陆页面？还是通过搜索引擎结果？或者在他们使用产品时？还是在应用程序中？您可以使用这些入口点作为线索向用户展示最相关的选项。已知设备-电话、浏览器和已知设备可以帮助为用户提供热情、个性化的登录体验。用户组——按网络/移动、年龄组和地理位置等用户特征进行细分也很有帮助。使用这些提示可以在用户未登录时增加用户登录的意愿。在用户识别方面采取小步骤，让用户更容易接受。这有助于您提高登录成功率！这反过来会导致您的平台上有更多活跃用户，并且每个人都会赢。下面是一些我最喜欢的网络登陆页面的概要，包括一些我经常访问的页面。欢迎更多登录页面建议！谷歌（Google）打破了标志优先的格式——改为分步登录模式，分步输入邮箱和密码。这种模式对谷歌来说具有安全优势，也让他们可以在接下来的步骤中为用户提供个性化的选择。该页面也是最小的，全白的，并且是焦点。Uber的登录页面简单而专注，允许用户输入他们的电话号码并继续下一步。Facebook有几种用于实验和A/B测试的登录方案-这是一个右对齐登录框的示例，可以很好地传达这一点。左侧的空间用于创建正面的品牌形象-以及总体上成功的登录体验。Pinterest制作了一个简单的居中叠加表单，带有巨大的输入字段——不断吸引用户！还有一个鲜红色的主登录按钮，以及一些额外的社交登录选项。虽然Airbnb做得很好，但它的登录页面感觉很笨重，这可能是因为基于电话号码的登录，也可能是因为辅助登录选项的数量太多导致了相当多的认知负荷！LinkedIn在保持登录框突出、集中和居中方面做得很好，并带有一个突出的主登录按钮。我对Dropbox的登录页面犹豫不决——插图很好，但它的颜色与界面按钮相似。这是一个分散注意力的额外元素的情况。就个人而言，我喜欢在界面中大胆使用插图，但评估使用插图的上下文也很重要。亚马逊的登陆页面视觉设计有点过时，但它是管理用户注意力的一个很好的例子。黄色的大“继续”按钮和页面上没有干扰使登录任务看起来简单快捷。在登录页面上放置广告可能不是一个好主意，但同时雅虎(Yahoo)在登录框中有一个独特的标志，它设计了一些简洁的功能来帮助用户减少打字。（参考下图）我想在优秀的登录示例中包含Figma，页面以叠加层为中心，突出显示Google登录（也许是Figma首选和推广的登录形式？），它非常干净，几乎是线框样式。用户体验非常好。感谢我的产品合作伙伴Apurva与我一起学习。向用户识别迈出小步，让用户容易接受。这样会让你的用户登录成功率越来越高！同时，这也将为平台带来更多的活跃用户。:)希望您能从本文中得到启发，并将其应用到您自己的产品和设计工作中。
