当前位置:首页 > 经验学习 > 交互设计

表单交互设计之——校验思考

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一大堆信息,之后点击按钮提交时,校验报错的同时,你发现你所填写的所有的信息都被清空;或者你还碰到过很多很多校验当中出现De(的)问题,那么我们现在就开始进行表dan(单)校验设计的思考。
那校验有哪些情况呢?
1、 READY?
提到xiao(校)验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。
此类提示信息能够帮助用户在填写表单前,降低出错的可能性。它出现的形式分为以下几类:
a) 简要提示——有如:icon,icon+文字,文字,暗提示。
出现情况:一般提示信息比较简短,能够让用户一目了然的记住,并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册
b) 复杂提示——以缩略信息或icon来显示,通过点击和hover进行查看。
出现情况:提示信息内容较多,需要用户仔细阅读,并且无法简单记忆,zhi(直)接全部显示会影响整个表单填写,因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层,蒙板,或者跳转新页Mian(面)等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页
c) 限制操作——zai(在)biao(表)单填写前,对某些需要填写或者操作项会有一些disabled的状态,只有当某些tiao(条)件被激活用户才能进行操作。
出现情况:当填xie(写)项与项之间带有关联性,前面的填写项会影响后面填写项的内容或状态;或当填写项较少,填写项均可以即时校验,就可yi(以)将主提交操作项做状态限制。

livestream.com机票登机人填写页
d) 其他提示——填写表dan(单)的时候,还有一种比较特殊但又更简单明了的提示,例如:使用图pian(片)说明。
出现情况:当填写表单项的提示说明很难用文字清晰表述,zhe(这)时候可以使用图片,视频等辅助方式来帮助用户快速理解。
alipay.com水电煤缴费页面
2、 ING~
当您浏览完整体的表单,接下来就是进行填写的步骤。在填写的过程中,我们会碰到很多类型的校验,比如:即时校验的友情类提示,即时校验De(的)警示提示,关联性校验的提示。即时的校验也分为三种zhuang(状)tai(态)一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。
出现情况:提示信息内容较多,xu(需)要用户仔细阅读,并且无法简单记忆,直接全部xian(显)示会影响整个表单填写,因此此类情况需要hover或者点击操zuo(作)进行查看。hover或Zhe(者)点击后有浮层,蒙板,或者跳转新页面等情况
a) 即时校验的友情类提示
即时xiao(校)验的友情类提示不是提交时无法tong(通)过的出错警示,而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机ren(人)页
(当你选择了儿童票时hui(会)提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型,但并不强制。)

Buy360.com的注册页
(当onfocus的时候会出现下方帮助提示类Xin(信)息,当然也有很多网站会做成暗提示。)

163.com的注册页
(当onfocus的时候会出现右边密码的强度,会根据你输入密码的改变而提示你的密码强弱。)
b) 即时校验的警示提示
即时校验的警示提示是属于错误类提示,这类错误会影响表单无法提交。
警示提示类的校验重要级别非常高,因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: