B端表单设计总结

在手机端，还是在pc端，又或是日常生活中，表单都应用广泛。而填写表单的过程乏味枯燥，用户却只能硬着头皮去做。

优秀的表单不仅减少用户操作过程中的负面体验，而且可以让填写的过程变得轻松。

本文总结出工作中，表单方向的常用组件和设计原则，加深自己对这部分模块的理解，也希望能够帮助到大家。

输入框、选择器是最基本，最必不可少的信息录入组件。输入框可用于输入各类文本、数字、密码、验证码。一个完整的输入框，默认由文本标签、输入框、文本占位符组成。

在表单设计中，用于筛选数据内容，缩小数据范围，可做单选或者多选的功能，也可配合输入框使用，查询特定类型的信息。

单选按钮的操作逻辑是，在几个不同的选项中，有且只能选择其中一个选项，选择后立即生效。

与选择器相比，单选按钮将所有的选项平铺暴露在页面中，选项表述简洁准确，建议尽量差异化描述每个选项（切勿长篇大论），避免产生歧义。

文本内容通常跟在复选框后（使用情景不同，也有文本在前，复选框在后的🌰）。

常用的日期选择器包含以下几种搭配：

按钮用于响应表单中一个或者一组（多个）的操作命令，通过点击按钮，触发相应代表的操作功能。

在表单中，按按钮级别分类，常用的有：主按钮、次按钮、文本按钮。

主按钮：一个页面中，最多存在一个主按钮，决定当前业务流程的的关键节点（🌰：保存/取消，确认/保存）；

次按钮：其功能不像主按钮能够统筹流程的走向，但可用于生成新的子项内容。次按钮是类似于“添加、新建”这样的功能，每一次操作都影响页面内容的增删；

文本按钮：级别较低的行动点，控制范围小。

常用上传文件组件有三种：直接上传（按钮上传）、缩略图上传、拖拽上传（有时与直接上传联合使用）。

以文字按钮或者次按钮作为上传文件的入口。操作流程为：点击按钮，弹出系统弹窗-选择本地文件，确认上传。

另外，有两种本地文件上传的方式：第一种，文件直接上传至系统；第二种，需二次确认是否文件上传。

多用作图片上传，也见于上传固定格式的文件后，展示相应的缩略图（在系统中需事先提供默认缩略图图像，或者可以读取文件的某一页），鼠标悬浮至缩略图上，可对该文件进行更多操作。

通过拖拽文件至上传区域，直接上传，这种方式更直观，体验更好。（拖拽上传文件包含直接上传方式）

无论是产品初期战略层、范围层的工作，还是落地到交互页面设计，需求、功能都是建立在业务场景之上。

由于不同行业的业务目标、流程的差异，需要对用户工作场景、操作习惯、业务目标理解透彻，才能总结出适用的参考规范。

表单与用户交互密切，尤其是在查询表格的业务场景中，需要配合组件来增删改查。

以上操作场景为例，操作流程是：选择筛选条件-点击查询/回车键查询-查看筛选完成的表格数据。

确定流程后，在设计时，首先需要对表单内容进行整合，遵循：直观性、流畅性、合理性原则。

：对表单字段进行优先级的确认，从用户做任务的角度出发，结合用户的操作逻辑，保证内容清晰、直观，尤其是字段信息的内容，需简洁明了、通俗易懂，避免冗余的语句（🌰：大段的话不仅没有必要，而且可能会引起歧义）。

：结构化整体布局，掌控填写节奏，控制展示的表单数量，提升填写过程的舒适性，形成流畅的操作习惯。

：盘点表单信息之间的排列关系，秉持亲密性原则，串联信息，保证内容展示时机和位置的合理性。

在交互设计方面，可以设置栅格，实现表单内容的布局，即便后期增加新的功能，也可以保证整体性、一致性。以下将说明如何运用栅格设计表单：

首先，确定放置表单的面积范围，留出左右间距，运用24栅格（12栅格也可以，这点看个人）和水槽宽度；以水槽的间距作为各个表单组件之间的间距，设定S、M、L三种表单组件的尺寸，从而帮助不同组件进行适配，使表单看起来更规整。

单列的表单，竖型视觉动线的浏览习惯，能够让用户沉浸在填写过程中，减少干扰，有利于提升操作效率，可以称为“直觉型”填写。

但是，PC端屏幕面积大，不能也没必要完全贴合屏幕，那么就会出现表单只占了屏幕宽度的三分之一（甚至不到），的情况，极其不美观，使用起来也很局促。

针对这种问题，根据实际表单容量，在合适的范围内，调整列表宽度尺寸，将表单整体向屏幕中间偏左的位置移动。

双列表单，使用Z字型视觉浏览动线完成填写，优点是节省了屏幕空间，缺点是路径不够流畅，查看过程较为吃力。

