我以后的文章可能都会尽量短一些，太长了大家阅读下去需要很大的耐心，而且我也要攒一个能长篇大论的大话题才能开始动笔，周期也会比较长。

这篇文章讨论微信表单的一个体验点。

在展开讨论之前，我们先来统一认识一下表单元素，如下图，我们今天讨论的内容只涉及到表单中的：标签和提示语、以及提示语下的输入栏

不知道你们有没有和我相同的苦恼，在填写内容较多、较长的表单时，经常会忽略某个输入栏的填写，直接提交，报错后才意识到漏填了。

如上图，这是微信忘记支付密码的流程，你需要选择一张银行卡找回支付密码，大家一眼望去，觉得在填写卡信息页面，哪个输入栏是需要填写的，哪个不需要填写呢？

我经常会忽略卡号和姓名输入栏、仅填写了证件号和手机号就想要点击下一步提交。卡号太像卡类型了，而姓名一栏我下意识的认为已经默认本人姓名不需要再填写了。

虽然卡号输入栏的上方文字提示用户：请输入持卡人本人的银行卡号；姓名一栏也有提示：请输入完整姓名，但用户往往不是按照设计者的思维逐行阅读，而是按照自己的经验来快速扫描。而且微信在绑定银行卡页面已经灌输给了用这样的思想：不需要你填写的，我们会置灰。下图为微信绑卡流程中的页面

在微信添加银行卡页面中，持卡人一栏是默认填充且无法修改的，字体用了灰色；而填写银行卡信息页面的有效期、手机号是需要填写的，提示语也用了灰色；卡类型是根据用户填写的卡号来自动识别的，字体用了蓝灰色，但因为卡类型没有用箭头提醒用户此处可以修改，我下意识的认为它是不可修改的。

也就是说，微信的表单有以下特点：

• 需要用户手动填写的输入栏，提示语为灰色字体
• 默认填充且无法修改的内容是灰色字体或黑色字体，如图一中的证件类型、图二中的持卡人

• 根据已填写的内容自动识别且可以修改的，蓝灰色字体
• 用户手动填写的后的内容是黑色字体

用户需要在灰色字体中区分哪个是默认填充的，哪个是需要手动填写的；也要区分哪个黑色字体是可以修改的；甚至会下意识的以为蓝灰色的字体是不可修改的。字体状态多且字体颜色混乱，这无疑会加大用户犯错的几率。

支付宝的这个页面更加人性化，持卡人是默认填充的、卡类型是自动选择且无法修改的，黑色字体；卡号、有效期、手机号这些需要用户填写的输入栏的提示语为灰色字体；用户手动输入的文字也是黑色。即：

• 需要用户手动输入的输入框提示语为灰色字体

• 默认填充、自动选择且无法修改的内容为黑色字体

• 用户手动填写后的内容也是黑色字体

用户有可能会误以为默认填充、自动选择的黑色字体是可以进行修改的，操作后却发现不能。

还有一种解决方案是京东的表单，将默认不可修改的内容特别设计并显示在顶部，下面的表单是上下结构，标签和提示语合并显示在上方，下方需要输入文字的区域没有提示语干扰，用户也不用区分哪里是默认填充的，哪里是需要填写的.

最后，我们针对表单做一个小总结：

左右结构的表单会让用户以为这是填写过的，容易忽略，而上下结构的表单会更加方便用户阅读，也能更加清晰的让用户知道哪里需要填写。

如果你的表单是左右结构的，那么建议你不同的状态用不同的字体颜色来区分，例如：

• 需要用户手动填写的内容、或者自动选择可以修改的内容都用黑色字体
• 提示语用灰色字体
• 而默认填充、自动选择且无法修改的内容就使用灰蓝色

这样一来是不是就更加清晰，容易分辨了呢，但切忌颜色太多，反而适得其反。

最后，欢迎大家关注我的微信公众号，你们的关注是我持续写作的动力。