登录是进入一个应用程序 、网站或服务的入口。帮助用户建立他们的账户。
让我们花点时间来定义一下“登录目标”这个术语，这是在做设计决策时的关键。
登录目标是指用户进入登录流程的意愿。以有声思维来表达，它可以是 “我想登录”、“我想检查我的电子邮件”、“带我去那里”，等等。
当用户进入到登录页时，他们可能没有登录意愿。可能会产生“嗯，我不在乎，以后再做”或“这太麻烦了”或“呀，我现在该怎么办？”的想法。忘记密码、半路遇到困难或切换到另一个页面/设备，都可能是缺乏登陆意愿的迹象。
我们得到了登陆目标
保留或增强登录流程中的登陆意愿是很好的目标，下面的准则都是为这个目标量身定做的。
设计熟悉的体验，虽说不是设计师最喜欢的设计准则，但是与整个生态系统中最好的体验保持一致是非常重要的。例如使用简单、公认的布局，使用众所周知的术语和文案，都有助于用户自信而轻松地进行熟悉的操作。
保持通用的设计也有助于将页面轻松扩展到不同的形式和设备。
Pinterest 有一个传统的、居中的覆盖式登录页。它有一个亮红色的主要登录按钮，并提供 Google 和 Facebook 作为额外的社交登录选项。
滑到最后，有我对网络上流行的成功登录经验的总结。这就把我们带到了下一个问题 —— 创新的界限在哪里？
登录是一个品牌展示的绝佳机会点。在视觉上，它可能使用品牌色、品牌照片、品牌插图，甚至是营销信息。和大多数设计问题一样，登录页品牌展示的关键在于平衡。登录操作应该一直占据中心位置。页面上的其他元素必须谨慎规划好，不应该夺走登陆操作的注意力。
一条优秀的经验之谈：用户在登录页面上花费的时间越少越好。帮助他们继续前进，尽快发现产品中的优点和价值。
快速回顾一下：用户在登录页面上花费的时间越少越好。根据这一点，登录（或恢复）操作应当占据用户的全部注意力。
在恢复体验中，将一套复杂的操作分解成多个步骤是很有效的。安排用户一次只做一件重要的事情！例如：输入你的手机号码和输入发送到你手机上的验证码是两个独立的步骤。
Facebook 在页面中保持用户信息在右侧，并将恢复流程分解为多个步骤。
亚马逊把它的恢复流程分解成多个步骤。它将次要的恢复选项设置为 “我需要更多帮助 ”的可扩展部分，这有助于保持注意力集中在主要操作。
保持注意力集中在主要操作的技巧：
在登录过程的每个阶段，用户都可能失败。电子邮件地址输入错误、密码输入错误或忘记密码、网络问题，所有这些都可能导致登录意愿的急剧下降。因此，登录界面以最恰当的方式回应用户是非常重要的。清晰、及时、精心编辑的错误提示信息能起到很大帮助。
错误信息包含有用的提示/暗示，指明你在失败时可以做什么
当你密码登陆失败，但你有一个 Gmail ID 时，Facebook 会增加一个 “用 Google 账号登录 ”的功能
指导用户恢复的技巧：
重点是让用户知道平台识别出了他们，并提供一个欢迎回归的体验。这有助于提升用户的登录意愿。
保留登录痕迹的方法：
对于你的平台应该提供哪些登录方法，没有一个放之四海而皆准的方案。最好是提供一到两种额外的方法（除了用户名+密码），这样用户就有了选择，以防他们忘记密码。这些方法可以是基于电话号码的登录、人脸识别，或最常见的社交登录，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考虑社交登录，思考为平台添加最流行和最安全的方案。
需要注意的是 —— 增加很多的登陆方法会使页面变得混乱，可能会导致登录意愿降低！将额外的选项限制在 2 或 3 种。
针对最常用的登陆方式进行优化，并明确区分主要和次要方式。这些选项通常被证明是需要重置密码（以防用户忘记密码）的很好的替代方法，但同时也被认为是一个乏味的步骤。情况允许时，应智能地浮现其他登陆选项并进行个性化处理。例如：如果用户是通过电子邮件登录，提供一个带有一次性链接的登录选项可能会有效。
在此提供 Medium 登录页的案例。虽然清晰且设计良好，但它确实有太多的登录方法。不得不回访 Medium 的设计者，如果这个设计对他们来说是好的！
无密码登录正火速流行起来。特别对于只有移动端的应用程序来说，基于电话号码的认证已常态化。指纹和 FaceID 在许多地方出现，使认证流程变得快速、安全。为平台找到最适合（且可开发）的方法，并将其作为主要登录选项。
登录涉及到用户输入敏感的个人数据，如电子邮件、密码和电话号码 —— 这是决定了他们与平台关系的敏感时刻。
登录框代表了品牌，任何视觉上的改变都必须缓慢进行——因为整体的视觉变化可能会失去用户信任。
登录也是（有用的）保障 —— 足以让坏人无法进入系统!
虽然减少普通用户的操作是很重要的，但如果我们怀疑用户可能是黑客，那么出现额外的认证也变得很重要。这可能是一个很好的机会去提醒用户能够采取哪些措施来加强他们账户的安全性 —— 例如：强密码、双重认证等。
之前有提到过，投入足够的时间去调研用户，有助于提高登录意愿！这一点是很重要的。
登录是一种体验，你的用户角色可以是各种各样的 —— 每个人都可能拥有一个你平台的服务账户！如果可能的话，缩小你的角色范围。
情况允许时，像我这样（为社交媒体平台设计），可以尝试以下方案：
以下是我对网络上我最喜欢的登录页进行的总结，包含一些我经常访问的平台。欢迎推荐更多登录页！
Google（谷歌）打破了标识优先的格式 —— 改成了分步式登录模式，在不同的步骤中输入电子邮件和密码。这种模式对于 Google 有安全优势，也可以使他们在接下来的步骤中为用户提供个性化的选择。页面也是最小的、全白的、聚焦的。
Uber 的登录页是简单且聚焦的，允许用户输入他们的电话号码并进入下一步。
Facebook 有几个登录方案，他们用这些方案进行实验和 A/B 测试 —— 这是一个右对齐的登录框案例，它很好地突出了重点。左侧的空间被用来打造积极的品牌形象 —— 总体来说是成功的登录体验。
Pinterest 做了 一个简单居中的叠加表单，有硕大的输入框 —— 不断吸引用户！还有一个亮红色的登录主按钮，以及一些额外的社交登录选项。
尽管 Airbnb（爱彼迎）在很多方面都做得很好，但它的登录页让人感到操作繁多，这也许是因为基于手机号码登录，也许是因为大量的次要登录选项，导致相当多的认知负荷！
LinkedIn（领英）很好地保持登录框的简介、聚焦和居中，有一个醒目的主登录按钮。
我对 Dropbox 的登录页面持犹豫态度——插图很好看，但它的颜色与界面按钮的颜色相似。这是附加元素分散注意力的案例。就我个人而言，我喜欢在界面中大胆使用插图，但评估插图的使用环境也很重要。
Amazon（亚马逊）的登陆页视觉设计上有些老旧，但对于管理用户注意力是一个很好的案例，巨大的黄色“继续”按钮以及页面上没有任何干扰，使登录任务看起来简单快速。
在登录页面上放置广告可能不是一个好主意，但同时 Yahoo（雅虎）有一个与众不同的标识在登录框中，其中设计了一些巧妙的功能，帮助用户减少输入。(参考下图)
我想把 Figma 纳入优秀的登录案例中，该页居中于浮层，Google 登录被突出展示（也许是 Figma 的首选和推广的登录形式？），它非常简洁，几乎是线框式的。用户体验非常好。
感谢我的产品合作伙伴 Apurva 和我一起学习。采取微小的步骤进行用户识别，并且使用户易于接受。这会使你的用户登录成功率越来越高！同时这也会为平台带来更多的活跃用户。:)希望你能从这篇文章中得到启发，并应用于你自己的产品和设计工作中。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
看似简单的登录框，暗藏了多少值得推敲的用户体验？这10个细节，就是你和设计高手的区别。
你不应该让你的用户到处寻找登录区域。他们找的时间越长，就会越沮丧。他们越沮丧，最终登录的可能性就越小。
一个很好的例子就是 Gmail 的登录页面。
你可以确切地知道你需要在何处登录，以及要在输入区域输入什么内容，上面的例子，如果你没有 Gmail 帐户，它允许你通过单击「创建帐户」来轻松地创建一个帐户。
好的用户体验是使你的登录区域明显，使你的用户尽可能容易地进行登录操作。
第三方登录正迅速成为用户登录账户的方式，理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。
通过允许用户使用用户的第三方账户中的信息来创建一个账户，可以解决所有关于这些问题。
让我们来看看下面的石墨文档和MONO登录时的选择方式：
甚至还有更方便的注册登录方式，手机短信验证码在注册的同时登录：
一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录，从用户的角度看，这很明显是一个不好的体验，但是产品的角度去思考就不一样了，产品为了获取用户更多的信息，则需要这样来设计流程。
这种设计流程该不该用，这需要在产品和用户之间进行权衡，第三方与手机短信验证码登录，在提高用户体验的同时，可以提高用户的效率，使界面更加直观。
因为环境不同，在中国很多网页端的网站，第三方登录很的产品很少。
例如，如果你的 QQ 没有在电脑端登录，因为即使选择第三方 QQ 登录，你也要拿出手机—打开 QQ —打开扫一扫，进行扫码登录等一些列的操作。
又或者，当你想要登录 behance，只要浏览器有记录之前的第三登录，点击第三方登录即可直接进入该网站，甚至不用注册。
可以看下面的腾讯网与 behance 的网页登录：
好的登录体验应该只有账号、密码两个输入字段，或者手机号码、短信验证码两个字段，以及使用第三方登录的选项。在简单、的同时，并为用户提供了很好的体验。
如果一个用户来到你的网站进行注册，或者想他们返回登录界面，这就需要让用户清楚的知道他在何处，下一步应该去哪里。
我们通过使用登录字段与注册字段的区别来帮助他们，让我们看看下面的 dribbble 注册界面：
创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册，而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗？
dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口，这样更加清晰明了。
同时可以看看 dribbble 的主页面，他们会把 sign in 与 sign up 的进行区分，在 sign up 加上微边框，让用户能更快区分两者的不同。
让用户用他们的用户名来进行登录真的不是一和很明智的做法，为用户省去记录你产品的用户名的麻烦，应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。
ins 让用户有机会用他们的电话号码或电子邮件地址登录。
反例：
尽可能让用户同时用手机号码或邮件地址来登录，因为用户可能会忘记他们用来登录你的产品的电子邮件地址，所以这时，用户能使用手机号码进行登录。
给用户提供可显示密码的按钮，减少用户输错密码的操作，当输错的同时，可进行对错的字段进行纠正，不用全部删掉重新来。
让我们来下面的脉脉和片刻：
还有什么比再次到你之前登录的网站或 app，却发现你需要再次输入账户密码登录更令人沮丧的事情吗?
当你的用户返回到你的网站时，请确保他们已经登录了，或者为了方便登录，提前为他们预先填充账户和密码等字段。
谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时，他们的登录信息都会被记住，使登录过程更加简单。
盟友银行允许用户勾选 「保存用户名」 复选框，允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法，展示形式可以多样化，可根据自己产品与用户需求来进行把控。
有时你的用户会忘记他们的登录信息。当这种情况发生时，尽量让恢复过程尽可能的轻松。
公众号的账户密码输入栏有记住密码复选框，以防用户忘记他们的用户名和密码，不用每次进来都输入账户密码进行登录。
印象笔记对他们的密码做了一些巧妙的处理，让用户知道他们多久以前更改了密码。
这个小小的提示可以唤起用户的记忆，帮助他们记起密码。
如果用户忘记了他们的登录信息，要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧，你的用户将因此会喜欢上你的产品。
我们都有过这样的经历：令人沮丧地输入和重新输入你的密码都无济于事，结果却发现你一直开着大写锁定键。
可以通过警告你的用户，防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。
让你的移动用户使用无密码登录，现在很多特别是金融类 app，都可以让用户进行指纹登录，因为不像其他 app 一样可以一直保持用户已登录状态，在保障安全的同时能更便捷。
以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。
欢迎关注作者的微信公众号：「设计探」
蓝蓝 http://www.lanlanwork.com