• 上篇文章表单设计如何选择对齐方式后，再来说下表单中设计如何定义输入框的长度，实际设计过程中，设计师们处理长度方式也是五花八门，经常会遇到抉择问题：宽度固定 or 宽度自适应？定宽的话应该定多宽？自适应的话，应该内容自适应还是随着空间自适应？
• 
  
• 

①宽度固定

长度定太短：内容上扩展性太差，无法同时满足大段信息展示。

长度定太长：输入框当只填写一两个字符，像1000平房子里只住了一个人，总觉得的空落落的，视觉效果不佳。

②自适应问题

当输入框长度随着显示框空间大小变化时，总是会出现一些不稳定的情况：错位、换行...

所以我们该怎么考虑定义宽度？

我们设计的过程中，一味的追求排版的整齐划一反而给自己增加了很多心里的负担。如下图，左边过度的对

齐，整体感官上给人截断的暗示，右侧是不是少点东西没有显示出来，反观右图反而整体视觉呈现上更加和

谐，内容和空间结合更像一个整体。

该如何减少使用者的心理负担？

每当使用者对表单进行填写或者选择时，看到字段标题时，心理都会产生对所填信息的预期，大概我要填些

什么。比如填写所在地时，如果预留的宽度很长，使用者就会产生疑问：我该填浙江杭州呢？还是详细地

址？实际产品要求前者就够了，客观上给使用者心理上造成负担。如果涉及到商品金额填写时，不仅容易误

导输入金额的判断，而且还会给公司利益带来损失。

所以使用者的预期内容都存在理想长度，理想的输入框的宽度会对使用者产生一定的心理暗示来减轻使用者

的心理负担。然后对常见的字段类型进行穷举，按照填写内容的理想长度大概进行分类，最终按照长度区间

分成：

超短（XS）：用于短数字、超短文本

短（S）：适用于较短文本输入，如个人信息（姓名、电话、邮箱等）

标准（M）：默认输入框长度，适用大多数情况

长（L）：适用较长文本输入，如网页地址、标签组等

超长（XL）：适用超长文本输入如正文（描述信息、备注、摘要、介绍、备注）、长链接等

考虑到更复杂的场景和混排输入框的情况，让页面呈现的内容更加有序、和谐自然，通过倍数+间距的方式

去兼顾组合输入框的对齐问题，以得到5种尺寸的对应关系，方便设计执行和技术开发。

假设最小单位XS=a，单位之间间距=b，最大单位XL=5a+4b，即：
XS=a，S=2a+b，M=3a+2b，L=4a+3b，XL=5a+4b

最小单位a等于多少比较灵活，取决制定的规范设定，最少情况满足3-4汉字字符+图标的长度+安全弹性空

间即可，核心在于不同宽度之间的关系，并非数值。

总结

1.表单长度能暗示填写内容的长度，合理的长度暗示能减少使用者的心理负担

2.合理设置不同宽度表单之间的联系，可以减少设计师的设计成本，快速搭建合理舒适的页面。

最后，求求了~大家别卷了，要么点个赞再卷。

Powered by Froala Editor