虽然双列表单有弊端，但也存在符合双列表单的使用场景。

当需要填写的信息非常多时，如果采用单列表单，那么一屏无法放下，用户在填写信息时需要多次下滑。

在这种场景下，首先，分类所有内容，将具备相似含义的列表信息，按照从左往右、从上至下的组合方式，分为两列。

同时，虽然Z字型相较于单列的竖型填写速度更迟缓，但当表单需要填写的信息实在是太多了，一味的按照直觉操作，容易疲倦，继而出错。

而双列表单操作起来虽然会有点卡顿，但正因如此，能给用户更多时间去思考和揣摩，相对来说，可以降低出错率，这是其优势所在。

选择框和输入框都是表单中出现频次较高的列表组件。

在表单中，选择框通过点击，选择信息。

输入框通过手动录入字符。

相较而言，选择框的操作更轻松，学习成本和误操作率更低。

有利有弊，当使用选择框时，能够选择的信息类别有限，当需要录入的信息丰富多样，无法界定时，就必须使用输入框。

以下围绕最常见的输入框/选择框进行细节的描述，部分内容可以复用在其他相似的表单组件中。

输入框用于输入特定类型的字段。在设计时，会根据情况，设置2-3种输入框尺寸，便于用在不同的场景中。

输入框输入内容的长度最好内置输入内容体量成正比。

如果输入框的长度与可输入的内容体量不成正比，用户在填写的过程中，会产生“能输入这么多吗？”、“填的对不对？”的疑虑。

另外，由于打字录入容易出错，应该尽量让用户做选择，多采用选择框填写表单。

为方便描述，本小节以“输入框”字段代表“输入框和选择框”。首先还是从布局说起。

填写表单前，需查看每个独立输入框的文本标签，告知用户应该录入什么内容，而标签的布局和信息呈现都对用户起着很大的影响。

标签的布局一般分为三种：

左右排列，标签位于输入框左侧，纵向排列的标签均保持右对齐，该类型布局，适用于标签字段较短的情况；如果字段较长，则不推荐使用。

标签位于输入框上方。这种类型的布局首先解决了字段较长的情况，其次，该种布局可以让用户每次快速的向下浏览。

标签置于输入框内。该类型的输入框，可于表单页中的筛选模块，优点在于：省去了标签所占的模块面积，一行可以排列更多的输入框。

另外，在设计表单时，标签和输入框提示内容的文字也有一些细微的区别。

设计时一般会从颜色上区分，实际情况中，很多输入框的内容，具备逻辑判断功能，因此处于输入状态时，框内的文字颜色最深。

单选、复选框、日期选择器、开关的使用频次也很高。

多用于铺开的选项，个数不超过6个，一般会设置一个默认的常用选项。合适的字段和选项间距，帮助用户通过扫视查看内容。

用于对选项的判断（🌰：是或否、开启或者禁用）。

开关按钮在本质上与单选按钮的使用逻辑相似，区别在于，单选按钮是对内容的单一判断（yes/no on/off），而开关常用于大范围的、更高层级对内容的控制。（显示内容/不显示内容）

PS：开关不适用于大片的选项，否则页面会变的密密麻麻，难以阅读和辨识。

以“日”作为基础的选择工具，通过扩展，以日期段，配合时间段使用。

在实际使用过程中， 可以设置常查看的、近期时间段相贴切的设置，例如：7天、1个月、3个月、6个月。

表单中的按钮按类别分类，常见的分为三种：操作按钮、生成子项按钮、tab按钮。

操作按钮在上文有介绍过，在此不再赘述。

与业务联动，通过操作父级按钮生成子项，子项部署相应的内容。

t

指的是，相同类别，不同性质的两个分类，需置于页面顶端，他们控制的页面内容存在较大的差异；

指的是，置于页面某个表单模块上方，用于区分相同性质，不同类别的模块内容，方便切换和对比内容，同时，节省模块内容所占页面空间。

信息设计包括：提示信息、反馈信息、关键信息、全局信息。

提示信息分为两种，即时提示信息和常显提示信息。

即时提示信息出现于，用户点击输入框，信息实时出现在输入框右侧，或者以小气泡形式展示，移开输入框后，提示信息消失。

常显提示信息，一般置于输入框右侧，固定展示，简述需要填写的内容是什么，属于强提示。

系统在可监测的范围内，检测用户所填写内容的格式、内容类型等相关信息的准确性，最常见的是出现在输入框的右侧或者下方，以文字形式反馈给用户。

表单中，有些输入框是必填项，另一部分是选填项，那么可以在必填的输入框前，加上红色星标，以高亮表示，做强提醒，提示用户必须填写；

当表单中绝大部分内容是必填项，建议标注选填项。

如果标注必填项，那么屏幕中的必填*标志会非常的多，间接影响页面整洁度。

