您现在的位置:主页 > 网站制作 > 界面设计 >

网页表单交互设计细节:表单校验设计的思考

来源:建站吧 责任编辑:Jzq8 发表时间:2012-01-09 点击:

你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一大堆信息,之后点击按钮提交时,校验报错的同时,你发现你所填写的所有的信息都被清空;或者你还碰到过很多很多校验当中出现的问题,那么我们现在就开始进行表单校验设计的思考。

那校验有哪些情况呢?

1、 READY

提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前,降低出错的可能性。它出现的形式分为以下几类:

a) 简要提示——有如:icon,icon+文字,文字,暗提示。

出现情况:一般提示信息比较简短,能够让用户一目了然的记住,并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示,通过点击和hover进行查看。

出现情况:提示信息内容较多,需要用户仔细阅读,并且无法简单记忆,直接全部显示会影响整个表单填写,因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层,蒙板,或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前,对某些需要填写或者操作项会有一些disabled的状态,只有当某些条件被激活用户才能进行操作。

出现情况:当填写项与项之间带有关联性,前面的填写项会影响后面填写项的内容或状态;或当填写项较少,填写项均可以即时校验,就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候,还有一种比较特殊但又更简单明了的提示,例如:使用图片说明。

出现情况:当填写表单项的提示说明很难用文字清晰表述,这时候可以使用图片,视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单,接下来就是进行填写的步骤。在填写的过程中,我们会碰到很多类型的校验,比如:即时校验的友情类提示,即时校验的警示提示,关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况:提示信息内容较多,需要用户仔细阅读,并且无法简单记忆,直接全部显示会影响整个表单填写,因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层,蒙板,或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示,而是给到用户一些更合理的建议或者帮助。


Ctrip.com填写登机人页

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

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片

今日头条

更多>>

推荐图文

  • TeamCola信息结构:互联网产品前期设计方法
  • 常用交互实例:axure常用交互实例日历控件
  • 探索图标设计的微观世界:从符号学说起
  • 建立完美的同学录之浅谈同学录的完善包装
  • 百度搜索客户端设计分享:全新的视觉和交互体验
  • 网站设计师在设计网站时应该遵循的原则
  • 网页进度条设计:关于讨论loading加载后的一些心得
  • 网页制作小技巧:揪出网页无效链接
  • 美化网页 制作精美圆角表格
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款