登录页需要注意的设计细节和逻辑，我都帮你总结好了

导语：我们在使用大多产品时，刚进入软件都需要一个登录或者注册的动作，每个软件的登陆方式页面都差不多，但一些小的细节体验最能影响用户；本文作者分享了关于登录页设计细节和逻辑，我们一起来了解一下。

几乎所有的登录页看起来都大同小异，通过输入账号和密码就能够进入，但仔细思考会发现，每个登录页都有自己差异化的点，而这些点正是产品无一物二的地方。

确保用户成功且无压力的登录体验需要我们不断地思考。

01 什么是登录体验？

登录体验是指用户通过入口进入应用、网站或服务，建立自己的身份。

登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、手机号、密码等，恢复流程包括忘记密码、重置密码、其他登录方式等。

登录体验的目标是确保用户成功登录帐户。

02 设计熟悉的登录流程

使用简洁、常用的页面布局和文字，有助于用户轻松执行熟悉的操作，保持设计简单也有助于将体验轻松扩展到不同设备和屏幕尺寸。

Pinterest采用了居中对齐的重叠式登录页设计，用醒目的红色按钮来突出登录动作，还支持Google和Facebook作为其他登录方式。

登录页是强调品牌的首要接触点。登录操作最好于中心位置，页面上的其他元素应谨慎增加，避免注意力从登录任务上移开。

设计思考：

用户花在登录页上的时间越少越好，要让用户尽快发现产品中的优点和价值！

03 专注设计

登录(或恢复)操作应引起用户的全部注意力：

最好将登录页表单放在页面中心位置；不需要复杂或冗长的文字解释，例如可以利用简单的输入密码”来提示用户完成操作；要求用户一次只做一件重要的事情，例如将找回密码这种复杂的流程分解为多个步骤进行。

Facebook保留用户的登录信息，并将恢复流程分为几个逻辑步骤。

亚马逊将辅助恢复选项放在更多帮助”中，这有助于使主要操作保持重点。

设计思考：

使用卡片式布局；将操作分为主要动作和次要动作；使用尺寸大而突出的登录按钮；尽量减少次要操作的次数，以避免使页面出现混乱。 04 给出明确反馈并在操作失败时提供帮助

在登录过程的每个阶段，用户都可能会失败；输入错误的邮箱，忘记密码或网络问题等，所有这些问题都可能导致登录意图急剧下降。

因此清晰及时的反馈设计对用户来说很重要。

信息输入错误时会提示错误具体的原因。

密码输入有误时，Facebook会在下方增加使用Google登录”选项。

设计思考：

鼓励用户尝试合适的替代方案；登录失败后，将用户导航到单独页面并组织其他登录方法；展示最有效的登录方法，并在发生问题时及时对用户做出反馈。 05 多种登录方式提供灵活性

除了输入账号密码这种登录方式，最好提供一种或两种附加的登录方式以便用户选择，同时防止忘记密码造成无法登录的情况。

添加过多的登录方式会使页面混乱，降低登录意图，附加选项应该限制为2或3种方式。

Medium登录表单的设计尽管很清晰，但过多的登录方式会阻碍用户的选择和判断。

Airbnb登录页能看到大量的辅助登录方式，过多的选项可能会导致用户的认知负荷。

设计思考：

当前无密码登录正在迅速普及。在很多移动App中，基于手机号的身份验证已成为常态，指纹和FaceID也出现在许多地方，从而实现了无缝和安全的身份验证流程。

找到产品最适合的登录方式，并将其作为主要选择能有效提升效率！

06 登录意味着信任

登录涉及用户输入敏感的个人数据，例如手机号、邮箱、密码等，用户愿意输入信息意味着他们信任这个平台或产品。

虽然减少与用户的摩擦很重要，但有时网站也会提供额外的身份验证来确保用户信息的安全。

B站利用文字验证方式来增强用户帐户的安全性。

设计思考：

登录表单应该代表品牌的形象，任何视觉上的变化都必须慢慢进行，因为完全改变视觉设计可能会导致缺乏信任。

07 确定用户类型

登录意图是一种体验，在这种体验中用户角色和类型可以无所不包。

可以尝试以下方式来定义用户的范围以便更清楚的了解用户：

登录渠道：与PM合作找出在登录流程中用户交互和退出的关键阶段。登录入口：用户是通过邮箱、搜索引擎还是通过应用跳转到登录页？常用设备：手机、浏览器等设备可以为用户带来个性化的体验。用户群组：利用年龄或地理位置等方式也能进行分离用户群主的划分。 08 登录页设计实例分析

通过分析具有代表性的登录页设计来展示登陆页的多种设计表达。

Google采用多阶段的登录方式，邮箱和密码分两步进行输入。这种格式对谷歌来说有一些安全优势，也可以在下一步为用户提供个性化的选择。

