信息反馈与提示对于表单保证用户正确填写数据非常重要，它对用户输入进行及时反馈，及时告知用户其操作的结果，让用户及时感知不同操作的原因和后果，并及时响应相关操作。

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 选择条目

选择录入是预先为用户提供一定的选择范围百度搜索框下拉【64xl.com人人都会做下拉】，信息反馈与提示：保证用户正确填写数据的重要方式，在规定的范围内选择目标选项进行录入。根据选项类型可分为：

单选、多选、选择器（常用的有下拉单选/多选）、级联选择（多级联动选择）、树形选择、穿梭框、开关。

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. 直接上传

即点击之后可以通过桌面系统弹窗选择并上传文件，多用于数据表格文件、WORD文件等；一般用于不需要预览效果的文件上传，文件上传需要明确文件大小、文件格式，本例将图片和文件上传合并在一个上传控件中。

上传有两种类型：需要手动点击页面上的上传按钮才能完成上传动作和自动上传。

2. 显示上传的缩略图

一般用于需要预览效果的文件上传，选择文件后直接上传。文件上传需要明确文件大小和文件格式，多用于图片、PDF等文件。一般其他交互（查看、删除等）也可以直接赋值给缩略图。

3. 拖放上传

用户可以通过拖拽文件到指定区域进行上传，也可以点击上传。文件上传需要明确文件大小、文件格式。

4.关于控件选择

1. 选择框比输入框更好

选择框为用户提供了可选择的选项，用户只需要点击即可完成数据录入，而输入框则需要用户手动自定义输入，操作复杂度和成本明显高于选择框，因此选择框优先替代键盘输入，一方面简化了操作，另一方面也减轻了用户的认知和记忆负担；

2. 小批量比较优先单/复选框

/ 更适合选项较少（少于 5 个）且选项相似需要比较的情况，另外在要求选项可见性、响应速度快的情况下，也可以优先考虑 /，它可以直接提供可选的选项，直接选中目标选项，提高输入效率。

3. 数量大优先下拉选择

当选项较多，超过10个甚至更多，无法直接下拉展示时，建议提供模糊匹配排序规则，帮助用户提前预测选项的位置或者通过关键词模糊搜索到目标选项；

5. 提示

提示信息是指在输入信息的过程中，提示用户输入状态的辅助信息，提示信息的设计原则是：先预防，后纠错

按照输入流程，将用户输入过程分为输入前、输入中、输入后三个阶段；按照用户信息输入阶段，提示信息可分为输入前的引导提示信息、输入中/后的反馈提示信息三类。前者包括帮助提示和输入提示，后者包括错误提示和反馈提示。

1. 输入前-指南信息

一般是在用户输入数据之前提供给用户的信息，其目的是帮助和引导用户完成数据输入，避免用户在输入过程中出现错误。

1.1 实用提示

在用户填写表单前说明表单内容的提示信息，放置在表单或某个输入域的前面。一般分为全局提示和单个提示。

需要注意的是，帮助文本内容应尽量减少在表单中的显示，不要依赖帮助文本来弥补表单难以理解的缺点，避免冲淡表单的重要信息。帮助文本最适合解释用户不熟悉或需要特定操作和内容的操作和内容，通常放置在输入框旁边。

① 全局提示

全局提示通常位于整个表单的开头，它对整个表单进行解释，包括信息的用途、安全性、保密性等，以消除用户的不信任感。

②单次提示

单个提示对应单个输入域，并且只解释这个输入域，符合格式塔原则，定位精准，方便用户理解。

单个提示还可以采用不同的布局，包括提示图标在鼠标上时的气泡提示、输入框下方的文字提示、输入框后面的文字提示、单个输入框的气泡提示等。

1.2 输入提示

输入提示信息是直接显示在输入项中的占位符，提示某一输入域的内容如何输入下拉框选的内容，当用户输入后，文本框获得焦点后提示文字隐藏，如果是较长的解释性内容，应该放在帮助文本中。

占位符有两种类型：示例占位符和通用占位符。它是一种轻量级的提示信息，相对于其他提示信息，视觉负担更小，占用空间更小，与输入内容更紧密相关。

设计占位符时需要注意：

注 1：有效提示

最好能够以简洁、清晰的方式给出有效的提示信息，让用户能够结合上下文获取信息，帮助其完成输入。

用户在填写表单时最常遇到的问题就是不知道应该按照什么格式填写。比如民族应该填“汉”还是“汉族”，生日应该填“1997-06-11”还是“1999年6月11日”？这里可以提供具体的填写示例，帮助用户理解。

注意：必需

长期的占位符已经培养了用户的使用习惯，如果没有占位符，用户在输入的时候会抱着试试看的态度去点击，会犹豫要不要在这里输入，这样不直接，不明确，对用户很不友好。