技巧1.使其明显
不应该让用户四处寻找登录区域。他们看得越久就会越沮丧。他们越沮丧,最终登录的可能性就越小。 Gmail的登录页面就是一个很好的例子。

重要的都在前面和中间。可以确切地知道需要登录的地方以及要输入的内容,如果您没有Gmail帐户,则可以通过单击“创建帐户”轻松地创建一个账户。使您的登录区域显而易见,以使用户尽可能容易地登录。
技巧2.使用社交账号登录
社交账号登录正迅速成为用户登录其Web帐户的方式。实际上,有88%的用户说他们使用过社交登录,而有86%的用户说他们因不得不在网站上创建新帐户而感到困扰。并且为不同的网站创建多个帐户既耗时又令人困惑。很难记住一堆不同的密码和用户名。 社交账号登录通过允许用户使用来自其社交媒体帐户之一的信息来创建帐户,从而消除了所有这些情况。这是其中的一个很好的例子。博客平台允许用户使用Twitter,Facebook或Google登录。

有些只提供一个社交平台,例如RPG商店DM的Guild:

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

社交登录为您的用户创建了一个简单直观的登录页面设计。
技巧3.简单明了
对于您的用户,您的登录页面应该简单明了。 例如,Instagram的登录页面设计:
对于您的用户,您的登录页面应该简单明了。 例如,Instagram的登录页面设计:

两个输入字段以及使用Facebook登录的选项。它简单,有效,并为用户提供了很好的体验。因此,在创建登录页面设计时,请记住要保持简单明了。
技巧4.区分注册和登录
如果用户访问您的网站进行注册(或者他们要返回登录名),则希望他们清楚该去哪里。 通过使您的登录字段与注册字段不同来帮助他们。Facebook是一个很好的例子。

请注意注册字段的位置是前面和中间。新用户可以在页面上进行直接注册,而老用户可以使用在右上角的字段进行登录。“登录”部分用深蓝色边框标记,与页面的其余部分完全分开,使用不同的颜色,布局和复制是使登录字段与注册字段不同的简单方法。它不必很复杂。这是Dribbble的一个示例,该示例进行了一次简单的更改,使所有的更改有所不同。

同样,使用边框会产生细微但有用的区别。
技巧5.跳过用户名
不使用用户名为你的用户省去了不得不想出并记住你的网站用户名的麻烦。让他们使用他们的电子邮件地址或电话号码注册。你的用户真的想要一个用户名吗?或者对他们来说,注册和登录网站只是一件琐事?LinkedIn为用户提供了使用电话号码或电子邮件地址登录的机会。

这也很重要,因为用户可能会忘记他们用来登录您的网站的电子邮件地址。给他们使用电话号码的选项,他们将有一种简单的登录方法。
技巧6.显示密码
为用户提供输入时可以查看其密码的选项,可确保他们可以在第一次尝试时轻松登录到您的网站,而不必进行很多错别字的尝试。 WordPress允许用户在输入密码时看到他们的密码。所有用户所要做的就是单击密码字段中的眼睛图标,他们将能够看到它。
索尼在Playstation Network登录页面设计上也是如此。

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

或者,您可以包括一个“ Show Password”(显示密码)复选框,该复选框可以实现相同的目标。
技巧7.记住用户
除了返回先前登录的网站以发现您需要再次登录之外,还有什么比让您沮丧的事了吗?当您的用户返回您的网站时,请确保他们已经登录或为他们预先填充了某些字段以便于登录。 Google在这方面做得很好。每当用户需要重新登录YouTube,Gmail,Google云端硬盘或任何其他Google品牌时,都会记住他们的信息,从而可以轻松进行登录。

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

技巧8.轻松恢复密码
有时用户会忘记他们的登录信息。发生这种情况时,请使恢复过程尽可能轻松。 Chase Bank的底部有一个按钮,以防用户忘记用户名和密码。

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

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

这一小举动可以缓和用户的记忆,并帮助他们想起密码。 如果用户忘记了登录信息,则应该使用户知道应该去哪里。减少会产生烦恼的情况。
技巧9.让用户知道其大写锁定处于打开状态
我们都有过这样的体验:键入密码并重新键入也无济于事,只是因为在整个过程中都保持大写锁定状态。 通过警告用户操作时将其大写锁定,可以防止这种情况的发生。WordPress是一个很好的例子,用户打开大写锁定时,会出现一个红色的警告符号。
Microsoft的Edge浏览器还使用户可以选择在键入时打开大写锁定的提示。
同样,Ally Bank允许iOS用户使用其Face ID登录其帐户。

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

技巧10.不使用密码登录
让移动用户无需记住或输入密码即可登录。例如,查尔斯·施瓦布银行(Charles Schwab Bank)允许其用户使用手机上的指纹扫描仪登录。

同样,Ally Bank允许iOS用户使用其Face ID登录其帐户。
