大厂B端登录页，让我打开新思路了

登录页这个东西，因为感觉很简单，所以经常不被重视。

但是登录页作为一个产品的门面，直接影响用户第一印象，又是非常重要的存在。

最近研究了一下我电脑上那一堆桌面端的登录页，还真发现了一些之前没想清楚的门道来。

目录：

0. 不登录

1. 填写项目

2. 二维码

3. 登录方式

4. 注册和忘记密码

5. 勾选项

6. 登录按钮

7. 设置项

8. Logo

0. 不登录

很多产品会提供部分功能给未登录账号使用。

比较谨慎的，Zoom 会给一个直接加入会议的按钮：

极端一些的，会像 WPS 这样打开后直接进入，不需要登录页：

给未登录用户太多功能会影响注册用户占比，强制登录又会把使用门槛拉得太高，这个主要看产品定位吧。

接下来，咱们主要针对必须登录的情况来讲吧。

1. 填写项

这有什么好说的，登录填写项不就是用户名/邮箱/手机号+密码吗？

没错，最典型的却是如此。例如百度网盘和钉钉：

但是我发现，有的产品会故意分两步让你填，这样就可以把注册和登录合并到一个步骤了（输入后看看注册过没，没有就走注册流程，有就走登录流程）。例如飞书和 Google：

还有的，甚至不把填写项放出来，非要你点击入口才行。例如微云和 CCtalk：

我个人是比较喜欢一打开就是填写项，一次填完的，不知道大家怎么看？

2. 二维码

我发现把二维码放到右上角的方式蛮常见的。

例如钉钉就做得很好看：

飞书用高亮色做有点生硬，但也还行：

微云这个感觉中间突然被切了一角，有点奇怪：

3. 登录方式

如果登录方式只有 2 种，tab 是最常用的切换方式。例如微云：

如果比较多，用图标在底部列出来是最常用的方式。例如腾讯会议和 Zoom：

但也有一些产品，可能比较纠结，两种方式混合一下。比如飞书：

但是记住一定要在图标下加文字说明，否则就会像 CCtalk 一样看不懂第一个图标是什么（悬停提示也没有）：

4. 注册与忘记密码

这两个按钮几乎所有登录页都需要，但又不是特别重要的信息。

一般两种布局最常见，一是将这两个按钮都放在输入框下面。例如微云和钉钉：

二是把忘记密码放在密码框里面，然后注册就放在右下角某个地方。例如 Zoom、腾讯会议：

也如果把输入邮箱/手机号和密码分成两步，就可以省略一个这两个入口，不过登录就得多一步操作了。例如飞书：

5. 勾选项

登录页一般有两个勾选项，一个是自动登录、一个是同意协议条款的，大多默认不勾选。

一般都放到登录按钮的下面，虽然不符合操作顺序（先勾选了才能确定），但是排版好看些。例如飞书：

其实像微云这样把勾选项放到登录按钮上其实更加符合操作顺序，因为这是在登录之前要确认的内容：

Zoom 在底部写上登录即代表同意政策和条款，就省略一个勾选项了：

但谁都比不上百度网盘，它们干脆一个勾选项都没有，至今还不是好好的？

6. 登录按钮

基本上登录页都少不了登录按钮，除非是像钉钉这样登录方式有限的：

有的产品会让登录按钮置灰，直至用户填写完成为止。例如飞书和 Zoom：

7. 设置项

很多产品会在用户登录之前就提供设置项目，主要是网络设置和语言设计。

例如飞书就两个都给了（左下角），做得挺到位的：

Zoom 就没有提供，跟着我的系统语言用中文，这个思路页也能理解：

腾讯会议比较实诚，把整个设置面板的入口都放到登录页了，包括语言选项在内：

8. Logo

大部分产品的登录页都会放上 logo，这个感觉是常识。例如腾讯会议、百度网盘：

但其实也有不少只写名字不放 logo 的。例如微云、飞书：

钉钉就比较奇特，既没有 logo 也没有名字，不去状态栏查看一下都不知道这是什么软件：

总结一下

登录页表面看上去简单，经常不受重视，但仔细这么对比下来，发现可变因素还真是挺多的。

不知道大家对于这个页面有什么困惑的地方，可以在评论区讨论一下。

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：