java web 登录框
我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序。
在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些人应该跟 IE6 一样,随着历史渐渐被尘封)。但,前端绝不是你所看到的那样。举个例子,登录页面几乎是每一个系统不可或缺的模块,很多娴熟的人可以在一刻钟之内写好一个登录页面,两个 input,一个提交 button,万事 OK。
Username: <input type="text" /><br />
Password: <input type="password" /><br />
<input type="sbumit" />
当然,作为一个完成登录验证的页面,这几个元素完全可以胜任,但我只能说你完成了一个可以用的页面,这种页面完全没有用户体验可言,完全不符合一个具有的严谨的思维的程序员的作风!
本文地址:http://www.cnblogs.com/hustskyking/p/user-exprience-in-login-box.html
一、一切以良好用户体验为基础
1. 视觉效果
界面的设计就不用多说了,一般情况这个属于美工的活儿,这里要谈的是几个最基础的点。
第一,你的页面兼容性如何?各个元素的长宽、行高等在不同浏览器上是否表现一致,如果这个都没有保证,那一定是不合格的。
第二,移动终端上的体验问题,如今很多页面 PC 和移动终端都用的一套结构,也就是我们所说的响应式布局,本博客就使用了响应式布局,缩小窗口可以看到效果,响应式布局是为了让不同的移动终端也能得到同样的优质体验,可是很多开发者却忽略了横屏时的效果。下面是常见的几个移动终端的像素比例:
Mobile | px rate |
---|---|
Iphone5 | 320*568 |
Iphone4 | 320*480 |
Galaxy S 3/4 | 360*640 |
Lumia 920 | 384*640 |
iPad | 768*1024 |
照顾用户的响应式布局除了要考虑这些屏幕的横屏,还得把竖屏考虑进去。我简单的做了一个登陆页面:
正确的账号是:barret,密码是:123,你可以用错误的信息先去测试下~
可以戳这个DEMO:http://qianduannotes.duapp.com/demo/login/login.html
2. 交互
前面那种方式,点击提交按钮,送到后台去验证,验证没有通过则回到登录页面,这也算是一种交互,不过这种交互的体验是特别不好的,每次都得重新刷新页面,应该利用 ajax 异步去验证表单。为了省去用户的聚焦点击,可以按照下面的思路来做:
- 用户名为空,或者格式不对 -》 提示错误,清空密码框,聚焦到用户名框,并全选用户名
- 用户名不存在 -》同上
- 密码错误 -》 提示错误,清空密码框,聚焦密码框
- 聚焦到密码框,全选密码
告诉用户哪个地方出了问题,并提前预知用户遇到这些问题之后会做哪些事情,我们能够用程序解决的事情,绝不麻烦用户亲自动手操作。当提示用户名错误的时候,用户肯定会回到输入框重新输入,这个时候我们已经聚焦到用户框,并全选了之前的输入,方面用户进行删除操作。类似这样的交互,我们应该提前做预判断。
3. 状态提示
什么是状态提示?有时候因为网络原因,点击提交 button 之后,ajax 传输半天没有响应,用户等了半天页面一点提示都没有,这个肯定会让用户焦急的。回头看看 Gmail,一个把 ajax 发挥到极致的 web应用,在用户体验上做的也是相当给力的,登录邮箱的时候一个 loading 动画,旁边还放了一个加载基本HTML(供慢速网络使用),每一个操作都有提示,提示中还有一个撤销操作的按钮,数据进行加载的时候,如果加载时间过长,期间会进行多次不同的提示,并在最后给出一个确切的结果,对于一个登录框而言,需要做到这些:
- 一个明确的用于状态提示的 box
- 等待 3s,结果没有出来,提示用户继续等待
- 等待 6s,结果没有出来,提示用户网络不畅通
- 设置 10s 为超时,并告知用户提交表单失败
这些东西的实现并没有太多的技术难度,但是可以给慢速网络下的用户带来很好的体验和安全感。
4. 安全传输
用户最担心的是账号密码被截获,或者因为密码一处多用,不希望别人看到密码的明文,既然用户担心,我们就应该想办法来处理。
把密码和时间戳叠加,然后加密,传到后台的是加密的结果以及这个时间戳,如下:
// 前端
t = new Date();
s = encode(pwd + t);
post(s, t) // 后台
decode(s) === pwd + t
这样就可以保证密码的隐蔽性,如果 hacker 不知道 decode 函数,即便是拿到了 s 和 t,也是徒劳。关于安全传输,之前也写过相关的文章,OAuth认证原理及HTTP下的密码安全传输。如果要做到在用户输入的时候就绝对安全,那就必须使用类似 支付宝安全插件 这样的东西了。他的原理就是在页面中嵌入一个控件,这个控件与页面之间是相互屏蔽的,在控件内部输入也只有控件拿得到输入信息。
5. 数据走缓存
表单提交首选应该是 post,但是也不排除会用 get 方式提交,那么这个时候就应该考虑数据缓存了,如果请求的 url 相同,程序就会直接从浏览器的缓存中拿数据,并给出状态是 status: 200 OK(from cache)
,为了避免这些常识性的问题,记得在请求的参数中加点东西。
_t = new Date*1
_n = Math.random
为了保证参数的绝对唯一性,甚至可以把 时间戳 和随机数叠加起来用
_s = (new Date*1 + Math.random*1E5)/1E5
6. 渐进增强
渐进增强这个词一般是,不支持 javascript 或者对 javascript 支持度不太好的浏览器上利用其它方式实现,或者告诉用户什么原因不能用,就是一种蜕化处理。目前不支持 javascript 的浏览器应该是绝迹了,当然也不是绝对,kindle 内置的浏览器对 javascript 的支持度就不高,或者根本就不支持。还有一种情况是用户禁用了 javascript,这个比例很小,开发者会这么干,一般的用户不会乱改浏览器设置。但是我们的程序,尤其是关键的部位(如搜索,登录,注册等)必须要考虑这一少部分群体。一般采用的方式是:
1)使用 noscript 标签,这个是最常用,也是最实用的。
2)hack 方式,document.write("<" + "!--")
document.write("<" + "!--");
// code...
// 如果浏览器不支持 javascript,将显示这中间的内容
// code...
document.write("--" + ">");
这是一种特别巧妙的处理手段,也是值得推荐的。
7. 浏览器后退按钮
这个在注册或者登陆的时候是一个普遍的问题,登陆之后,跳转到另外一个页面,我的鼠标有两个侧键,是用于前进和后退的,有时候会误点侧键,这个时候页面又会回到之前的登录页面,但事实是用户已经登录了,所有页面的状态都应该是已登录的,不管什么情况下都不应该让用户在看到这个页面。用户的点击操作会引发上面的问题,而程序 history.go(-1) & history.back()
也会有一样的bug。
这样的问题处理方案比较简单,ajax 拿到 success 的状态码时立刻做跳转,但是这里不能用 window.location.href
,这样浏览器还是会记录这个登录历史,应该使用 window.location.replace
,替换当前历史记录。
8. 记住密码
用户最烦的就是每次登录页面都要输入长长的账号密码,如果没有勾选“记住密码”,则用户的登录状态保存在回话的 session 中,关闭页面或者浏览器的时候,回话结束,session 被删除,这样当用户下次登录的时候又需要重新输入密码。表单页面的“记住密码”复选框默认状态应该是已选择,用户的潜意识行为都是要少操作的。
当用户提交信息成功之后,直接在 cookie 中保存账号密码?这样的做法显然是不合理的,密码怎么能够明文保存呢,有人会想到加密处理密码然后再保存,或者使用服务器来设置 cookie,这些做法都是可以的,不过最好的方式是,当用户成功提交信息时,服务器给前端提供一个 token,这个 token 是用于自动登录的,我们只需要保存 token 就行了,这样就很好的避免了 cookie 中存放用户隐私信息了。
还有一个要注意的是,当用户取消了“记住密码”的复选框时,应该立即清除相关 cookie。
二、其他相关的几个点
1. 用户忘记密码
如果用户很长时间没有来你的网站,他可能会忘记自己设置的密码,一些奇葩的用户甚至会忘记自己的用户名,但是用户永远是没有错的,出错的只有我们的程序和写程序的人。对于忘记密码的人,可以在填写密码的旁边加上一个链接 “忘记密码?”,让用户利用邮箱或者绑定的手机来找到密码,对于忘记密码以及用户名的人,内伤中... @undefined 13# 14# 正解
2. 脚本注入
表单信息应该做正则匹配,或者信息的过滤,防止脚本注入,这个主要是后台要考虑的问题,就不多说了。
3. 多次提交
我们发微博的时候经常会遇到的问题,因为网络原因,会多次点击发布按钮,这个问题有多种处理方案:
- 发布之前先从服务器拿 token,该 token 只有一次有效
- 后端判断一定时间内用户发布的多条信息,相同的信息去重
- ...
三、容易出错的几个知识点
1. setRequestHeader
利用 ajax 来 post 信息,有的人可能遇到过,后台拿不到数据。原因是没有重写 请求头的 Content-Type,
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send($.param({
"user":$("#user").val(),
"pwd":$("#pwd").val()
}));
一般浏览器不支持 GET 方式时 xhr.send 中添加参数,但是 POST 是可以,也是必须的,如果没有设置 Content-Type 的头部,数据送到后端便没办法解析成 key-value 的模式,后台(PHP)通过 $_POST 也拿不到数据。
2. checkbox
这里也是一个体验问题,一些人把 checkbox 和他相关的文字分开写,结果没有使用 label 来指向,如:
<input type="checkbox" checked="checked" />记住密码
很显然,我们点击后面的文字是不会让 input 改变状态的,有些人会这么处理:
<label><input type="checkbox" checked="checked" />记住密码</label>
这样处理之后,点击文字当然可以选中 input,但是这种处理方式是不合理的,label 本来就是标记 input 框用的,他的内容应该是文字,不应该包含 input 这个框,所以合理的做法应该是这样:
<input type="checkbox" checked="checked" id="rem" />
<label for="rem">记住密码</label>
四、小结
上面说了一大堆,很多问题都是站在用户的角度去思考的,我们是程序员,但是我们也是用户,我们会吐槽,但是我们也会被吐槽。
把用户体验做到极致,这个十分重要,不要放过任何一个细节!
java web 登录框的更多相关文章
- java web登录界面 源代码
大概流程: 在java web项目中 导入sqljdbc4的包 在java Resources中完成java代码 在webContent 下建立一个存放自己写jsp的文件夹 将sqljdbc4和jst ...
- 【转】 我的java web登录RSA加密
[转] 我的java web登录RSA加密 之前一直没关注过web应用登录密码加密的问题,这两天用appscan扫描应用,最严重的问题就是这个了,提示我明文发送密码.这个的确很不安全,以前也大概想过, ...
- Java Web登录界面
非常激动的开通了我的第一个博客,在这里希望大家能多多指点,相互学习. 一个简单的登录界面 首先我们先把这个登录分为三块: 一.数据库 数据库我用的是MYSQL: 二.前端 三.后台 1. 后台代码的 ...
- java web 登录后更新JSESSIONID
https://huangqiqing123.iteye.com/blog/2031455 登录前的请求一般都是http的,http是不安全的,假设用户登录前的JSESSIONID被人取得,如果登录后 ...
- 【转载】拒绝平庸——浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...
- 拒绝平庸——浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...
- java web: eclipse & maven & jetty & struts2 & mysql = 简单登录页面
第一次接触java web开发,花费了一天半的时间,写了个简单的登录页面,以此文为记. 开发工具 Eclipse Luna Release (4.4.0) 已集成maven,maven目前的体会就是管 ...
- Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互
框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java model文件夹下的 Global ...
- java web SSO单点登录
第一篇: Web应用系统的演化总是从简单到复杂,从单功能到多功能模块再到多子系统方向发展. .当前的大中型Web互联网应用基本都是多系统组成的应用群,由多个web系统协同为用户提供服务. 多系统应用群 ...
随机推荐
- Chrome扩展之css used 获取网页样式
地址栏输入: chrome://extensions/ 然后获取更多扩展程序,得到css used 复制html节点 最后点击 "css used" 把样式全部复制下来即可 (记住 ...
- python之sqlalchemy基本
一.SQLAlchemy 1.sqlalchemy是一个ORM框架,它本身无法操作数据库,需要依赖pymysql.MySQLdb,mssql等第三方插件 2.安装: pip install SQLAl ...
- App开发架构指南(谷歌官方文档译文)
这篇文章面向的是已经掌握app开发基本知识,想知道如何开发健壮app的读者. 注:本指南假设读者对 Android Framework 已经很熟悉.如果你还是app开发的新手,请查看 Getting ...
- 算法笔记_065:分治法求逆序对(Java)
目录 1 问题描述 2 解决方案 2.1 蛮力法 2.2 分治法(归并排序) 1 问题描述 给定一个随机数数组,求取这个数组中的逆序对总个数.要求时间效率尽可能高. 那么,何为逆序对? 引用自百度 ...
- GUID转换成16位字符串或19位唯一字符串
整理几个经常使用GUID转换成16位字符串或19位唯一字符串方法: /// <summary> /// 依据GUID获取16位的唯一字符串 /// Author : 付义方 /// < ...
- Odoo,OpenERP widget标签
Odoo,OpenERP widget标签 widget="statusbar" 头部状态条标签 widget="email" 电子邮件地址标签 widget ...
- wps标准格式
- Docker运行报Cannot connect to the Docker daemon错误
核心问题所在:权限不足 操作docker命令提示:Cannot connect to the Docker daemon 请切换管理员权限,root权限,root安装的一般的用户访问会存在此问题.
- java基础讲解08-----类和对象
1.什么是面向对象? 面向对象设计的实质 就是对现实世界的对象进行建模操作. 现实的生活中,随处可见的一种事物就是对象,对象是事物存在的实体,通常我们将会对对象划分为两个部分,静态部分和动态部分.比如 ...
- linux 常用的命令(转)
常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir ...