Web页面中的“门”—Web端登录页的设计

标签: 视觉设计 | 发表时间:2013-06-09 16:19 | 作者:guoliteng
出处:http://mux.baidu.com

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

登录页的元素


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


登录页的风格


1.体现品牌类



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

2.有趣味性的设计




当这种风格的登录页面展现在用户眼前时,用户的第一视觉中心往往实在这个图片上,其次才会看登录框。但这些广告图又很好的传达了产品的相关信息,如:品牌(是什么产品)、性质(这个产品是用来做什么的),或者传达一种节日的氛围(春节、国庆等)。
虽然第一视觉中心不在登录框上,但这些广告图又很好的诠释了这个产品的涵义,加深了用户对此产品的认识,同时,这些广告图趣味性比较强,虽然是广告,但并不会让用户感到反感。
还有一种相似的广告图,广告本身与此产品关系并不大,这些图的内容更多的实在表现一种意境,一种情感,像是回忆、憧憬、幻想、童话等,能让用户进入一种意境中,产生共鸣。




3.情景类



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



广告图的寓意

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


转载请注明出自”百度MUX”

相关 [web 页面 web] 推荐:

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.

Web 页面测试点

- - Web前端 - ITeye博客
(1) 页面清单是否完整(是否已经将所需要的页面全部都列出来了). (2) 页面是否显示(在不同分辨率下页面是否存在,在不同浏览器版本中页面是是否显示). (3) 页面在窗口中的显示是否正确、美观(在调整浏览器窗口大小时,屏幕刷新是否正确). (4) 页面特殊效果(如特殊字体效果、动画效果)是否显示.

Web页面中的“门”—Web端登录页的设计

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

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.

Web Service入门

- - 博客 - 伯乐在线
本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿,投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义,定义一:Web Service是自包含的、模块化的应用程序,它可以在Web中被描述、发布、查找以及调用. 定义二:Web Service是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得Web Service能与其他兼任的组件进行操作.

Web Apps来袭

- - HTML5研究小组
如同历史上任何一次互联网基础标准的变化都会在随后几年中带来应用创新的大爆发一样,当HTML5在2011年逐渐被主流厂商所接受之后,围绕Web Apps领域的创新风暴正山雨欲来. 2012年1月12日,老牌传媒集团《金融时报》(Financial Times,以下简称FT)宣布收购为其开发移动Web App的研发公司Assanka ,这样,FT将不再以外包的形式雇佣Assanka为其打造移动Web App,而可以直接让它在内部进行开发.

Google 的 Web Desinger

- - 极客公园-GeekPark
[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计,今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者,毕竟自己严重依赖这个平台,但市面上相关的产品太多了,从专业的开发工具到小白的所见即所得软件数不胜数,还有 Adobe 这个专业玩家.

web页面相关的一些常见可用字符介绍

- 红茶 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1623. 正文开始之前先分享两个与字符相关的东西. 首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片. 然后是一个页面,是我收集的些杂七杂八字符页面,地址如下:http://www.zhangxinxu.com/sp/character.html.