b端-表单

表单

表单的重要性

表单作为基础通用组件，用于创建一个实体或收集信息；在用户界面中无处不在，如：用户注册登录页、支付页、用户反馈页、共享信息录入等不同类型的表单。决定了最关键的界面中交互的成败。是完成目标的最终也是最要的阶段。

目录

一、表单内容排布：简单、分步、分组、标签页

二、标签的对齐方式：左对齐、右对齐、顶对齐

三、必选样式：带星号、不带星号

四、输入框长度：整齐划一、错落有致

五、排列与布局：固定宽、自适应

表单类别：第一时间告诉用户此段落的表单的大致内容

表单组件：包含了输入框、下拉框、计数器、日期选择器、开关、单选框、多选框、上传、穿梭框等

表单标签：帮助用户快速理解每一项字段的作用

占位信息：使用通用的认知提示并且以较弱的方式呈现给用户，用户填完信息即消失。占位提示不能替代标签，如果没有表单标签用户将无法在提交表单前检查他们所填写的信息

帮助信息：让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

按钮：当用户完成表单信息录入时，按钮能都对表单进行校验或提交。

校验：对用户信息录入内容进行校验并给出对应的错误提示。如：内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则，分别是使用即时校验（失焦即校验）和点击提交按钮以后最终校验。状态分别为错误、警示、成功。

一、表单内容排布：基础、分步、分组、标签页

表单根据内容的多少和关联性可以分为基础表单、分步表单、分组表单、标签页表单，以提高信息录入效率为目标可用不同的形式。

1.基础表单

字段内容较少，7个以内，可直接平铺展示。

2、分步表单

字段内容较多，根据业务进行分组，如果有逻辑上的先后关系，可以利用步骤条告诉用户完成的流程和节点，每个流程都有明确的结果反馈，并以提交为最终。分步减少了用户的填写负担，降低了出错率。

3、分组表单

当内容较多，相关性较强时，使用弱分组-区域内分组较为适合；

当内容较多，相关性较弱时，可以使用卡片分组。

分组后可以使用锚点定位；快速定位到内容区域。

4、标签页

字段内容较多，根据业务进行分组后，没有很强的相关性，可以采用标签页的形式。

如果判断使用哪种排布？

字段内容较多，根据业务进行分组后，没有很强的相关性，可以采用标签页的形式。应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。

注意事项：

表单内容数量 <7 项，不建议分组；

表单内容数量 7~ 15 个建议分组；

表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样式。

二、标签对齐方式：左对齐、右对齐、顶对齐

表单设计时采用左对齐、右对齐还是顶对齐？不论哪种对齐方式都有相对的利弊，需要根据实际业务场景采用不同的对齐方式。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表

1、表单标签顶对齐

标签顶部对齐的方式是浏览和填写效率最高的一种，不足点就是会占用较多的纵向垂直屏幕空间；此外应当注意每组表单标签和输入框与其他字段组的间距，避免层级区分不明显的问题。

2、表单标签右对齐

标签放在输入框的左边右对齐。其优点是减少了占屏幕的高度，并且标签与输入框的距离比较近，所以填写表单的效率较高。不足点是由于表单标签的字数不可控，会造成左侧参差不齐的问题，导致可读性不高，用户在查看表单时比较费劲。

3、表单标签左对齐

标签放在输入框的左边左对齐。表单标签和输入框的字段距离较远，用户从左到右浏览的时间变长，是填写和浏览效率最低的对齐方式。但是，如果业务需要用户对表单放慢速度并谨慎填写，左对齐会减少部分用户的出错率。

三、必选样式：带星号、不带星号

表单设计时大多数设计师都习惯性使用红色星号表示必填字段。但当必填字段多余选填字段时，红色的星号会带给用户一些恐惧感，它增加了出错的风险并降低了表单填写的效率。因此在表单设计中，当必填项多于非必填项时，隐藏红色的星号标记，，通过暗提示标记可选项的形式来帮助用户识别。

表单中视觉噪音越少可读性越强，因此当必填项多于非必填项时用非必填字段提示用户会更好。

四、输入框长度：整齐划一、错落有致

输入框的宽度不应该自适应，而需要根据填写内容的长度来定，减轻判断负担。

设置字段宽度阶梯

Ant_Design设定104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合 input 和单个 input 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终得到如下5种宽度尺码和对齐关系。

通过对比可以发现，错落有致的对齐方式更加舒适。

五、排列与布局：固定宽、自适应

表单在设计时一般有两种适配方式，一种是固定适配，一种是间距适配。

1、固定宽

设计时保证最小分辨率能够正常展示，表单中信息宽度固定，不随分辨率变化而变化。在笔记本的小屏幕下左对齐并定宽效果还不错，但是当你把页面呈现在较大显示器下，这时候页面右侧又会呈现出大面积的空白。

2、组件自适应

间距固定，当分辨率变大时组件宽度变大，虽然页面没有大面积空白但组件宽度变大导致视觉范围变大，阅读效率变低。当一行有多个输入框时，分辨率变小，组件宽度变小会出现下面这种情况。

3、将关联性强的字段分组

当页面的宽度足够大时，可以将一个区域中字段较多、并且有关联性字段进行分组。这样不仅有利于空间布局上的利用，还可以通过做字段之间的关联性帮助用户更好的理解。将非结构化字段分组为几个结构化的集合跳高表单的可用性。

参考链接

https://ant.design/components/form-cn/

https://element.eleme.cn/#/zh-CN/component/form

https://www.uisdc.com/middle-form

https://www.ui.cn/detail/585466.html?nopop=1