表单交互设计之

《表单交互设计之》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、表单交互设计之——校验思考2012-01-0920:46推荐:P>浏览:1,564views我要评论字号:大中小摘要：你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空;或者你还碰到过很多很多校验当中出现的问…你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一

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

3、不干扰表单的填写项。向一人付为

4、216.OO5E>JMJiS■还W19784.00元,更付宝铢戶（EmaflR手机号码）等额设置X

5、O对所有收粒人.设量相同的付歉金訓•Iiooo

6、元•定金掐）◎免费短（1诅知向多人口输入手机号吗M上从取耕入手机号厨Xalipay.com付款页面•Name:•CompanyName:86•・Numberalibaba.com注册b）复杂提示以缩略信息或icon来显示，通过点击和hover进行查看。出现情况:提示信息内容较多，需要用户仔细阅读，并且无法简单记忆,直接全部显示会影响整个表

7、单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层,蒙板z或者跳转新页面等情况。（1）n写秦人值那,忆禺产曲禅加虫吏机手働撕拎査乞证侍上的桂筈和证存号耶写・确侧1町全一敌・罡⑵田干民阮网支无法P别繋件字・所以左填剔旅人倩曹请与翔瞅累代哩商先行呗•聲＜3）订于桂名轴拄俗汉R可配扭出民氏电11做的出曼花©谒与国宝机里代迴商先行咅认。（4）粮也融蚤统豐求・英文牲合樨?证件上B孙事《1写・中目以taobao.com机票登机人填写页[Vj760樽删Ik注蝴I航武防喜卡如洒握机证件己与“時卡场定

8、,:公司系线会目动为您爭计里吟如■醴间•谓译鞘［公司•騙人*・牲名屜证•丰咗屈证件如身份证证件W玛航空谢晦亍—丘］*20/5）创顷澳眈悭輾讽用ctrip.com机票登机人填写页C）限制操作一表单填写前，对某些需要填写或者操作项会有一些disabled的状态z只有当某些条件被激活用户才能进行操作。出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验,就可以将主提交操作项做状态限制。SignUpLoginResetP

9、asswordRetrieveUsemamesosochenUtetviMMEmailConfirm6mailchenchensosoaa@cccnaa@cccnCooArmPMtwocd••••••SpemProtecton?April・1974・Cl!!

10、7wmceNew>)e

11、，这时候可以使用图片,视频等辅助方式来帮助用户快速理解。水电煤缴费拿设胃缴费提醒0我的缴费账号自杳看记录择嫩费项目2填写缄费信息d寸确认4•嫩费成功缴费项目丽—d收费单位1上海浦东威立雅自来水有限公司选择历史繳费账号缴费方式「条形码(5■销根号销桐号缴费提屢(26日二

12、[7短信[7旺旺厂邮件缴费地区I上海二I庄兀I本次缴费成功信息会显示在下次账单上海浦东威立雅自来水有限公司水费样单：大图上传嫩费收据单，领最高100元淘圭忧再券?P我己阅读并同意《支付宝锻费协议》下一步alipay.com水电煤缴费页面2、ING~当

13、您浏览完整体的表单,接下来就是进行填写的步骤。在填写的过程中,我们会碰到很多类型的校验,比如:即时校验的友情类提示,即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是onfocus后的帮助提示、输入中的校验、lostfocus后的校验。出现情况:提示信息内容较多，需要用户仔细阅读，并且无法简单记忆,直接全部显示会影响整个表单填写，因此此类情