发布时间：2020-8-13 分类： 电商动态
关于中端和后端产品的表单设计，我相信这篇文章一定会对您有所帮助。
前言
表格是数据录入和信息提交的常见形式。网络和移动都很常见。它们通常由各种元素组成，例如标签，输入项和提交按钮。
中端和后端产品为企业服务。由于业务的复杂性，表单通常呈现许多领域，混合类型和强大的专业性。需要考虑更多设计。
通过我自己项目的经验，本文引用了antd的内容，并提取了一套适用于中端和后端产品的表单设计规范。我将在这里分享，希望能给你一些帮助。
从用户的角度看一下表单
从提交开始到完成，用户的行为和思维是什么逻辑？
1，表格的整体视图
当用户看到表单时，他们需要快速了解一些常规情况。例如：用于什么形式？你需要填写多少东西？多久时间？当您对表单有一些了解时，请开始下一步。
2，单项查看，填写，检查
当用户启动项目时，他或她将经历查看，填写和检查的过程。
查看：您想为这个单品输入什么？怎么操作？有什么要求吗？
填写：在理解要写入的内容后，尽可能轻松地填写要输入的值。
检查：填写完成后，需要检查是否正确。
3.全面检查
填写完每个项目后，将其作为一个整体进行检查。你错过了吗？你装满了吗？如果整体检查正确，请再次提交。
4.提交，修改，成功提交
由于某些输入项需要由后端判断，因此某些输入项可能不符合首次提交后的条件。此时，您需要再次修改它并提交它，直到提交成功。
为用户设计表单
了解用户的需求，我们需要设计和优化表单的用户需求。
首先，为了方便用户的整体观点
1.一步一步
具有更多字段的表单需要分解为几个步骤。用户可以直观地看到步骤的编号，名称和描述。
2，分组
在同一步骤中具有共性的字段可以分组为一个组。组和组由分界线分隔，组标题可以反映组的内容。
3.排版
用户的视线是从上到下。为了便于阅读和美观，标签需要右对齐，输入区域宽度均匀。
其次，为了方便用户查看，填写，签入单项
1，文字标签
文本标签负责输入的解释。需要正确设置文本标签以帮助用户理解输入。
2.输入提醒
当文本标签不足以准确描述条目时，需要输入提醒。输入提醒以接收更多文字。
常用的输入提醒
上图中输入建议，输入提示和输入帮助的提醒级别很弱。通常，当弱提醒足以表达提醒时，不需要使用强提醒。
3，良好的默认值
建议在某些输入项被推断的概率很高时为其设置默认值。一个好的默认值将节省用户填写的时间。请注意，不正确使用默认值也很容易对用户造成干扰。
4.结构化格式
某些具有固定格式的输入值需要以格式化形式显示，例如银行卡号，ID号，手机号，货币，百分比等。结构化格式可以极大地避免用户的错误，使页面更美观，更易于阅读。
5.可选/必需
表单的输入通常包含必填字段和可选字段。必需或可选，您需要明确告知用户。通常，需要添加*符号，然后标签后跟一个可选的方式来指示该选项。
6，黑暗提示
使用通用认知以较弱的方式向用户提供提示。如果需要限制字符数的文本输入区域，可以使用以下方法：通过比较输入的字符数和数字的上限来提示用户。
7.验证反馈
验证用户输入值并给出反馈。
检查内容：是否为空，类型格式是否正确，是否符合业务逻辑
验证方法：前端验证通常使用正则表达式，后端验证需要考虑业务逻辑
触发检查：前端检查通常使用即时检查和焦点离开时的检查，后端检查通常在提交之后。
反馈类型：正确，错误，警告（有风险点但可以通过验证）
反馈方法：
在项目附近输入文字
图标上的浮动图层
全球反馈
三，为方便用户的整体检查和提交
提交后，执行后端验证，不符合业务逻辑的内容需要有反馈内容，便于用户定位和修改。
表格的常见组成部分
常用组件的内容不是本文的重点，不再详细解释。有兴趣的用户请到antd了解。
结论
之前我做过一个版本《表格规范》，在发送之后我得到了很多反馈，并且我也做了一些改进。我希望这个表单规范能够鼓舞每个人，欢迎反馈。
下次我打算写一下图表的规格时，它主要涉及数据可视化的内容。
原型下载链接：https://pan.baidu.com/s/1g70dMVlZuDjBHIjq9YjbCA
本文最初由@流风发表。未经许可，禁止复制。
该地图来自PEXELS，基于CC0协议
