表单设计总结

      表单是比较常见的信息录入工具。表单的基本三要素：标签（lable）、输入框（input）、提示语（placeholder）。看似简单的表单设计，其实包含了很多的道道。（无知限制了我的想象，看了前辈的总结，才发现表单设计的艺术所在！当你不思考，一味地模范，抄袭，你会觉得ui设计很简单；但当你懂得越多思考的越多，曾经所谓的“简单”就不在简单！有一个公众号“王M争”写了很多设计总结，还有一本英译的书《web表单设计++点石成金的艺术》，虽然年头有点早，但内容真心棒！）。

      根据label标签的位置将表单设计分为：顶对齐标签、左对齐标签、右对齐标签、行内标签。设计没有对错，而任何设计问题正确的解决方案都取决于具体目标、制约因素、特定情景。

顶对齐标签

      在标签对齐方式中，填写顶对齐标签表单所花的时间最少。因为该对齐方式为表单填写提供了清晰的完成路径，人们在填写时的视觉浏览线只需向下移动。这个特点可以被用在希望用户快速填完表单，快速完成转换率的情境中，比如支付表单页。

      不管对于标签、还是输入框而言，顶对齐标签提供了大量的横向空间，不容易出现字段过程换行导致整个页面布局混乱或者易读性降低。

      比如我做过的一个很长的且文字没办法在精简的标签“社会信用代码证/组织机构证”。再比如我们需要在输入框中输入地址，地址也是一个很长的字段。这两种情况如果在左对齐或者右对齐标签中就可能无法展示完整的信息。

      大量的横向空间甚至可用于组合相关输入框，这是顶对齐标签另一优点。（现在这种排版估计不常见）左对齐跟右对齐由于横向空间减小，对这种布局灵活性不足。

      顶对齐标签的缺点是会占用额外的垂直空间。顶对齐标签的布局设计上还要注意采用合适的垂直间距，就是同一组的标签和输入框要紧密，与下一组的间距最好设计在输入框50%-75%的高度（这个数值来自上面说的那本书，我通常输入框高度会设置30px,间距20px，这样算也将近70%。）

右对齐标签

      右对齐标签是比较常见的一种标签样式，至少我自己在做后台界面时都采用这种。（任何设计样式没有对错，选择哪种关键取决于场景和具体目标，比如手机端的界面有限，这种表单排版就不适用）

      右对齐标签同样具有标签跟输入框相邻，也能快速填完。但左侧不对齐的缘故，浏览的速率低于顶对齐。毕竟我们的阅读习惯是从左往右。也就是说如果既要减少垂直空间，有要保证较快的完成表达，右对齐是不错的选择。

      如果标签的文字过多，出现换行，表单的易读性将降低，这种情况还是比较常见的。还有就是上面提及的，由于左侧标签占用了大量空间，输入框的内容可能会展示不完整，用户无法确认自己输入的信息，会造成整个操作流程中断。

左对齐标签

      当人们不熟悉表单要收集的数据，单纯的浏览表单的标签，即单纯上上下下阅读标签左栏，不会被输入框打扰。

      标签跟输入框的距离较远，完成表单的速率最慢。如果希望人们放慢速度，仔细考虑每一个输入框，那左对齐标签是一个好办法。

行内标签

      当屏幕空间有限，将标签跟输入框组合成单一的元素，这种就是行内标签，这种布局为移动端设计而生。

      此样式在用户输入内容时，标签就消失，用户可能会忘记需要填写的到底是什么东东。于是就有在行内标签的前面加一个图标，既美观又不占空间，标识度也提高。

      如果表单项很多，还包含一些无法用图标来准确表达标签含义（毕竟文字是最能准确表达含义，图标只是增强识别性及记忆），那这个行内标签就不是好的解决方案。

      还有一个需要注意的是输入框内标签应当清晰表明是标签，而不是数据或者选项。可以前后加“-”来区分。

Ps:

1. 表单标签应当使用简介、直观、易懂的语言

2. 如果要减少填写时间，标签长度又灵活多变，可采用顶对齐

3. 如果要减少填写时间，且垂直空间有限，可采用右对齐

4. 如果希望人们浏览表单标签，知道必填问题或者回答多个特定问题，可采用左对齐

5. 表单项少，屏幕空间有限，可采用行内标签，注意合适的交互和情境