【复试录取必备】2021年新易设计坊寒假精品作品集！10多年经验设计总监级老师授课

大号网页设计是网站用户体验之旅中至关重要的一部分。良好的设计有助于吸引访问者访问您的网站，并将新访问者转化为潜在客户。它还为回头用户提供了一种轻松的方法来登录您的网站。

您希望它无缝，吸引人并且易于使用。

我们想提供帮助。让我们逐一介绍设计良好的登录页面设计的最佳技巧和最佳实践，并为您提供许多激发灵感的优秀范例。

10个登录页面设计技巧和示例

在徽标页面设计中，我们同时包括了您应该做和不应该做的事情。

并非所有提示和示例都适用于您的网站。诀窍是选择适合您的东西。

提示1.使其明显

您不想让您的用户四处寻找登录区域。他们看得越久，他们就会越沮丧。他们越沮丧，最终登录的可能性就越小。

一个很好的例子是Gmail的登录页面。

Gmail的登录页面

一切都在前面和中间。您确切地知道需要登录的地方以及要输入的内容，如果您没有Gmail帐户，则可以通过单击“创建帐户”轻松地创建一项权利。

使您的登录区域显而易见，以使您的用户尽可能容易地登录。

提示2.使用社交登录

社交登录正迅速成为用户登录其Web帐户的方式。

实际上，有88％的用户说他们使用过社交登录（Source），而有86％的用户说他们因不得不在网站上创建新帐户而感到困扰（Source）。

并且有充分的理由。为不同的网站创建多个帐户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

社交登录通过允许用户使用来自其社交媒体帐户之一的信息来创建帐户，从而消除了所有这些情况。

这是Medium的一个很好的例子。博客平台允许用户使用Twitter，Facebook或Google登录。

中号的登录页面。

有些只提供一个社交平台，例如桌上型RPG商店DM的Guild：

DM的公会的登录页面。

甚至还有一些社交媒体网站，允许您使用社交登录名：

Pinterest的登录屏幕

社交登录为您的用户创建了一个简单直观的登录页面设计。

想要在您的收件箱中发布更多类似这样的帖子吗？订阅我们的每周摘要。

提示3：吻（保持简单，愚蠢）

对于您的用户，您的登录页面应该简单明了。

例如，查看Instagram的登录页面设计：

Instagram重新设计的登录页面。

两个输入字段以及用于登录Facebook的选项。它简单，有效，并且为用户提供了很好的体验。

因此，在创建登录页面设计时，请记住要亲吻：保持简单，愚蠢。

提示4.区分注册和登录

如果用户访问您的网站进行注册（或者他们要返回登录名），则希望他们清楚该去哪里。

通过使您的登录字段与注册字段不同来帮助他们。

一个很好的例子是Facebook。

Facebook的登录页面。

请注意注册字段的位置是前面和中间。新用户可以在页面上进行注册，而回头用户可以使用自上而上的字段进行登录。看看“登录”部分是如何用深蓝色边框标记的，与页面的其余部分完全分开吗？

使用不同的颜色，布局和复制是使登录字段与注册字段不同的简单方法。它不必很复杂。

这是Dribbble的一个示例，该示例进行了一次简单的更改，使所有的更改有所不同。

Dribbble的登录页面。

同样，使用边框会产生细微但有用的区别。

提示5.跳过用户名

让您的用户不必再为想起您的网站而烦恼，并且记住您的网站用户名。而是让他们使用其电子邮件地址或电话号码进行注册。

您的用户是否真的想提供一个用户名？还是在注册和登录您的网站的过程中，这只是他们的另一项烦恼？

LinkedIn为用户提供了使用他们的电话号码或电子邮件地址登录的机会。

LinkedIn的登录页面。

这也很重要，因为用户可能会忘记他们用来登录到您的网站的电子邮件地址。给他们使用电话号码的选项，他们将有一种简单的登录方法。

提示6.向他们显示密码

为用户提供输入时可以查看其密码的选项，可确保他们可以在第一次尝试时轻松登录到您的网站，而不必进行很多错别字的尝试。

WordPress允许用户在输入密码时看到他们的密码。所有用户所要做的就是单击密码字段中的眼睛图标，他们将能够看到它。

WordPress登录页面。

索尼在Playstation Network登录页面设计上也是如此。

索尼PlayStation网络登录页面。

或者，您可以包括一个“ Show Password”（显示密码）复选框，该复选框可以实现相同的目标。

提示7.记住您的用户

除了返回先前登录的网站以发现需要再次登录之外，还有什么比这更令人沮丧的吗？

当您的用户返回您的网站时，请确保他们已经登录或为他们预先填充了某些字段以便于登录。

Google在这方面做得很好。每当用户需要重新登录YouTube，Gmail，Google云端硬盘或任何其他Google品牌时，都会记住他们的信息，从而可以轻松进行登录。

Gmail的“选择帐户”屏幕。

Ally Bank允许用户选中“保存用户名”框，以便该网站在到达网站后立即填充其用户名。这是记住用户的另一种好方法。

盟友银行的登录页面。秘诀8.轻松恢复密码

有时您的用户会忘记他们的登录信息。发生这种情况时，请使恢复过程尽可能轻松。

大通银行的底部有一个按钮，以防用户忘记用户名和密码。

大通银行的登录页面。

伊利诺伊州收费公路的I-Pass网站还包括两个单独的链接，供用户忘记用户名或密码时使用。

伊利诺伊州收费公路的I-Pass登录页面。

Evernote对他们的密码做了一些巧妙的处理，并让用户知道他们多久之前更改了密码。

Evernote的登录页面。

这一小举动可以缓和用户的记忆，并帮助他们记住密码。

如果用户忘记了登录信息，则使用户知道应该去哪里。您将使烦恼的情况减少烦恼，并且您 的用户会为此而爱上您。

提示9.让用户知道其大写锁定处于打开状态

我们到过那里：令人沮丧地键入并重新输入密码无济于事，只是发现您在整个过程中都保持了大写锁定。

通过警告您的用户在操作时锁定其大写，可以防止这种情况的发生。

WordPress就是一个很好的例子。打开用户的大写锁定时，会出现一个红色的小警告符号。

WordPress会在您尝试登录时通知您何时按下了大写锁定

Microsoft的Edge浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

资料来源：discourse.wicg.io提示10.不使用密码登录

让您的移动用户无需记住或输入密码即可登录。

例如，查尔斯·施瓦布银行（Charles Schwab Bank）允许其用户使用手机上的指纹扫描仪登录。

Charles Schwab Bank的登录页面