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

38,715 阅读4分钟

以下文章来源:公众号体验进阶,作者 设计师ZoeYZ

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

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

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

目录:

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 也没有名字,不去状态栏查看一下都不知道这是什么软件:

总结一下

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

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

做设计,用摹客

以上文章来源于公众号体验进阶,作者 设计师ZoeYZ