表单宽度应该如何定义？
全文 1800 字左右，图文阅读需约 5 分钟，
本篇文章观点来源于（Golevka），再次总结分享，希望对各位有所帮助。
表单设计作为基础通用组件，在我们的各类设计场景中是出现最高频的元素之一。
无论从登录页的基础表单，还是到复杂的分组或分步表单，都是我们经常会用的控件和模块，对于表单的基础控件的分类和使用方法，相信大家都已经很熟悉了，这里不多赘述。
今天想和大家聊聊一个，平时可能会忽视但实则有些重要的问题——表单的宽度应该如何定义？
我们可以先看看一些实际案例：
可以看出，我们通常碰到的表单设计可以由三种方式去呈现宽度：
1. 固定宽度；
2. 空间自适应 ；
3. 内容自适应（CheckBox+Radio+Data/Time-picker）；
那么问题来了：
1. 简单粗暴的空间自适应从视觉上会让用户心理负担会很重，区域跨度太大，重点任务不能很好的视觉聚焦；
2. Input定宽排版，解决了解决焦点的问题，但出现了另一个问题就是造成页面大面积留白，出现分割和残缺的错觉，也会给用户一种每个表单的内容很相似，不能直观的区分表单类型；
面对这类问题，Golevka倡导进行合理的定宽，核心原因以下两点：
1. 跟随空间自适应易造成 input 及其附属的元素展示非常不稳定，会出现以下缺失或过度的问题。
2. 其实在实际业务中，产品经理一般都会给出每个表单的字段数量限制，这就给我们一个input框的间接理想长度，Input的宽度应该向用户暗示需要输入的内容长度是多少，来减少判断负担。
从下图也可以看出来，右侧的错落有致会比左侧整齐划一更舒适，更有呼吸感，
左侧过度的对齐会给用户感觉右侧缺了一部分，没显示出来。
当然错落有致必须得有个规则，无规矩不成方圆，也没法系统的沉淀出设计规范去延展，
我们的目标就是让表单设计有规律的错落有致，这时候就想到了【栅格系统】：
它的原理就是将空间自动计算分割成12/24栏，每一栏则是最小单位，再用最小单位组成不同类型宽度的容器，
这样出来的页面呈现会给人一种秩序美的感觉。
有了这个思路，解决这一问题的核心关键是让组合Input 和单个Input 对齐概率最大化，同时不同行的 input 宽度差值可以呈一个固定规律。
我们就可以先确认最小单位的Input框长度了，Golevka给出的小小宽度刚好是可以满足4个汉字的Selection 和 9999.00 的Number input，以Ant Design 视觉规范推导即等于 104px。
然后设定 104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合 input 和单个 input 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终我们得到了如下5种宽度尺码和对齐关系。
经过一定量的设计稿模拟测试，在各复杂度的组合input和单input混排场景下都可以看到实际效果得到显著改善。
上述的最小宽度104px这个数值，其实也是根据实际业务场景来决定的，没必要生搬硬套，这一套宽度的关系才是核心，原子宽度无论数字怎么变，都可以快速得出新的5种尺寸。
还有个问题就是上述的表单设计规范现只适合基础的、个数少的业务场景，对于B端复杂的表单场景还是得根据前端的栅格系统来规范，对于Input长度和排列效果肯定是有些问题妥协的。
下面我们上手一个B端场景的复杂表单优化练习（实际案例）
请看下图
各位可以给自己2-3分钟先思考下有哪些问题，可以怎么优化...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
发现问题：
1. 所有的Input宽度为两个尺寸，有些字段和输入框长度不匹配；
2. 布局排列左侧过度对齐，右边留白太多；
3. 表单信息简单粗暴的堆积在一起，且满屏必填的“*”号，用户心理负担重；
分析问题：
1. 采用表单的原子宽度为104px，根据公示推导出其他宽度大小；
2. 对于组合表单间距定为8px，排列表单间距定为24px；
3. 堆积的表单进行分组和锚链接展示；
4. 相关性强的表单进行合并；
解决问题：
总体来说，比优化前整体页面效果和交互优化上有了很大提升，现在的页面是理论输出的效果，
别忘了还有一项重要的表单验证环节，和产品经理确认现在的Input宽度是否能承载实际业务场景的字段数量，有问题的表单需要特殊处理下就Ok了。
总的来说，表单设计把握好两个核心点：
1. 暗示填写内容长度；
2. 表单项布局排列效果；
通过设置合理的默认宽度尺码和描述关系，可以让业务设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面，事半功倍。
本次分享如果各位同学觉得有用，可以帮忙点点【推荐】哦，你们的鼓励也是我搬砖的动力。
THANKS~
