表单页是产品中主要负责数据采集、信息录入及提交的页面，常用于创建业务流程、复杂的批量数据录入等场景，如创建云主机、创建物理主机等。设计目标是帮助用户准确的理解数据录入项的含义，高效、愉悦的完成页面任务及流程。

设计思考

表单项构成

表单主要有以下构成元素：标签、录入组件、帮助信息、校验信息。

标签：包含标题、必填项标识/选填项标识、辅助说明：
- 标题：告诉用户录入字段的名称、含义；
- 必填项标识/选填项标识：表单项必填或选填的标识；
- 辅助说明：对表单项进行解释说明；
录入区：表单的核心，包含表格、输入框、下拉框、日期选择器、时间选择器、开关、文件上传等，复杂业务场景下会采用多种组件搭配的形式完成信息的录入，必要时提供链接操作，快速跳转到关联页面；
帮助信息：帮助用户更好的理解录入的操作；
校验信息：对输入内容进行验证，并给出反馈提示；

对齐方式

表单标签的对齐方式有：左对齐、右对齐、顶对齐、内联标签、图标标签以及浮动标签：

在产品设计中最常用的是左对齐、右对齐、顶对齐，在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，得到如下浏览时间表：

	左对齐	右对齐	顶对齐
完成速度	最慢	适中	最快
占横向空间	最多	适中	最少
占纵向空间	最少	适中	最多
标签可占空间	最少	适中	最多
靠近输入框	适中	接近	最近
标签移动到输入框时间	500ms	240ms	50ms
用户视线路径	向下 → 向右	向下 → 向右	向下

不论是哪种方式都有相对的利弊：

	优点	缺点	适用场景
左对齐	1. 按阅读视线对齐，符合阅读习惯； 1. 节约纵向空间；	1. 标签与录入组件之间距离大，不流畅； 1. 标签长度弹性小，字数 ≤8 为好； 1. 填写速度慢；	复杂表单填写场景，希望用户放慢填写速度，认真填写，以确保数据录入的准确性
右对齐	1. 标签与录入组件之间距离视觉关联明确； 1. 节约纵向空间； 1. 利于用户填写	1. 标签长度参差不齐，降低整体可读性； 1. 标签长度弹性小，字数 ≤8 为好；	即要节约纵向空间，又要提高填写速度，如表格高级搜索区。
顶对齐	1. 浏览效率最高，填写速度最快； 1. 标签长度弹性大，字数不限；	占用较大的纵向空间；	1. 希望用户快速填写表单； 1. 有国际化需求，标签字数很长；

产品中大量的复杂表单基本使用左对齐的方式，而简单表单录入场景下为了阅读视线对齐以及体验的一致性，也多数采用左对齐的方式。

需要注意的是，并不是简单的都使用左对齐，而是根据具体B端业务场景，在了解各种对齐方式的优缺点后，做出权衡和取舍。

录入组件的选择

表单的录入组件是表单的核心，是数据采集、信息录入的入口，包含：

文本录入：输入框、文本域
选择录入：表格、下拉选择、单/复选框、穿梭框、日期选择器、时间选择器、滑块选择、开关
文件上传：文件上传、图片上传、拖拽上传

填写表单是个繁杂的过程，为了减少用户思考和理解的成本，降低用户填写时的焦躁情绪，原则上应尽量让用户选择而非输入。

文本录入

最基础、最常见的类型，包含输入框、文本域：

输入总字数较少时，使用单行的输入框；
输入段落文本时，使用多行的文本域；

选择录入

在一个范围内给用户进行选择录入，包含表格、下拉选择、单/复选框、穿梭框、日期选择器、时间选择器、滑块选择、开关。

表格：需要展示多维度较为复杂的数据时使用，用户通过对比做出选择，是产品中很常见的类型，其中选择规则根据业务分单选、复选：

下拉选择：数据展示维度较为简单，从下拉列表中选择一项或多项，选项存在一定的关联关系，适用于选项较多（一般 ≥7 项）的场景。
数量很多时需要滚动，为了便于用户查找，建议下拉框支持搜索：

单选框：选项之间相互互斥，只允许用户选择一项。一般选项＜7 项时，建议把选项全部罗列出来，便于用户查看与对比。

复选框：选项之间不互斥，允许用户选择多项。一般选项＜7 项时，建议把选项全部罗列出来，便于用户查看与对比。

