详解网站登录页面设计与分析

卿29

卿29

2016-02-17 00:35

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享详解网站登录页面设计与分析教程,希望对大家能有一点小小的帮助。

前面我分享过《漂亮的网页登陆/注册表单设计》一文,里面有很多优秀的网页登录页和注册页设计,而今天一文主要是和大家分析网站登录页面设计,通过登录页的元素、风格进行分析。

登录页是用户进入网站的入口,就像是我们进家、进公司的门一样。

试想我们处在一个四周都是门的环境,我们会选择推开哪一扇门?这一扇门哪些地方有吸引我们推开的魅力?我们能否准确找到这扇门的把手?

其实这些问题同样适用于登录页面,对于登录页面,是否有足够的魅力让用户在登录过程中不感到烦躁,是否能准确的区分所要填写的信息(如:是填用户名或是电话,快速切换的按钮在哪等),是否能准确找到登录或注册按钮,这些元素的视觉层级与交互关系,直接影响着整个页面的体验。

登录页的元素

详解网站登录页面设计与分析,PS教程,图老师教程网

如上图所示,一般登录页都会包含上面5个重要元素:LOGO、登陆框、广告图、帮助中心、底部导航。

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

登录页的风格

1.体现品牌类

详解网站登录页面设计与分析,PS教程,图老师教程网

详解网站登录页面设计与分析,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

这种类型的登录页面多是由LOGO与登陆框两个元素组成,页面质感比较强,操作性比较强,用户在这样的登录页能快速的完成填写与登录,同时还能对产品的品牌一目了然,整个页面呈现一种比较理性的设计,没有任何的视觉干扰。

如果硬要说是有干扰的话,可能干扰的对象就是设计师们,设计师对高质感的设计都有很敏锐的观察力,页面中的设计细节(如渐变、阴影、高光等)可能会让设计师短时间内停下来观察,随后快速完成注册。

2.有趣味性的设计

详解网站登录页面设计与分析,PS教程,图老师教程网

详解网站登录页面设计与分析,PS教程,图老师教程网

详解网站登录页面设计与分析,PS教程,图老师教程网

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

虽然第一视觉中心不在登录框上,但这些广告图又很好的诠释了这个产品的涵义,加深了用户对此产品的认识,同时,这些广告图趣味性比较强,虽然是广告,但并不会让用户感到反感。

还有一种相似的广告图,广告本身与此产品关系并不大,这些图的内容更多的实在表现一种意境,一种情感,像是回忆、憧憬、幻想、童话等,能让用户进入一种意境中,产生共鸣。

详解网站登录页面设计与分析,PS教程,图老师教程网

详解网站登录页面设计与分析,PS教程,图老师教程网

3.情景类

详解网站登录页面设计与分析,PS教程,图老师教程网

详解网站登录页面设计与分析,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

广告图的寓意

详解网站登录页面设计与分析,PS教程,图老师教程网

综合这些广告图的类型,其实都是在表达四种寓意:品牌宣传、相关广告、情景化设计和节日相关。

登录页广告图的变化,很多时候都见证了产品从宣传产品品牌到宣传产品理念的一个过渡。在第一阶段宣传品牌时,很多时候都以直白的产品特性为宣传点,随着产品的运营,第二阶段会对产品特性加以包装,结合趣味性的设计语言,使产品的特性包含一些寓意,在接下来的阶段中,会融入越来越多的情感化设计,情感化的文字,可以使用户在了解品牌的同时,也加深对产品理念的认识。

展开更多 50%)
分享

猜你喜欢

详解网站登录页面设计与分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详解网站登录页面设计与分析

网站登录页面怎么设计好?用户登录页面设计原则

交互设计 网页设计 网站设计
网站登录页面怎么设计好?用户登录页面设计原则

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

45个网站登录页面设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
45个网站登录页面设计欣赏

详解现代404页面设计趋势分析与案例分解

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详解现代404页面设计趋势分析与案例分解

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网站推广专题页面的案例分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网站推广专题页面的案例分析

出色的网站联系表单页面设计

Web开发
出色的网站联系表单页面设计

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

网页设计中色彩的运用心得技巧

网页设计中色彩的运用心得技巧

随本索源探讨平面设计中的Metro风格解析

随本索源探讨平面设计中的Metro风格解析
下拉加载更多内容 ↓