魔鬼在细节中——《web表单设计》

表单肯定是我们页面设计中经常遇到的部分，当遇到单选按钮、复选按钮、下拉菜单、问题组合等等联合在一个页面时，我经常会顾此失彼，同时也感觉没有一个outline之类的东西给我指导。

直到——对，你猜对了——读完这本《web表单设计》，感觉自己对表单设计的技能点终于被点亮了。下面把书中一些要点罗列一下：

0，少即是多的大原则：去掉不必要的问题，甚至可要可不要的问题。

1、大家都知道用户在页面上的视线轨迹是近似z字形眼动，那么将表单放到用户可视的第一位。

2、如果有多个并列的问题，一般使用输入框高度的50%-70%作为问题之间的间隔高度。

3、问题之间都是有联系的，可以进行分块，有逻辑的组织各个问题。

4、表单应该少使用复杂的交互和视觉样式，以免增加用户负担。

5、但是各组问题之间需要区隔，使用很简单的方法（比如虚线、淡背景色）来区分各组。

6、除了表单自身，页面其他位置尽可能不要让用户注意到，也即是说，页面其他地方的信息用户也不应该注意到，那么最好不放内容。

7、整体流程栏上不要加表示步骤的数字，因为在填写表单的过程中，某个步骤可能会被增加（登录、选择支付方式等）

8、只在必要的地方出现表单。表单上每个问题都要多问自己几次：是不是一定得在这儿让用户填写？

9、不要仅仅要颜色来传递功能（如出错时候的提示），各个用户对颜色的理解是会有偏差的。姐姐方法是应同时使用文字。

10、如果要使用tab键作为表单内容间的跳转，要考虑到对于两栏表单的从第一栏底部跳到第二栏顶部时的显示问题。

11、一定要有表单名称，并且符合人们的期望，并简述表单的目的

12、顶部对齐/左对齐/右对齐，各有优劣。顶部，符合眼动效率。右对齐，标签和输入框距离近。左对齐，方便用户快速掌握问卷内容。根据场景和表单目的来选择。

13、如果屏幕空间珍贵，标签内容放到输入框中提示。但这并不适用于问题很多或答案很长的情况，因为写完无法check回答的内容是不是符合问题。

14、输入框的长度要和用户对答案的预期长度基本符合。

15、如果要对“必填项”还是“选填项”进行标注，那只有在这两种问题数量差异悬殊时标注有意义。同时要标注问题少的那个。

16、单独出现“ * ”是没有意义的，因为没有图例说明这是必填还是选填。直接用文字。

17、表单完成时有主动作和次动作之分，一般来说“提交”为主动作。主动作标示要显眼。如果可能，去掉次动作的按钮。

18、主动作按钮和主输入框对齐。

19、提交时应有动作提示表单已在提交（特别是网络不好的时候），避免重复提交。

20、帮助文字在需要时才出现，不遮挡页面其他文字，与当前输入框融为一体。·

21、帮助文字在当前输入时不能消失，否则就失去了帮助文字的意义。

22、如果有多输入框都需要相同的帮助文字，该帮助文字保持显示。

23、如果输入有误，先告知“出错”。在出错的地方用不同的颜色/字号/图形显示错误

24、多采用即时验证，比如支付宝的验证码。最适合错误率高，或有特殊格式要求的表单项，但要在输入完成后验证，不要在输入过程中验证。

25、减少问题是必要的，但是不能增加其他问题的复杂程度。

26、尽可能在所有地方提供默认答案，可以根据用户信息或是普遍用户行为推断，要符合大多数用户的预期。

以上是书中诸多要点的一小部分，强烈建议大家都去读一下这本书，去豆瓣看看。