【字段|Web表单设计——你不知道的冷知识】_傻大方

按关键词阅读：

编辑导语：在产品设计中，细节之处有时隐含着许多值得思考的地方。Web表单界面设计便是如此，比如标签设计中，哪种标签对齐方式更好？标签末尾又是否需要加冒号……设计师应该如何解决这些细碎的问题？本篇文章里，作者就Web表单设计中的“冷知识”进行了总结，一起来看一下。
字段|Web表单设计——你不知道的冷知识
文章插图
当我们设计Web表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。
例如：在表单界面Label（标签）和 Input（输入框）上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等……
以上这类问题看起来并不影响用户完成任务，很久以来也少有人关心这些细微之处会不会对用户有什么影响。
以至于，我表达想写一篇探究这些细节的文章时，同事会偷笑说：你都开始研究标签末尾要不要加冒号了吗……太冷了——真是个冷知识！
确实如此，这些偏门、细碎的内容，鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是：“冷知识虽然冷，但有用”。用我了解的这些表单设计冷知识：启发你的冷思维、引出你的热思考。
话不闲聊，我们开始讨论第一个问题。
一、标签末尾要加冒号吗有个表单细节不知道你有没有想过，标签末尾是否要加冒号？
这个问题在我前团队发生过激烈争论，有同事说：“不要加，占用间距，而且没人会留意它……”,也有人说：“要加，从含义上讲，冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联…….”。
字段|Web表单设计——你不知道的冷知识
文章插图
听起来好像都有些道理，那到底谁更对呢！
首先，我们追溯一下 Web 发展史，早期可访问性核对清单中通常坚持要标签带冒号，因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单。
而随着技术发展，Web表单使用“label”标签（tag）可以做正确的标记，那么屏幕阅读器就能通过标记（markup）把标签（label）和相应的字段对应起来则无需再借助冒号。
不过在客户端又有些意外！曾经 Windows Vista 指南中明确要求使用冒号， Mac Aqua 也有此要求但规则会稍灵活一些。
这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难，桌面环境不会直接显示代码。也是这个历史原因，造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉，直到今天客户端的表单依旧延续这一规则。
字段|Web表单设计——你不知道的冷知识
文章插图
通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别，如今的屏幕阅读器技术已转变为识别标签的底层代码，无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了。
那从情感角度分析标签带冒号的是否对用户体验有影响呢？
回到最开始，我和同事们的争论……
先简单说下答案，无任何影响！
在《Web表单设计·创建高可用性的网页表单》中，作者（卡罗琳·贾雷特）曾经做过大量的表单测试，最终证明从未有一名用户谈论冒号是否出现，即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。
从以上两个角度不难发现，无论是从技术发展还是情感体验，都证明可不必要求表单带冒号；因为可用性访问清单不再有这样的要求，用户研究也证明几乎没有人会留意表单冒号是否出现。
这样的结论，看似表单带冒号是失败了……但这并不妨碍它作为一种习惯或传统延续至今，无论在客户端还是Web设计系统中仍然常见。例如：苹果电脑的Mac系统，国内阿里的Ant Design Web设计系统。
因此，得到以下几点建议：