设计快速登录页面可能看起来不多。毕竟它只是一个表单和一个提交按钮。

然而，如果您深入了解各种登录表单页面，您会发现大量的设计理念。如果您有一些代码片段可以使用，您可以快速构建登录表单页面，而无需从头开始编写代码。

 

1.登录页面UI

 

开发人员Khaled Mneimneh使用一些基本的CSS3属性构建了这个时尚的登录UI。

舍入的输入字段非常易于复制，并且投影效果也不需要多行代码。在一段时间内编辑样式和颜色，这一切都可以轻松地在任何网站上运行。

但是对我来说突出的一个部分是提交按钮中的自定义渐变。这是对细节的一些关注。

2.渐变形式

Tyler Fry开发了一个带有黑暗风格登录表单的有趣渐变页面。

我最喜欢的部分是较暗的背景，以及它如何在表单中使用较轻的文本。

通常情况下，设计师坚持使用深灰色背景来制作暗页，但是这一个在渐变中使用较暗的色调看起来很棒。

聚焦时，即使输入字段也有一些样式。看起来很近，你会看到焦点上的阴影突出。

3.纯HTML5

纸叠登录表单对于设计者来说是一种非常常见的技术。由于平面设计的普及，我们现在经常看不到这种情况。

然而，我仍然是这种风格的粉丝，这就是为什么Vladimir Banduristov的HTML5形式值得称赞。它完全适用于HTML和CSS，并带有一些非常简洁的表单输入设计。

但这是整个页面突出，这是一个你可以添加到几乎任何网站的设计。

如果你想走得那么远，它甚至可以作为自定义WordPress登录页面的模板。

4.显示/隐藏密码字段

这个片段的基本深色设计非常干净，易于使用。但这甚至不是焦点。

当您处理表单时，您会注意到密码字段有一个显示/隐藏按钮。通常，这用于移动应用程序，因为在那里输入密码更加困难。

但您可以将此功能添加到您的所有登录字段，只是为了让用户高枕无忧。它可以帮助人们避免错误的登录，除非有人站在屏幕后面，否则这不是一个安全问题。

5.清理登录表格

这是一个超级干净的蓝色登录页面，使用一些明亮的渐变效果。

输入字段实际上具有轻微的外部发光，带有浅色边框和较暗的文本样式。整个过程非常专业，我可以看到这个登录表单用于从初创公司到公司网站的所有内容。

总的来说，我是这个设计的忠实粉丝，拥有出色的风格登录以吸引任何人的注意力。

6. Apple Dev登录

开发人员Christophe Molina创建了这个Apple风格的登录字段，专为Apple Dev面板练习而设计。

这并不是大多数Apple用户日常认可甚至使用的东西。

但它有一个非常疯狂的设计风格，具有skeuomorphism和一个出色的标题功能区。

更不用说整个表单在纯CSS上运行，这本身就是一项真正的成就。

7.动画表格

在UI设计中添加一些动画总是很有趣。这就是这种形式提供的简短的jQuery驱动的表单动画。

即使演示没有做太多，也很容易将其转换为工作表单字段。但是，您也可以直接在jQuery中处理用户输入，如果这更符合您的风格。

整体而言，这是一个非常简单的设计，带有不那么简单的动画。但是，如果有一些时间来编辑代码，应该很容易复制。

8.黑暗登录

黑暗的UI设计不是网络上的标准。但如果做得好，我个人觉得深色更加诱人。

看看Andreas Storm创建的这个黑暗登录表单。它使用明亮的石灰绿色作为登录按钮和自定义单选按钮。

它可能是整个列表中最美观的形式之一，没有太多炫目的功能。

我强烈建议对任何黑暗的网站进行测试。它可以作为自定义登录页面使用，甚至可以作为嵌入到您网站上的表单。

9.使用注册模式登录

你现在看到很多登录+注册模式窗口都是由JavaScript驱动的。而这一次由Andy陈仅仅是一个不错的设计与出色的用户体验混合的又一个例子。

页面背景本身很干净，表单字段足够大，可以快速吸引注意力。但是，如果单击右侧的蓝色小侧边栏，您将看到一个注册窗口飞入视图。

它出现在登录表单的顶部，因此它就像一个典型的模态窗口一样工作。很酷的效果！

它确实需要一些jQuery，但总共可以使用25行JS。考虑到这种形式令人难以置信的可用性，这令人印象深刻。

10.极简主义登录

超轻和超级基本是描述由Marcello Africano开发的这种随和形式的最佳方式。