一、表单的构成
1、表单的组成
按照原子理论，表单应该属于一种“组织”。包括了以下组成部分：
- 标签
主要是用来说明表单数据域的含义和填写内容；当标签无法明确引导用户或者具有一定的内容限制时，需要增加帮助或者说明信息，方便用户更好地填写内容。
- 表单数据域
通常是数据录入型组件，需要用户以填写、选择的方式完成内容输入。
- 操作按钮
用来提交、保存数据信息，完成表单操作。
2、表单的类型
在B端产品审批流程中，不同的用户会面对不同的表单形式。
对于流程发起者，需要填写内容后提交审批，这类表单偏向于任务操作，也是我们最常见、最典型的表单形式。
而对于审批者而言，表单主要是传递信息，审批人依据内容做出审批决策，这类表单偏向于信息展示。由于审批类的表单相对简单，所以我们将主要的精力放在操作型表单上。
二、表单的设计关注点
1、表单布局
表单存在两种布局方式：单列布局和多列布局。
- 单列布局
单列布局信息自上而下，用户视觉动线更加稳定，横向的视觉跨度更短。所以信息阅读和填写的效率更高，是首选的布局方式。但是在长表单场景下，用户需要滚动屏幕才能查看完整的表单信息。
- 多列布局
多列布局下，一屏可以容纳更多信息、屏效更高，有效地避免出现滚动条。对于高频的长表单操作，采用多列布局的方式，可以减少滚动条带来的用户困扰。
当然多列布局表单信息密度也更大。一般为左右两列布局，列数最好不要超过2列，否则会影响用户的填写效率。
常见的搜索表单大都与表格宽度一致，可以容纳3列或4列。主要是搜索关键词与表格一致，业务属性不强，并且表单项没有强制性，用户可以自由填写，不会存在漏填的情况。采用多列布局对用户操作影响不大。
2、标签排列
标签排列方式历来都是设计师比较纠结的问题，常见的标签有3种：左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。
先看阅读效率数据。
2006年，有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明，顶部标签移动到输入框效率最高，只要 50 毫秒；右对齐标签次之，需要 240 毫秒左右；而左对齐需要消耗“500 毫秒”，效率最低。单从效率上来说，肯定首选顶部标签。但是面对不同的场景，需要选择合理的排列方式。
- 顶部标签
（图片来源于网络）
顶部标签的排列方式符合用户自上而下的浏览习惯，标签与输入域联系更加紧密，视觉横向移动距离小。所以信息读取的效率更高。
另外标签单独占据一行空间，信息扩展性更强。问题也显而易见，标签挤占了纵向空间，会增加表单的总体长度。
所以我个人认为，顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。
- 右对齐标签
（图片来源于网络）
右对齐布局拉近了标签与表单域的距离，并形成固定间距。但是由于标签的长度不同，视线起始点会发生跳跃，从而影响用户的阅读效率。
不过对于普通表单，右对齐标签可以兼顾效率和页面空间，因此在B端产品中应用比较广泛。
- 左对齐标签
（图片来源于网络）
从整体性上来看，左对齐视觉结构性更强，有利于标签信息阅读。用户视线不会受到输入框的干扰，可以非常顺畅地扫视标签，方便用户快速搜寻必填项。
但是由于标签长度不一，为了保证所有标签都可以正常显示，会增加标签与表单域的间距，导致信息读取效率偏低。
左对齐标签可以用在复杂场景中，减缓用户的填写速度，尤其是那些有大量可选输入框，结合必*标识符快速定位必填项。或者在高级设置的场景中，字段信息对用户相对比较陌生时，让用户可以仔细考虑表单中的每个信息项。
- 内联标签
内联标签是将标签放在输入域内显示，标签代替了占位提示文字，告诉用户应该填写什么内容。常见于注册登录页，如下图。
内联标签解决了标签文字过长的问题，并且可以降低表单的视觉信息量。
但是这也带来了另一个问题，就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面，因为用户对登录页的内容模式已经非常熟悉了，学习成本很低，不会带给用户困扰。
如果用在其他类型的表单页面，就容易让用户产生疑惑。特别是出错的场景下，信息提醒不到位，很容易增加用户的理解成本和使用难度。
- 浮动标签
浮动标签是指用户在录入时，内部标题（输入性提示信息）进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量，并且拓展性不强，不适合作为主要的标签形式应用在业务表单中。
一个系统中最好采用相对一致、稳定的标签排列方式，否则频繁变化的对齐方式也容易让用户无所适从。
三、表单的存在形式
表单信息量可大可小。有的可能只有一个字段，有的可能是包含多层卡片内容，甚至是相互嵌套。不同的表单信息有着不同的存在形式，梳理归纳后，主要有以下5种。
1、即时表单
常见于表格或者详情页面，通过编辑或新增功能触发。即时表单与原有内容保持一致，更强调操作的快捷性。
2、浮层表单
同样是一种轻量化的表单方式，一般用于定向修改特定内容。通常浮层空间较小，不用来承载大量的信息内容。另外浮层紧随修改内容，操作效率更高。
3、弹窗表单
在抽屉组件出现之前，弹窗应该是最为常见的表单交互形式。相比页面跳转，弹窗操作成本更低，但是空间比较受限，应对大表单信息会有一定的难度。另外表单填写时，可能会出现多层弹窗的情况。
4、抽屉
抽屉组件既可以承载较多的表单信息量，又可以和弹窗一样在当前页面完成操作，并且相对于居中弹窗，不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。
5、页面
页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么，同时也要配置返回按钮，方便用户退出表单页面。
以上就是表单基础知识的解析。
下期我们来分析下表单设计的技巧~
原文地址：子牧UXD（公众号）
作者：子牧先生
转载请注明：学UI网》设计基础(6): 表单基础知识解析
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
