快手电丸号，如何设计吸引用户的登录页面？盘点马蜂窝、虾米音乐等优秀案例

hwyzw

    登录页面设计体现着用户对产品的初始印象。若此页面设计不佳，便容易使他人对我们的产品印象变差。登录页面设计需清晰地传达产品调性，并且在视觉方面帮助用户完成登录这一任务。

    登录页要有醒目的标识，时常将企业形象与产品或服务相融合，提升用户的关注度，防止用户注意力分散。今天我们来盘点一下当下市面上那些做得较好的登录页吧！（觉得不错的可放入你们的参考范畴哦）

    背景类

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

    1、马蜂窝&虾米音乐

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

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

    2、毒&映客

    如果第一种难以实现，那么可以采用一种难度系数不高的形式，就如同下面的图所展示的那样：

    3、

    登录注册入口与引导页相结合，用户在登录时能看到更多产品信息，这种设计在市面上比较少见，如下图所示。

    4、快手电丸&FACEU

   

    这两种 APP 把手机和第三方登录都做成了按钮，并且搭配了产品形象插画。这样做的好处是能更突出产品的想象。不过从操作方面来看，若用户是手机登录，就需要进入二级页面。但背景设计可供参考，容易出效果，还能快速符合产品调性。大背景设计的难度系数最低，新手设计师建议优先尝试。

    顶部图片

    1、最右&&快手漫画

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

    2、36氪&松果

    36 氪的头部小背景使得整个登录页面不会显得过于平淡，在视觉方面也不会太过单调。我们可以进行一个对比，情况如下所示（如下图）：

    上面两种图中，有背景的登录页和没有背景的登录页是不同的。我们可以明显看出，没有背景的登录页从视觉上显得较为单一，同时也失去了一定的识别度。如果想要制作比较简约但又有特色的登录页，就可以参考这类头图，这样能让你的登录页不那么单调，并且增加识别度。

    弹窗登录

    叨叨记账&波洞

    叨叨笔记采用的登录形式类似弹窗且带有 tab 切换，不过这种形式仅适用于只有一种第三方登录形式的情况。若第三方登录形式数量增多，就需要改变形式或者去掉 tab。然而，这种表现形式是比较特别的。波洞是腾讯旗下的，它的设计风格很鲜明。登录时直接使用弹窗形式，考虑到大多数用户喜欢直接用第三方登录会更方便，而且它本身也是自己的产品，所以做成了弹窗形式。上面有两种不同形式的弹窗，小伙伴们可以依据自己公司产品支持的第三方登录种类来决定选用哪种。

    图标

    陌陌

   

    陌陌的登录注册页，大家看着可能觉得很普通，没什么特别之处。我刚开始也有这样的感觉，觉得很普通没什么特别。不过，大家可以留意一下它的第三方登录，如下图所示。

    我们找参考不是直接照抄页面，而是可以选择每个页面优秀的地方来学习。

    图标

    音遇

    音遇的号码输入框也是很优秀的，如下图所示：

    音遇的账户输入框会依据文字的增减而改变宽度，这样能让用户更专心于输入账号这一行为，并且可以及时确认自己的输入是否存在错误。

    划重点

    考虑到实现的问题，我找的参考大多为线上稿。在变身成厉害的设计师之前，需要做练习和积累。拥有一双能辨别好设计的双眼，能让你事半功倍。很多人说因为审美不行，其实不好看的页面也有可借鉴之处，好看的设计也并非所有想法都适合我们，我们要学会辨别，而积累只是开始的第一步。

    海盐社（公众号）