首发于码匠官方博客

全文 1308 字  阅读时间约 5 分钟

表单是信息添加、录入的通用形式，合理的表单设计能减轻用户负担。这里码匠提供了一些表单设计的简单技巧。

技巧 1：选择合适的输入框标签对齐

码匠中标签根据标签与输入框的位置关系，可以设置位置和对齐方式：

每种标签对齐都有自身的优点与局限性，根据不同的场景选择合适的标签对齐，能提高用户填写速度，同时还能降低信息填写时的错误率。

根据 Matteo Penzo 研究发布的关于标签对齐的文章：采用顶部左对齐的标签样式，浏览表单所需的时间最短，而左侧左对齐则用时最长。以下为该研究中捕捉到的用户在填写三种对齐方式的表单时的眼动轨迹（圆圈越大，注视时间越长）：

可以看到，在顶部左对齐的设计中，用户能够在单次视线移动中同时获取标签和输入字段，可以更快理解表单。而左侧左对齐会迫使用户通过注视更大范围的屏幕空间获取信息，从而拖慢用户的反应速度。

如果希望用户能快速扫描填写表单，那么标签顶部对齐是最佳选择。注意对齐的一致性，所有标签在整个表单中都应该遵循相同的对齐方式。

因为左侧左对齐使得浏览表单所需时间最长，如果表单要求敏感数据如银行卡号等，也可以使用左侧左对齐来故意减缓用户的填写速度，来确保填写的准确性。

技巧 2：保持标签文本简洁，并选择合适的输入组件

标签越长，用户则需要花更多时间阅读和理解，因此标签文本不宜过长，越简洁越好。但如果您确实需要展示更多信息，可以使用码匠的占位符和提示文字来设置提示信息。

如下图，在搜索栏中使用占位符来说明输入的内容：

虽然占位符文本可以很好地扩展标签信息，但不应该用它来取代标签本身，因为较浅的文本颜色很难引起用户的注意，而且一旦用户开始输入，占位符就会消失。

人们理解图像和符号的速度比文本快得多，因此在输入框的前缀或后缀中添加表情符号可以大大提高用户体验，比如可以通过 🔍 表示搜索、☎️ 表示电话等。如果需要更详细的解释，提示文字也非常有用，此功能将为输入的标签添加下划线，用户可以在光标悬停时看到更多信息。

当光标悬停在带下划线的文本上时会出现提示文本

码匠提供了四种数据录入类型的组件（文本、数字、选择和日期），在构建表单时应选择合适的组件。

在数据输入目标已知的情况下采用选择器组件，会节省用户时间：

文本输入组件 VS 选择器组件

在选择的项数较少的时候，采用单选组件最佳（用户只需点击一次，而选择器组件需操作两次）：

文本输入组件 VS 选择器组件 VS 单选组件

技巧 3：保持输入框长度合理、一致

保持输入框长度的合理和一致，可以使表单美观、易读。如果文本输入框需要很长（例如：身份证、手机号和邮箱等），可以考虑将这些输入框纵向排布；如果所有输入都很长，只有一些是较短的输入（例如：居住的省、市和邮编），则可以将这些较短的输入压缩到同一行，再与其他输入框保持长度一致。

码匠还支持多行输入框，如果你觉得目标输入可能需要多行空间（如：评论输入），那么您可以选用多行输入框。

技巧 4：表单输入框放在一列

码匠建议您尽量将所有表单输入框放在一个列中，使填写路径更加清晰。保持有秩序的单列表单形式更利于用户浏览，而多列的表单形式则会破坏用户填写规律，进而影响完成表单的速度。

技巧 5：对相关信息分组

对有关联的信息进行分组是提高文本易读性的常用策略。码匠建议您通过运用字号、间距或者分割线等视觉手段将相关的信息进行分组，以舒缓用户在预览时产生的疲倦以及提供给用户处理信息的时间，从而提高表单易用性。

这里使用码匠的分割线组件，将表单内容进行了信息分组：

关于码匠

码匠是一款对开发者友好的低代码平台。我们主要面向国内用户，相较于国外开发的 Admin/CRM/CMS 等后台工具，我们的 UI 界面设计更加适合国内业务场景。同时我们还整合了多款国内常见数据源，包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此，我们还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能，让您快速搭建后台应用的同时，也为您的企业信息安全保驾护航。

我们的创始团队来自谷歌、快手、百度等公司，深刻理解快速迭代的软件系统对业务的重要性和当下软件开发的复杂性，我们认为在未来软件不会是从零开发的，于是我们重新思考，创造新的工具，帮助公司更好更快地开发软件。

想要了解更多欢迎来亲自探索！