• 拒绝平庸——浅谈Web登录页面设计
    时间:2012-01-19   作者:佚名   出处:http://cdc.tencent.c

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”。

    现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录 界面也是一个发挥情感化设计、提升用户体验、拉近与用户之间距离的兵家必争之地,本文不谈趋势,不讲交互大道理,不涉及技术,就侃侃用户登录页面的一些设 计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

    优雅大方

    如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更 复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验,安东尼?德?圣-埃克苏佩里曾说过,“完美就是多 一点则太多,少一点则太少。” Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。



    精致的质感表现

    iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔?瑞茨拉夫回忆说:“乔 布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即 冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求,细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着 鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。

    iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。



    小清新的插图

    在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表 现技法。插画艺术与网页设计的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速 的抓住用户的眼球,让登录界面的更加具有亲和力。

    163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。



    Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登录页面记忆深刻。



    人文关怀的品牌传达

    设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。

    QQ邮箱登录页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔.杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清 晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。



    新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。

    越来越大的登录框

    越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且 一反常态的可以看到自己的密码,第一次在Web登录框里见到这种设计,非常贴心。正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个 该公司最成功的商业产品。



    简约而不简单

    Web设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静 的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单 调乏味,WordPress后台登录页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单,堪称典范。



    随着互联网的高速发展,移动互联网的到来,Web设计越来越呈现多元化。尽管一个好的设计并不代表产品就一定会成功,但却能为产品加分,为产品注入设计DNA,创造独特的风格和视觉感受。

    最后,希望这篇文章可以让大家对登录页面重视起来,设计出更多精彩的登录页面。

    网友留言/评论

    我要留言/评论

    相关文章

    给设计师和开发者提供的 50 个web开发免费在线工具:设计和维护一个网站并不是一件很容易的事情,他需要花费很多的时间,这就是设计师和开发人员为什么经常去搜寻各种工具来帮助他们提高工作效率。其中网络上有很多相关工具,但是并不是所有的工具都是那么好用。所以今天我们总结了一个工具列表,这将会为设计师和开发工程师非常有用。如果您还有更好的工具,请提出建议,我们也将此呈现给广大设计师们。
    2012年开发者该做的11件事:2011年即将结束,2012正在靠近。你是否在专业领域给自己设定2012的目标?不管你的答案如何,我相信下面列出的11条建议里面总有一两条适合你 :)
    【iShout】Metro UI 的简洁是另一种复杂:Metro UI 推出来的时候,对比其他系统的图标海洋,确实让人眼前一亮,活动格窗取代图标,内容取代形式,微软的宣言是让智能手机用户有更高的效率得处理事务,而不是专注于智能手机本身。但果真如此吗?在我看来,Metro UI 设计得的最初目的是简洁,最后产生的结果却不一定是简洁。
    网络开发新项目阶段总结:摘取人人网上某位高人的针对新项目做的总结,全文如下:
    在windows查看端口占用情况方法介绍:通常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,这时大家可能会到网站找个软件什么的,或则使用防火墙来查看使用的端口;其实没有这个必要,在windows中有个dos命令可以查看当前端口使用情况,下面就介绍一种非常简单的方法,希望对大家有用 。
    短网址算法PHP实例详细介绍:自从twitter推出短网址(shorturl),继之国内各大微博跟风,google公开goo.gl使用API,短网址之风愈演愈烈.不得不说这是一个新兴又一大热门web2.0服务.现整理一下,包括完整短网址网站,短网址算法原理,算法举例,以及优劣比较,同时还介绍几个phper个人实现的.
    MyEclipse快捷键使用详细介绍:Eclipse是一款非常受欢迎的java开发工具,使国内的用户越来越多,熟悉快捷键将会使你的编程工作得心应手,请看下面的分类详细介绍。
    免费的Android UI库及组件推荐:短短数年时间Android平台就已经形成了一个庞大而活跃的开发者社区。许多社区开发的项目业已进入成熟阶段,甚至可以用于商业的软件生产中,且不用担心质量问题。
    网站运营数据分析的指标和算法介绍:网站运营过程中针对网站的数据分析,已经成了每个网站策划和网站运营人员,每天的必备功课,通过这些数据指标可以帮助我们准确的抓住用户动向和网站的实际状况。其实根据网站类型的不同则分析所采用指标项也各有不同,可以有许多不同的指标来衡量。但是如何衡量网站运营的数据指标,哪些是网站运营的关键指标,是每个新人感到困惑。其实通常来说网站分析指标有内容指标和商业指标,内容指标指的是衡量访问者的活动的指标,商业指标是指衡量访问者活动转化为商业利润的指标。为了获得这些数据,我们可以使用51啦,GOOGLE分析工具来得到部分信息,但是为了更加精准的获得某些网站运营时的关键数据,则在网站策划和网站规划阶段时,需要充分将这部分内容考虑进去,对网站做些指标参数的设定,这样就可以降低网站的重复开发工作。
    20条编程经验:作者乔纳森·丹尼可(Jonathan Danylko)是一位自由职业的web架构师和程序员,编程经验已超过20年,涉足领域有电子商务、生物技术、房地产、医疗、保险和公用事业。正如乔纳森在文中所言,本文适合刚毕业的大学生和刚入门的程序员。如果你已是高级开发人员,或许你能在本文中看到自己的身影。