浅析登录页的3大设计风格

登录页是用户进入网站的入口，就像是我们进家、进公司的"门"一样。
试想我们处在一个四周都是门的环境，我们会选择推开哪一扇门？这一扇门哪些地方有吸引我们推开的魅力？我们能否准确找到这扇门的把手？
其实这些问题同样适用于登录页面，对于登录页面，是否有足够的魅力让用户在登录过程中不感到烦躁，是否能准确的区分所要填写的信息（如：是填用户名或是电 话，快速切换的按钮在哪等），是否能准确找到登录或注册按钮，这些元素的视觉层级与交互关系，直接影响着整个页面的体验。

延伸阅读：
推荐！登录表单设计的新思路
迅雷CUED：如何优化我们的登录页面

登录页的元素

如上图所示，一般登录页都会包含上面5个重要元素：LOGO、登陆框、广告图、帮助中心、底部导航。
在这五个元素中，Logo与登录框是必不可少的两个重要元素。Logo体现了产品的品牌，登录框是用户进入这个页面最终的意图。Logo与登陆框已经构成了最简单的登录页面。随着用户体验的提升已经情感化的设计，广告图、帮助中心与底部导航也逐步的体现在了登录页面。

登录页的风格

1.体现品牌类

这种类型的登录页面多是由LOGO与登陆框两个元素组成，页面质感比较强，操作性比较强，用户在这样的登录页能快速的完成填写与登录，同时还能对产品的品牌一目了然，整个页面呈现一种比较理性的设计，没有任何的视觉干扰。
如果硬要说是有干扰的话，可能干扰的对象就是设计师们，设计师对高质感的设计都有很敏锐的观察力，页面中的设计细节（如渐变、阴影、高光等）可能会让设计师短时间内停下来观察，随后快速完成注册。

2.有趣味性的设计

当这种风格的登录页面展现在用户眼前时，用户的第一视觉中心往往实在这个图片上，其次才会看登录框。但这些广告图又很好的传达了产品的相关信息，如：品牌（是什么产品）、性质（这个产品是用来做什么的），或者传达一种节日的氛围（春节、国庆等）。

虽然第一视觉中心不在登录框上，但这些广告图又很好的诠释了这个产品的涵义，加深了用户对此产品的认识，同时，这些广告图趣味性比较强，虽然是广告，但并不会让用户感到反感。
还有一种相似的广告图，广告本身与此产品关系并不大，这些图的内容更多的实在表现一种意境，一种情感，像是回忆、憧憬、幻想、童话等，能让用户进入一种意境中，产生共鸣。

3.情景类

这种全背景的登录页，用大背景图来烘托出比较随性的情境，在登录框设计上，感觉比较轻松不拘束。比较适合用在个人空间、博客等产品中。

广告图的寓意

综合这些广告图的类型，其实都是在表达四种寓意：品牌宣传、相关广告、情景化设计和节日相关。
登录页广告图的变化，很多时候都见证了产品从宣传"产品品牌"到宣传"产品理念"的一个过渡。在第一阶段宣传品牌时，很多时候都以直白的产品特性为宣传 点，随着产品的运营，第二阶段会对产品特性加以包装，结合趣味性的设计语言，使产品的特性包含一些寓意，在接下来的阶段中，会融入越来越多的情感化设计， 情感化的文字，可以使用户在了解品牌的同时，也加深对产品理念的认识。

百度MUX原文：mux.baidu.com

 
================微信推荐================
想在手机上、被窝里获取网页设计教程、无线端设计经验分享和各种意想不到的资源"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：