穿梭框：直观方便的在两栏中移动选项，可展示更多的选项，便于用户查看已选与未选，需要在多个可选项中进行多选与对比时的使用。

日期选择器、时间选择器：需要选择日期或时间范围时使用。

滑块选择：在连续或间断的区间内滑动锚点选择数值，能让用户直观的看到已选值与整体跨度的关系。如系统盘大小的选择

开关：用于一个对象或动作的两个互斥状态间的切换和选择。

文件上传

将本地文件上传至服务器时使用，分文件上传、图片上传、拖拽上传

动作

动作是表单填写的一些操作，主要分为：

主动作：与表单填写正相关的操作，如「提交」「保存」「下一步」；
次动作：与表单填写负相关的操作：如「取消」「返回」「撤销」；

在页面设计中，主动作采用品牌色按钮也就主按钮，次动作采用普通按钮，突出主要动作，更好的引导用户完成表单的填写。

根据承载容器的不同以及内容的多少，动作置于页面中的位置也有所不同：

引导与提示

表单录入过程分为输入前、输入中，输入后三个阶段，输入前通过提示信息对内容进行解释说明，输入中、输入后对录入内容进行校验反馈。

输入前

输入前将通过在页面中展示提示信息对内容进行解释说明，便于用户理解，引导用户操作。具体有以下要点：

1、占位符提示
未输入时，通过占位符提示给出简洁明了的提示：

2、帮助信息
占位符提示不能准确解释，或者解释内容较长时，使用帮助信息。根据格式塔原理，帮助信息应该与被解释的对象放在一起。

帮助信息有3种类型：

文字说明：最常见的类型，位于录入组件下方，扩展性强，通常是一段解释文本，文本里面可以添加超链接；
辅助说明图标：文字较多，同时不想占用页面空间时使用，常见场景有对表单项标签、表头标题进行解释说明；
气泡提示：默认隐藏，激活输入框时，上方出现气泡提示，由于隐蔽性较强，产品中较少使用。常见的应用案例是互联网产品的注册页表单；

如果帮助信息的解释范围是针对整个表单，则置于表单最开始的位置：

3、选填与必填
用户已经知道带星号* 的信息是必填项，但当必填项过多时，页面出现大量红色星号反而增加用户认知负担，所以当

必填项＞选填项时，标记选填项；
必填项 ≤ 选填项时，标记必填项；

4、组件宽度
给录入组件设定一致的宽度视觉上看感觉会比较统一，但是会有种右侧区域缺了一大块的错觉。

实际业务场景中，大部分录入组件都有其合理的宽度，组件的宽度往往暗示着填写内容的长度，所以合理的宽度能给用户正确的预期。

当然，当没有规则判断内容长度时，则统一长度，预留足够填写空间。

参考AntDesign表单研究结论，以四个中文字宽的下拉框宽度为最小宽度XS，则XS = 102px，组件之间的间距设为8px，得到如下宽度设置规则：

尺寸	宽度	使用范围
XS	102px	短数字、超短文本、超短下拉选项的录入，如数字选择器
S	212px	较短文本、较短下拉选项的录入，如姓名、账户名、邮箱、ID等
M	322px	标准输入框宽度，适于多数字段长度
L	432px	较长字段的录入，如网址、文件路径、标签多选下拉框等
XL	542px	段落文本的录入，如超长链接、备注等，通常预留多行空间

其中各尺寸之间的换算关系：

S = XS×2 + Spacing
M = XS×3 + Spacing×2 = S + XS + Spacing
L = XS×4 + Spacing×3 = XS×2 + S + Spacing = XS + M + Spacing = S×2 + Spacing
XL = XS×5 + Spacing×4 = XS×3 + S + Spacing = XS×2 + M + Spacing = XS + L + Spacing = XS + S×2 + Spacing = S + M + Spacing
= M + S + Spacing

应用宽度规则后 VS 统一长度：

5、输入格式
采用合理的格式约束，能方便用户快速填写，减少出错率。

6、默认值
有些内容可使用预设字段作为默认值，帮助用户填写。

输入中、输入后

在输入过程中及输入完成后，对用户输入内容进行实时反馈，以达到有效避免错误的目的，具体要点：

1、智能联想
根据输入关键字，实现模糊搜索、自动匹配。

