2023年Web表单设计-你不知道的冷知识

Web表单设计——你不知道的冷知识当我们设计Web表单时，往往用最直觉的设计阅历本能驱动我们去解决一些看似在界面设计中最简洁的问题，但每每到微小之处，又会有很多疑问从细节中冒出来给我们的设计造成困扰。

例如：在表单界面Label（标签）和Input（输入框）上下还是左右排列合理、Label要不要加冒号、输入框究竟多宽合适等等

以上这类问题看起来并不影响用户完成任务，很久以来也少有人关怀这些微小之处会不会对用户有什么影响。

以至于，我表达想写一篇探究这些细节的文章时，同事会偷笑说：你都开头讨论标签末尾要不要加冒号了吗太冷了——真是个冷学问！

的确如此，这些偏门、细碎的内容，鲜少有人会去留意和思索。因此我在写下这些共享内容时期望可以达到目标是：“冷学问虽然冷，但有用”。用我了解的这些表单设计冷学问：启发你的冷思维、引出你的热思索。

话不闲聊，我们开头争论第一个问题。

听起来似乎都有些道理，那究竟谁更对呢！

首先，我们追溯一下Web进展史，早期可访问性核对清单中通常坚持要标签带冒号，由于屏幕阅读器一度必需依靠各种技巧才能理解标记不明的表单。

而随着技术进展，Web表单使用“label”标签（tag）可以做正确的标记，那么屏幕阅读器就能通过标记（markup）把标签（label）和相应的字段对应起来则无需再借助冒号。

不过在客户端又有些意外！曾经WindowsVista指南中明确要求使用冒号，MacAqua也有此要求但规章会稍敏捷一些。

这种状况是由于某些状况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难，桌面环境不会直接显示代码。也是这个历史缘由，造成Vista和Aqua各自都有大量其标签包含冒号的历史表单。由于实在没有必要把它们全部改掉，直到今日客户端的表单照旧连续这一规章。

通过Web进展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别，如今的屏幕阅读器技术已转变为识别标签的底层代码，无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了。

那从情感角度分析标签带冒号的是否对用户体验有影响呢？

回到最开头，我和同事们的争辩……

先简洁说下答案，无任何影响！

在《Web表单设计·创建高可用性的网页表单》中，（卡罗琳·贾雷特）曾经做过大量的表单测试，最终证明从未有一名用户谈论冒号是否消失，即使是有些在其他环境中很介意标点符号的人好像在线上表单中也未曾留意到。

从以上两个角度不难发觉，无论是从技术进展还是情感体验，都证明可不必要求表单带冒号；由于可用性访问清单不再有这样的要求，用户讨论也证明几乎没有人会留意表单冒号是否消失。

这样的结论，看似表单带冒号是失败了……但这并不阻碍它作为一种习惯或传统连续至今，无论在客户端还是Web设计系统中仍旧常见。例如：苹果电脑的Mac系统，国内阿里的AntDesignWeb设计系统。

因此，得到以下几点建议：

假如你盼望自己的网页表单与流行的桌面环境保持全都，请使用冒号。假如你已有大量使用冒号的表单，请保持连续使用下去。假如你在建立一个新的系统，你也可以干脆抛硬币打算，不过要严格遵循一种方法。

1）优势

最利于削减表单填写时间（标签和输入框位置最为靠近）；用户视线固定，动线始终向下（清楚的完成路径）；节约大量横向空间（可用于以多种方式组合的相关输入框）。

2）劣势

占用额外的垂直空间（假如可供应使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签）；建议使用输入框50%至75%的高度作为相邻输入框间距。

3）适用场景

盼望用户快速填写表单，完成任务；同时，当输入项存在主次之分时，对标签扩展性要求高。

1）优势

标签与输入框相邻（便利快速填写）。

2）劣势

右对齐布局造成左侧不齐，影响了快速巡游表单的效率问题；若标签文字宽度变宽，右对齐还存在敏捷度问题。

3）适用场景

既要削减垂直空间，又要加快填写速度的场景。

1）优势

简单巡游标签；占用垂直空间较少。

2）劣势

标签和输入框的相邻间距增大；适合于用户不熟识表单要收集的数据或问题无法分成易处理的内容组，左对齐标签巡游表单问题会更简单。用户只要上上下下阅读标签左栏，不会被输入框打断。

3）适用场景

表单中存在较多的简单或敏感信息，盼望用户放慢速度、认真思索（在一些注册类表单中较多使用）。

单从效率角度看，顶对齐标签右对齐左对齐，但是依据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。

因此，得到以下几点建议。

假如你盼望用户放慢速度，认真思索表单中每个表单项，左对齐标签是个好选择，特殊是含有大量可选输入框或高级设置的生疏数据时。

而顶对齐标签在一些国际化产品的表单设计时，会有更好的延展性。

至于，右对齐标签虽然与表单域联系紧密，便于用户填写，但是要考虑好标签的长短不齐如何解决。能否精简标签内容，以及确定好表单与界面的边距。

先简洁回答：是确定的，用户有时需要通过必填标记来评估工作量，了解输入信息量的最低限度。我会在下面详细解释缘由。

你可能会问：默认值不是用户想要的，误导用户怎么办？

在设计有默认值的表单域时，你要思索默认值是否是大多数用户可以接受的答案，假如不确信可以先去做一下用户调研，了解用户的心声。

就算默认值真的不是用户想要的，至少你也为他供应了一个示例来告知用户答案应当是什么样子的。这一点也可以节约用户几秒的思索时间——或避开一条错误信息。

但并不代表全部的表单域都要给出默认值，我们只是尽可能的让用户节约时间。

如何使用：

在第一次向用户显示表单时，用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前供应给应用的信息来动态地给出默认值（例：通过身份证自动识别诞生日期；利用邮编，推导出对应省/市）。

假如只是由于你觉得不应当留下空白的输入域，那么不要使用默认模式。只有当你有理由确信绝大部分用户，在绝大多数状况下，不会修改这个取值时才供应默认值——否则，这将会给用户带来额外的工作！

表现形式要为用户填写供应有用线索，采纳不同长度的文本框供应了示意；这种示意是一种有用线索，当输入框长度长短不定时，用户会很自然地思索为什么这样；填写输入框时会自然考虑这些线索。

请留意！保证示意效果的同时，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。

什么是模度值和数量呢！

落在详细设计上要先梳理产品中常见的表单类型，然后设置一个默认宽度。以此为基础来有规律的增加长度，并考虑清晰它们的适用场景；从而定义出不同的模度，最终制定出干净有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思索，快速搭建出合适的表单宽度并合理有效。

六、结语

本篇文章更多是从表单设计中的一些冷门内容，即易忽视的一些设计点在绽开争论，利用问题加案例的形式对表单设计进行剥离拆解，没有系统地、成本成套的来分析表单的构成和交互细节等等。由于这类内容讲的