form 表单居中_表单设计-掌握表单设计方法（表单体验篇）

全篇阅读大概需要15min，对表单设计不熟悉的同学看完后肯定会有不少的收获~~~

说到表单其实在生活中可以接触到各种各样的表单，主要目的就是让用户填写来【收集用户信息】。

初看这些表单，你可能觉得很简单，就是一些标签、非常基础的小组件，但是在实际业务中，想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节，常常会让设计师陷入无限的纠结中，比如：

文字标签是左对齐还是右对齐？
确定按钮是放左边还是右边？
控件颗粒长度是整齐划一还是与输入预期一样错落有致？反馈内容怎么显示......等等

★ 所以针对这些问题，我从【框架】>【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。

表单拆分

在UX Collective，作者Taras Bakusevych 进行了详细的阐述，对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓

1、标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2、占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述、示意，当用户输入信息时即消失。

3、 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

常见的校验类型

4、 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关......

5、 提示：描述该输入项需要的输入类型，如：上传的文件类型

6、 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，则按钮悬浮固定在底部；按钮“确定”放左、右统一即可，没必要过分纠结。

表单类型

看了很多文章，对表单类型的划分主要是：基础表单、分步表单、高级表单（分组表单）^[1]

• 基础表单：常见于输入项较少的表单场景ÿ