B端表单使用研究

wmyz1208

上海/设计爱好者/4年前/542浏览

版权

B端表单使用研究

wmyz1208

关于B端弹窗的学习研究及结合平时工作内容的经验小结笔记，全文4000字左右，阅读时长大约15分钟

B端表单

一、表单简介

表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。

1.1.表单构成

1.1.1.标签

帮助用户快速理解输入项的含义，一般不宜太长，需要简明扼要；还有一部分是告知用户哪些是必填项。

1.1.2.提示

占位提示：直接展示在输入项中，以较弱的方式呈现给用户，用户填完信息即消失。

帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

图标提示：鼠标移入图标后显示提示内容

1.1.3.表单域

可交互输入的区域，是构成表单的核心内容，大致分为以下5个大类：输入、内容选择、日时间选择、数值范围和上传。

1.1.4.按钮

当用户完成信息录入时，点击按钮进行提交、进入下一步等。

表单顶部/表单底部：用于放置全局按钮，两个位置的功能按钮是一样的，只是出现的条件不同。默认显示表单顶部按钮，当顶部按钮因为页面上滑被遮盖了，底部按钮才悬浮在窗口底部。目的在于用户无需上下滑动到固定位置才能对表单进行操作，省时增效。

跟随表单项：需要滚动条滚动到底部显示操作按钮，一般用于大部分表单都可以一页显示的情况，为了避免编辑后忘记点确定就跳转页面，会给一个表单有修改是否保存的提示弹窗。

分组底部：对每个分组表单进行的操作按钮，常用于只需要查看不需要经常编辑的表单。

1.1.5.校验

对输入项进行验证，并给出反馈提示。

前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。
后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。

1.2.表单的交互方式

表单页面主要的交互方式有四种：原位编辑、气泡卡片、弹窗/抽屉、页面跳转。表单页面在交互方式的选择取决于表单容量及表单亲密度。

1.2.1.原位编辑

原位编辑就是编辑内容也为展示内容，主要的使用场景是需要及时修改且比较高频的操作，常用于列表及卡片，详情页也可以使用原位编辑，需要注意的是，尽量不要用在长文本编辑。

一般交互形式有：

鼠标划过Hover时即可更改。
点击该字段时即可编辑更改。

选择【编辑/Edit】时可编辑更改。

1.2.2.气泡卡片

当承载内容比较少的时候比如设置项目低于5个时可以采用气泡，直观，即见即所得。如果内容不多时候不建议采用弹窗。常用于条件筛选的设置，触发生效机制可以是设置项点击即生效，也可以多个设置项选择后，触发操作按钮生效（操作按钮建议不超过2个），触发机制可以根据项目实际需求而定。

1.2.3.模态窗口式表单

模态会阻止用户与应用的其他内容进行交互直到关闭，适用于低复杂性和有限输入的表单。

1.2.4.抽屉编辑

一般在主视窗的局部位置滑动出现，占用了整个窗口的高度，所以允许承载较长的表单内容。和模态一样，滑出的内容是与上下文存在关系的，允许用户在主视窗中查看参考信息。建议条目表单表单数 >8 项时使用。

1.2.5.页面跳转

如果是初始化类型操作，超出了弹窗/抽屉的承载量，涉及录入内容比较多的时候，会有大量的信息要一项一项审核，就建议跳转到页面再进行新的操作，顶部会给一个返回之前页面的操作按钮。

1.3.表单内容排列方式

1.3.1.单列布局

优：视觉路径清晰，填写效率高，体验好；在一个区域内从上到下单列布局，引导用户纵向阅读，据研究这是能够最高效完成任务的布局方式。

劣：占用纵向空间。

1.3.2.多列布局

优：省空间，能够放置更多的表单控件；

劣：视觉路径模糊，填写成本高，填写易出错。

二、表单设计样式

2.1.基础表单

平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。

2.2.分组表单

单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。

2.2.1.标题分组

表单项较多（超过了7个设置项）的情况下建议分组，分组标题有引导用户完成表单填写的作用。但分组内组内设置项要有强关联性，否则不能归为一组，不能因为字段多，为了分组去分组。

2.2.2.卡片分组

