文档章节

拒绝平庸:优秀WEB登录页面设计

王尘宇
 王尘宇
发布于 2017/09/07 00:01
字数 2298
阅读 6
收藏 0
点赞 0
评论 0
login @Mr-Koki 关于登陆估计大家每天使用的都很频繁了,每次上网都会习惯性登陆下微博,淘宝,邮箱,空间等,在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢?下面就谈谈这道不起眼的门。
  推荐阅读: 《巧夺天工!20个「 联系我们 」的创意页面》 《留住访客!超有趣网站进度条设计》 《站上巨人的肩膀,让我们一起聊聊网页上的微创新》  

从公共平台的角度看

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

从个人博客的角度看

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

各大网站的WEB登陆

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

优雅大方

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

精致的质感表现

iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。 iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。 21

小清新的插图

在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力, 163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。 31 Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。 41 天猫和淘宝的话做为中国最大的在线交易平台的话,也是非常注重登陆页面的设计,而且还在登陆窗口下面设置了一个 ”登录页面”改进建议 按钮,可以看出淘宝是非常注重用户体验设计的.天猫的话就更多注重品牌化.   taobao tianmao  

人文关怀的品牌传达

设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。 QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔.杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。 52 新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。不过如今新浪开始走营销路线,就连登陆页面也不忘加个广告位.让你每一次进入都感觉像是登陆了最大的营销平台. sina

越来越大的登录框

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

简约而不简单

WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单.堪称典范。 81 随着互联网的高速发展,移动互联网的到来,WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功,但却能为产品加分,为产品注入设计DNA,创造独特的风格和视觉感受, 好了,今天就先侃到这,作为用户使用的入口,希望这篇小文可以让大家对登录页面重视起来,设计出更多精彩的登录页面。

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

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

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
拒绝平庸——浅谈Web登录页面设计

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

红薯 ⋅ 2012/01/17 ⋅ 12

不要被超我拖垮,也不要被本我掌控

自我,一种夹在本我和超我的缝隙中苟延残喘的悲剧 优秀、大佬、平庸、牛人、坚定、低端、初级、挣扎、懊悔........ 这些词没有排列顺序,但是你也分得出,哪些是你愿意看到的,哪些是你拼命想...

日生三金 ⋅ 2017/12/04 ⋅ 0

小程序授权登录的体验优化

大多数小程序的登录,都是这样设计的: WechatIMG35.jpeg 进来就提示你需要授权,有部分人可能就会点“拒绝”(拒绝的比例可能超出我们的预估) 然后在后续操作的时候,就进行不下去了。而且...

charliesong ⋅ 2017/06/10 ⋅ 0

精彩网页设计示例收藏

开发网站时常常苦于没有思路,这时我总会大量地浏览很多经典网站以激发灵感。尤其向大家推荐博客园的梦想天空(山边小溪)博客,我下面收集的很多资料就来自这里。另外,最近开源中国的新浪微...

小微 ⋅ 2012/04/06 ⋅ 0

排版六原则

上个月,我贴了《图形化简历》。 几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。 我看了新书的样章,觉得很不错...

阮一峰 ⋅ 2010/10/16 ⋅ 0

你为什么得不到梦想中的开发工作

你可能对现在的工作不是很满意或者谈不上喜欢与不喜欢, 不然你也不会来看这篇文章。 很多开发者都梦想在一个这样的地方工作:工程师文化、极客、自由、对外宣称自己和Airbnb等硅谷公司一样。...

刘腾飞 ⋅ 2017/12/14 ⋅ 0

spring安全框架Security(一)

现在很多企业和开发团队都使用了SSH2(Struts 2 +Spring 2.5 +Hibernate)框架来进行开发, 我们或许已经习惯了强大的Spring Framework 全局配置管理,不可否认,Sping是一个很优秀的开源框架...

尚浩宇 ⋅ 2015/06/24 ⋅ 0

解读2016天猫《双11VR邀请函》H5 背后的实现原理

由于传播太广,该 H5 已经被微信禁止访问了,还没有看过的请复制链接在其他浏览器(如 QQ、Safari、Chrome)中体验: http://tmall1111.im20.com.cn/index.html 呵呵,淘宝最近几个重大「节日...

前端小虾 ⋅ 2016/10/25 ⋅ 0

《黑客与画家》读书笔记

全文总结 相比受欢迎,书呆子更看重聪明,所以不受人欢迎 大学和实验室强迫黑客成为科学家,企业强迫黑客成为工程师,而真正的黑客就像画家。 不要把别人灌输的观点当成自己的观点,守口如瓶...

selfless ⋅ 2016/07/06 ⋅ 0

JAVASCRIPT 新手提问,JS连ORACLE接数据库问题

下面的代码,编写成功,然后直接点击打开网页,提示连接成功(已经正确配置ODBC数据源) 但是如果我用apache配置做一个web服务器,提供其它用户来访问通过地址http://ip:port来调用该页面 访...

RUGBEN ⋅ 2013/10/22 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 57分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部