swing下拉框输入自动匹配_文本输入框和表单设计的22条原则

本文共 3048   个字，预计阅读  9   分钟，记得点击上面的  蓝字  关注我哦～

表单在网页或APP中通常用来数据采集，本身是一个数据采集的工具，不具备属性，所以它可以灵活的运用在多种功能模块中，纸质印刷的表格虽存在久远，但依然有很多可以作为参考的点，来帮助我们优化UI中的表单设计。

1. 了解文本输入框的构成元素

文本输入框是表单的基本组成部分，通常存在于表单或对话框中。文本输入框是数据录入的核心组件，在进行布局和交互时，有着不低的要求：需要保持高效性、可发现性、显著良好的可访问性等。

文本输入框的元素：
1. 容器 - 可交互输入的区域
2. 输入文本 - 所输入文本字段
3. 标签文本 - 告诉用户这个表单字段中要输入的内容属性
4. 占位符文本 - 要输入信息的描述或示例，当用户输入文本后替换成输入文本
5. 帮助和验证(可选)  - 提供上下文信息和验证信息
6. 前导图标(可选) - 描述文本字段所需的输入类型和特征
7. 后缀图标(可选) - 对输入的内容进行控制，比如清除、隐藏/显示等

2. 明确文本输入框的类型

输入框大多数是用来输入文本内容的，但不同的类型输入框差别还是很大的，以下列举了常见的一些输入框类型：

3. 选择合理的输入类型

选择合理的输入框类型，可以帮助用户以正确的格式输入信息并避免错误，从而使录入过程尽可能简单高效。

4. 提供高亮且精准的状态反馈

通过改变颜色或增加提示，来呈现当前所处的状态，是输入框在UI中的基础作用。输入框的状态一般为：默认、悬停、禁用、激活、校验、错误提示等所有的输入框设计都应遵循一致性原则，尽量不要反常规设计，遵循用户的心理模型和心理认知。

5. 选择最佳的对齐方式

通常情况下，表单中的提示文本可以放置顶部、内部、左侧和右侧。Matteo Penzo的眼动实验发现，顶部标签移到输入框需50毫秒，比左对齐标签方式(500毫秒)快了10倍，比右对齐标签方式(240毫秒)快了5倍左右。

总之，顶部标签方式，填表时间最短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解清楚表单的每个输入框内容时，可以采用左对齐方式。

6. 标签左对齐

当收集的数据不熟悉或不易于处理时(例如地址的各个部分)，使用左对齐，用户可以更轻松地扫描表单所需的信息。用户只需向上和向下扫描标签的左列，而不会被输入字段打断。但是，标签和输入字段之间的距离通常会因长标签而变长，可能会影响完成时间。

• 适用：表单标签长度基本一致的情况

• 优点：可读性、美观度较高，同时保证了视觉扫描的快捷，易于拓展，可充分利用垂直空间布局

• 缺点：标签的字数可能会参差不齐，中间的间隔不要距离过大，避免可识别性问题消耗用户时间

7. 标签右对齐

右对齐以便输入字段和标签之间的关联更清晰。但是，左侧的参差不齐会降低快速扫描所需信息的效率。通常我们从左到右阅读，因此我们的眼睛更喜欢沿左侧的边沿。

• 适用：表单标签长短差异较小时

• 优点：文本标签和输入框的间隔固定且距离较小，易于扫描

• 缺点：当标签长度过长时，浏览表单较困难

8. 标签顶部对齐

在表单信息较少时可以使用顶部标签，特别是移动端。

• 适用：水平方向空间较小的移动端表单

• 优点：易视觉扫描，易理解，兼容了不同长度的标签

• 缺点：增加了垂直方向的空间

9.输入框要与输入内容的类型和大小相匹配

如果选择值只有2-3个，避免使用下拉框应设置成单选。输入框的长度要与用户输入后的数据长度相匹配，不仅符合用户的预期也确保体验的一致性和视觉的愉悦感。

10. 占位符不能替代标签

有些表单将输入框的占位符文本替代了标签，让界面更加简洁，虽然这种方法的初衷是好的，据研究表明，会产生很多的负面影响：

• 会消失的占位符文本会带给用户短时记忆负担

• 没有标签时，用户在提交表单时不能校验已填写的内容是否准确

• 一旦激活输入框，占位符就会消失，非常不利于用户操作键盘

11. 帮助用户填写表格

