一张图教你如何设计表单

原创晏菲 Alibaba Cloud TxD

表单设计老生常谈，但又是使用频繁且经常遇到各种问题的一种组件，尤其在B端业务中，涉及到大量的云资源开通、配置升级等表单填写与校验，因此设计师经常要面对复杂程度不等、信息多样的表单场景，那设计师该遵循怎样的原则、如何组织内容、在布局与页面空间问题上如何取舍，以及如何确保不同屏幕尺寸下都能保证表单信息的功能清晰度与设计美观度？本文就结合这些问题做重点介绍与比对。

构成

表单通过多种输入组件组合完成信息编辑，用来确保用户按照系统要求录入信息或进行应用设置。表单的构成主要有以下元素，根据操作的内容项和提示重要程度进行组合使用：

布局

表单的布局形式一共有六种：顶对齐、左对齐、右对齐、内联标签、图标标签、浮动标签；在B端混合云业务中经常使用到的有其中3种：顶对齐、左对齐、右对齐。

相信在很多设计研究中，大家都了解过关于顶对齐、右对齐、左对齐的体验实验数据，其中「左对齐」浏览速度慢，眼动耗时最长，那耗时长就一定体验不好吗？是不是跟我们所倡导的高效原则冲突？在复杂表单中哪种布局方式更优？下面我们就结合三种表单布局所适用的场景和优缺点进行简要对比：

（图片源自网络）

1 顶对齐

适用场景：不同长短标签且60&以上标签字数很长，有国际化需求。

优点：浏览和处理效率较高，标签长度弹性大，多栏下不影响信息的清晰度。

缺点：占纵向空间。

2 左对齐

适用场景：50%左右标签字数8字以下；适用于平台中即有复杂数据场景也有小容器的简单数据场景的统一体验。

优点：文字按阅读视线对齐，符合阅读习惯，节约纵向空间。

缺点：填写速度慢，标签长度和输入框长短弹性相对较小。

“这里要注意的是，B端业务设计中，【缓慢完成率】并不总是一件坏事如果表单数据复杂且安全性高，可以故意减缓用户的填写速度，来确保填写的准确性。”

3 右对齐

适用场景：仅适用于【标签简短】且内容较少的情况，如数据过滤区。

优点：标签和输入框之间距离固定，有明确的关联，节约纵向空间。

缺点：左边缘参差不齐，整体可读性低，标签长度和输入框弹性小。

布局的响应式

针对B端控制台类表单布局的类型，为了保证在不同屏幕大小下用户操作的体验，我们对表单响应式规则同样进行规范设定，以混合云设计中1200的视窗宽度为例，减去导航248px，再减去页面两侧边距24px，则段点宽度为904px。

多栏表单中，最多4栏，默认标签与输入域左右布局（在label字数60%以上多于8个字时，可采用上下布局）当断点小于904px，标签与输入域则自动改为上下布局，确保内容阅读的舒适性，列数也会随宽度响应同时改变。
单栏表单中，标签与输入域左右布局，当断点小于904px，标签与输入域则改为上下布局，同时固定输入框最大宽度600px，达到最大值时不随页面拉伸而拉伸，右侧留白即可。