背景
表单作为基础通用组件，也是在B端设计中出现频率最高的元素之一。
使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用，看似简单，但是在实际业务使用中却有着无数可推敲的细节冒出来，常常给设计师造成较多的困扰。
例如：
-
表单标签是顶部对齐、右对齐还是左对齐？
-
表单按钮放在页面哪个位置体验会更好呢？
-
确定按钮是放在左边更好还是右边更好？
-
表单宽度是整齐划一还是与输入预期一样错落一致？
-
必填项是否要显示“*”？
-
占位符该怎么设计？
-
单列布局还是多列布局？
-
表单的校验时机、校验规则与校验样式有哪些？
本次复盘将针对以上问题进行整理。
关于表单
表单的概念
参考各大厂组件库概念，基本都将表单概括为：具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
首先，要明确一点，结合工作中实际运用，此次复盘以Ant Design 为基础，是将表单作为一种组件进行的整理。
image
表单的构成
image
一个常规的较为完整的表单包含：
-
标签：解释表单项的含义或要录入/选择的内容等；
-
占位提示：容器(输入框)中的次级提示文字，提供与输入内容相关的提示或例子；
-
校验规则：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
-
基础组件：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等多种类型，是形成表单的核心内容；
-
提示信息：帮助用户理解操作表单，有引导信息（说明提示）和反馈信息用户操作提示两种；
-
按钮：当用户完成信息录入时，按钮能够对表单内容进行校验、提交或者进行下一步操作；
-
帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。
1、表单标签是顶部对齐、右对齐还是左对齐？
image
在设计表单时到底是左对齐、右对齐还是顶部对齐呢？这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表：
image
经过项目中多次反复实验，以及与产品经理、设计师多次讨论后，我们定义了一个原则：表单内容较少时，使用弹窗，且为了减少竖向排版空间，采用右对齐方式；表单内容较多时，使用抽屉弹窗，采用顶部对齐方式。
image
2、表单按钮放在页面哪个位置体验会更好呢？
按钮的位置、顺序、组织方式、视觉强调程度是用户寻找按钮的线索，通过警告色可引起注意，避免误操作，准确的文案则能够预告按钮的执行结果。按钮设计的目标是指导用户采取我们希望用户采取的行动，尽量帮助用户快速找到需要操作的按钮，并了解执行该操作的结果，同时尽可能避免误操作。
设计策略：应将按钮放置于用户浏览路径中，便于被用户发现，并且应尽量靠近其所控制的对象。
设计指导原则：使用经典的“F”型或"Z"型视觉引导模型。
仅有表单时建议采用“F”模型，按钮位置跟随内容在左；当表单被包含在某个容器中，则建议使用“Z”模型，将“确认/提交”等行为放在右侧视觉终点处。
image
3 、确认按钮在左还是在右？
关于顺序，最常见的疑问是确定按钮应该在取消按钮左边还是右边，这是一个争论已久的话题。在弹窗中，确定按钮和取消按钮的顺序在各设计体系中都不一样，下图是操作系统三巨头：Apple、Google、Micrisoft 的方案。三巨头证明了两种主次顺序都能被接受，只要在系统中统一即可。
image
此处依然基于Ant Design 的设计原则，将规范定为：左对齐从左往右阅读，右对齐从右往左阅读；
image
4、表单宽度是整齐划一还是与输入预期一样错落一致？
4.1 表单宽度
表单组件我们暂且称为表单项，每个表单项都可以由三种方式去呈现宽度，即
1. 定宽；
2. 跟随内容自适应；
3. 根据空间自适应。
其中 CheckBox、Radio 等组件我们很明确必须跟随内容自适应处理。但涉及 input，我们就会陷入两难境地：定宽 or 自适应？如果定宽，定多宽？
根据我在业务中设计稿案例的研究以及我自身的经验，常见以下情形:
image
可以发现当我们进行想当然的等宽、或根据空间自适应时，很容易造成这些不尽如人意的情况，或造成页面大量空间残缺的错觉，亦或是无脑自适应带来的夸张可怕效果。
在大部分情形中，跟随空间自适应易造成 input 极其附属的元素展示非常不稳定，我们都不希望产品实际上线时呈现以下效果。
image
实际业务中，大部分 input 所需填写内容都存在理想长度，input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。m
image
4.2 我们怎样去考虑表单宽度
参考 Ant Design 的设计原则，将规则定为： 在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时。****倡导进行合理的定宽。
如下对比图所示，右图错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体，但左图过度的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。
image
4.3 设置字段宽度梯
我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验，其中4.0系列分享的文章中总结到其经过对十几个业务线梳理，将组件宽度定义了5中高频的空间尺寸，分别是： XS（80~160px）、S （160280）、M（280360px）、L （360px~480px）、XL （480~560px）。根据原理，我们可以假设原子宽度XS为100，那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸（间距暂定8px情况下得到：S=208px、M=316px、L=424px、XL=532px），通过此计算方式也是用来解决视觉对齐规则，如下图所示：
image
经过一定量的设计稿模拟测试，在各复杂度的组合input和单input混排场景下都可以看到实际效果得到显著改善。
image
image
总的来说，表单设计把握好两个核心点：
1. 暗示填写内容长度；
2. 表单项布局排列效果；
5、必填项是否要显示“*”
通过合理的信息输入组件与页面布局和交互方式可以使用户快速完成表单页的信息填写任务。
例如，必填选项与非必填选项标示问题：
-
当全部为必填项时可是否以不用标示？
-
当必填项数量占比极大，“*”号较多是否会会给用户造成视觉干扰？
-
当必填项比重不大是否还需要“*”？
这里给出的建议是根据业务场景和用户习惯具体分析，不少设计系统在必填项较多时会建议去掉“”，但是我在业务中跟产品经理沟通过后，决定尊重用户已有习惯，用“”区分必填项和非必填项，否则用户在填写完成后，无法快速判断哪些是必填项哪些是非必填项。
image
5.1 特殊情况
当然了，不同情况下的运用当然也有所不同，例如：用户在登陆时的认知，通常用户在登陆时输入项如用户名，密码等信息，而且此些项也基本是必填项，在这种认知的基础上，即使不出现也不会造成任何理解性问题，那么作为精简原则来说，通常可以去掉。
image
6 占位符提示怎么设计
占位符有示例型占位符和通用型占位符两种。也可以算是一种轻量化的提示信息，与其他提示信息相比，视觉负担较小，占用空间更小，与输入内容的关联性更强；对于复杂的表单输入，可以使用占位符对用户做规则提示，减少用户输入错误的几率。
image
7、单列布局还是多列布局？
【单列布局】
优：视觉路径清晰，填写效率高，体验好；
劣：占用纵向空间。
【多列布局】
优：省空间，能够放置更多的控件颗粒；
劣：视觉路径模糊，填写成本高，填写易出错。
单列还是多列会收到表单内容、框架大小等影响，此项设计师可根据实际情况自行判断。
image
8、表单的校验时机、校验规则与校验样式有哪些？
8.1校验时机
-
输入的时候实时校验，一般 onChange 触发
-
离开焦点的时候校验，一般 onBlur 触发
-
输入完成、继续操作（保存/提交/下一步）时进行校验；
image
8.2 校验规则（rules）
校验规则大致可分为参数、说明、类型、默认值等，校验规则可使用组件默认规则，也可以进行自定义；
- 默认规则
- 通过自定义的操作来触发校验，自己调用 api 触发
名称是该规则名称，说明则是对该规则要校验的具体内容，可以通过参数类型得到具体的值“值”，再对具体的“值”进行规则约束，例如"min",规定"numebe≥10"，则表示最小值为10；一个表单通常会有多个规则约束，具体需要根据业务情况进行分析。
image
设计参考
1、整齐划一？不如错落有致。| Ant Design 4.0 系列分享 https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
2、我的按钮究竟该放哪儿！？| Ant Design 4.0 系列分享 https://zhuanlan.zhihu.com/p/109644406
3、大厂高手出品！中台系统设计指南：表单体验篇 https://www.uisdc.com/middle-form#
4、B端设计组件：表单 http://www.woshipm.com/pd/4910764.html
网友评论