设计更好的表格

原作者 Andrew Coyle

原文来源   https://uxdesign.cc/design-better-forms-96fadca0f49c

设计师常犯的错误以及如何解决他们

无论是注册流程，多视图步进器，还是单调的数据输入界面，表格是数字产品设计中最重要组成部分之一。本文重点介绍表格设计的常见注意事项。

请记住，这些是一般准则，每条规则都有例外。

表格应该是一栏

多列会破坏用户的垂直动量

顶部对齐标签

用户以比左对齐标签高得多的速率完成顶部对齐的标记形式。顶部对齐的标签在移动设备上也可以很好。但是，考虑使用左对齐标签进行具有可变选项的大型数据集条目，因为它们更容易一起扫描，他们会降低高度，并提示比顶部对齐标签更多考虑因素。

用他们的输入分组标签

将标签和输入放在一起，并确保它们之间有足够的高度，这样用户就不会感到困惑。

避免全部大写

全部大写字母会更难阅读和扫描

如果选项少于6个，则显示所有选择选项

在选择器下拉列表中放置选项需要两次单击，并隐藏选项。如果有超过5个选项，请使用输入选择器。如果有超过25个选项，则在下拉列表中加入上下文搜索。

不要使用占位符文本作为标签

通过将占位符文本用作标签来优化空间是很诱人的。 这导致了尼尔森诺曼集团的凯蒂•舍温（Katie Sherwin）总结的许多可用性问题。

将复选框（和无线电）放在彼此之下以便进行扫描

将复选框放在彼此之下可以轻松扫描。

使CTA具有描述性

行动呼吁应说明其意图。

内联指定错误

向用户显示错误发生的位置并提供原因。

在用户填写字段后使用内联验证（除非在此过程中帮助他们）

用户输入时不要使用内联验证 - 除非它有帮助 - 例如创建密码，用户名或带字符数的消息。

不要隐藏基本的帮助文本

尽可能公开辅助文本。对于复杂的辅助文本，请考虑在聚焦状态期间将其放在输入旁边。

区分主要行动和次要行动

关于是否应该包括次要选项，存在更大的哲学争论。

使用字段长度作为可供性

场地的长度提供了答案的长度。将此用于具有已定义字符数的字段，如电话号码，邮政编码等。

抛弃*并表示可选字段

用户并不总是知道所需字段标记（*）隐含的内容。相反，最好表示可选字段。

集团相关信息

用户分批思考，长形式可能会让人感到压力。通过创建逻辑组，用户可以更快地理解表单。

为什么这么问？

省略可选字段并考虑其他收集数据的方法。始终问自己这个问题是否可以推断，推迟或完全排除。

数据输入越来越自动化。例如，移动和可穿戴设备在没有用户意识的情况下收集大量数据。会话 UI，短信，电子邮件，语音，OCR，位置，指纹，生物识别等。

让它变得有趣

生命短暂。没人想填表格。要健谈。搞笑点。逐步进行。做意想不到的事。设计师的角色是表达他们公司的品牌，以引起一种情感的反应。如果做得正确，就会提高完成率。确保你没有违反上面列出的规则。