@Mr-Koki 关于登陆估计大家每天使用的都很频繁了,每次上网都会习惯性登陆下微博,淘宝,邮箱,空间等,在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢?下面就谈谈这道不起眼的门。

推荐阅读: 《巧夺天工!20个「 联系我们 」的创意页面》 《留住访客!超有趣网站进度条设计》 《站上巨人的肩膀,让我们一起聊聊网页上的微创新》

从公共平台的角度看

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

从个人博客的角度看

个人登陆页面一般只有自己会用到,所以别人基本是看不到的,但也不排除像我一样无聊什么都好奇的人存在,什么都想看看,什么都想改改的。那么个人登陆页面的设计就完全是抒发个人情感,体现自身个性的一个地方,你完全不需要在乎它的交互是否友好等问题。你的地盘你做主。

各大网站的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,创造独特的风格和视觉感受, 好了,今天就先侃到这,作为用户使用的入口,希望这篇小文可以让大家对登录页面重视起来,设计出更多精彩的登录页面。

对于个人来说我也不忘贴出自己的登陆页面展示下,抒发下个人情感。

至于表达的是什么就大家自己体会吧,一幅美丽的蒲公英,在黑夜的月光下随风飘荡.看似自由自在,但却身不由己.每一次登陆博客都能提醒着我. 原文地址: Koki  Blog

转载于:https://my.oschina.net/wangchenyu/blog/1530714

拒绝平庸:优秀WEB登录页面设计相关推荐

  1. 拒绝平庸--浅谈WEB登录页面设计

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

  2. 拒绝平庸——浅谈WEB登录页面设计

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

  3. web登录界面设计_出色的Web界面设计的7条规则

    web登录界面设计 When you work on a website or on the design of web pages, remember that their success is n ...

  4. Java学习day3——Javaweb登录页面设计(1)(含JSP代码)

    写在前面 本文主要的内容是完成网页登录页面设计,以及判断用户名密码是否正确,如果正确,进入下一页面,并输出sessionID,若错误,则在登录页面给出用户名或密码错误提示,并在登录页面显示访问次数. ...

  5. 测试篇(三):测试用例的万能公式、对水杯和登录页面设计测试用例、测试用例的设计方法

    目录 一.测试用例的万能公式 二.对登录页面设计测试用例 三.测试用例的设计方法 3.1 基于需求的设计方法 3.2 等价类 3.3 边界值 3.4 判定表 3.5 正交排列 3.6 场景设计法 3. ...

  6. HTML登录页面设计

    HTML登录页面设计 编写用户登录页面,效果如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  7. Python 程序设计-系统登录页面设计

    Python 程序设计-系统登录页面设计 目录 Python 程序设计-系统登录页面设计 1.需求分析 2.总体设计 3.详细设计 4.程序运行结果测试与分析 5.完整源代码 1.需求分析 系统要有管 ...

  8. 页面学习——鸿蒙登录页面设计

    页面学习--鸿蒙登录页面设计 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <Direction ...

  9. Web前端页面设计流程及注意事项,谨记!

    每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...

最新文章

  1. Script:挖掘AWR实现查询SCN历史增长走势
  2. 一文看懂CV中的注意力机制
  3. Linux(64位)下OpenBabel 2.4.1、python2.7和Ipython实战(一)
  4. 如何检查jQuery中是否已选中复选框?
  5. Tensorflow 2.0的这些新设计,你适应好了吗?
  6. Chapter 5 Blood Type——11
  7. C语言学习之输出10个整数中的最大值及其下标、最小值及其下标
  8. DDD(领域驱动设计)
  9. 【网络安全工程师面试】—SSRF服务端请求伪造漏洞及利用方法
  10. 这个世界是怎么了?做商业软件的怎么越来越流氓了?
  11. mysql忽略大小写 chmod_Ubuntu18.04下Mysql8.0.15关闭大小写敏感
  12. 中文依存句法结构分析
  13. Linux iptables常用命令
  14. 2022年30本新年书单(要么旅行,要么读书,身体和灵魂总有一个在路上)
  15. ORA-01017: invalid username/password; logon denied ORA-02063: 紧接着line(源于DBLINKN~~~)
  16. 天津少儿编程培训,日本小学生正在把你甩在身后 ​
  17. Django实现QQ登录
  18. GitChat·DevOps | 如何结合 Scrum 和 Kanban
  19. TCP/IP详解:卷1
  20. android 手机桌面,安卓手机桌面介绍:教你认识安卓手机桌面

热门文章

  1. cube ui tabbar 组件结构布局理解
  2. 洛谷 P1136 迎接仪式
  3. viewport的深入理解
  4. Fastjson 1.2.68版本Autotype绕过技巧
  5. 这次建博会,我们读到了凯迪仕的哪些信息?
  6. Android利用GridView加载九宫格菜单
  7. 穷人与富人的经典区别,穷人们要收藏啊!
  8. html5 苹果 代码,iOS 8 HTML5性能测试:苹果有多爱HTML5?
  9. 【Matlab】常用函数
  10. 【瑞萨MCU】开发环境搭建之 e2 studio