而且*通常多用警示的颜色，也会无形之中给用户带来压力和烦闷的情绪。

主要分为三种提示信息：成功提示、警告提示、错误提示。

为了使信息更直观，易解读，会在提示语前面加上与提示语强相关的图标，辅助用户理解。

除了固有的页面表单外，弹窗、抽屉弹窗都是常见的表单呈现方式，与用户的操作、业务的使用场景息息相关。

按照类型可分为

用于选项较少的填写场景。（🌰：简单的弹窗表单、登录表单）

需要花费较长时间输入的表单，具备清晰的流程。把表单按照业务流程拆解为多个步骤，引导用户操作，并且可分多次填写。

表单内容需要一次性完成输入，提交数据量大。高级表单有点类似于分步表单，不同的是，高级表单是按照信息类别进行分割。

弹窗在系统中扮演承载信息的容器的角色。

在弹窗中的表单，以模态形式出现，在有限的面积范围内，聚焦表单信息，以便不被弹窗背后的数据信息所扰乱视觉，专注操作。

有些较严谨的流程，表单填写完毕，将所有内容展示出来，供用户查看，相当于让用户二次确认，有时还需与确认按钮配合，本次填写才能生效。

弹窗能容纳的内容有限，且当使用弹窗时，就不能对之前的页面进行操作了，于是，出现了抽屉弹窗。

抽屉弹窗的交互方式为，从页面右侧向左滑出合适面积的页面弹窗。使用抽屉弹窗，既能与前一页面内容产生交互，又不会影响当前页面的操作。

抽屉弹窗使用灵活，当需要操作的表单内容较多，且与原本页面高密度的发生关联时，建议使用抽屉弹窗平衡“查看”与“操作”。

常态的表单填写页面中，主要需注意两点：表单内容的权重、表单内模块的分割。

先说第一点，表单内容的权重。

表单内容很多时，需分辨内容主次，尤其是一些必填项，应放在较前的位置。

因为用户填写信息的耐心会随着时间增长，等比例的被消磨，所以，将必填项、最重要的内容置于较前的位置，更符合用户心流。

在一些表格页面中，也会出现表单。这里的表单多数是用于筛选用途，尤其是在一些房地产、电商行业场景中，出现的最为频繁，且内容也非常多，有的甚至能占满半屏。

不能将所有表单全部展开。首先应确定使用最多、必须使用的内容，之后，将使用频次低、很少使用的选项收起（需要使用时再展开），这样既节省了页面空间，又能够保证原本的功能不受影响。

当表单特别多的时候，可以将这些要填写的内容分门别类，保证表单页面的组织性、纪律性。

以小标题的形式进行分割，用户每填写完成一个小标题下面的内容， 类似于完成了一项里程碑，明确任务完成的进度，用户也能够通过扫视，大致了解还有多少内容未完成。

小标题可延展设置展开收起功能，能够最大程度的保证在一屏内完成一部分内容的填写。

每个卡片承载，按照实际使用情况和业务需求进行分割和布局，和小标题相似，只是展现形式不同。

人们对分割线所代表含义理解足够深入（🌰：代表的意义就是分割），除了在表单页面，在其他页面里，分割线是使用最广泛、最常见、最基础的模块分割形式（简单粗暴）。

当需要填写的表单内容复杂，并且存在相互的前后关系时，可做减法，分解成一系列的步骤，起到引导用户按照流程完成任务的导航条。

用户需完成当前表单的内容填写，且被系统校验后，进行下一步内容的录入。

通常用于极其长、无法用以上三种方式进行内容切割的、且所有内容关联性非常强的表单。

需充分理解当前表单涵盖的业务，考量权重、前后、级联、层级关系，判断如何在不破环原有表单逻辑的前提下，合理的分割表单内容。

因为跳转页面时，不统一、突变的页面框架，会给用户带来困惑。

举个🌰：其他是整页面，统一分割线分割，而唯独一个页面是用模块分割表单的，同时会显得很突兀，用户会觉得是不是跳错了页面，还会怀疑是不是点错了功能。

所以，无论是哪种分割方式，都必须与系统的页面框架、调性相衔接，保持同一性。

表单中的组件数量很多，以上是我总结的在工作中，B端表单中较为常见的一些，那就先到这里啦，大家寨见～！

🌰：本文中所有图片均作为学习用途，若侵即删～

1.表单设计-掌握表单设计方法（表单体验篇）https://www.zcool.com.cn/article/ZMTIwODQzMg==.html

2.360°表单设计指南，快速掌握「表单」设计知识点 https://www.zcool.com.cn/article/ZMTM4MjkyMA==.html

3.B端表单｜表单的主要分类和相关控件认识

https://mp.weixin.qq.com/s/7V8elMHnIzcVD-_ensBbvg