第一部分 | WEB表单设计

在B的设计中、表单是我们最为常见的设计内容。下面我们来学习如何做好表单设计这部分内容。

1、什么是表单

我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。

表单是一种用于收集用户输入的HTML元素，通常用于创建用户与网页交互的表单。表单可以包含各种输入字段，如文本框、复选框、单选按钮、下拉列表和提交按钮等。当用户填写表单并提交后，数据将被发送到服务器进行处理。在web开发中，表单是实现用户交互和数据收集的重要手段之一。

1.1、常见应用场景

在我们的后台系统中、我们表单在70%的场景上都会使用到。采集录入数据信息、编辑数据信息等。如我们SaaS管理平台的学员录入、档案查询、奖励规则设置等。

2、表单设计原则

设计原则是任何一种解决方案的指路灯。我们在表单的设计中需要遵循以下原则、简洁明了、清晰高效、适应业务、及时反馈。

2.1、简洁明了

表单的设计应该简洁明了，避免过多的装饰和元素干扰用户填写表单。

2.2、清晰高效

表单中的各个字段和选项应该清晰可见。用户应该能够快速找到需要填写的字段和选项，并且填写过程中不会遇到过多的困难。

2.3、适应业务

应该符合我们的业务应用场景、满足我们的业务需求。

2.4、及时反馈

在用户填写表单的过程中，应该提供适当的反馈，例如输入验证、错误提示等，以便用户能够及时了解自己的输入是否正确。

3、表单构成

我们通常的表单都基本都是由、标签、域、提示、操作按钮这四个部分构成的。

3.1、标签

标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解。输入框标签在布局上可以分为左标签、顶标签、行内标签。这三种设计在许多情况下可以提高可读性和用户友好性，但也有一些潜在的缺点。

3.1.1、左标签

优点：可读性强、减少用户的认知负担。布局直观、提高填写速度。

缺点：不适合长标签、对业务场景适用性差。

3.1.2、顶标签

优点：节省空间、减少表单的长度和宽度。视觉层次清晰。

缺点：需要额外的间距、纵向空间利用率不高

3.1.3、行内标签

优点：节省空间、简洁易于阅读

缺点：可读性有限、对于长标签或复杂内容可读性降低、不适合大部分的场景。

3.2、域

表单的域表示的是一个空间。这个空间里可以是输入内容、选择内容、选则时间、选择数值、触发交互按钮（上传资料）等

3.3、提示

避免废话、给出结果以及处理方式。

3.4、按钮

一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。

在我们系统设计里。我是更愿意把按钮放在页面的底部。至于为什么可以看一下、我之前的《按钮的基础设计知识的文章》

4、设计细节

除了上面表单的基础知识外，为了我们表单设计的更好我们就需要在细节上下功夫了。毕竟优秀的设计师注重细节的表现的。

4.1、表单里标签后的冒号要不要加

最初是因为屏幕显示的原因所以才加的冒号、随着技术的进步。现在可加可不加。系统内统一就行。

4.2、如何设定输入框的宽度

输入框的宽度是自适应的、输入框的宽度是有暗示左右的。在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。下图就是典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理，反而容易误导用户对输入金额的判断，造成一种不安全感。

4.3、表单布局

在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。在信息传递上。这集中布局方式本质都是一样的。将信息进行分类展示。来更好效的进行信息的传递和展示。理论支持、格式塔原理

第二部分 | 表单交互

为了让我们表单的用户体验做到极致、我们还有注意这些交互上的细节。做好这些细节将大幅提升我们的用户体检。

1、错误提示

验证用户输入活提交信息是否正确、验证方法有三种、实时、提交后、服务器。因为他们时效性不同所以应用的场景也不同。

错误提示要适用积极地的语言、不清楚的告诉用户存在哪里、要如何修复。

2、更智慧、高效

之前好像看过一个什么定律忘了。他的大致意思是，如果系统能处理的问题尽量让系统去处理、不用留给用户去操作。

2.1、简化输入智能默认

如果可以带出来的信息可以尽力带过来。

满足多数人需要的地方放置选择，来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数，加速表单完成过程。

2.2、个性化默认

保留用户登陆信息、重复填写内容。例如、之前去医院需要手机登陆的那段时间。在去过一次后。扫完填写信息制药填一个名字、其他信息都带出来了。

2.3、及时新增

我们在满足大部分用户的同时、在某些场景里还要提高额外的输入框给需要的人用。同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。

3.1、从简单开始到创建逻辑分类

从简单问题开始，用户已经很清楚答案了。将不相关的信息按逻辑分组展示。来帮助用户理解。

3.2、单步、多步、单列、多列

至于这些的方式的选择、总的来说还是信息呈现多少的不同。单步的转化率更高。但多步却更适合复杂信息的收集。

单列和多列基本也是一样的道理

第三部分 | 最后

守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。