表单设计不仅仅是排版不同类型的输入框，明确标注必填字段和非必填字段（哪些表单比较复杂），并添加适当的说明。 还需要需求支撑、嵌套使用场景、考虑用户心理。 模型。 在本系列文章中，我们将学习在使用时如何思考表单与表单之间的交互，从表单的生成到表单在页面上的呈现方式。 先上一篇文章：讲一下表格的基本内容。
表单作为B端产品中最基本的常见组件，也是各类B端产品中出现频率最高的元素之一。 表单设计尤其考验设计者的综合能力和设计细节。 在一定程度上，形态设计的好坏也决定了产品的成败。
当我陷入一堆表单设计的时候，我开始思考，表单设计应该遵循什么样的规则，在设计上如何进行权衡？ 表格应该如何布置？ 表单的要素是什么？ 表单有哪些交互规范？ 超长表格如何设计？
接下来我就和大家聊聊我对表单设计的研究以及日常工作经验的总结。 整理我踩过的坑的目的是为了帮助那些刚刚进入职场的设计师对表单有更好的认识，从而避免工作中出现误区，也希望能为PM们提供一些思路。
如果你认为表单是指一些不同类型的输入框的排版，明确指出必填字段不是必填的，以及哪些表单比较复杂，只要添加适当的描述就可以了。
其实不是，表单设计远不止于此，表单本身也是一个小产品，它还需要需求、嵌套的使用场景、用户心智模型的支撑； 从表单的生成到表单如何在页面上显示，从渲染到使用表单时与表单交互，每一步都需要花很多心思才能把表单做好。
PART 1 形式的基本理论 1. 形式的基本概念
表单的概念并不是互联网上原创的。 在传统行业中，纸质表格占据着非常重要的工具地位；
B端产品为表单添加属性，让每个任务表单都能在动作状态机中流动，实现业务的在线开发和管理。
广义上的表格是指用于数据输入的任何表格。
狭义上来说，在大家更广泛的认知中，表单是一种包含输入框、下拉选择框等常用控件组合的页面。
表单的本质是提交数据，因此凡是收集数据并在收集完成后提交数据的交互式表单都可以称为表单。
2、表格的应用场景
在B端产品中，表单是用户向系统传输、修改数据信息的主要方式，也是系统获取用户数据、响应反馈结果的主要方式。 可以说，表单是人机交互中重要的数据媒介。
想要做好表单设计，首先要弄清楚表单的应用场景。 在商业产品应用平台上，表单的使用场景大致可以分为三类：数据录入、数据验证反馈、数据展示。
3.表单设计原则和目标
1. 表单设计目标
表单设计必须优先考虑减轻用户负担、提高效率、简化填写流程。
另外，表单中组件的选择需要根据具体数据类型和具体业务场景合理、正确地选择，为用户提供高效的数据录入表单，降低用户操作成本、认知负担，提高数据采集效率。设计。 根本目的。
2. 表单设计原则
Jared Spur曾经有过一个经典案例：修改按钮为网站增加了3亿美元的年收入。 这听起来像是一个幻想，但却是真实的。
好的设计如何为商业创造价值，是设计团队一直在思考的问题。 有一点是肯定的，我们用客观的数据和严谨的实验来证明我们的设计原则和设计模式，最大化其设计价值，达到为商业创造价值的目标。
A。 减少作业，效率至上
目标是减轻用户的负担，尽量在完成数据采集任务时给用户带来最小的操作负担； 表单效率是衡量表单设计好坏的重要指标，通过合理的信息输入组件以及页面布局和交互方式，用户可以快速完成表单页面上的信息填写任务。
b. 准确沟通、明确目标
表单允许用户快速定位重要信息和目标选项。 表单标题、选项、提示等内容准确传达意思、清晰； 不要让你传达的信息含糊不清。
C。 保持对话并及时反馈
信息反馈和提示是保证用户正确填写数据、及时反馈用户的输入、及时告知用户行为的结果、让用户感知行为的前因后果的非常重要的方式。及时处理不同的操作，并及时响应相关信息。 操作;
d. 安全可靠，运行可控
表单需要具有一定的容错能力，对用户错误操作有一定的容忍度，并有合理的操作后果保障机制，不至于因偶然的错误操作而造成不可控的严重后果，并进行分发或即时处理。为复杂的表单提供存储机制。 ，针对不同场景下的任务提供返回、重置、取消、清除、撤消等容错功能；
PART 2 表格的基本构成 1. 基本构成
表单的设计结构为：
标题; 表格标签； 占位符； 表单字段； 提示信息； 动作按钮；
2.表格的形式
1. 标题
表示用户输入和编辑信息的级别，主要位于表单的左上方或中央。
关于标题的设计，分为三种风格：
2. 标签
标签是指每个数据输入字段之前的解释性文字，用于告知用户对应数据输入字段的具体含义；
注意事项：文字应尽可能简洁、清晰，避免标签含糊、冗长、难以理解。 措辞应尽可能贴近用户的使用或业务场景，并尽量在同一产品系统或业务系统中保留相同的标签。 一致性。
在制作标签时，我们需要给标签统一的线高和宽度。 因为开发在写这个页面的时候，是把每个元素放在一个统一的类的div或者span标签里。 因此，我们在做设计稿的时候，需要考虑到换行元素，哪怕只有一个字，避免日后的二次设计和开发。
标签的对齐还包括：顶对齐、左对齐、右对齐，本节后面会详细讲解。
3. 表单字段或输入字段
交互输入字段是表单的核心内容，也是表单收集数据的入口点。 输入区域是用户交互最多、对用户体验影响最大的区域。 针对不同类型的数据选择相应的输入方式，对于提高表单操作效率和用户体验大有裨益。
3.1 文本输入
文本录入是表单中最常见、最基本的信息输入方式，它为用户提供了自定义文本信息的输入界面。
根据文本内容的长度，可以分为单行文本框和多行文本字段。 前者适用于输入文本字符总数较少的场景，后者适用于输入文本字符总数较大或不确定的场景。
3.1.1 文本框
结合不同的业务场景和相关经验，不同业务场景下的文字输入有以下几点需要注意的地方：
A。 选择合适的长度
输入框的大小应该向用户建议所需输入内容的长度，因此长度和内容长度需要匹配，这可以在一定程度上减轻用户的操作负担；
b. 复合输入框
输入内容需要有单位，也可以选择单位并使用带有特定前缀/后缀的复合输入框。
C。 自动匹配特殊格式
对于某些唯一格式的输入内容，自动匹配该内容的唯一格式，例如电话号码、密码和银行卡号等；
根据米勒定律（对短期记忆能力的定量研究，他发现人类短期记忆能力的广度是7±2个信息块，记忆信息超过这个范围，很容易出错），通过用户的记忆结构，提高用户的阅读体验。
d. 特殊值自动提醒
对于金融产品，在输入金额时，建议在数据较大时自动提示金额和单位，以便用户轻松识别数值，降低错误率。
e. 智能完成
对于一些相关性较高的文本输入，可以使用智能补全来减少用户不必要的文本输入，提高填充速度并减少错误，例如地址输入。
3.1.2 文本字段
多行输入框在 Ant 中定义为文本字段。 结合不同的业务场景和相关经验，不同业务场景下的文本字段有一些需要注意的点：
A。 明确提示限制
对于有输入限制的文本输入，给予用户清晰的输入提示，增加用户感知，降低用户错误率；
b. 文本字段适配
对于多行文本框，建议使用可拉伸的自适应高度文本字段，这比固定高度的滚动文本字段更好。
从用户体验的角度来看，多变的文本框适合各种用户的阅读习惯。 同时，由于固定文本框往往带有滚动条，导致页面上会出现多个滚动条，给用户的操作带来一定的麻烦。
在包裹表单字段的行内信息时，我们需要给出水平字宽，以及上下左右的间距。 超出的部分是自适应高度还是显示滚动条需要标注出来，并且必须指定最小和最大行数。
3.2 选择条目
选择入口是预先为用户提供一定的选择范围。 在指定范围内选择目标选项进行录入。 根据选项类型，可分为：
单选、多选、选择器（常用下拉单选/多选）、级联选择（多级级联选择）、树选、穿梭框、开关。
A。 单选按钮、复选框
一般用在选项不多且比较固定的情况下。 建议将选项控制在6个以内，这样用户就能一目了然地看到所有内容。
单选按钮只能是其中一项，一般默认选择一项。 多选框可以选择一个或多个选项。
b. 转变
使用开关控件的条件是选项的性质是互斥的（例如：是和否、开和关、开和关等）；
C。 选择器
按照选择类型可以分为单选择器、多选择器、级联选择器和树选择器四种类型。
优点：占用空间较小，展开所有选项后可以按重要性顺序排列。
缺点：当选项太多时，需要滚动，会减慢用户的输入速度； 如果不点击下拉，用户就不知道选项是什么，也不方便比较。
适用场景：适用于选项数量较多（5个以上）的场景以及默认选项的场景；
3.2.1 下拉选择
即下拉列表，允许用户从预定列表中选择一个或多个选项，为用户提供了更多选项数量的可能性。 请注意此处的一些特殊类型的选择器。
A。 自定义多选选择器
允许用户自定义添加选项，例如用于允许用户添加自定义标签的场景。
b. 弹出选择器
列表选项过多，下拉面板的显示体验较差，可以选择弹出选择器的弹出框来承载更多的数据信息。
C。 搜索选择器
用户有不同程度的记忆。 有些用户可以通过主动搜索来获取选项，有些用户可以直接在弹窗中选择选项。
d. 表单选择器
单维度的信息无法让用户做出选择。 当需要向用户呈现更多的数据信息，让用户做出合理的判断时，可以使用能够展示更多数据信息的表格选择器。
针对选择性进入，结合不同的业务场景和相关经验，提出以下针对不同业务场景选择性进入的设计要点和使用建议：
避免默认：尽量避免在列表中设置默认值，除非大多数业务场景中的用户都会选择默认选项，尤其是必填字段，因为带有默认值的表单，用户一般会快速浏览浏览，可能会跳过流程默认项目，从而增加出错的机会；
多重搜索：当下拉选项列表中选项较多时，建议添加关键字关联搜索功能，方便查找目标选项；
提示清晰：提示信息要清晰，避免模糊的提示文字，让用户清楚地知道自己选择了什么；
3.2.2 日期/时间/日期时间选择器
日期时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间间隔；
日期时间选择：相当于将日期和时间两个选项组合起来，在同一个选择器中选择（年月日时分秒）； 相当于两个下拉框之间的切换。 第1步先弹出日期选择框选择年、月、日，选择日期后点击“确定按钮”旁边的“选择时间”切换到第2步的时间选择框。
时间段选择：为用户提供直观的方式来浏览和选择日期、时间、日期时间或日期范围。
3.2.3 级联选择、树选择
两者都是分层选择，不同的是选择级联选项后，框中会显示有级别的内容选项，并且只能选择最子集选项（例如：广东省/广州市/天河区，不能选择选择广东省，因为之前的选项只是导航到最子集）
树选择框显示单个选项的内容，不显示级别，但可以选择任意级别（例如：天河区）
如何选择？
层次不深，2-3级之间。 一级节点数量约为5个节点，二级和三级节点数量相对较少。 使用具有树结构的树选择器。 层次不深，2-3级之间。 一级、二级、三级节点数量较多。 使用树选择器垂直显示不利于用户搜索。 建议使用单独显示节点的级联选择器。
3.2.4 滑块选择
滑动输入设备，显示当前值和可选范围，并通过拖动滑块在固定范围内进行选择。
滑块选择的交互功能使其成为设置某个维度（例如音量和亮度）的强度级别时更好的解决方案。 根据数值特点，可分为单点连续滑块、区间连续滑块和单点连续滑块三种类型。
优点：方便用户快速浏览大量选项，提供流畅的用户体验。
缺点：数值选择误差性强，难以准确操作
使用场景：适用于输入结果比较模糊或者不准确的业务场景。
用户可以通过在连续或不连续范围内滑动锚点来选择合适的值或范围。 在精度要求不高的场景中使用“连续滑块”，操作更加灵活便捷； 在精度要求较高的场景下，可以配合“数字输入”使用。
3.3 步进器
也称为计数器，它只允许输入自定义范围内的标准数字值。 向上和向下按钮不是每次点击 ±1，但可以设置为每次点击 ±N。 N 可以是任意数字或小数。
3.4 穿梭箱
穿梭框与列表选择的区别在于，它把备选和选中放在选择面板的左右两列中，并且可以非常直观的方式移动两列中的元素来完成选择行为。
两种特殊类型的穿梭箱：
带有排序穿梭框：允许用户将常用或重要的元素优先排序，并自由调整元素的顺序。 树/表穿梭盒：元素的展示形式不同，采用不同的穿梭盒形状。 树形结构使用树穿梭盒，表格数据使用表穿梭盒。
3.5 评级
当需要对内容进行评级时使用。
3. 文件上传
文件上传为用户提供了将本地文件上传到系统服务器的入口。 按照上传方式可以分为点击上传、缩略图上传、拖拽上传三种形式。
1.直接上传
即点击后，选择一个文件，通过桌面系统的弹窗上传。 多用于EXCEL数据表文件、WORD文件等； 一般用于不需要预览效果的文件上传。 文件上传需要提供明确的文件大小和文件格式。 在这种情况下，上传图片和文件合并在一个上传控件中。
分为需要手动点击页面上传按钮完成上传动作和自动上传两种
2.显示缩略图上传
一般用于需要显示预览效果的文件上传，同时选择文件后直接完成上传动作。 文件上传需要提供明确的文件大小和文件格式，多用于图片、PDF等文件。 一般情况下，可以直接对缩略图赋予其他交互（查看、删除等）。
3.拖拽上传
用户可以将文件拖放到指定区域完成上传，也支持点击上传。 文件上传需要明确的文件大小和文件格式。
四、关于控件选型
1.选择框比输入框好
选择框为用户提供了替代选项。 用户只需点击即可完成数据录入，而输入框则需要用户手动自定义输入。 操作复杂度和成本明显高于选择框，因此优先选择选择而不是键盘输入。 一方面简化了操作，另一方面也减轻了用户的认知和记忆负担；
2. 小批量比较首选列表/复选框
单选/复选框比较适合选项较少（5个以内）的情况，当选项相似且需要强调时，可以先选择单选/复选框。 另外，当要求选项的可见性和快速响应时，还可以采用单选/复选框优先，可以直接提供待选选项，直接选择目标选项，提高输入效率；
3.量大优先下拉选择
当选项较多，超过10个，甚至更多时，在显示无法直接下拉的情况下，建议提供模糊匹配和排序规则，方便用户提前预测选项位置或模糊搜索目标选项通过关键词；
5. 小贴士
提示信息是指用户输入信息过程中提示用户进入状态的辅助信息。 提示信息的设计原则是：先预防，后纠错
根据输入过程，将用户输入过程分为三个阶段：输入前、输入中、输入后。 根据用户信息输入阶段，提示信息可分为三类：输入前引导提示信息、输入中/后反馈信息。前者包括帮助提示和输入提示，后者包括错误提示和反馈提示。
1. 入场前——引导信息
一般来说，它是在用户输入数据之前给予用户的信息。 目的是帮助和指导用户完成数据输入，防止用户在输入过程中出错。
1.1 有用的提示
在用户填写表单之前解释表单内容的提示信息，放置在表单或某个输入字段的前面。 一般分为全局提示和单项提示。
需要注意的是，表格中应尽量减少帮助文字的内容，不要依靠帮助文字来弥补表格难以理解的缺点，避免淡化表格中的重要信息。 帮助文本最适合解释用户不熟悉或需要特定的操作和内容。 放置位置通常靠近输入框。
① 全局提示
全局提示一般位于整个表单的最开头，是对整个表单的说明，包括信息的使用、安全、保密等，以消除用户的不信任。
② 单次提醒
单个提示对应于单个输入字段，并且仅解释该输入字段。 根据格式塔原理，定位准确且易于用户理解。
还可以为单项提示选择不同的布局。 提示布局有四种：提示图标在鼠标悬停时的气泡提示、输入框下方的文字提示、输入框后面的文字提示、单机输入框的气泡提示。
1.2 输入提示
输入提示信息是一个占位符，直接显示在输入项中，是对某个输入字段内容的提示。 当用户输入文本框时，获得焦点后提示文本隐藏。 如果是较大的说明性内容，应该放在帮助文本中。
有两种类型的示例占位符和一般占位符。 归属感是一种轻量级的提示信息。 与其他提示信息相比，视觉负担较小，占用空间较小，与输入内容相关性更强。
设计占位符时需要注意：
注1：有效提示
提示文字应简洁、清晰，给出有效的提示信息。 让用户获取上下文信息以帮助他完成输入。
用户填写表单时最常见的问题是不知道填写什么格式。比如民族填写“汉族”还是“汉族”； 生日填写“1997-06-11”或“199年6月11日”。 这里可以提示具体填写示例，以帮助用户理解。
注：必备
长期的占位符培养了用户的习惯。 如果没有占位符，用户在输入时会带着尝试的心态点击，并想知道是否应该在这里输入。 不够直接和清晰。 表示非常不友好。
2.输入后-反馈信息
反馈提示是用户输入时或输入后对输入内容的反馈，提示当前输入字段填写的内容是否符合填写规则。
系统状态的可见性包括“用户知道自己在做什么”、“系统在做什么”、“系统处于哪一步”、“用户当前的链接”等。适当、及时的反馈始终提供给用户，以便用户不会执行错误的操作。
反馈机制的设计原则：提前提示，减少错误；
①重量轻。 遵循【告知但请勿打扰】的基本原则；
②文案清晰。 反馈内容需要明确表达目的和操作后果，错误提示需要说明错误原因和纠正方法；
③对系统中所有相同事件保持一致的反馈方式，有利于培养用户的使用习惯和心理预期。
④就近原则。 当反馈最接近工作点时，反馈最为明显且易于操纵。
反馈提示包括错误提示和反馈提示。 前者特指错误型信息提示，后者可以包括错误型反馈提示、警告或正确型反馈提示。
2.1. 错误提示
用户在填写表格时难免会犯错误。 错误消息让用户知道无法继续，并告诉他们如何纠正它。
2.2. 反馈提示信息
反馈提示一般有三种状态：正确、错误、警告。 其中，正确状态通常不会给出任何提示，也可以使用图标进行反馈，让用户感觉更直观； 反之，当用户输入的内容不符合规则时，会给出错误提示。 警告状态往往与文本框结合在一起，当字数超过规则限制时，给出相应的反馈。
2.3. 验证表
在产品设计中，我们还需要了解反馈信息的验证方法。 验证方式主要分为：前端验证和后端验证。
2.4. 触发条件
触发条件是指会提示检查提示信息的点（填写时、失焦时、点击提交时），分为单次触发和提交触发。
单次触发 - 即时错误报告
触发提示的条件是每项填写时，需要验证的输入项较多，且某一个输入项有先决条件，会影响下一步的输入；
提交触发器-输入完成后报错
触发条件为统一验证，填写表单并点击“提交”。 用于表单体积小、错误率低的表单页面，给出所有不规则的表单信息。 根据具体的提示内容，可以是单个提示，也可以是一条提示。 可以全局提示；
关于如何选择反馈信息的位置，我们将在下一篇文章中详细讲。
6. 操作按钮
在传统意义上，操作按钮是指通过“结束”来表达操作的按钮。 常见于一些比较简单的表单场景，是对表单内容的反馈，包括提交或不提交。
关于按钮的分类及各种状态：
并且对于每个按钮，它可以分为两种状态：常规和禁用。 The of the state is that the by the form is not to the click. Also note that only one main is for a page.
1.
In more forms, that , only , and have the "End " are in the area, body area, and area .
1.1 Form Top/Form
It is used to place the . The in the two are the same, but the of are . The at the top of the form is by . The is that the user does not need to slide up and down to a fixed to the form, time and . When the top is by up the page, the is at the of the .
1.2 form items
It is to the bar to the to the . , it is used when most forms can be on one page. In order to avoid to the page after and to click OK, there will be a pop-up to save the on the form.
1.3 Group
The for each form is often used to only view forms that do not need to be .
2. Main
the main is by on the of form items in the form. There are two : and .
When there are few form items, less than 3, the main a , and when there is data entry, the main is , which is easy for users to , and , it is also a kind of for user ;
When there are many form items, more than 5 items, or when there are items ( and non- items exist at the same time), the main a .
when there are many form items, both and exist at the same time. If the of is , all items must be non-empty to the main . At this time, the of the main is not easy to be by the user. , it is easy to cause for users, and they don't know how to fill in to the main . Using the can the for the to , so the of when is more for this multi-form item .
3. How to the and of the
Form are into and . that form , such as , save, or , are , while , reset, and other that allow input are .
If the in the form be , we will them and try to the style of the . It be noted that in the book "Web Form ", and have been . of .
From the test of order, level, and , the show that among , A has a time and is more in tasks. B, where take the eye time, is the to line up to the left of the line of sight, than for them.
As can be seen, it is to state the path to . the main with the input field will the time spent out the form. , if there is no , A is the best .
8. Micro
In , the micro- in the form is also very , it is a label, a , or a text, or a text... the must be clear and easy to , and at the same time, it is to the of the user. the , Make and more .
概括
The is very long, thank you for your in . In the first part of the form , we talk about the basic of the form, to help you.
the space is too long, we leave the three parts in the next one.
Next issue : basic of forms: and forms of forms
参考：
1. "Web Form "
2. link: (: Ant)
3. Form needs
4. Form
5. "Ant Form "
This was by @三原设计 on is a , , is .
The title comes from, based on the CC0
The in this only the , and is a only space .
