文本输入Text Input 的使用原则

本文章属于《UI 线框图》专栏，进入专栏查看系列内容。

文本输入字段允许用户使用键盘输入。它们并不像看起来那么简单。

它们经常与窗体中的其他类型的输入控件一起使用，但也可以单独使用。

何时使用文本输入

当向用户请求自由格式的输入(如用户名、电话号码、密码或注释)时，将使用文本输入字段。 它们是表单的主要组成部分之一。 它们也经常用于搜索、评论和聊天。

下面是一个例子:

可以说，重要的是知道何时不使用它们。 遵循可用性启发式“识别而不是回忆” ，如果你事先知道可能的、有效的条目列表，最好使用下拉菜单(组合框)控件或其他受限制的输入控件来减少错误并方便输入。 例如，在询问国名、称呼或付款方式时。

美国网页设计系统建议，只有当“你不能合理地预测用户对提示符的答案，而且用户的答案可能存在很大差异时，才使用文本输入。”

如何使用文本输入

• 确保文本输入字段的长度适合预期输入的长度

• 文本字段应该用一个清晰的标签、输入和辅助文本表明它们的状态——无论是启用还是禁用、空的还是填充的、有效的还是无效的

• 标签文本应该与输入行对齐，并且始终可见

• 标签文本不应占用多行

• 占位符文本(也称为提示文本)可以在输入字段中使用(参见下面的“ Website”字段) ，但它不应该取代表单中的标签，因为当用户开始输入时，它应该消失。 (另请参阅关于占位符文本的可访问性的说明.)

• 避免将不同部分的号码(如电话号码、社会安全号码或信用卡号码)分割成单独的输入字段(尝试使用掩码输入或柔性输入代替)

• 对于较长的文本，使用文本区域控件(也称为多行输入字段) ，而不是单行控件

基本用法 Basic Usage

• Labels aligned

标签对齐

• Single-line text input

单行文本输入

• Text area （multi-line text input）

多行文本输入

• Feild widths equal and aligned

固定宽度相等且对齐

状态 States

• Normal 正常
• Focused 聚焦
• Disabled 禁用
• Alternative ways of showing an input control as disabled.

将输入控件显示为禁用的其他方法。

变化 Variations

• Underline style （no border）

下划线样式(无边框)

• Date mask with input hint

带有输入提示的日期掩码

• SSN or ID number mask

SSN 或 ID 号掩码

参考资料 References

• macOS Human Interface Guidelines 人机界面指南
• Google Material Design guidelines 谷歌材质设计指南
• U.S. Web Design System 美国网页设计系统

相关控件 Related Controls

• 下拉菜单(组合框) Dropdown Menu (Combo Box)

进一步阅读 Further Reading

• Jakob Nielsen’s 10 Usability Heuristics for User Interface Design
• U.S. Web Design System Form Controls and Form Templates
• “Forgiving Format” Design Pattern
• “Web Form Design: Filling in the Blanks” by Luke Wroblewski

下篇文章：下拉菜单 Dropdown Menu