2、校验反馈
校验有两种规则，分别是即时校验（失焦即校验）和点击提交按钮以后的最终校验。而即时校验机制能实时告诉用户所填内容是否符合规则，尤其是在长表单、复杂表单的录入场景，能避免在用户提交时页面出现大面积的错误提示，增加用户心理负担。

输入过程中的反馈类型一般有三种：

正确：正确状态一般不做提示，也可以用图标反馈
错误：输入内容不符合规则，给予错误提示，组件切换成错误状态，搭配错误提示文案
告警：一般与文本域相结合，字数超过限制时，给予反馈

需要注意的是，错误提示文案要告诉用户具体错误的原因，如“设备名称不能超过20个字符”

3、加载提示
表格数据查询、提交表单等涉及到大量数据交换需要用户等待的场景，需给用户加载提示以缓解等待焦虑：

4、二次确认
一些重要的选择、删除等操作，通过气泡浮层的方式对用户操作进行二次确认。

设计思路

根据上述内容，对表单设计的思路进行如下总结，便于产品、设计、开发根据实际具体场景进行分析。

第一步，选容器

根据内容数量的多寡，以及内容与源页面关联性，选择合适的承载容器：

1、内容承载容器有弹窗、抽屉、页面/新开页面，对内容的承载量也随之依次增加。

2、内容数量指表单项数量，内容少一般来讲内容之间的关系相对简单，多则相对复杂。

3、源页面关联性指表单内容与上一级内容的关联性，一般来讲：

关联性较强，建议使用弹窗或抽屉，可停留在当前页面，降低打断感；
关联性不强、内容较多、流程复杂时，建议使用页面或者浏览器新开页面，让用户更加专注于表单的填写。其中浏览器新开页面的使用场景一般为：
- 用户在填写表单时需要与源页面进行内容的比对；
- 录入途中需要创建关联数据，且创建内容较多；
- 属于另外一个业务流程的链接操作；

4、经验参考

内容数量 ≤5 项，一般使用弹窗；
内容数量＞5 项，≤10 项，可使用弹窗，弹窗最好避免出现滚动条，需要更大承载空间建议使用抽屉；
内容数量＞10 项，建议使用页面/新开页面；

第二步，选布局

根据内容逻辑关系选择合适的布局与排列方式：

表单内容常见的逻辑关系有线性关系、并列关系及嵌套关系（线性关系与并列关系相结合）：

1、线性关系
内容之间关系简单，一般全部平铺在页面中，由于产品中大量的复杂表单基本使用左对齐的方式，而简单的表单录入场景下为了阅读视线对齐以及体验的一致性，也多数采用左对齐的方式。

2、并列关系
内容之间关系稍复杂，依据相关性对内容进行分组，采用左对齐的方式，非必要显示项可默认收起，必要时可加入Tab选项卡对内容进一步组织。

3、嵌套关系
内容之间关系很复杂，是线性关系与并列关系的结合，采用左对齐的方式，在对内容进行分组的基础上，加入步骤引导或者Tab选项卡，对内容进一步组织。对于需要快速录入的长表单场景，改用顶对齐多列布局，对内容分组。

建议：
1、当标签字数过长影响到使用体验及界面美观度时，建议使用顶对齐；
2、一般采用单列布局，用户完成率、开发效率更高，拓展性更好，适合复杂业务；
3、表格高级搜索区一般字数较少，使用右对齐多列布局的方式，既能提高空间利用率，又便于用户操作；
4、内容很多时，除了对内容分组，还可以搭配其他组件一起使用，如步骤条、横向Tab、纵向Tab、锚点等，以提高用户完成效率；

第三步，选模板

依逻辑关系对表单进行如下分类：

线性关系、并列关系，定义为基础表单
嵌套关系，定义为复杂表单
特殊情况，定义为场景表单，如设置页

基础表单

一、承载容器：弹窗

【边距】
内容区距离四周间距 24px ，如果弹窗内出现滚动条，页面滚动到弹窗底部时，内容区仍需与 footer 保持 24px 的间距。

【弹窗宽度与高度】

弹窗宽度 = 内容区宽度 + 48px（Padding Left + Padding Right），最大宽度1000px
弹窗高度 = 内容区高度 + 48px（Header）+ 52px（Footer）+ 48px（Padding Top + Padding Bottom），最大高度为可视区域的90%