表单域的设计疑问指南

表单域的设计疑问指南

1. 表单域有必要提供默认值吗？

答案是有必要的提供默认值的！

我们可以通过提供合理的默认值，有效节省用户提填写表单的时间，进而提升表单提交率。在 Web 表单中也可以利用智能默认减少不必要的选择次数或输入，加速表单完成过程。

所以，在表单域中预先为用户填写你认为他们想要的合计输入值是有必要的。

当然有可能会存在疑惑：如果默认值不是用户想要的，误导用户怎么办？

1. 在设计有默认值的表单域时，需要思考默认值是否是大多数用户可以接受的答案，如果不确信可以先去做一下用户调研，了解用户的心声。
2. 就算默认值真的不是用户想要的，至少也为他提供了一个示例来告诉用户答案应该是什么样子的。
3. 但是，并不代表所有的表单域都要给出默认值。只有当你有理由确信绝大部分用户，在绝大多数情况下，不会修改这个取值时才提供默认值——否则，这将会给用户带来额外的工作！

2. 输入框的宽度如何设定

这个问题是很非常常见且最容易被忽视的但实则举重若轻的问题。我自己在早期的时候就犯过，比如：要求输入框长度一致，一个系统内部输入框的长度没有规则等等问题，导致设计和前端都没有规律可找，大大降低了工作效率。

后来参考了Ant Design 4.0 系列文章《整齐划一？不如错落有致》，如下图：错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。

但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

Ant Design 4.0系列文章总结到「表单宽度」的处理方式核心旨在解决两个问题：

1. 暗示填写内容长度；
2. 表单项布局排列效果；

唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。

文章认为我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。下面我们来详细的聊一聊：

1）错落有致优于强制的整齐划一

很多设计师在面对表单设计的时候，都会潜意识地将或要求追求所谓视觉上的整齐划一，强行将表单的宽度定位统一的宽度，然而这却犯了形式主义错误，没有深入思考表单应用规范和用户填写的感受，实际上有秩序的“不一致”也不一定比强制性的“整齐划一”的视觉感差，甚至更好。

每一类型的表单的输入域都会因其录入数据的类型而存在对应的宽度，输入域的宽度应该匹配和暗示其填写的内容；

合理对应的输入宽度不仅能够给用户的输入量带来心理暗示和预判，也提升整个表单数据录入过程中的掌控感和舒适度。

通过下图的对比，我们可以明显的看到，错落有致的排列方式更加舒适，并且有更强的暗示作用。