01|表单基础理论
一、表单的应用场景
数据录入：账号注册个人信息的填写、新增内容等等
数据校验反馈：账号登录（登录页表单设计属于数据校验）
数据展示：数据库的信息通过表单来向用户展示内容
二、表单设计原则与目标
表单设计目标：高效、准确、一致、安全
表单设计原则
a、减少操作，效率为先
为用户减负为目标，在完成数据采集任务的时候尽量给用户带来最小的操作负担；表单效率是衡量表单设计优劣的重要指标，通过合理的信息输入组件与页面布局和交互方式可以使用户快速完成表单页的信息填写任务。
b、准确传达，目标明确
表单能够让用户快速定位重要信息和目标选项，表单标题、选项和提示等内容准确传达含义，表意明确；不要让你传达的信息产生歧义。
c、保持对话，及时反馈
信息反馈与提示对表单来说是一种很重要的保证用户正确填写数据的方式，对用户的输入及时给予反馈，及时告知用户行为的结果，让用户及时感知不同操作的前因后果，并及时响应相关操作；
d、 安全可靠，操作可控
表单需要有一定的容错性，对用户的错误操作具备一定的包容性，有合理的操作后果保证机制，不至于由于意外的错误操作造成不可控的严重后果，针对复杂表单提供分布或即时保存机制，对不同场景任务提供返回、重置、取消、清空、撤销等容错性功能；
02|表单的基础构成
表单在设计上的结构有：1、标题；2、表单标签；3、占位符；4、表单域；5、提示信息；6、操作按钮；
1、标题
定义：表示用户录入和编辑信息的所属层级，主要位于表单的左上方或者居中位置。
标题分类：
第一类：普通表单中就是对表单输入信息的概括，是典型的表单标题，通常表现为页面标题或弹窗标题；第二类：在信息分组输入的表单中出现的分组标题，表现为信息分组标题，源于对输入信息的分组管理，是对分组字段的概括。
标题三种样式：
纯文字，适用于标题切换模式以外的所有表单标题；
文字+icon，用于分组表单中，对分组进行定位，方便用户快速的查找
文字tab切换，针对用户可以选择不同的种类表单进行填写，常用于用户登录
2、标签
定义：指每个数据输入域前的解释文本，用于告知用户相对应的数据输入字段的具体含义
注意点：文字上要求尽量简洁明了，避免出现有歧义、冗长且难以理解的标签，用词方面尽量贴近用户的使用场景或业务场景，在同一个产品系统内或业务系统内尽量保持相同标签的一致性
对齐方式：顶对齐，左对齐，右对齐
3.表单域或输入域
定义：是构成表单的核心内容，是表单用来采集数据的入口。包含：文本录入、选择录入、上传录入
①文本录入
定义：是表单中最常见的和最基础的信息输入方式，为用户提供提供自定义文本信息的输入接口
优势：灵活性大，允许输入任意类型和数量的字符
劣势：操作较为繁琐，当录入项过多时，造成用户负担，降低表单填写效率
使用场景：适用于编辑的录入场景
a、文本框
使用场景：适用于输入文本字符总数较少的场景
设计注意点：
1、选择适合的长度
输入框的大小应该向用户暗示所需输入内容的长度，所以长度和内容长度需要相匹配，一定程度上可以减轻用户的操作负担；
2. 复合输入框
输入内容需带单位，或可以选择单位，使用特定前/后缀的复合输入框。
3. 特殊格式自动匹配
对于某些特有格式的输入内容，自动匹配内容的特有格式，例如电话号码、密码和银行卡号等；
4. 特殊数值自动提示
对于金融类产品，在输入金额数字的时候，当数据较大的时候，建议自动提示数量级及单位，能够方便用户识别数值，降低出错率。
5. 智能补全
对于一些关联性很强的文本输入，可以通过智能补全的方式来减少用户不必要的文字输入，提高填写速度又能减少出错，例如地址输入。
b、文本域
设计注意点：
1、明确提示限制条件
对于有输入限制的文本输入，给予用户明确的输入提示，增加用户感知，降低用户出错率；
2、文本域自适应
对于多行文本框建议使用可拉伸的自适应高度的文本域，比固定高度的内滚动文本域要好，
②选择录入
定义：是为用户预先提供了一定的选择范围，指定范围中选择目标选项进行录入
分类：单选、多选、特殊的下拉选择器（常用的有下拉单选/多选）、级联选择（多层级联动选择）、树选择、穿梭框、开关
a、单选框、复选框、开关
定义：一般用于选项不多且相对固定的情况，选项控制在6个以内为宜
优势：选项全部被列出来，方便用户查看对比
劣势：占用页面的空间较大，比较适用于选项较少的情况
使用场景：适用于需要优先考虑可见性和快速响应的场景
b、选择器单选择器、多选择器、级联选择器、树选择器
优势：占用空间小，在展开所有选项后，可以按重要程度排列。
劣势：当选项过多时需要滚动，会放慢用户输入速度；不点击下拉，用户不知道选项都有什么，不方便比较。
适用场景：适用于选项个数较多（5个以上）的场景和有默认选项的场景；
c、下拉选择（自定义多选选择器、弹型框选择器、搜索型选择器、表格选择）
避免默认：尽量避免列表设置默认值，除非业务场景中绝大部分用户将选择该默认选项，尤其是必填字段，因为有默认值的表单，用户一般会快速扫描浏览，过程中可能会跳过默认项，进而增加犯错几率；
多项搜索：当下拉选项列表中选项较多的时候建议增加关键字联想检索功能，方便查找目标选项；
提示明确：提示信息要明确，避免模糊的提示文本，让用户明确知道自己选择的是什么；
d、滑块选择（单点、区间、单点间续）
优势：便于用户快速浏览大量的选项，提供流畅的用户体验。
劣势：数值选择具有较强的不准确性，难以精准操作
使用场景：适用于输入结果相对模糊或不准确的业务场景。
e、穿梭框
优势：能够展示更多的可选项，方便用户对比已选项与未选项以及更改已选内容，
缺势：控件较大，选择面板占用空间较大
适用场景：备选项较多且为多选的，需要在多个可选项中进行多选；
③上传录入
定义：为用户提供将本地文件上传到系统服务器上的入口，依据上传方式可划分为点击上传、缩略图上传、拖拽上传三种形式
a、直接上传
即点击后通过桌面系统弹窗选择文件并上传，多用于EXCEL数据表文件、WORD文件等形式；一般用于不需要预览效果的文件上传，文件上传需要提供明确的文件大小和文件格式。这种情况是上传图片和文件合在一个上传控件里。
分为需要手动点击页面上的上传按钮才能完成上传动作和自动上传两种
b、显示缩略图上传
一般用于需要显示预览效果的文件上传，同时选择文件后直接完成上传动作。文件上传需要提供明确的文件大小和文件格式，多用于图片、PDF等文件，一般还可以直接在缩略图片上赋予其他的交互 (查看、删除等)。
c、拖拽上传
用户拖拽文件到指定区域即可完成上传，也支持点击上传。文件上传需要提供明确的文件大小和文件格式。
4、提示
定义：是指在用户输入信息的过程中提示用户输入状态的辅助信息
设计原则：先预防、后纠错
阶段划分：输入前、输入中、输入后
输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示
①输入前-引导信息
定义：一般是在用户输入数据之前就给予用户的信息
目的：帮助和引导用户完成数据输入，防止用户在输入时出错
a、帮助性提示
定义：在用户填写表单前对表单填写内容进行解释说明的提示信息，并将其置于表单或者某一个输入域的前面
分类：全局提示、单项提示
a-1全局提示
全局提示一般位于整个表单的最开始，是对整个表单的解释说明，包括信息的用途、安全性、保密性等，以此消除用户不信任。
a-2单项提示
单项提示对应单个输入域，只对此项输入域进行解释说明，根据格式塔原理，定位精准便于用户理解
b、输入性提示
定义：即占位符，直接展示在输入项中，是对某一个输入域的内容进行提示
分类：示例型、通用型
优势：视觉负担较小，占用空间更小，与输入内容的关联性更强
劣势：鼠标键入后消失，不易记忆
②输入后-反馈信息
定义：反馈提示是在用户输入时或输入后对输入内容进行的反馈，提示当前输入域所填写的内容是否符合填写规则。
目的：应当始终为用户提供适当且及时的反馈，避免用户执行错误操作
设计原则：预先提示，减少出错
①轻量。遵循【告知但不打扰】的基本原则；
②清晰的文案。反馈内容需要明确表达目的及操作后果，错误提示需要说清错误原因及改正方式；
③保持系统中所有相同事件反馈方式一致，利于培养用户使用习惯和心理预期。
④就近原则。反馈出现在操作点最近的地方时，最容易被注意到且容易被操作的。
a、错误性提示
视觉表现：采用醒目的色彩和视觉要素来对比突出。目的只有一个即：引起关注。
位置：指导文字邻近产生错误的输入框，可以更快更便捷的提供改进帮助。
时机：确保在适当时机出现，如果过度使用，会让人沮丧。例如：在用户输入进程中停止提示，确保输入完成才出现。
准确：信息精准，不要让用户产生歧义；例如“用户名填写错误”要提示用户名具体错误的原因“用户名不能添加符号”“用户名重复”“用户名不能超过8个字符”等具体原因，让用户明确修改意图。
b、反馈类提示信息
正确提示：通常不给予任何提示，也可采用图标进行反馈，让用户感受更加直观
错误反馈：当用户录入的内容与规则不符时出现。
警告提示：往往与文本框相结合，当字数超过规则的限制时，给出相对应的反馈
c、校验形式
- 前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。与数据库无关。
- 后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。
d、触发条件
定义：检验的提示信息在什么节点（填写时、失焦时、点击提交时）进行提示
类型：单项触发、提交触发
单项触发-即时报错
定义：单项填写完后或者失去焦点时触发
优点：避免完整输入后才反馈信息，为用户增加犯错成本。
缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改，稍微影响用户体验。
适用场景：输入验证码、注册等功能。
提交触发-输入完成后报错
定义：点击“提交”按钮以后触发
优点：减少后端服务器压力，提高页面性能；
缺点：用户不能及时看到反馈，及时进行修改，如果表单过长的话，一定程度上会影响用户体验；
适用场景：登录账号时检测输入内容是否合理。
5、动作按钮
按钮位置：header区、body区、footer区
1、表单顶部/表单底部
用于放置全局按钮、用户无需上下滑动到固定位置才能对表单进行操作，省时增效
2、跟随表单项
需要滚动条滚动到底部显示操作按钮，一般用于大部分表单都可以一页显示的情况，为了避免编辑后忘记点确定就跳转页面，会给表单有修改是否保存的提示弹窗。
3、分组底部
对每个分组表单进行的操作按钮，常用于只需要查看不需要经常编辑的表单。
03|表单的布局样式
一、常见的表单布局
1. 基础布局
定义：基础平铺是最简单的表单组织形式，将所有需要填写的表单内容项直接罗列在页面上。主要针对表单内容项较少且项目之间无逻辑关系不能按照一定的相关性进行分组的表单。
优势：相对简洁、便于操作，比较适用于完成一个简单快捷的任务；
劣势：表单项数量较大时一次性展示全部信息加重了用户的操作负担，填写效率较低。
使用场景：当需要完成一个简单快速的任务（表单条目数在7个内），比如：输入少量信息即可完成创建、注册登陆表单。
类型：可将平铺方式分为单列平铺和多列平铺；
1.1单列平铺
优势：路径清晰，由上至下，填写效率高、体验好，操作顺畅；
劣势：占用纵向空间。
1.2多列平铺
优势：节省页面纵向空间，信息承载量较大，能够放置更多的控件单元
劣势：“Z”字型的视觉动线较为复杂，填写体验不好，易出错易遗漏。
2. 分组表单
优势：将表单内容进行了分类归组，便于快速定位，能够减轻用户填写表单时的焦虑感和心理压力
劣势：分组标题的添加进一步增加了页面的垂直空间占用
使用场景：适用于表单条目数在7个以上，且表单项之间存在关联关系，具备分类归纳的基础条件
类型：标题分组、卡片分组和标签分组
1.1标题分组
定义：用文字标题对表单项进行分类
使用场景：当表单的数据信息超过7个输入域，同时关联性没有那么强且可以被分组时
设计注意点：分组内设置项要有强关联性，否则不能归为一组；如果表单详情信息过长，可以考虑将锚点定位
1.2卡片分组
定义：在标题分组的基础上给每个分组加上背景做成卡片
使用场景：需要满足数据内容体量很大（7-15个设置项）且超过一屏；关联性更强、数据信息可被分类归纳时，用标题分组不足以给信息做层级区分
设计注意点：一个表单项不要分过多的卡片分组；不能每两项做一个分组，这反而会造成用户视觉压力和操作负担。
1.3标签分组(不太推荐，容易遗漏）
定义：表单数据信息之间没有特定的关联性，可以并列单独处理
使用场景：每个设置项都包含多个输入域，且多个输入域都使用了标题分组
设计注意点：1、为减少加载时间将表单分页展现的情况下，布局就可以采用标签页布局进行展示操作
2、tab标签的填写没有先后顺序的规则，标签页彼此之间没有特定的关联性，可独立去设置
3、根据表单数据信息的优先级进行分类，将优先级高的放在表单前面，优先级低的放在表单后面，或进行折叠收起
具体该如何选择呢？
1、如果每个组之间有逻辑先后顺序，那么推荐使用分步表单。
2、如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位。
3、如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组。
3. 基础分步表单
定义：将需要填写的表单信息按照线性流程进行组织，配备步骤条告知用户完整的流程和进度，在全部步骤表单填写完整后确认信息，流程结束后给予用户操作的结果及反馈
优势：任务流程清晰，明确当前用户目标，减少用户负担；及时的反馈校验，也避免填写完成后才发现中间的表单填写有误，降低用户的犯错成本。
劣势：无法通览全部内容，每一步的回溯成本较高
适用场景：适用于具有明确线性逻辑的任务场景
4. 高级表单
适用场景：内容项复杂，多任务嵌套使用的场景
类型：动态表单、动态表格、折叠面板、弹窗/抽屉编辑等
4.1 动态可编辑表单
特点：表单内容项是不固定的，用户可以按照实际业务需求对某些内容项进行动态增减。
常见形式：有一个固定的表单，通过增减按钮可以设置表单数目，一般动态表单数目≤3，并且每个输入框不需要单独的标题使用
4.2 可编辑表格
特点：和动态表单的交互逻辑基本一致，外观上是以表格形式展示，增减的动态数据数目建议3~6个。
设计注意点：建议条目表单数2~5项时使用，以使得每行内容可被完整呈现。
4.3 折叠面板编辑
折叠面板：适用于表单中明显嵌套子任务的模式，收起状态下只读子任务设置，展开状态则可以对子任务的设置进行编辑修改。
设计注意点：建议条目表单数在6~8项时使用
4.4 规则树
应用于规则编辑场景。适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。
4.5语句式表单
让用户在预设的结构来完成语句，常用于设置、编辑规则类表单，表单读起来更友好更人性化。
二、影响表单布局的要素
内容数量：内容的多少会影响设计所选择的容器、内容布局；如果内容较多，除了布局还要考虑采用分组、分步等形式去有序组织信息。
复杂程度：表单逻辑也是伴随内容的多少而同比增加的，内容少则关系相对简单，内容多则关系复杂。
逻辑结构：常见的有串行结构（各表单内容之间是线性关系）、并列结构（有多组表单，各组是并列关系）、更复杂的甚至有串行与并行嵌套结合的结构。
所处容器：表单内容所处的容器有页面、抽屉、弹窗、气泡，容器所能承载内容的多少也在逐步减少。在设计中我们根据打断感、与上一级关联程度、内容复杂度进行容器选择。
来源页面关联：如果与来源页面关联强，则建议使用弹窗、抽屉等容器，可以停留在之前操作页面上，缺点则是用户操作的沉浸感偏弱；如果与来源页面关联弱且信息量较大，则建议使用页面，同时在页面中填写表单的沉浸感也会更强。
三、如何判断采用哪种布局方式
04|表单的交互样式
表单交互方式：原位编辑、侧边抽屉、气泡卡片、新开页面、浮层弹窗、页面跳转
一、原位编辑
定义：是一种由内容展示演变而来的状态，其编辑内容也为展示内容，单击的时候切换为编辑状态，可编辑内容，属于轻量型的信息采集表单
特点：一般出现在表格或者卡片内，单个的字段展示（例如新建文档标题等）也可能出现，正常情况下就是展示状态，当鼠标悬浮时hover时提示可编辑，点击字段内容或特定操作按钮即激活为可编辑状态。
优势：快捷易操作，随时启用与退出，主流程的操作流畅度高。
劣势：编辑状态较为隐蔽，不宜被察觉，特殊状态才会被触发。
适用场景：适用于输入内容较少，适用于频率较低，同时属于主流程分支的场景。
二、气泡卡片
定义：是一种类似于弹窗的对话框，但是比弹框要轻量很多，属于超轻量的对话框
特点：通常是非模态的，不对主页面流程和操作具有阻断性
优势：简单快捷易操作、主流程的操作流畅度高。
劣势：扩展性不强，承载的信息不易过多。
适用场景：适用于快速编辑和输入的场景。常用于条件筛选的设置，点击或hover后显示气泡卡片内容（建议不超过5个设置项）。
三、抽屉编辑（侧边抽屉）
定义：抽屉弹窗也被称为侧弹窗，相比弹窗，抽屉的侧边弹出的交互方式，其操作成本和用户使用心理负担会小很多，流畅性次于原位编辑与气泡卡片交互但但优于页面跳转。
特点：通常在主视窗的局部位置滑动出现，占用整个窗口高度，抽屉的承载能力大于弹窗，根据数据信息选择弹窗或抽屉，允许承载较长的表单内容。和模态一样，滑出的内容是与上下文存在关系的，允许用户在主视窗中查看参考信息，
优势：承载的信息量有较大的弹性空间。
劣势：由于信息集中在一侧，导致视觉焦点不稳定，如果长时间工作，会产生不平衡的感觉。
适用场景：适用于当前任务流中插入临时任务的场景。
注意事项：如果系统大部分用的弹窗，就优先选用弹窗，如果表单内增加了更多字段，可以换成抽屉弹窗；建议条目表单数>8项时使用。
四、新开页面
定义：新开页面指的是保持当前页面不变，在主页面进行操作后在浏览器中新开标签页用以展示新页面，浏览器停留的页面可以是当前页面也可以是新开的标签页。
优势：页面之间相互独立，互补不干扰。
劣势：用户的焦点丢失，注意力分散（因为系统中大部分的操作在同一个页面中完成）。
适用场景：适用于需要参照一些文档来帮助用户完成表单录入操作的场景。
五、 窗口式表单（浮层弹窗）
定义：是表单交互比较常见的交互方式，也具有较强的信息承载能力，同时拓展性也更强，在原位编辑与气泡卡片无法满足交互时选择弹窗/抽屉交互，用户在不离开当前页面的情况下进行插入性操作，用户也可随时退出操作。
类型：依据主页面交互阻断性，分为模态弹窗和非模态弹窗
1 模态弹窗
定义：以页面对话框的形式呈现，体现页面和弹窗之间的一种层级关系
特点：激活弹窗时，用户不能离开主页面的流程，对主页面的交互具有一定的阻断性，不能继续主页面中的操作，必须关闭弹窗后才能继续主页面的操作。
优势：简单易操作，承载的信息量有较大的弹性空间。
劣势：浮层弹窗给主操作流程造成较强的割裂，降低输入的流畅度。
适用场景：适用于主流程步骤中需要分支任务的场景。
2 非模态弹窗
定义：指的是用户在不离开主页面的情况下，可在当前页面中打开多个浮层弹窗并对其内容进行编辑；
特点：激活弹窗时，用户可以离开当前的主页面及相关流程对弹窗内容进行编辑，同时随时可以回到主页面及相关流程继续操作，和模态弹窗的主要区别是对主页面流程没有阻断性。
优势：同时进行多个操作，阻断性弱。
劣势：学习成本高，容易产生混乱，误操作概率高。
适用场景：适用于多任务处理情况有较高的要求的场景。
六、页面跳转
定义：新页面为当前页面的分支流程，不会干涉用户对于主页面的操作，页面功能是独立的。
优势：信息承载能力强；有利于用户对业务流程有更清晰的认识，从而使得主流程的操作流畅度高。
劣势：输入字段较多，难于给予及时性反馈。
适用场景：适用于特别重要的功能表单的填写场景。
七、如何选择表单交互方式
第一原则：不滥用表单的交互形式
判断依据：关联性和复杂度、内容承载量、内容多少亲密度
具体选择：
1、当信息复杂度低，同时相关性高时，我们可以选择原位编辑/气泡卡片、弹窗的交互方式
2、当信息复杂度高，但关联性也较高时，我们可以使用抽屉、全屏弹窗的交互方式。
3、当信息复杂度高或信息独立时，我们可以使用页面的交互方式。
交互方式的特点：
气泡卡片：承载内容比较少，直观，即见即所得。
弹窗：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。
抽屉：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。
页面跳转：最常用方式，适用于绝大部分的表单，支持构建复杂的表单。
05|表单的设计注意事项
一、表单页面要考虑适配方式
1.1 固定适配
设计需要注意设计时，需要保证最小分辨率能够正常显示，表单中信息宽度固定，不随分辨率变化而变化。该方式适合用于表单页面的适配中。
当采用弱分组布局时，随分辨率变小，数据项自动掉下来，其他保持不变。
1.2 间距适配
和移动端类似，间距固定，组件自适应该适应方式在弹窗、抽屉中较为实用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。
若有收获，就点个赞吧
0 人点赞
