干好这件事，卷死所有同行

宝，咱前面说完表格相关的，今天咱就一起来聊聊表单相关的。答应我，看下去！

由于B端产品的复杂性，表单往往呈现出字段多类型杂等特点；但是一个糟糕的表单会极大影响用户信息的录入，从而影响整个产品的体验。

表单的介绍

表单的定义

表单在网页中主要负责数据采集功能，是提交数据的一切形式。

表单的构成

标签、输入域、提示信息、动作。

表单的构件解析

标签

标签即可以理解为标题的意思，用简洁的文字让用户知道应该输入的内容；根据标签的所属位置，大致可以分为：顶部标签、左对齐标签、右对齐标签、内联标签、图标标签以及浮动标签，下面我们主要介绍前三个。

顶部标签

与输入域左垂直对齐

• 优点：节省水平空间，标签长度弹性大，可以加快浏览和处理速度。
• 缺点：垂直空间占用比较大，表单项多时需增加页面滚动。

左对齐标签

文字左对齐放置在输入域的左边

• 优点：文字开头按阅读视线对齐，方便用户快速浏览表单；节约垂直空间。
• 缺点：标签与表单域联系不紧密，视觉跳动大，填表不流畅；标签和输入域的弹性长度小。

右对齐标签

文字右对齐放置在输入域的左边

• 优点：明确的视觉关联，有利于用户进行填写，节约垂直空间。
• 缺点：左边标签参差不齐，给通览标签造成障碍，降低表单可读性；标签和输入域的弹性长度小。

输入域

用来采集用户数据信息的入口，包含了文本录入、选框录入以及文件上传3种录入类型，应尽可能的减少用户思考和理解的成本，选择合适的输入域。

由于大家对大部分类型都很熟悉了，我就选择几个大家可能容易忽略的说一说

选择框和复选框(单选框)的选择

当项数比较少的时候，复选框(单选框)是一个更优解；选项全部都列出来，可以按重要程度排列，方便用户查看对比。

善用开关按钮

允许用户在两个相反的状态之间进行选择，如：有效或无效、是或否、开或关等。

提示信息

根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，提示信息在输入前发生的称为引导提示，提示信息在输入中/后发生的叫反馈提示。

由于提示信息这块比较简单，输入中和输入后的验证我就不再啰嗦啦。

输入前

其他

输入格式

根据用户的记忆结构（7±2法则），采用合理的格式约束，能够方便用户更快的完成填写，而减少错误出现。主要是手机号码，银行卡号，IP地址等情景。

智能联想-模糊搜索(重要！！！)

当选项过多时，模糊搜索能更加高效，同时也能减少出错率。

动作

“主动作”，如：提交、保存、下一步等；“次动作”，如：取消、撤销、返回等。

可优化的点

当表单的必填项未填写完整时，提交或保存等主按钮一般为灰色状态，不可进行下一步操作，当完成必填信息的填写后，按钮变为高亮，可进行下一步操作（但表单项超过5个时则不建议使用主按钮禁用原则）。

主按钮之后的下一步操作

弹框级别-关闭弹框刷新数据。

页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。

表单的交互

就地编辑、弹窗、抽屉、页面跳转以及新开页面。

就地编辑

• 优势：快捷易操作，随时启用与退出，主流程的操作流畅度高。
• 劣势：编辑状态较为隐晦，不宜察觉。
• 适用场景：适用于输入内容较少，适用于频率较低，同时属于主流程分支的场景。

弹框-对话框

• 优势：简单易操作、承载的信息量有较大的弹性空间。
• 劣势：浮层弹窗给主操作流程造成较强的割裂，降低输入的流畅度。

新开页面

• 优势：页面之间相互独立，互补不干扰，可承载的东西较多，适合分步骤或者大表单。
• 劣势：用户的焦点丢失，注意力分散（因为系统中大部分的操作在同一个页面中完成）。

弹框和页面如何选择

当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。

表单内容组织形式

基本平铺

分组归纳

内容分类归组，便于快速定位，减轻焦虑感和填写压力。适用于一次需要填写很多内容的表单，且不同内容之间存在分类归纳性。

步骤引导

• 优势：任务流程清晰，明确当前用户目标，减少用户负担；及时的反馈校验，也避免填写完成后才发现中间的表单填写有误，降低用户的犯错成本。
• 劣势：无法通篇浏览表单内容，回溯成本高。（这里建议在最后一步的时候增加一块区域可以查看清单或者概要）。

其他

关于“只读”

不可编辑的表单项建议使用“readonly",不要用”disable"。

私货

删除二次确认

• 弹框：需要说明删除信息和影响的情况。
• 弹框：批量选择，且弹框中不再有其他操作。
• 就地确认：不需要过多说明，可简单二次确认。

loading

• 页面级loading：tip描述使用进来描述；例如“数据加载中”。
• 按钮级loading：提交/确定类按钮，点击后需有loading，防止用户多次操作。
• 弹框loading：确定按钮点击后需有loading。
• 表格loading：用表格自带的loading属性。

滚动条

• 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。
• 弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。
• 避免出现滚动条套娃。

好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！