• 借助自动填充功能，帮助用户录入表单。用户在填写过程中自动查询匹配，提供建议

• 使用预填充字段作为默认值，比如基于IP地址填好国家和地区，这类解决方案很灵活多样，根据填写字段属性、功能可以灵活处理

• 提供上下文信息

• 使用自动匹配相关关键词，以下拉列表形式展示多个建议

12. 使用内联验证

“实时在线验证”可以解决用户输入信息的有效性，而不是在用户提交表单时一次性校验所有信息。

• 可以将验证结果和错误提示靠近输入框展示

• 不要做的过于醒目，错误信息主要告诉用户如何解决问题，而不是让用户感到紧张

• 避免过早进行验证，在用户输入完成后再进行，避免一直报错

• 考虑使用“积极验证”，可以增加一种愉悦感和成就感

13. 减少输入的文本框数量

太多的表单会给用户造成一定的心理负担和认知负荷

1. 不要将姓名、日期类的文本分成多段

2. 不要多次询问相同的信息

3. 简化标签字数

14. 区分选填和必填项

若该字段确定不可删除、且只适合部分用户，则要提示用户是否为必填项。选填字段越少越好，一个表单最好只设置1-2个选填项，同时要清晰地告知用户。

15. 使用条件逻辑

根据 Marketing Insider Group 研究表明，有 78％ 的用户表示来自品牌的个人相关内容会增加他们的购买意愿。而当体验与用户无关时，营销活动的效果降低 83％。因此要考虑使用条件逻辑。

条件逻辑允许基于特定响应的附加指令—类似：「如果这样，那么...」，简化复杂的流程。使用条件逻辑将不会显示与用户无关的问题，从而减少表单的录入时间。

16. 通过逻辑定序

无论是表单字段(如“银行卡号”、“到期时间”)还是字段对应的选择值(如“普通配送”、“1日达”、“2日达”)都要按逻辑顺序严格排列。此外，选择值的排序还要考虑使用频率，尽可能列出用户最常用的选项、并按使用频率由高到低排列。PC端最好通过Tab键一个一个测试表单的顺序是否正确。

17. 对信息内容合理分组

简化复杂表格的最简单方法之一就是对内容分组。表单并不是无序罗列的，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组。同时各个逻辑组也是按照逻辑顺序或者用户熟悉的模式顺序排布的，使用户浏览和填写自如。

如表单过长时，也可拆解成不同页面，类似于任务拆解，让用户一步步填写。

18. 避免使用多列布局

单列布局能够给用户呈现一条清晰的视觉路径，多列表单则会让用户来回扫视，视觉路径混乱消耗用户时长。

19. 将复杂的表单分页或者分步骤录入

有时，即使删除了所有不必要的内容，表单信息依然很多。通过把复杂表单按步骤/分页拆分成多个简洁界面，既能增强引导性，又提高专注度。

• 显示步骤，并且以视觉化的形式来呈现进度，这可以提高满意度，并且激励用户

• 不要太过细化，同时保持每个步骤足够简洁高效

• 对关键信息进行总结，减轻焦虑，最后需要复查

20. 集中呈现导航和表单本身

如果表单内容过多，可以分成多个步骤，但应为它分配一个单独的清晰聚焦的导航或路径。通用常规导航或任何会破坏该流程的链接只会造成视觉混乱。同时不要在小型弹出窗口中使用多步骤表单。

21. 显示适当的键盘类型

移动端提供了几种不同类型的键盘，每种键盘旨在促进不同类型的输入效率和输入需求，想要简化数据录入，当用户输入不同类型的字段时，需要调用不同类型的键盘，同时需要注意键盘出现的位置，避免遮挡关键信息。

22. 谨慎使用特别复杂的密码设计

• 允许用户显示和隐藏所设置的密码，而不是让用户输入2次来进行验证

• 始终显示对于密码的要求，并提供相应的指引

Welcome Follow me 欢 | 迎 | 关 | 注

RECOMMENDED

往｜期｜精｜选

让我们谈谈新拟态和可访问性图标设计的7大原则如何借助皮克斯原则，提升讲故事的能力

视觉设计在产品中的价值 UI设计师们依然会犯的十个设计错误 用最经典的迪士尼动画设计原则进行UI设计 UX设计师都应知道的15条设计原则

THE END

?

下期也许并不会更精彩，但依然值得期待。