我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。

    《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来？是由前Yahoo设计师 Luke Wroblewski ，他的官网是：http://www.lukew.com/

    这本书有以下三个部分：

    1 表单结构

    表单设计原则

    表单的内容及组织方式(标签、输入框、内容组)是表单的核心要素，而不是视觉和交互设计。表单设计的开始工作是“先考虑人”，考虑用户的真正关切，然后“再考虑像素”，考虑如何设计。设计表单可以遵循以下四个策略：

    2 表单元素

    表单不只是表格，它是由标签、输入框、交互动作等元素构成。

    1 )标签

    一般讨论最多是标签该如何对齐，由顶对齐标签、左对齐标签和右对齐标签三种对齐方式，她们都有其存在的必要，具体则依赖于设计的目标。

    顶对齐标签，标签和输入框自上而下的布局，是填写表单的最快捷实现方式，充分利用横向空间的各种组合，但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度

    左对齐标签，标签一致左对齐，和输入框拉开间距，便于用户自上而下看标签，而不用急于填充输入框，比较适合高级设置的陌生或较难理解的数据。

    右对齐标签，标签一致右对齐，标签和输入框横向间距最近，可以尽量减少垂直空间，用户填充速度居三者之中。

    2 )输入框

    输入框出现的目地是让用户可操作的组件，如文本框、单选按钮、下拉菜单等，如何使用各种不同的输入框，要看标签内容的问题，是什么(What)问题，是是否有无(Whether)问题，还是多选单选(How)问题。

    3 )动作

    动作有主动作和次动作，如提交、保存、继续等为主动做，还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的，如“提交和取消”这对组合，在设计上如果这两个按钮大小一致，颜色突出主动作是最佳的动作组合设计，用户完成时间最少。交互动作还有进行中的动作，一般出现于动作需要一定时间处理(如Gmail登录)或者动作的导向情况(如fanli.qq.com导向到其他电子商务网站)。

    3 表单交互

    1)尽量让用户少录入

    复杂的表单填写任务总是让用户烦恼不已，这一点尤其是新用户碰上了新产品上，而输入框中默认值(如邮箱后缀、日期时间等)是往往是最好的导师，尽量让用户较少录入，只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移，可以隐藏，也可以以后再加。

    2)即时验证

    表单往往是多个元素混合组成的，用户在填写表单需要即时告知用户录入信息是否正确、完整，省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整，可以即时告知用户错在哪里并重新录入。

    4 读书小结

     Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”，不知是否翻译有误，感觉此书应该是奉献给“每一位不得不设计表的人”，是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分，表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛，让产品有品质上档次，让用户又能轻松跨域，则是我们日常工作要不断尝试、不断反思、不断优化的。

建议继续学习：

1. Web表单设计之注册表单    (阅读：7619)
2. 高性能web服务器-读书笔记    (阅读：6642)
3. Unix高级环境编程系列笔记    (阅读：4340)
4. 网页表单设计摘要    (阅读：4275)
5. jquery.form.js，JQuery表单插件    (阅读：4141)
6. Web表单设计:表单结构    (阅读：3712)
7. JavaScript中级笔记    (阅读：3321)
8. MySQL 应用小笔记    (阅读：3329)
9. 10个超棒jQuery表单操作代码片段    (阅读：3334)
10. 防止表单重复提交的几种策略    (阅读：3290)