detail matters

#缘起

许多表单都需要校验必须填写的项目是否为空，其中有两种主流的校验方式。其一是在点击了提交按钮以后才进行校验（网易邮箱的注册流程），其次是直接在表单内进行验证，比如如果不填写全部项目表单无法提交并且每个input的下一项被激活后会校验该项是否为空（比如gmail和qq号的注册流程就是如此）。后者会带来一个某些人不太待见的后果——一个用户要是手残一个个项目都点击一次，那么整个表单都会提醒他没有填写..他们认为这相当不美观..

可是单纯的美观有多重要呢？ 对于表单内容是否为空的校验应该如何进行呢？

# 为什么需要提前校验提交内容是否为空？

在用户提交之前提前校验表单填写内容，对于用户能更好的完成整个流程有着至关重要的意义。其一，越长的表单当中，用户就越是容易遗漏某些选项... 具体例子就是apple id的注册流程，表单极长而缺乏未填写项目的提醒..即便是用户自查也相对困难.因此必须需要有一个长期存在的表单为空的提醒状态让用户给填写上。其二，许多表单都与验证码的提交相关联，如果用户提交内容后才校验未提交内容，可能就要重新填写验证码...相信对于某些较为现代的校验码而言..用户都并不那么喜欢再填写一次..其三，表单提交内容是否为空与其他可以进行校验的内容一起，构成了表单校验流程的一步。比如注册时用户名是否被占用、再如输入字符串是否“合法”等等，相似的逻辑统一处理总是比较好一些。

#为什么点击下一个input项目进行检验呢？

其实，要了解这个问题——只需要了解下js能获取到那些输入就可以了（本质上）...之所以采取这种触发机制，是因为这是一种妥协..我们并不能知道用户激活（:active）某个项目后是否填写了内容..因为用户在输入过程中可能会反复进行各种键盘输入修改内容..目前来看，只能当用户离开了这个表单项的时候才能对这个表单已经填写的内容进行校验..当用户激活表单下一个input项恰好就是一种较好的指标（证明用户完成了上一项操作了）。

#美观以外

单独分离出表单为空的状态而不校验，等到表单提交的时候才进行校验给用户的不仅仅是挫败感，更可能对业务上的逻辑造成不利影响。诚然，短的表单那么存在未填写项目的可能性低一点，但是日后表单变长呢？难道那些长的表单也要等到提交后用户才能自己去找回未填写项目吗？或是为长短不同的表单分配不一致的校验体系？另外，表单是否为空应该和其他校验项目一样都在表单内就进行校验和提醒，这样方便设计也方便研发的处理。

至于如果有人手残把每个项目都给点击一次？这会带来多严重的后果呢？对于我而言，因为有人手残会把每个项目都点一次导致表单内到处都是未填写的提醒所以改变设计带来的损失是逻辑上的赘余以及牺牲灵活性。对于表单的设计而言，如何指引用户高效完成减少错误填写以及漏填才是最重要的，相比之下手残者的页面不美观这种较为微小的缺陷相形之下并不那么重要。设计当中有许多需要重视的要点，但是并非每一个细节和体验要点都那么重要。在设计决策当中必然有许多冲突的原则以及不同的重要性需要考虑，甚至是不同的场景和用户需求需要权衡。窃以为，能精确的针对当前场景并且根据充足的知识全面考虑并且较好取舍交互的重点是设计师的专业性所在。

#设计沟通碎碎念

不少产品经理都自认为看中用户体验，有的甚至为此学ps以及axure...遗憾的是，在没有系统学习以及一定工作经验的前提下，许多人对于设计的判断能力很有限。比如如果他们希望页面中一个要素变得重要，他们就只会粗暴的把它变得很大，放上鲜亮的颜色等粗暴的处理..靠谱的设计师通常都需要平衡各种要素和细节权衡出一个较为适宜当前场景的设计。换言之，专业人士拿出的是一套解决方案外行人顶多只能抓住部分重点。所以我个人更希望产品经理更加清晰的阐释他们到底要什么？他们希望的页面重点是什么？以及认识到一个遗憾的事实——某些页面的功能很多，无法因为你一个新功能别的什么都不要了.....

作为设计师，我希望产品经理对设计细节有想法的时候能提供以下内容：

——假如你能清晰说出自己的需求和重点，那么很好

——假如你对具体的设计风格有意见，最好给出一些范例而不要简单的说高大上

——假如你要看竞品，拜托国内外的都看一下...不要只给出一个范例