Uber的登录页采用简单的样式，注重使用体验，引导用户输入手机号来进行下一步。

Facebook利用右对齐的登录表单很好地集中注意力，左边的空间被用来展示品牌的信息和形象。

亚马逊的登录页从视觉设计上看有些陈旧，但却是管理用户注意力的一个很好的例子。黄色的继续”按钮和简洁的页面使登录看起来简单而快速。

Figma的登录页位于画面中心，顶部首先展示的是以Google登录，这可能是Figma首选和推广的登录形式，页面整体的设计利用线框组成，非常简洁高效。

作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。

本文由 @Clippp 翻译发布于人人都是产品经理，未经作者许可，禁止转载。

如何登录 Instagram，解决无法登录的问题

只要您拥有与帐户相关联的用户名、电子邮件地址或电话号码，就可以登录您的 Instagram 帐户。

如果您丢失或忘记了密码，您可以在登录页面上请求重设密码。

如果您想使用 Facebook 登录 Instagram，您可以使用移动应用程序上的设置”菜单连接这两个帐户。

如果您有 Instagram 帐户，则可以从任何设备（手机、平板电脑或计算机上的浏览器）登录。您所需要的只是您的登录凭据，例如您的 Instagram 用户名或与该帐户关联的电话号码或电子邮件地址，以及您的密码。如果您已连接帐户，也可以通过 Facebook 登录。这是您在任何设备上登录所需的内容。

无论您是在iOS还是Android设备上使用 Instagram 应用程序，在智能手机或平板电脑上登录您的 Instagram 帐户都是一样的。一般来说，Instagram 允许您使用您的 Instagram 用户名或与该帐户关联的电话号码或电子邮件地址登录——因此请输入这三项中的任何一项。之后，输入您的密码并点击登录。

无论您是在 Mac 还是 PC 上登录 Instagram，都没有关系——过程是一样的。在网络浏览器中打开Instagram.com，然后输入您的 Instagram 用户名或与该帐户关联的电话号码或电子邮件地址。之后，输入您的密码并点击登录。

如果将您的 Instagram 帐户与 Facebook 关联，您不仅可以轻松地在 Facebook 上分享您的 Instagram 帖子，还可以使用您的 Facebook 凭据作为登录 Instagram 的简便方法。

要链接您的 Facebook 和 Instagram 帐户，请在您的移动设备上打开 Instagram 应用程序，点击三栏菜单，然后点击设置。在帐户部分，转到共享到其他应用程序并将Instagram 连接到您的 Facebook 帐户。

连接这两个帐户后，您可以使用 Facebook 登录 Instagram——在登录页面上，您可以点击使用 Facebook 登录。

如果您丢失或忘记了密码，您可能需要重设密码。无论您使用的是 iPhone、Android 设备还是在计算机上使用网络浏览器，该过程本质上都是相同的：

1.在登录屏幕上，在用户名和密码字段下，点击获取登录帮助（如果您使用的是 Android 手机）或忘记密码？（在 iOS 或浏览器上）。

2.输入您的电子邮件地址、电话号码或用户名，然后点击下一步（如果您使用的是 Android）或发送登录链接（在网络浏览器中）。如果您使用的是 iPhone，请选择您要使用的选项卡——用户名或电话——并输入与您的帐户相关联的凭据，然后点击下一步。

3.您将收到一条消息，其中包含重置密码的说明。

也有可能您不记得与您的帐户关联的用户名或其他信息，或者您可能输入错误。这里有一些尝试：

确保您的用户名或电子邮件地址拼写正确。

输入用户名时不要包含 @ 符号。

请可以看到您的个人资料页面的其他人为您截屏或记下用户名。

「Facebook」Facebook个人号，你的账户已锁定，怎么办？

【Facebook】Facebook个人号，你的账户已锁定，怎么办？

有时候我们在打开登录Facebook个人号的时候，会显示xxx,你的账户已锁定。我们发现你的账户存在异常活动。这可能意味着他人在你不知情的情况下使用了你的账户。看到这个弹窗不必紧张，这其实也是Facebook对个人号的一种保护，即使个号没有被其他人登录，或我们的电脑没有换，浏览器也没有换着登录，也会有这个提示。跟着以下指导操作即可。

1.点击开始

2.点击继续

3.输入验证码。注意大小写，大写的要输入大写，小写的要输入小写。

4.点击使用邮箱接收验证码

5.点击获取验证码

6.打开邮箱。如果Focused邮箱没有验证码邮件，可以在Other邮箱里查找。复制验证码

7.回到Facebook验证处，输入或粘贴验证码

8.点击提交

9.点击继续

10.点击继续

11.创建输入一个新的Facebook密码

12.点击保存更改

13.点击继续

14.显示你的账户已解锁