无论是一个网页设计师或UI设计师，一个登录和注册页面的设计是一个必要的经验。，登录界面不难设计，这不是那么容易就能做，找到安全性和可用性之间的平衡点或登录界面，需要相当的经验支持。今天的文章来自方团队，在登录界面的设计是非常微妙的，值得学习。
我们对平方设计的每一个细节都很感兴趣。最近，对登录界面进行了修改，新的双重认证机制使用户帐户更加安全。同时，我们也借此机会逐步提升用户登录体验。
用户体验升级登录界面并不像看上去那么简单，当你的界面更加美观、直观、快捷、易用同时登录时，你还需要使这个过程不那么简单，不受黑客或其他恶意入侵的影响。
下一步，让我们看看逆向决策所做的决定。如果你想仔细地考虑我们的回归细节，请注册一个方帐户并登录！
轻松
通常，我们打开登录界面，看不到登录窗体本身，但登录帐户。形式本身只是一种手段获取个人信息，而不是一个目的。从这一点来看，登录体验应该轻松轻松，所有的设计应尽量减少干扰，切断障碍，让你更轻松的完成登陆任务，而不做任何额外的操作。
由于双重认证机制，登录过程是更复杂的比以前。登录的传统方式比以前只有电子邮件和密码登录，现在是不是一个简单的方式输入决定登录或没有，额外的步骤成为新的登录过程包括几个步骤：确定明确的帐户是否双认证，用户选择什么样的验证方法。在许多过程中，备用设备/联系方式也应包括在内，而急救备用代码应该包括在内。所有这些因素都必须考虑，但我们不能让他们登录并使用户难以负担。
占位符和标签
如何在一个表格占位符表示应该选择的是一件很棘手的事情。从设计的角度来看，应是很好的，但是不容易使用，特别是当你需要考虑可达性和形式，自动填充。如果你使用HTML来实现占位符，然后占位符会消失当用户输入，其结果是，一些用户会忘记他真想此刻进入。更麻烦的是，如果你的浏览器会自动填充的信息之前，你永远不会看到的地方的占位符。
通过手动或自动地检查表单的内容，我们成功地绕过了问题。当内容由浏览器自动填充时，将有标签来解释输入内容。如果手动输入，标签将不会显示。然而，后来我们发现用户在提交之前喜欢有标签提醒，确保他们输入的内容是正确的，这意味着他们希望在输入过程中保留标签。
所以我们终于想到了一个优雅的解决方案，使用不同的元素来做占位符标签。当用户输入时，占位符标签将自动移出输入框。
当然，在移动终端设备上，空间是有限的，所以占位符标签可以像这样移动：
当然，为了使所有这些设计成为现实，还需要解决一些有趣的挑战。
尴尬的安全特性
刚开始的时候，我们用代码来控制这些标签和占位符并不复杂：当表单内容的变化，检测的内容；如果内容是空的，在窗体中显示占位符标签；如果不为空，然后搬出去。当页面被装载，系统会自动检测几次检测浏览器是否已经自动填充内容。
但即便如此，仍然有一个问题。有一个Chrome浏览器，安全功能称为passwordautofillagent：PasswordValueGatekeeper，这个独特的特点是，它没有帐户和密码字段以前保存的直接充入的形式，即使他们似乎填写（当然，用户一般不提交后的内容想把他们的浏览器），只有当用户与页面交互（当它被提交的内容），可以检测出浏览器要填写的表格的内容。所以，这个浏览器的设计允许我们的标签是这个形式显示：
所以，为了避免这些问题，主要的解决办法是检查是否输入的内容与WebKit的自动填充选择器和输入内容是否存在或不一致，它看起来并不漂亮，但它是非常有效的。
更灵活的界面
操作的每一步都是重定向网页，这正是Web设计师在2008中所做的，从而使设计能够更好地兼容。但平方的应用程序不再支持这样的特性。
新的平方登录界面具有更强的流动性，流畅的动态和自然切换，这真的很迷人。
验证和建议
就像上一篇文章中提到的，以前的设计很容易获取错误的登录邮箱和用户名，直到提交时，系统提醒才收到。密码或帐号不正确。
mailcheck这样的邮箱名校正工具，可以正确的邮箱地址输入错误，大大降低了登录输入的错误率。我们添加这个组件在过去的版本，现在是服务新版本。
登录按钮的回归
当页面设计时，我们已经实现了界面上其他重要元素的显著减少，最终只在登录界面上制作了两个盒子，而且没有其他视觉元素，毕竟，在输入帐号密码后，按回车键登录是一件自然的事情，没有登录按钮似乎效果甚微。
但是当我们看到实际的用户操作时，我们意识到很多用户喜欢点击按钮提交表单而不是点击返回键，这也促使我们最终返回新版本中的登录按钮。
等等，为什么登录慢
当我们点击我们登录到按钮后，它通常会等待几秒进入登录界面，即使我们有很多的优化，用户仍然需要等待几秒钟的时间来等待登录，事实上，是有原因的：安全。当用户提交自己的账号密码，后台服务器需要耗费大量的计算来确定的，他们是正确的。在这里，我们不能详细描述具体的机制，但这是为了防止任何人以暴力的方式进入系统。
当然，也正是因为这个过程缓慢，我们不想让用户一个人在脸上好像陷在登录界面上，我们需要设计，用视觉反馈告诉用户你的表单已经提交，一切正常，你只需要在这里等待一分钟；
因此，我们在这个链接中添加了一个进度条，让用户知道要登录多长时间，这使他们对登录时间有一个清晰的期望。但是，基于时间的进度条本身非常单调，不一定准确，所以我们最后使用了一个非常微妙的动画作为替代。
结论
用户体验和UI设计是不一样的，它们会随着时间和地域的变化而不断地调整，希望您能享受到平方登录界面的改进，希望改进的过程能给我们的同事们一些启示。
