出色的登录页面设计的10个技巧【杭州新易设计坊】

时间：2023-09-22 21:30:01 | 来源：网站运营

时间：2023-09-22 21:30:01 来源：网站运营

出色的登录页面设计的10个技巧【杭州新易设计坊】：



【复试录取必备】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浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

资料来源：http://discourse.wicg.io

提示10.不使用密码登录

让您的移动用户无需记住或输入密码即可登录。例如，查尔斯·施瓦布银行（Charles Schwab Bank）允许其用户使用手机上的指纹扫描仪登录。

Charles Schwab Bank的登录页面

往期精彩内容



20清华大学新易第二位清华第一 2020年北理工第一 【第一名】20杭州化工新易连续两年第一 20年经验分享更新中…… 19清华大学 【应届】19清华大学 19中央美术学院 19杭州理工大学 19杭州大学 【初试第四】19浙江大学 【第一名】19杭州化工大学 杭州大学 浙江大学 杭州理工大学 【第一】19河海大学 【双胞胎均录取】19浙江工业大学 19第一名杭州科技大学 杭州理工大学设计学博士经验分享 2018杭州理工大学设计学手绘最高分 2018杭州理工大学（工业设计工程史论第二） 2018同济大学 2018东华大学（3个月考研成功） 2018杭州美术学院 2018杭州理工大学 2018杭州大学 2018浙江工业大学初试第一 2018华东理工大学2018河海大学2018浙江工业大学 杭州工业大学第二名华南理工大学初试第一名成功之路 杭州理工大学 杭州理工大学 杭州理工大学设计学395分学霸经验分享 浙江大学 杭州理工大学 同济大学西北工业大学 NCDC学员北理2017年135分考研快题-曲别针回忆稿 18年经验分享陆续更新中……有一个地方只有我们知道-新易设计坊 考研还是出国？无问对错，适合自己就是最好的选择！ 【效率翻倍】新易考研自习室来啦！全国首家，始于2014年 【超干货】暑假结束你的工业设计考研快题应该画成这样



2020杭州新易设计坊暑假设计手绘集训营招生简章正式发布！

暑假设计手绘-前3天就可以画成这样，你敢相信吗？ 100张学生作品|在新易暑假设计手绘5天你就可以达到这个水平 【精华小版面】暑假设计手绘-前10天就可以达到这样的水平！ 暑假课程仿生设计你一定要看 手绘课程2天教学成果2018 马克笔原图教你如何上色 设计手绘课程第6天作品2017 5天你就可以画成这样2018 第2天竟然达到这样2018 暑假手绘课程·第1天就画成这样，就说你怕不怕！ 【必备】腾讯课堂工业设计手绘基础网课来啦！ 【纯干货】这样的手绘让我毫无抗拒！ 寒假你的手绘应该画成这样！寒假课程学生作品展示 NCDC学员北理2017年135分考研快题-曲别针回忆稿 【纯干货】暑假结束你的考研版面要画成这样！ 哮喘吸入器·产品设计手绘演示视频 考前70天手绘快题要画到这个水平！十一课程成果展 20分钟教你学会彩铅工具表达技巧【纯干货】 远离PPT排版，你只差这篇排版攻略 手绘一直没有进步，那是你不懂“刻意练习”法则 【手绘干货】彩铅工具表达技巧-简单形体教学示范




20年暑假精品作品集课程正式发布！
【上百个网站全拿走】学工业设计这些好用的工具你一定得知道 【纯干货】如何准备一份优秀的工业设计作品集（上） 如何准备一份优秀的工业设计作品集（下） 2018年新易设计坊暑假精品作品集课程正式发布！ 地表最强|工业设计留学攻略 国外学生作品集 | 作品集分享——值得一看的草图与分析部分 产品设计十部曲1—如何寻找“设计点”？ 产品设计十部曲2——产品设计“前期分析”需要做什么？ 产品设计十部曲3—产品设计市场调研怎么做？ 去中央美术学院看毕设 【精品作品集成果展】这样的作品集复试录取率高达96% 有一个地方只有我们知道-新易设计坊 清华美院本科生毕业展！



（点击图片试试）



（点击图片试试）



（点击图片试试）






新易设计坊官方微博