这篇文章算是笔者交的一份读书笔记，与 CRM 系统打交道了这么久，表单天天见。如果表单有感情的话，我猜它应该都不想再看见我了。也是有缘，老板推荐了一本表单设计的书——《Web Form Design - Filling the blanks》by Luke Wroblewski，得此书如获至宝。该书对表单描述详尽，案例充分，解决了许多笔者多年未解决的问题。接下来进入正题，我们来聊一聊如何打造优质 Web 表单。黑喂狗！
（图示1：淘宝网注册页面）
我们再看淘宝注册页的表单采用了右对齐方式，是考虑到顶部对齐会占用过多的垂直空间，一旦表单项过多，对表单页的操作也会造成不便，所以采用了右对齐方式。
2. 必填和选填
本书里提出一个观点，如果必填字段比较多，把选填项标记出来则足够；如果选填字段比较多，则标记必填字段。
3. 即时反馈
（图示3：腾讯微博注册页面）
当然除了这条，还有密码强度和密码要求的即时校验，旨在节省用户输入时的思考时间，让用户更高效率地填写表单。
表单中的错误提示信息，或者一些不合规的提示信息展示也是表单设计中影响比较大的元素。
上图中的表单项就比较多，可能在小尺寸屏幕中需要滚动页面才能看到完整表单信息，而因为采用了点击「提交」按钮之后交给服务器校验数据，所以在多个表单项出现错误的情况下，则需要统一在表单头部提示出来错误信息，并且最好要有锚点，点击之后能够直接到错误的位置，节省用户寻找的时间。
5. 智能默认
表单设计中可以通过智能默认的方式帮助用户填写一些需要重复填写的表单，这样可以节省大量的时间。例如图中的淘宝/天猫购物车页面，用户在每次购买之后都需要经过收货地址填写环节，如果说将填写过的地址帮助用户保存起来并设置成默认，在后来的每次购买过程，可以直接进入到下一个环节，省去了这一步的时间。
笔者认为 Tab 键跳转也是一个能够提高用户操作表单效率的一个方式，也是设计师在表单设计中必须要考虑到的一个细节，Tab 键的跳转和表单项视觉先后顺序保持一致。
（图示6：支付宝收银台界面，图中敏感数据已经抹去）
上图是支付宝收银台的页面，分别来自于两个不同的电商网站。按照表单设计逻辑，在用户输入账户名按 Tab 键后，光标会自动聚焦到支付密码输入框中，然而左右两个界面却存在完全不一样的逻辑。左边页面在输入账户名之后按 Tab 键会直接跳到「忘记账户名？」这个链接上，而右边则一切正常。
在很多注册表单的最后一项表单项是让用户勾选同意***协议，很多情况下完全是废话。所以这一步与提交按钮可以合并在一起，省去一步操作。
8. 正在进行的动作
（图示8：提交按钮小动画，图片来源于https://dribbble.com/shots/1426764-Submit-Button）
（图示9：对话式表单，图片来源于https://hope6.typeform.com/to/KdCdR7）
总结
作者@奶咖 文章来源@37点2度体验（微信公众号：ali-ccoux）
