表单克制 | 设计交互 | 做产品

表单克制

表单是产品里流失最狠的地方。每加一个字段，都要问一遍：这个信息现在就必须要吗。

你会遇到的现象

• 注册转化很低，但说不清卡在哪一个字段

• 用户填到一半退出，回来全没了要重填

• 提交后一次性弹出五条错误，还不告诉你哪个框错了

好的表单只有三个要求：只收必要的信息、让人知道下一步做什么、填错了能轻松改回来。

先砍字段

• **逐个问：不填会怎样。**答案是「销售想知道」「以后可能用得上」，就砍掉或者挪到后面。

• **能推出来的别问。**城市可以从 IP 猜、行业可以从公司名查、来源可以从链接参数带。

• **能延后的延后。**先让人用起来，在真正需要那个信息的那一步再问，转化率完全不同。

• **必填项越少越好。**非必填的字段直接考虑删掉——一个大家都跳过的字段，留着只是增加视觉负担。

标签放哪

标签位置和对齐方式直接影响填写速度，四种各有各的场合。

形式优点代价与适用 左标签表意明确，省纵向空间在移动端这类狭长空间里不好用。多用于 web 顶标签对齐舒适，省横向空间纵向空间利用率不高。多用于移动端 行内标签最省空间一开始输入标签就消失了，用户容易忘了这个框是填什么的。只适合注册登录这类字段极少的场景 左对齐 / 右对齐左对齐读得快，右对齐填得快视线从右对齐标签移到输入框更短。表单填写用右对齐，信息陈列用左对齐

左对齐标签的视线移动大约要 500 毫秒，比右对齐长得多。所以详情展示用左对齐（好读），需要快速填完的表单用右对齐（好填）。

出错怎么办

容错要分三个时机做，缺一个用户就会卡住。

操作前 输入框里给示例 比如「1 开头的 11 位」

操作中 实时校验，就地报错 错在哪个框就标哪个框

操作后 保存、撤销、清空 改错了能退回去

最糟的做法：提交后弹一个「请检查输入」，不说哪一项错了 用户只能一个个试

实时校验要注意时机：用户还在输入时就报红会很烦人，通常在离开这个输入框之后再校验。

五个省事的做法

• **给默认值。**最常见的那个选项预先选中，多数人直接过。

• **自动填充和建议。**输地址时给下拉建议，输公司名时联想。

• **长表单分步。**超过十个字段就分步骤，配步骤条，别让人一屏看到底。

• **分组。**把相关字段放一组，加个小标题。个人信息、账号信息、联系方式各一组。

• **手机上调对键盘。**填手机号弹数字键盘，填邮箱弹带 @ 的键盘。这一条几乎零成本，但很多产品没做。

做完之后有三个指标可以判断好不好：完成率、错误率、填写时间。三个数一起看——完成率高但填写时间长，说明用户是硬着头皮填完的。

接着看

常用组件有哪些 输入类组件的完整清单：下拉、级联、日期、步进器、上传，各自适合什么。

列状态清单 输入框比别的元素多两个状态：校验失败和只读。写之前列出来。

提示语怎么写 错误提示的文案怎么写。说明当前状况加引导措施，别只说「格式不正确」。