Login Now 前段时间跟几个做 B 端产品的朋友聊天，聊到一个特别真实的感受：网上关于表单设计的规范文章一搜一大把，写得也很详细，但真到自己上手做的时候，还是会不停地纠结——这个方案到底好不好？有没有更优解？我也一直在琢磨这些问题，试了推翻，推翻又试，反反复复。所以这次干脆从表单里最基础的组件——输入框开始，一点点把那些容易踩坑的细节聊透。
输入框到底有多少种状态，远比你想象的多。很多人一提到输入框，脑子里蹦出来的就是“空着”和“填了字”两种。其实真用在 B 端系统里，情况要复杂得多。我梳理下来，至少有这些：未输入、已输入、只读不可修改、系统带入但可修改、禁用、鼠标悬停、输入激活、可清空、加载中，甚至还有展开状态。
系统自动带入信息时，怎么处理才合理？当系统替你填好了一部分数据，输入框通常就进入只读状态。但只读也有两种细分：一种是完全不让改，另一种是允许用户在此基础上修改。怎么区分呢？一般会把背景置灰，如果能改，显示方式就跟用户自己填完一样；如果不能改，连文字都给灰掉，一眼就能看出来这玩意儿动不了。比如一个典型的场景：手动输入男女人数，总人数由系统自动计算——这时候算总数的那个框就是只读不可改的，背景灰掉，光标也进不去，用户立刻明白“这个数不是我填的”。
禁用状态也不是个摆设。那种灰底灰字、看着就按不动的输入框，要传达的信息很明确：这里没你什么事儿，别碰。但很多产品会把禁用和只读弄混，其实逻辑不一样——禁用往往跟权限或前置条件有关，只读更多是数据来源的问题。区分清楚，界面才不会让人困惑。
真正让输入框“活”起来的，是操作过程中的反馈细节。鼠标移上去，边框变个蓝，这是悬停态；点下去，蓝色边框外面再溢出一圈半透明的光晕，光标也跟着变蓝，这就是激活态。别小看这一圈光晕，它能让操作感觉特别跟手，有一种“系统真的在回应我”的微妙感。现在市面上有些产品只做悬停变色，或者只做激活描边，没有把这两种状态区分开，反馈的层次就薄了一层。
加载状态也值得多聊几句。一般只在搜索框里能看到一个转圈圈的小图标，其他地方很少用。但其实加载的细腻反馈特别有用，尤其网络不好的时候，有个加载动画，用户就知道“系统在干活了，不是我卡住了”。更进一步，还可以利用加载状态做功能延展。比如在输入框里放个帮助图标，点一下，系统加载几秒后弹出帮助说明，整个过程很自然，用户也不会觉得突兀。这种用法在 iOS 的 App Store 里就有，感兴趣的可以自己去看看。
可清空状态是另一个高频需求。用户输完一串字，想全部删掉重来，一个个按退格键太费劲。在输入框右侧放个一键删除的小按钮，点一下全清空，光标自动回到输入位置，流畅度一下子上来了，尤其适合搜索和筛选场景。
当输入框“装不下”内容时怎么办？B 端产品里经常会有输入长文本的需求，但输入框宽度就那么大，很多内容被截断，用户看不到全貌，心里就不踏实。这时候可以给输入框加一个展开状态。比如鼠标悬停时，输入框自动向上扩展，把完整内容展示出来，右下角再放个清空按钮，方便随时修改。注意，展开方向最好是从下往上，避免被页面底部卡住，这种细节处理能看出设计功力。
输入框的提示文案，是一门“恰到好处”的学问。分三种：框内提示、框外提示、校验提示。
框内提示别重复标题，要说有用的。很多输入框里面会有一行浅灰色的字，写着“请输入某某字段”，但抬头一看，标签已经写了“某某字段”，这不就是废话吗？遇到这种情况，如果实在没有额外的解释可说，不如直接写“请输入”三个字来得清爽。如果确实需要补充说明，就写得具体点，比如“请遵循 XX 格式输入”，让用户一眼就知道规则。总之，框内提示要么不说，要说就说点标签里没有的。
框外提示里，文本、图标、气泡各有各的适用场景。框外文本提示最常见，放在输入框下方，灰色小字，用来做字数限制、详细解释，甚至放个超链接都很方便。它可以和框内提示搭配使用，一个给简略指引，一个给详细说明，层次分明。当提示文本比较长，一行放不下，又不想占两行空间时，图标提示就派上用场了。一个小问号图标放在输入框旁边，鼠标悬停或者点击，弹出气泡说明。气泡提示适合短文案，一两句话讲清楚的那种；如果内容多，可以考虑用下拉框或者浮层。比如输入手机号时，系统自动弹出历史输入记录，用户点一下就能选中，这就是下拉提示的典型用法，在搜索场景里还能玩出更多花样。浮层提示则适合那种一展开就是一大片标签或者详细信息的场景，但要注意，如果只是纯文本展示，不如直接用输入框展开状态，浮层更适合承载结构化内容。
校验提示别一上来就标红，警告有警告的用法。输入正确时，大多数产品选择什么都不提示，毕竟“没消息就是好消息”。但如果想给用户正向反馈，可以在输入框右侧打个绿色的小勾，看着就舒服。输入错误时，最经典的处理是输入框变红，下方出现红色提示文字。这里有个小建议：红色提示文字旁边不要再配图标，因为颜色已经够醒目了，加图标反而显得拥挤，尤其在表单密集的时候。警告验证是个容易被滥用或忽略的东西。很多人把警告做得跟错误提示一样红彤彤的，结果用户一看到红色就紧张，其实只是“金额超过 XX 元，可能无法享受优惠”这种轻量提醒。这时候不如学学移动端产品的做法，用黄色文字做提示，视觉上没那么刺眼，又能把信息传递到位。让警告回归“提醒”的本意，而不是“你错了”。
字数限制方面，多行文本框大家都熟悉，右下角一个“0/100”的计数器，超了就变红。但单行输入框怎么办？三种方式供参考。一是在输入框末尾直接显示当前字数，超限时数字变红，视觉上很直观；二是在框外用文本提示写清楚字数规则，用户输入错误时，这条提示自动切换成错误校验样式；三是把字数限制写进框内 placeholder 里，比如“最多输入 20 个字”，好处是简单，坏处是没法放其他提示信息了。具体用哪种，看场景——如果输入框本身提示信息就少，框内提示最省空间；如果规则复杂，框外文本更稳妥。
输入框的宽高也不是随便拉一拉，背后有门道。B 端产品业务复杂，输入框的尺寸不可能一成不变。常见的高度有 40px、32px、28px、24px 这几档。我把最大的 40px 和最小的 24px 放在同一个复杂表单里对比，差别很明显：40px 看着大气，但一行放不了几个输入框，页面很容易显得拥挤；24px 小巧，留白空间大，整体透气性好，但文字太小读起来可能吃力。所以，选哪种高度，得看界面的信息密度和用户群体。如果表单字段不多，视觉上可以放松点，大尺寸更舒适；如果信息密集，小尺寸能让屏幕里塞下更多东西，但别小到影响阅读。
宽度设置是很多人的困惑点。当页面需要多列布局时，统一宽度的输入框要么浪费空间，要么挤不下复杂业务组件。怎么破？引入栅格系统，把宽度定义为基本单位的倍数。以常见的 @2x 分辨率屏幕为例，网页设计里常用 8pt 作为基础单位。8pt 对应 32px（因为 1pt=4px 在 @2x 下），所以输入框宽度要是 32px 的倍数，也就是 4 和 8 的倍数，比如 64px、128px、256px 等等。这样设计出来的输入框，无论在哪种列布局里，都能灵活组合，保持视觉上的节奏感，也能适应不同业务组件的需求。原理很简单，就是让所有尺寸都基于一个固定步长递增，而不是凭感觉瞎调。
回头看看，这次聊的都是输入框最基础但也最容易忽略的细节：状态怎么分得清、提示怎么给得巧、字数怎么限制得舒服、尺寸怎么定得合理。这些细节单独拎出来都不起眼，可堆在一起，就构成了用户对产品“好不好用”的整体印象。B 端产品的设计，很多时候比的不是谁 idea 更炫，而是谁在这些密密麻麻的交互点上，把用户的真实需求琢磨透了。输入框只是第一步，接下来还有选择器、表格、弹窗……有机会再慢慢聊。
