第一视觉 > 发现 > 平面设计 > 设计理论 >

为什么你的登录页看起来和别人一样？

作者：佚名　来源：海盐社　时间：2019-07-03

登录页面设计代表着用户对产品的第一印象，如果这个页面做的不好，那么很容易就会让别人对我们的产品印象不好。登录页面设计应该清楚的传达产品调性，同时在视觉上帮助用户完成登录这样的一个任务。

登录页应该有醒目的标识，经常把企业形象与产品或服务相结合，提高用户关注度，避免用户注意力漂移，今天我们就来盘点一下目前市面上的产品里都做得挺不错的登录页吧！！！(觉得不错的放进你们的参考小后宫噢)

背景类

看多了大多数的单调且简洁的登录页，有着炫酷且多变的动态背景的登录页是不是会让人眼前一亮，并且看的停不下来，先来说说几个背景特别的APP吧！

1、马蜂窝&虾米音乐

马蜂窝和虾米音乐的登录页面最大的亮点在于他们的背景动图背景都很好的点明了产品的核心，产品的形象鲜活了起来，如下图所示：

这个我们在参考的时候可能需要考虑一下公司的产品特点，以及时间和成本的投入是否是公司能够承担的（这个是很现实的问题）。其次马蜂窝还有一个小交互细节，值得注意一下，当用户开始输入账号的时候，背景的动图就会变成高斯模糊，减少用户在输入时所受到的干扰，这虽然是一个小细节，但是在我们平时设计的时候是一定要考虑到的小细节。

2、毒&映客

如果第一种实现起来有些难度，也可以转换一种难度系数不是很高的形式，如下图所示：为什么你的登录页看起来和别人一样？

毒和映客这两款APP ，他们的登录页面背景使用照片做成的背景墙动图，会自动上滑，略微的图片集锦上移也很酷，同时符合这两款产品针对年轻人使用的调性。但是一般来说大背景的登录页面对图片以及视频的要求会很高，如果是做练习或者飞机稿并不是很建议大家选择图片背景（因为符合产品定位的图片是真的很难找），如果大家依然想要大背景，可以继续看下面两种。

3、Lofter

Lofter的登录注册入口与引导页相结合，用户在登录的时候能够看到更多的产品信息，这种设计在是市面是比较少见的，如下图所示：为什么你的登录页看起来和别人一样？

这种比较适合想要做大背景的登录页面，但是没有找到适合产品图片的设计师来选择。它的优点是能够介绍更多的产品信息，但是缺点也很明显，因为登录页是个用户目的性很强的功能操作页面，因此很有可能就会被忽略过去。

4、快手电丸&FACEU

这两种APP是将手机和第三方登录都做成按钮，同时搭配产品形象插画，这么做的好处是可以将产品的想象更加突出，但是从操作上来说，如果用户是手机登录，还需要进入二级页面，但背景的设计可以参考，容易出效果，同时又能快速符合产品调性。对于大背景设计的难度系数最低，新手设计师推荐优先尝试。

顶部图片

1、最右&bilibili&快手漫画

上图中的三个产品都是产品有卡通形象的产品，同时还很有识别度，因此将有他们放在登录界面顶部，有助于产品形象的深入化，同时当用户在输入密码的时候，卡通形象还会转变成蒙上自己的眼睛或者别的动作，既有趣味性又给用户安全感。以上三个都是不同类型的产品，但是采用了同一种登录方式，但他们都有相对年轻化的用户群体，以及卡通形象的产品，因此使用这种能够更好的固定产品形象。

2、36氪&松果

36氪的头部小背景让整个登录页面不会显得太平，视觉上也不会太过单一，我们可以来做个对比，如下图所示：

上面两种图中有背景和没有背景的登录页，我们能够很明显的发现没有背景的从视觉上显得很单一，并且没有了识别度。想要做比较简约但是又有点特别的登录页可以参考这类的头图，会让你的登录页不那么单调还有识别度。

弹窗登录

叨叨记账&波洞

叨叨笔记使用的是一种类似弹窗同时带有tab切换的登录形式，但是只适合只有一种第三方的登录形式，如果数量一多，就要改变形式或者去掉tab，但是这种表现形式也是挺特别的。作为腾讯旗下的波洞，设计风格很鲜明，登录直接使用的弹窗形式，应该考虑到大多数用户都喜欢直接用第三方登录会比较方便，同时也是自己的产品，因此做成了弹窗形式。上面的两种是不同形式的弹窗，小伙伴们可以根据自己公司产品支持哪几种第三方登录来决定选用哪种参考。