B端表单设计
聊聊B端表单设计-全文3200个字符，阅读时长15分钟
表单作为基础通用组件，是我们在各类业务产品中出现最高频的元素之一。承载了各个流程中信息数据的录入使命。提高信息数据录入的效率可以加速用户达成目标的时间与降低操作成本。一般要求在录入前尽可能的使用户理解信息录入的目的与预测并判断需要录入的信息内容，在录入过程中尽可能的减少输错概率并帮助用户快速达成，在录入后即时纠错提示并避免繁复操作等。
目录
1 什么是表单
2. 表单的构成
3. 交互与布局
5. 结语
一 什么是表单？
表单的核心功能是采集数据信息，可以看成是采集、传递、提交数据的中间媒介。其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色
表单页的核心场景：
1 采集/录入数据信息; 2 编辑数据信息；3 条件设置
用户目标：
明确当前页面任务，轻松理解表单含义及生效后果
准确轻松快速的完成页面任务
表单页设计原则：
明确（快速定位重要信息和目标选项，文案和组件能准确传达相应含义）
高效（合理的交互形式，科学的信息布局和组织形式、表单组件准确使用，尽可能的"少操作一步")
安全感（操作前：提升与防错；操作中：实时反馈与纠错；操作后：合理的保存、清空、取消、撤销机制）
二 表单的构成
01 表单设计四元素
表单通常由表单标签、输入域、填写提示、操作按钮等几部分组成
表单标签：告诉用户该表单需要填写什么类型的信息，通常放置在表单文本框之外居左或上方的位置。极少数情况下也会放置于文本输入框内，激活输入框，则消失。
表单域：用来收集用户操作的信息，每个输入域字段包含一类型信息。
输入域不仅仅是文本输入框，从交互组件的角度来看，其包括文本输入框、单选框、复选框、开关、选择器、步骤条、上传、Tab切换（主要指按钮型）、滑块、步骤条等多种。
提示信息：帮助用户有效正确填写信息的引导内容或反馈内容。
提示一般可分为引导提示和反馈提示两类。引导提示发生在用户输入前，引导用户正确输入信息或对输入信息的要求进行说明。反馈提示发生在输入中或输入后，界面根据用户的输入而显示的提示信息。
操作按钮：填写完表单各项内容后，所要进行的操作动作（eg：保存、取消、提交、确定等）来结束当前操作流程或在流程之中或之后开启新的功能操作。
02 表单标签布局
根据标签与输入域的位置关系，其对齐方式可分为：右对齐、左对齐、顶对齐三种。每一种对齐方式都有一定的优点与局现性，因此在合适的场景下选择合适的标签样式，可以提升用户的输入效率
03 表单域
表单域是表单的主题与核心
1）表单输入
表单输入的过程可分为：输入前、输入中、输入后
【输入前】设计主要是辅助用户更好的进行操作，在输入之前将提示信息明确的显示出来，预先提示，减少出错。但需要注意的是，不要堆叠多个提示信息，同时我们可以用输入框的长度、格式暗示内容的长短及类型，如IP格式的输入框，手机号、日期等长度较固定的输入框。
【输入中】设计主要是对造成当前状态的原因进行说明，为预防错误而在表单提交之前提早干预，常见的组件功能和设计手段如下示例。在输入中，我们要切记，尽量不直接打断用户，不中断用户的输入操作，而是对需要注意信息，及时标记出来，确保过程中一直沟通。
【输入后】设计关注在对输入后的结果进行告知，必要时可限制下一步行动。如有异常表单项，提交按钮不可点击等，一些重要的选择、删除操作，可以通过局部二次确认的方式对用户操作进行反馈。
2）表单宽度
Ant Design 倡导进行合理的定宽，核心原因是：
在大部分情形中，跟随空间自适应易造成表单极其附属的元素展示非常不稳定
实际业务中，大部分表单所需填写内容都存在理想长度，表单的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。
我们怎样去考虑表单宽度？
定义5种高频宽度需求空间，以尺码类比分别：是 XS - 80px、S - 160px、M - 280px、L - 360px、XL - 480px
选择合适的规范，长度和输入预期成正比，用不同的输入框长度给用户相应的「心里预期」
04 提示信息
1）输入提示信息
一般位于表单域中，在文本框获取焦点后提示文字会消失，提示文字最好是简洁明了的几个字，如果是大篇幅的解释性内容应放在帮助文字中。
2）帮助文字
在表单的设计中如果应用的是非常生僻的字段名称或者字段名称存在歧义再或者该字段有什么要强调的规则，都会在帮助文字中明确，帮助文字的设计一般在表单域的前/后有一个帮助按钮，点击按钮会有一个toast弹窗，帮助文字在弹窗中展示。
3）错误提示信息（可能是文字可也能是图标）
设置表单域的输入规则，若用户输入的内容不符合规则，则在表单域后/下方以文字的提示提醒输入错误原因，比如“请输入11位的手机号码”；或者在和数据库校验数据时，比如密码不对，提示“密码输入错误”等等。
05 操作按钮
1）主按钮-提交
主按钮禁用原则，当表单信息位填写完整时（必填信息），提交按钮一般为灰色状态，不可点击提交，当表单完善后，提交按钮由灰色状态变为可点击的亮色状态。
2）次按钮-返回
主次按钮之间一定要有视觉上的区分，降低次要按钮的视觉突出，减少用户的出错率。
三 交互与布局
01 交互方式
表单页有4种交互方式：原位编辑，气泡卡片，弹窗/抽屉，页面跳转。影响交互形式的因素包括表单输入容量及操作流程主次关系（即亲密度）
1）原位编辑
适用于输入内容较少，适用频率较低，同时属于主功能分支的场景。其优点在于操作便捷，随时启用与退出，能够保证用户对主要功能的操作流畅度。
就地编辑一般为嵌入在列表内、卡片中，信息展示区域通过双击或点击特定的操作按钮即变为激活编辑状态。其存在的意义在于完善或者增强主功能的操作，而不是打断。
2）气泡卡片
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等
3）弹窗/抽屉
常见的处理包含子任务流程、内容项复杂的表单模式，相较于折叠面板扩展性更强，承载的信息更多，一般而言，抽屉的信息承载能力大于弹窗。模态的弹窗/抽屉会打断用户的当前主流程，任务的切割感强。
4）页面跳转
页面跳转的信息承载能力强，对反馈的及时性要求不高；体量感比较重，给人感觉稳定性更高一些，特别重要的功能表单填写确认建议用页面跳转。
页面跳转包含两种：新页面打开和当前页面跳转
四 结语
多学习，多总结，多实践应用
