设计基础(6): 表单基础知识解析-技术圈

▲点击 "子牧UXD" 关注，回复 "设计圈" 加入我们

2022年原创总第 19 篇

距离年度目标40篇还有 21 篇

(全文2582字，预计阅读时间：6分钟)

在B端产品中，表单是高频的设计形式。主要用于收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等组件构成。单个组件并不复杂，只要遵照组件规范使用即可。但是组成表单时，还是有不少注意事项的。所以各个设计系统都将表单作为了一个专项内容加以分析说明。

今天我们来了解下表单的基础知识。文章主要包括以下内容：

表单的构成要素
表单的设计关注点
表单的存在形式

▍01 表单的构成

1、表单的组成

按照原子理论，表单应该属于一种“组织”。包括了以下组成部分：

标签

主要是用来说明表单数据域的含义和填写内容；当标签无法明确引导用户或者具有一定的内容限制时，需要增加帮助或者说明信息，方便用户更好地填写内容。

表单数据域

通常是数据录入型组件，需要用户以填写、选择的方式完成内容输入。

操作按钮

用来提交、保存数据信息，完成表单操作。

2、表单的类型

在B端产品审批流程中，不同的用户会面对不同的表单形式。

对于流程发起者，需要填写内容后提交审批，这类表单偏向于任务操作，也是我们最常见、最典型的表单形式。

而对于审批者而言，表单主要是传递信息，审批人依据内容做出审批决策，这类表单偏向于信息展示。由于审批类的表单相对简单，所以我们将主要的精力放在操作型表单上。

▍02 表单的设计关注点

1、表单布局

表单存在两种布局方式：单列布局和多列布局。

单列布局

单列布局信息自上而下，用户视觉动线更加稳定，横向的视觉跨度更短。所以信息阅读和填写的效率更高，是首选的布局方式。但是在长表单场景下，用户需要滚动屏幕才能查看完整的表单信息。

多列布局

多列布局下，一屏可以容纳更多信息、屏效更高，有效地避免出现滚动条。对于高频的长表单操作，采用多列布局的方式，可以减少滚动条带来的用户困扰。

当然多列布局表单信息密度也更大。一般为左右两列布局，列数最好不要超过2列，否则会影响用户的填写效率。

常见的搜索表单大都与表格宽度一致，可以容纳3列或4列。主要是搜索关键词与表格一致，业务属性不强，并且表单项没有强制性，用户可以自由填写，不会存在漏填的情况。采用多列布局对用户操作影响不大。

2、标签排列

标签排列方式历来都是设计师比较纠结的问题，常见的标签有3种：左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。

先看阅读效率数据。

2006年，有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明，顶部标签移动到输入框效率最高，只要 50 毫秒；右对齐标签次之，需要 240 毫秒左右；而左对齐需要消耗“500 毫秒”，效率最低。单从效率上来说，肯定首选顶部标签。但是面对不同的场景，需要选择合理的排列方式。

顶部标签

（图片来源于网络）

顶部标签的排列方式符合用户自上而下的浏览习惯，标签与输入域联系更加紧密，视觉横向移动距离小。所以信息读取的效率更高。

另外标签单独占据一行空间，信息扩展性更强。问题也显而易见，标签挤占了纵向空间，会增加表单的总体长度。

所以我个人认为，顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。

右对齐标签

（图片来源于网络）

右对齐布局拉近了标签与表单域的距离，并形成固定间距。但是由于标签的长度不同，视线起始点会发生跳跃，从而影响用户的阅读效率。

不过对于普通表单，右对齐标签可以兼顾效率和页面空间，因此在B端产品中应用比较广泛。

左对齐标签

（图片来源于网络）

从整体性上来看，左对齐视觉结构性更强，有利于标签信息阅读。用户视线不会受到输入框的干扰，可以非常顺畅地扫视标签，方便用户快速搜寻必填项。

但是由于标签长度不一，为了保证所有标签都可以正常显示，会增加标签与表单域的间距，导致信息读取效率偏低。

左对齐标签可以用在复杂场景中，减缓用户的填写速度，尤其是那些有大量可选输入框，结合必*标识符快速定位必填项。或者在高级设置的场景中，字段信息对用户相对比较陌生时，让用户可以仔细考虑表单中的每个信息项。

内联标签

内联标签是将标签放在输入域内显示，标签代替了占位提示文字，告诉用户应该填写什么内容。常见于注册登录页，如下图。

内联标签解决了标签文字过长的问题，并且可以降低表单的视觉信息量。

但是这也带来了另一个问题，就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面，因为用户对登录页的内容模式已经非常熟悉了，学习成本很低，不会带给用户困扰。

如果用在其他类型的表单页面，就容易让用户产生疑惑。特别是出错的场景下，信息提醒不到位，很容易增加用户的理解成本和使用难度。

浮动标签

浮动标签是指用户在录入时，内部标题（输入性提示信息）进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量，并且拓展性不强，不适合作为主要的标签形式应用在业务表单中。

一个系统中最好采用相对一致、稳定的标签排列方式，否则频繁变化的对齐方式也容易让用户无所适从。

▍03 表单的存在形式

表单信息量可大可小。有的可能只有一个字段，有的可能是包含多层卡片内容，甚至是相互嵌套。不同的表单信息有着不同的存在形式，梳理归纳后，主要有以下5种。

1、即时表单

常见于表格或者详情页面，通过编辑或新增功能触发。即时表单与原有内容保持一致，更强调操作的快捷性。

2、浮层表单

同样是一种轻量化的表单方式，一般用于定向修改特定内容。通常浮层空间较小，不用来承载大量的信息内容。另外浮层紧随修改内容，操作效率更高。

3、弹窗表单

在抽屉组件出现之前，弹窗应该是最为常见的表单交互形式。相比页面跳转，弹窗操作成本更低，但是空间比较受限，应对大表单信息会有一定的难度。另外表单填写时，可能会出现多层弹窗的情况。

4、抽屉

抽屉组件既可以承载较多的表单信息量，又可以和弹窗一样在当前页面完成操作，并且相对于居中弹窗，不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。

5、页面

页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么，同时也要配置返回按钮，方便用户退出表单页面。

以上就是表单基础知识的解析。

下期我们来分析下表单设计的技巧~

欢迎评论区留言交流，886~

— THE END —

🌈🌈🌈 粉丝福利：

福利1

关注【子牧UXD】公众号，点个“在看”，可获得”读者大礼包“

回复数字【01】，获取100+“行业报告”

回复数字【02】，获取“大厂设计规范”

回复数字【04】，获取“作品集包装攻略”

回复数字【06】，获取“笔试面试技巧”

回复数字【08】，获取“精选样机合集”

此外还可领取“大厂原型文件”、“设计师简历样本”、“App设计参考作品”等高价值资料

福利2

我们组织了专业的产品/交互/UI设计交流群，群内有来自多位华为、阿里、百度、拼多多、腾讯、快手、美团等一线大厂的设计专家，欢迎入群一起交流成长。

扫描下方二维码添加小编微信，即可拉你进群。

与「11700+」读者共同成长

阅读推荐》》

设计基础(5): 设计师需要了解什么是WCAG色彩对比度

设计基础（3）：重新认识栅格系统

破解复杂场景下的B端产品设计

6个降低B端产品的「认知负荷」的方法

设计基础(6): 表单基础知识解析

添加附言