首发于码匠官网博客
全文 1308 字 浏览工夫约 5 分钟
表单是信息增加、录入的通用模式，正当的表单设计能加重用户累赘。这里码匠提供了一些表单设计的简略技巧。
技巧 1：抉择适合的输入框标签对齐
码匠中标签依据标签与输入框的地位关系，能够设置地位和对齐形式：
每种标签对齐都有本身的长处与局限性，依据不同的场景抉择适合的标签对齐，能进步用户填写速度，同时还能升高信息填写时的错误率。
依据 Matteo Penzo 钻研公布的对于标签对齐的文章：采纳顶部左对齐的标签款式，浏览表单所需的工夫最短，而左侧左对齐则用时最长。以下为该钻研中捕捉到的用户在填写三种对齐形式的表单时的眼动轨迹（圆圈越大，凝视工夫越长）：
能够看到，在顶部左对齐的设计中，用户可能在单次眼帘挪动中 同时获取标签和输出字段 ，能够更快了解表单。而左侧左对齐会迫使用户通过凝视更大范畴的屏幕空间获取信息，从而拖慢用户的反应速度。
如果心愿用户能疾速扫描填写表单，那么标签顶部对齐是最佳抉择。留神对齐的一致性，所有标签在整个表单中都应该遵循雷同的对齐形式。
因为左侧左对齐使得浏览表单所需工夫最长，如果表单要求敏感数据如银行卡号等，也能够应用左侧左对齐来成心减缓用户的填写速度，来确保填写的准确性。
技巧 2：放弃标签文本简洁，并抉择适合的输出组件
标签越长，用户则须要花更多工夫浏览和了解，因而标签文本不宜过长，越简洁越好。但如果您的确须要展现更多信息，能够应用码匠的 占位符 和提醒文字 来设置提示信息。
如下图，在搜寻栏中应用占位符来阐明输出的内容：
尽管占位符文本能够很好地扩大标签信息，但不应该用它来取代标签自身，因为较浅的文本色彩很难引起用户的留神，而且一旦用户开始输出，占位符就会隐没。
人们了解图像和符号的速度比文本快得多，因而在输入框的前缀或后缀中增加表情符号能够大大提高用户体验，比方能够通过 🔍 示意搜寻、☎️ 示意电话等。如果须要更具体的解释，提醒文字 也十分有用，此性能将为输出的标签增加下划线，用户能够在光标悬停时看到更多信息。
当光标悬停在带下划线的文本上时会呈现提醒文本
码匠提供了四种数据录入类型的组件（文本、数字、抉择和日期），在构建表单时应抉择适合的组件。
在数据输出指标已知的状况下采纳选择器组件，会节俭用户工夫：
文本输出组件 VS 选择器组件
在抉择的项数较少的时候，采纳单选组件最佳（用户只需点击一次，而选择器组件需操作两次）：
文本输出组件 VS 选择器组件 VS 单选组件技巧
3：放弃输入框长度正当、统一
放弃输入框长度的正当和统一，能够使表单好看、易读。如果文本输入框须要很长（例如：身份证、手机号和邮箱等），能够思考将这些输入框纵向排布；如果所有输出都很长，只有一些是较短的输出（例如：寓居的省、市和邮编），则能够将这些较短的输出压缩到同一行，再与其余输入框放弃长度统一。
码匠还反对多行输入框，如果你感觉指标输出可能须要多行空间（如：评论输出），那么您能够选用多行输入框。
技巧 4：表单输入框放在一列
码匠建议您尽量将 所有表单输入框放在一个列中，使填写门路更加清晰。放弃有秩序的单列表单模式更利于用户浏览，而多列的表单模式则会毁坏用户填写法则，进而影响实现表单的速度。
技巧 5：对相干信息分组
对有关联的信息进行分组是进步文本易读性的罕用策略。码匠建议您通过使用字号、间距或者分割线等视觉伎俩将相干的信息进行分组，以舒缓用户在预览时产生的困倦以及提供给用户解决信息的工夫，从而进步表单易用性。这里应用码匠的 分割线 组件，将表单内容进行了信息分组：
对于码匠
码匠是一款对开发者敌对的低代码平台。咱们次要面向国内用户，相较于国外开发的 Admin/CRM/CMS 等后盾工具，咱们的 UI 界面设计更加适宜国内业务场景。同时咱们还整合了多款国内常见数据源，包含飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此，咱们还一站式提供了企业外部零碎罕用的租户治理、细粒度的权限管制、审计日志等性能，让您疾速搭建后盾利用的同时，也为您的企业信息安全保驾护航。咱们的开创团队来自谷歌、快手、百度等公司，深刻理解疾速迭代的软件系统对业务的重要性和当下软件开发的复杂性，咱们认为在将来软件不会是从零开发的，于是咱们从新思考，发明新的工具，帮忙公司更好更快地开发软件。想要理解更多欢送来亲自摸索！