7-15个设置项，用标题分组不足以给信息做层级区分，为了让用户在操作时更聚焦，也需要给用户更明确的操作引导，即可使用卡片分组。卡片分组之间关联性更弱，分类更明确，多个设置项，多个分类。

2.2.3.基础分步表单

如果每个组之间有逻辑先后顺序，那么推荐使用分步表单，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务。它非常适用于用户在操作完成后就不再参与的复杂表单。

2.2.4.标签分组式表单

如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组，适用于表单内容过多，为减少加载时间将表单分页展现的情况。

2.3.高级表单

2.3.1.动态增减

建议条目表单数 ≤3 项，并且每个输入框不需要单独的标题使用。

2.3.2.可编辑表格

建议条目表单数 2 ~ 5 项时使用，以使得每行内容可被完整呈现。

2.3.3.折叠面板编辑

建议条目表单数在 6 ~ 8 项时使用。

2.3.4.规则树

应用于规则编辑场景。适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。

2.3.5.语句式表单

让用户在预设的结构来完成语句，常用于设置、编辑规则类表单，表单读起来更友好更人性化。

三、如何提升表单体验

3.1.高效

通过合理的信息组织形式和表单组件的使用，使用户可以快速完成表单页任务。

3.1.1.让标签和输入框成组

使标签和输入框两两组合，用间隔的大小来形成组的概念，否则就会如左图所示，分不清楚那个标签和哪个输入框是匹配的，容易产生混淆，使用户感到困惑。

3.1.2.选择合理的标签对齐方式

标签常见的对齐方式有：顶对齐、左对齐、右对齐，另外还有不常见的表单域内对齐。你有时候希望用户尽可能快地填写表格，但有些时候你需要故意让用户慢下来，以便他们用心地留意并阅读标签。不同的对齐方式也适合不同的应用场景，下图表格是Matteo Penzo 根据表单标签对齐方式研究出的时间表，可供使用参考：

左对齐

优点：用户视觉动线左对齐，方便阅读，节约垂直空间。

缺点：填写速度慢，浪费横向空间，标签长度和输入框弹性小。

用户存留时间较长，所以左对齐标签一般用于购买类需要用户仔细看、谨慎选择。

右对齐

优点：节约垂直空间，表单标签和表单域距离近所以有利于用户高效填写

缺点：可读性较弱，横向占用空间大，不利于狭长页面布局，标签长度和输入框弹性小。

右标签一般用于需要高效填写的表单，比如账号的基本信息

顶对齐

优点：视觉舒适、用户浏览和填写表单的速度较快，节约横向空间。

缺点：占用垂直空间。

在移动端产品的设计中下拉的交互比左右滑动的交互更为便捷所以采用顶部标签较为常见。顶部对齐可以让用户快速填写表单，完成任务的场景一般采用顶部标签，例如阿里云的创建应用分组。

表单域内对齐：

优点：最节省空间，多用于移动端和登陆页面。

缺点：输入时和输入后标签消失，令用户迷茫，字段多的表单不建议使用。

优化方式1：可优化为浮动标签，输入时标签移动到输入框上方。既保留了简约也可以保留标签，给用户带来比较情感化的体验。

优化方式2：将标签改为图标，如注册登陆等表单。

3.1.3.任务拆解和编排

将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。尽管每部分内容单独处理，但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割，可以降低用户出错率。

3.1.4.折叠不重要非必填信息

在能完整获取需要信息的前提下，输入项越少越好，当表单页很长，且有些信息非必填，或者说填写后的意义不大。这样的情况下可以考虑将非必要信息折叠收起，点击“展示更多”下拉展开全部表单项，让用户可以选择性录入不重要的信息。

默认收起

点击展开

3.1.5.智能默认值

使用智能默认使用户完成表单速度更快、更准确。能满足多数人需要的默认选择，从而帮助用户填写单据。根据上下文信息可以自动获取的，无需用户再次填写。根据搜索，联想，自动显示匹配信息（如自动搜索、邮箱后缀联想、定位地址），如下图东航的搜索机票的表单，出发地和支付方式根据定位地址给了一个自动匹配，乘机人数量、出发及返程时间给了一个默认时间。