登录页面设计代表着用户对产品的第一印象，如果这个页面做的不好，那么很容易就会让别人对我们的产品印象不好。由此可见它非常重要，作为一个招牌或者是门面，一个好的登录页往往会给用户留下深刻印象，无论是界面视觉表现，还是流程交互体验，都是不可或缺的。
登录页设计样式有哪些？
登录页的核心作用：
接下来就是设计样式分析了：
1、留白设计
这种设计方法应是最常规且效率最高的一种方式了，背景纯白色，把其余元素放置中央，留白处理，有空间感和透气性，没有任何色彩倾向和视觉元素干扰，让用户专注于品牌和登录路径。
2、填充品牌色
品牌符号+大量品牌色的应用+常规登录路径以及辅助登录路径，就可以构成了一个登录界面，而且能够传递品牌信息以及产品信息。
3、填充图片
没有大量运用品牌色，而是运用与产品行业相关特性的图片来作为背景支撑，显然是为了强化品牌行业属性，因为图片比颜色的视觉冲击力更强，也比较容易感知到产品的用途，所以运用品牌行业相关的图片来设计登录页面也是一种可行的方法。
4、产品符号or品牌符号
运用产品符号或是品牌符号来作为设计主要元素，一是可以传递品牌感，二是可以渲染产品行业属性特征，两者都能兼顾，可以是视觉冲击力和氛围渲染力都非常强了，给予用户的视觉感官也是满满的，这也是一种可采用的设计样式方法！
优秀登录页赏析
登录页面设计应该清楚的传达产品调性，同时在视觉上帮助用户完成登录这样的一个任务。接下来我们就来盘点一下目前市面上的产品做得不错的登录页吧！
1、马蜂窝、虾米音乐
马蜂窝和虾米音乐的登录页亮点在于动图背景都很好的点明了产品的核心，产品的形象鲜活了起来，如下图：
其次马蜂窝还有一个小交互细节，值得注意一下，当用户开始输入账号的时候，背景的动图就会变成高斯模糊，减少用户在输入时所受到的干扰。
2、毒、映客
如果第一种实现起来有些难度，可以换一种难度系数不是很高的形式，如下图：
登录页面背景使用照片做成的背景墙动图，会自动上滑，略微的图片集锦上移也很酷，同时符合这两款产品针对年轻人使用的调性。
3、Lofter
登录注册入口与引导页相结合，用户在登录时可以看到更多的产品信息，这种设计在是比较少见的，如下图：
它的优点是能够介绍更多的产品信息，但是缺点也很明显，因为登录页是个用户目的性很强的功能操作页面，很有可能就会被忽略过去。
4、快手电丸
手机和第三方登录都做成按钮，同时搭配产品形象插画，可以将产品的想象更加突出，但从操作上来看，如果用户是手机登录，需要进入二级页面，但背景的设计可以参考，容易出效果又能快速传达产品调性。
顶部图片
1、bilibili、快手漫画
上图中的两个产品都是产品有卡通形象的产品，同时还很有识别度，因此将有他们放在登录界面顶部，有助于产品形象的深入化，同时当用户在输入密码的时候，卡通形象还会转变成蒙上自己的眼睛或者其他动作，既有趣味性又给用户安全感。
2、36氪&松果
36氪的头部小背景让整个登录页面不会显得太平，视觉上也不会太过单一，我们可以来做个对比，如下图：
上面两种图中有背景和没有背景的登录页，我们能够很明显的发现没有背景的从视觉上显得很单一，并且没有了识别度。
想要做比较简约但是又有点特别的登录页可以参考这类的头图，会让你的登录页不那么单调还有识别度。
弹窗登录
叨叨记账、波洞
叨叨笔记使用的是一种类似弹窗同时带有tab切换的登录形式，但是只适合只有一种第三方的登录形式，如果数量一多，就要改变形式或者去掉tab，但是这种表现形式也是挺特别的。
作为腾讯旗下的波洞，设计风格很鲜明，登录直接使用的弹窗形式，应该考虑到大多数用户都喜欢直接用第三方登录会比较方便，同时也是自己的产品，因此做成了弹窗形式。
图标
陌陌
陌陌的登录注册页可能大家看着觉得很普通，没什么特别的，但是大家可以注意一下它的第三方登录，如下图：
QQ和微信的icon都是自制的，与我们见到的大多数第三方的icon都不太一样，所以这个点可以作为我们设计第三方登录时参考的点。
总结
登录页可以传递品牌信息，提供用户登录路径；
登录页包含产品符号、主要登录路径、快捷登录路径；
登录页设计样式：留白设计、填充品牌色、填充氛围图、利用产品符号或品牌符号。
欢迎扫描关注我的微信公众号。热爱设计，关注用户体验，分享设计思考。
公众号回复以下关键词获取设计资源
* 回复“软件”可以获取全套设计软件（包括win系统和Mac系统）
* 回复"PS"可获取最新版PS cc 2019
* 回复“字体”可获取最全的设计常用字体
* 回复“C4D”可获取从新手到进阶全套C4D视频教程
* 回复“笔刷”可获最全的笔刷资源
网友评论