何为表单：

表单在网页中主要负责数据采集的功能。像我们平时生活中注册一些东西的时候填写的就是表单。

一个表单的基本组成部分： 

当我们设计一个表单的时候，面对呈现在我们眼前的那些标签、按钮，设计师常会有各种各样的困惑，是左对齐还是右对齐？按钮放哪？用户反馈怎么搞？

何时使用：

用于创建一个实体或收集信息。

需要对输入的数据类型进行校验时。

如何使用：

一、标签的分类：左标签、顶标签、行内标签。

1.左标签：

左标签是比较最常见的一种标签样式。相对节约纵向空间，多用于PC端。

在移动端产品中就会比较占空间，因为手机端的屏宽有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。还有一种情况，当如果用户输入的信息较长，就会造成信息的展示不完全，因为用户在进行下一步操作之前都会对输入的内容进行再次确认，如果看不到完整的内容，用户就不会进行下一步操作，会造成操作流程的中断。

所以，我们在使用左标签的时候，也要考虑到对多行文本的展示。

2.顶标签：

顶标签，顾名思义，是将标签放在上方，多用于移动端。可以给输入框的内容腾出足够的空间，整体对齐，信息可以更完整的展示，节约横向的空间。

3.行内标签：

行内标签也可以被看成是输入提示，多用于登录login页面，可以极大地节省页面空间。

但有个缺点是，一旦用户点击切换到输入状态时，就看不到标签了。在一些比较需要记忆或无提示的表单中，可能会导致用户迷茫，酌情使用。

二、对齐方式

对齐方式一般分为两种：左对齐和右对齐。

左对齐：

左对齐方式是一般适用于浏览表单，阅读效率高。

优点——易于阅读，可以一定程度上帮助用户理解标签内容。一般较常用的使用场景是详情的陈列。

缺点——增大了标签与表单域之间的距离，尤其是标签较长时，距离会更远；导致用户不得不花更多的时间对照标签与相应的表单域以防止出错。

右对齐：

右对齐也是常说的冒号对齐。

优点——相对来说更有利于表单填写，标签指向明确，操作效率高。

缺点——标签的左侧无法对齐，而我们的阅读习惯一般是从左往右阅读，这就会导致用户视觉起点不一样，不利于用户阅读浏览；还有一种情景是，标签内容多，出现折行的情况会更加不利于阅读。

三、交互方式

表单的交互方式一般分为4类：原位编辑，气泡卡片，弹窗/抽屉，页面跳转。

原位编辑：

原位编辑就是编辑内容也为展示内容，主要的使用场景是需要及时修改且比较高频的操作。适用于数目不太多的情景。

常见的交互形式为：点击字段即时编辑、选择编辑功能来编辑

气泡卡片：

当承载内容比较少的时候，所见即所得。常用于系统顶部右上角操作的情景。

弹窗/抽屉：

常用于轻量化编辑的时候，可采用弹窗/抽屉的形式展现。如果在原有基础上有增加项，就可以使用抽屉的方式展现。一般情况下，同类型的操作推荐使用同样的交互方式，这样可以保持交互一致性。

页面跳转：

非常常用的方式，适用于大部分表单。适合涉及录入内容比较多的时候，有大量的信息，构架复杂，建议跳转到新的页面进行操作。

这些交互方式并不绝对，设计师们要结合实际项目的使用场景、用户习惯等具体因素，再进行选择。

四、布局

由于B端本身业务的复杂性，设计师们有时候会遇到信息量很大但又要在一个界面里展示的情况，这个时候就可以将相关内容进行分类组合，增加界面的呼吸和节奏感，把冗长的信息合理展示，从而帮助用户更轻松的完成表单填写。

一般有四种方法：标题分组、卡片分组、tab切换、分步骤。

标题分组

根据业务属性，把相关内容进行分类组合，比如修改个人资料的场景下，基本信息是一组，联系方式是一组。

卡片分组

在标题分组的基础上，通过物理位置的区分，用视觉上的色块和距离等加强分类，方便用户填写。

tab切换

在内容更多、并且内容之间没有太多关联性的场景下，可以使用tab切换的方式，将不同的内容隐藏在各个选项卡内，当前显示所选的选项卡的内容，分类明确。

分步骤

这个跟tab切换的区别是，这边的内容多，但内容之间是有关联的，必须要进行完这一步才能进入下一步。这个时候可以考虑将表单分成多个步骤，同时使用进度条来显示剩余的进度，这样流程会更清晰，能保证每一步填写时都满足了上一步，不易出错。

五、易用性

信息降噪

必填内容一般用红色「*」来表示，但如果必填内容居多，非必填居少，其实不用满屏星星，可以转换思维，少量的非必填项注明「非必填」就好了，如图

高效智能

可自动获取的，无需用户手动填写，自动匹配显示信息，比如邮箱后缀等。

准确易懂

当我们设计表单内部提示信息的时候，出现问题后，明确告知出错的原因并提供有效的解决方案，方便用户修改。

由于B端产品本身的特性，集成了很多的功能和信息，所以设计师们在设计的过程中要尽可能的让界面更直观清晰，合理分组布局，信息降噪，更方便用户进行操作，节约时间，提升用户体验。

B端项目做多了之后，越来越觉得，它不像C端那样美观至上，它是功能为主的，每个项目背后的思考很重要。今后会把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式上，辅助业务挖掘。搞清楚为谁设计，尽可能的做出一个既满足客户需求，又提升用户体验的产品，从而切实用我们的设计来解决问题。

以上是我在做B端表单设计中的一些思考和总结，希望能帮到有需要的同学，欢迎沟通交流，一起进步。

一个人可以走很快，但一群人可以走很远。

共勉。