表单设计中，对于单选框、复选框等控件，很明确必须跟随内容自适应处理

既然要错落有致，那么要如何做呢？

表单设计中，对于单选框、复选框等控件，很明确必须跟随内容自适应处理。但对于输入框、选择框等组件你是否也会产生困惑，是定宽处理还是跟随内容更好。

实际业务中，大部分输入框所需填写内容都存在理想长度，输入框的宽度暗示填写内容的长度，合理的宽度帮助减少用户的焦虑，给用户带来安全感。在单项排布时也要尽量考虑用户的观感，通过设置合理的默认宽度尺寸，让设计师快速搭建出观感舒适又给用户降低焦虑的页面。

反之，如果输入框不受限于暗示，则应保持长度一致。

这里需要特别注意：

保证暗示效果的同时，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。

2）模度值

上文提到错落有致，那么如何错落有致呢？有什么规则吗？

设定模度值的优势：

表单的外观视觉虽呈现错落有致，但在内在逻辑的约束下做到了“有秩序的不一致”。不仅解决了暗示用户输入量多少的问题，更是避免了设计师在面对表单时不必要的主观和感性，表单设计由规律可循，同时开发人员也更容易地做到对设计稿的精准还原，也可以提升工作效率。

梳理产品中常见的表单类型

根据你所设计产品的具体业务情况，梳理出常用的表单类型，根据这些表单类型的的长短来进行具体输入框尺寸的制定；

需要注意：

B端项目中表单的应用场景十分丰富且复杂，针对每一种场景去定制一个输入框尺寸是不现实的，在页面实际设计中就会显得页面很凌乱。所以，我们特别要解决的问题就是如何让输入框在单个状态与组合状态下都尽量保持较好的对齐状态，同时输入框的尺寸还有规律可循。

3）设定表单模度值

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

如：基准输入宽度XS = 104px，以其倍数 (n) 加上 (n-1) 倍的间距 (8px) 为规则，分为5种不同尺寸 (XS、S、M、L、XL)。那么我们就得到了S: 104px*2+8px=216px; M: 104px*3+16px=328px……五种尺寸（如下图）。

当然，我们在设计时，最小原子的宽度不一定设置为104，也可根据业务情况将最小原子XS设置为可容纳6个中文汉字，然后在通过如下规则进行换算。

Ant design表单设计研究结论建议的5种高频的宽度需求区间，以尺码类比分别是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

反向验证模度值

接下来可以通过反向验证第一步我们的罗列出的常用信息内容，是不是都能找到对应的尺寸适配，如果不行的话就调整我们最小输入框的尺寸，使大部分的填写内容都能有合适的尺寸。