在B的设计中、表单是我们最为常见的设计内容。下面我们来学习如何做好表单设计这部分内容。
我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
表单是一种用于收集用户输入的HTML元素，通常用于创建用户与网页交互的表单。表单可以包含各种输入字段，如文本框、复选框、单选按钮、下拉列表和提交按钮等。当用户填写表单并提交后，数据将被发送到服务器进行处理。在web开发中，表单是实现用户交互和数据收集的重要手段之一。
在我们的后台系统中、我们表单在70%的场景上都会使用到。采集录入数据信息、编辑数据信息等。如我们SaaS管理平台的学员录入、档案查询、奖励规则设置等。
设计原则是任何一种解决方案的指路灯。我们在表单的设计中需要遵循以下原则、
简洁明了、清晰高效、适应业务、及时反馈。
表单的设计应该简洁明了，避免过多的装饰和元素干扰用户填写表单。
表单中的各个字段和选项应该清晰可见。用户应该能够快速找到需要填写的字段和选项，并且填写过程中不会遇到过多的困难。
在用户填写表单的过程中，应该提供适当的反馈，例如输入验证、错误提示等，以便用户能够及时了解自己的输入是否正确。
我们通常的表单都基本都是由、标签、域、提示、操作按钮这四个部分构成的。
标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解。输入框标签在布局上可以分为
左标签、顶标签、行内标签
。这三种设计在许多情况下可以提高可读性和用户友好性，但也有一些潜在的缺点。
优点
：可读性强、减少用户的认知负担。布局直观、提高填写速度。
优点
：节省空间、减少表单的长度和宽度。视觉层次清晰。
缺点
：可读性有限、对于长标签或复杂内容可读性降低、不适合大部分的场景。
表单的域表示的是一个空间。这个空间里可以是
输入内容、选择内容、选则时间、选择数值、触发交互按钮（上传资料）
等
一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
在我们系统设计里。我是更愿意把按钮放在页面的底部。至于为什么可以看一下、我之前的《按钮的基础设计知识的文章》
除了上面表单的基础知识外，为了我们表单设计的更好我们就需要在细节上下功夫了。毕竟优秀的设计师注重细节的表现的。
最初是因为屏幕显示的原因所以才加的冒号、随着技术的进步。现在可加可不加。系统内统一就行。
输入框的宽度是自适应的、输入框的宽度是有暗示左右的。在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。下图就是典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理，反而容易误导用户对输入金额的判断，造成一种不安全感。
在表单中我们采用多种布局方式。
信息分组、内容列表、标签页、分步骤。
在信息传递上。这集中布局方式本质都是一样的。将信息进行分类展示。来更好效的进行信息的传递和展示。理论支持、格式塔原理
我们如何选则适用那种布局方式呢。很简单需要展示内容的多少。
为了让我们表单的用户体验做到极致、我们还有注意这些交互上的细节。做好这些细节将大幅提升我们的用户体检。
验证用户输入活提交信息是否正确、验证方法有三种、实时、提交后、服务器。因为他们时效性不同所以应用的场景也不同。
错误提示要适用积极地的语言、不清楚的告诉用户存在哪里、要如何修复。
之前好像看过一个什么定律忘了。他的大致意思是，如果系统能处理的问题尽量让系统去处理、不用留给用户去操作。
满足多数人需要的地方放置选择，来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数，加速表单完成过程。
保留用户登陆信息、重复填写内容。例如、之前去医院需要手机登陆的那段时间。在去过一次后。扫完填写信息制药填一个名字、其他信息都带出来了。
我们在满足大部分用户的同时、在某些场景里还要提高额外的输入框给需要的人用。同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。
一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。
从简单问题开始，用户已经很清楚答案了。将不相关的信息按逻辑分组展示。来帮助用户理解。
至于这些的方式的选择、总的来说还是信息呈现多少的不同。单步的转化率更高。但多步却更适合复杂信息的收集。
守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。
作者：彪形大汉pro
链接：https://www.zcool.com.cn/article/ZMTYwNzU2OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
