出自UXGuide.net

文本框

Text Boxes

目录 1 它用在这里合适吗？ 2 设计理念 3 使用模式 4 设计规范 4.1 常规 4.2 可编辑文本框 4.3 数值文本框 4.4 密码及凭据（PIN）输入 4.5 文本输出 4.6 数据输出 5 输入验证及错误处理 6 提示（prompt） 7 推荐尺寸与间距 8 标签 8.1 文本框标签 8.2 说明性标签 8.3 提示性标签 9 文档编写

文本框（Text Box）用于显示、输入或编辑文本或数值。

典型的文本框

注：与布局、字体及气球状提示相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 把所有有效值都列出来是否切实有效？如果是，考虑换用单选列表框、列表视图（List View）、下拉列表、可编辑下拉列表或滑块。
• 有效数据是否完全不受限制？或者说，有效数据仅仅在格式（长度或字符类型）上存在限制？如果是，则应使用文本框。
• 值所代表的数据类型是否已经存在专门的通用控件？例如日期、时间、或者是 IPv4 或 IPv6 地址。如果是，则应使用更合适的控件，如日期控件，而非文本框。
• 如果数据是数值：
  • 用户是否会把该设置视为相对值？如果是，应使用滑块。
  • 用户是否更需要在更改设置的同时立即得到反馈？如果是，应使用滑块，也可以与文本框一起使用。例如，用户使用滑块可以很方便地选择颜色，因为他们改变色相、饱和度、亮度的时候可以立即看到效果。

设计理念

文本框具有很强的灵活性，但其支持的约束也很少。能够用于可编辑文本框的约束包括：

• 可选的对总字符长度的限制约束。
• 可选的仅接受数字字符（0 - 9）的限制约束。
• 如果使用了微调控件，可将微调控件限制到有效值域内。

除了其长度以及可选的微调控件之外，文本框没有其他能够提示有效值或其格式的可视线索。这意味着需要用标签将这类信息传达给用户。如果用户输入了无效的文本，你必须通过错误信息来进行错误处理。

一条普遍的规则是，你应当使用你能够使用的最严格的约束。使用像文本框之类无约束的控件只是最后的手段。这就是说，当你考虑使用约束的时候，应当将全球用户的需求考虑在内。例如，约束为美国邮政编码的控件不是全球化的，但无约束的文本框则可以接受任何形式的邮政编码。

使用模式

文本框较为灵活，可用作多种用途。

数据输入 用户输入或编辑短字符串的无约束的单行文本框。	无约束的单行文本框
格式化数据输入 用于输入特定格式的一组长度较短、尺寸固定的单行文本框。	用于格式化数据输入的文本框 注：自动离开功能会自动将输入焦点从一个文本框移到下一个。这种做法的缺点在于无法像单个数据那样进行复制或粘贴。
辅助数据输入 用于输入或编辑字符串的，附有帮助用户选取有效值的按钮的无约束单行文本框。	在这个示例中，Browse 按钮帮助用户选取有效值。
文本输入 用于输入或编辑长字符串的无约束多行文本框。	无约束的多行文本框
数值输入 用于输入或编辑数值的，带有便于鼠标操作的微调控件的，仅限数值的单行文本框。	用于数值输入的文本框。 文本框及其相伴的微调控件的组合称为微调框。
密码和凭据输入 用于安全输入密码和凭据的无约束单行文本框。	用于输入密码的文本框
数据输出 用于显示短字符串的只读单行文本框，它总是以无边框的方式显示。	与静态文本不同，使用文本框显示的数据可以被滚动（当数据比控件长时很有用）、选择及复制。 用于显示数据的只读单行文本框。
文本输出 用于显示长字符串的只读多行文本框	用于显示数据的只读文本框

设计规范

常规

• 当禁用文本框时，应当同时禁用其标签、说明标签、微调控件及命令按钮。
• 应使用自动完成来帮助用户输入那些可能会被重复使用的数据。例如用户名、地址及文件名等。但是，不要为那些可能包含敏感信息的文本框提供自动完成功能，如密码、凭据（PIN）、信用卡号或医疗信息。
• 不要用户进行不必要的滚动。如果你预计到数据会超出文本框，而你又能够在不影响布局的情况下增大文本框的话，则应当改变文本框的尺寸以减少滚动的需要。

错误：

在这个示例中，文本框应当再长一些以容纳其数据。

• 滚动条：
  • 不要在多行文本框中使用水平滚动条。应当改用垂直滚动条及自动换行。
  • 不要在单行文本框上使用任何滚动条。
• 对于数值输入，可以使用微调控件。对于文本输入，可以改用下拉列表或可编辑下拉列表。
• 除了格式化数据输入外，不要使用自动离开功能。自动切换输入焦点会使用户感到意外。

可编辑文本框

• 如果可能，应当限制输入文本的长度。例如，如果有效输入是从 0 至 999 的数字，那么应当使用限制为三个字符的数值文本框。使用格式化数据输入的文本框的每个部分都应当具有短小、固定的长度。
• 灵活处理数据格式。如果用户很可能使用各种不同的格式来输入文本时，应当尽量处理所有最常见的格式。例如，在输入许多名称、数字和标识时，一些可选的空格、标点及大小写往往无关紧要。
  • 如果你无法处理常见的格式，则应使用格式化数据输入或是在标签中指明有效格式，以要求用户输入特定的格式。

可以接受：

在这个示例中，文本框要求以特定格式进行输入。

较好：

在这个示例中，格式化数据输入模式被用于要求以特定的格式进行输入。

最好：

在这个示例中，文本框能够处理所有可能的格式。

• • 在选择最大输入长度时应考虑格式灵活性。例如，一个有效的信用卡号最多可达 19 个字符，如果将其限制得更短，则当使用较长的格式输入数字时会产生困难。
• 如果用户很可能会粘贴长而复杂的数据的话，则不要使用格式化的数据输入模式。相反，对于用户更愿意键入数据的情形，则应当保留格式化数据输入模式。

在这个示例中，没有使用格式化数据输入模式，用户可以粘贴 IPv6 地址。

• 如果用户很可能会重新输入整个值，则应在获取输入焦点时选择全部文本。如果用户更有可能进行编辑，则应将插入点放在文本末尾。

在这个示例中，用户更有可能进行替换而非编辑，因此获取输入焦点时会选中整个值。

在这个示例中，用户更有可能添加关键字而不是替换文本，因此插入点放在文本的末尾处。

• 如果换行符是有效输入的话，应当始终使用多行文本框。
• 当文本框被用于文件或路径时，应当始终提供“浏览”按钮。

数值文本框

• 选择最方便的单位并在标签中注明。例如，考虑使用毫升而不是升（或其他单位），使用百分比而不是直接的数值（或其他）等等。

正确：

在这个示例中，单位已经标明，但它需要用户输入小数。

更好：

在这个示例中，该文本框使用了更加便利的单位。

• 只要能够起到帮助，就应当使用微调控件。但是，微调控件有的时候并不实用，比如用户需要输入非常大的数值时。应当在下列情况下使用微调控件：
  • 输入的往往是较小的数值，通常小于 100。
  • 用户往往对已有的数值进行小的改动。
  • 用户更希望使用鼠标而非键盘。
• 下列情况下尽可能右对齐数值文本：
  • 存在不止一个数值文本框。
  • 文本框是垂直排列的。
  • 用户可能会累加或比较这些数值。

正确：

在这个示例中，数值文本是右对齐的，以使其更加易于比较。

错误：

在这个示例中，数值文本错误地使用了左对齐。

• 始终右对齐货币数值。
• 不要为特定的数值指定特殊含义，即使这些特殊含义在你的应用程序中是内部使用的。相反，应当使用复选框或选项按钮来为用户提供明确的选择。

错误：

在这个示例中，值 -1 具有特殊含义。

正确：

在这个示例中，复选框用于明确该选项。

密码及凭据（PIN）输入

• 始终使用密码通用控件，而不要自己创造。密码和凭据需要特殊的处理以被安全处理。

更多设计规范和示例，参见气球状提示。

文本输出

• 考虑将白色背景颜色用于大尺寸、多行只读文本。白色背景使文本更易于阅读。灰色背景上的大量文本不适合阅读。

更多关于背景颜色的信息，参见字体。

数据输出

• 不要为单行只读的文本框添加边框。边框是暗示文本可以被编辑的视觉线索。
• 不要禁用单行只读文本框。这会使用户无法将选择文本并复制到剪贴板。它还使得当数据超出控件边界时，用户无法滚动数据。
• 不要为单行只读文本框设置 Tab 停靠，除非用户通常需要滚动或复制文本。

输入验证及错误处理

因为文本框通常不受约束，无法只接受有效输入，因此你可能需要验证输入并处理可能的问题。应当以下列方式验证各种输入问题：

• 如果用户输入了一个无效字符，应忽略该字符，并显示输入错误气球状提示来解释哪些是有效字符。

在这个示例中，气球状提示报告输入了错误的字符。

• 如果输入数据包含无效的值或格式，应当在文本框失去输入焦点时显示输入错误气球状提示。
• 如果输入的数据与窗口中其他控件不一致，应当在整个输入完成时给出错误信息，例如当用户单击模式对话框的确定按钮时。

更多设计规范和示例，参见错误信息和气球状提示。

提示（prompt）

提示是位于文本框内部作为其默认值显示的文本标签或简短说明。与静态文本不同，一旦用户在文本框内开始输入或当其获得输入焦点时，提示文本就会消失。

典型的提示

下列情况下可以使用提示：

• 当屏幕空间紧张，使用标签或说明文字不合适时，如在工具栏上。
• 提示文字主要用于以紧凑的方式标识文本框的目的。它绝不应该是用户在使用文本框时需要看到的关键信息。
• 不要将提示仅仅用于引导用户从列表中进行选择或单击按钮。例如，不要使用“输入文件名然后单击发送”这样的提示。
• 提示文本不得与真实文本相混淆。

当使用提示时：

• 以灰色斜体方式显示提示文本，而以黑色正体方式显示实际输入的文本。
• 保持提示文本的简洁。你可以使用句子片断而不是完整的句子。
• 使用句子大写样式。
• 不要使用句末标点或省略号。
• 提示文本应当不可编辑，且当用户单击或跳转到该文本框内时应立即消失。
  • 例外：如果文本框具有默认的输入焦点，则显示提示文本，并当用户开始输入时消失。
• 当文本框失去输入焦点时，如果其内容仍然为空，则应当恢复提示文本。

推荐尺寸与间距

用于文本框的推荐尺寸与间距

文本框的宽度是预期输入长度的一个视觉线索。当定义文本框的尺寸时：

• 应当为最长的有效数据选择合适的宽度。在大多数情况下，用户应当不需要滚动即可输入或查看可能的最长文本。
• 应当额外空出 30% 的长度（对于较短的文本来说，最多 200%）用于需要被本地化的任何文本（但不包括数字）。
• 如果对于输入没有特定预期的尺寸，则应选择与窗口中其他文本框或控件相一致的宽度。
• 将多行文本框的大小设置为能够显示整数行文本。

标签

文本框标签

• 应当为所有文本框添加标签。标签文本应当为单词或短语，而不是句子，以冒号结尾，并使用静态文本。

例外：

• • 当空间非常紧张时可以使用带提示（prompt）的文本框。
  • 添加标签时，用于格式化数据输入的一组文本框应当被视为一个单独的文本框。
  • 如果文本框是附属于选项按钮或复选框的，且由以冒号结尾的标签引导的话，不要为文本框再使用额外的标签。
  • 省略那些重复主标题说明内容的控件标签。这种情况下，主标题说明带有冒号（除非是问句）和访问键。

可以接受：

在这个示例中，文本框的标签只是在重复主标题说明。

更好：

在这个示例中，去掉了多余的标签，因此主标题说明带有冒号及访问键。

• 分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 将标签放置于文本框的左侧或上方，并将其与文本框的左边对齐。如果标签位于左侧，则将标签文本与文本框文本垂直对齐。

正确：

在这些示例中，上方的标签与文本框左边界对齐，左侧的标签则与文本框的文本对齐。

错误：

在这些错误的示例中，上方的标签与文本框的文本对齐，而左侧的标签则与文本框的顶端对齐。

• 你可以在标签之后的括号中指定单位（如“秒”或“连接”）。
• 如果文本框接受任意一组具有较少的固定数量限制的字符的话，你可以在标签中说明最大输入长度。文本框的宽度也应当暗示最大长度。

在这个示例中，标签给出了最大可接受的字符数量。

• 不要将文本框的内容（或其单位标签）作为一个句子的一部分，因为这将无法进行本地化。
• 如果文本框可以用于输入多项内容，应当在标签中明确如何分隔不同的项。

在这个示例中，项目分隔符已在标签中给出。

说明性标签

• 如果你需要为文本框添加说明文本，应当将其放置在标签的上方。应使用完整的包含句末标点的句子。
• 使用句子大写样式。
• 那些有用但并非必须的附加信息应当保持简短。这类信息要么放在标签与冒号之间的括号内，要么不带括号放在文本框的下方。

在这个示例中，附加信息置于文本框的下方。

提示性标签

• 应保持提示文本简洁。你可以使用句子片断而非完整的句子。
• 使用句子大写样式。
• 不要使用句末标点或省略号。
• 如果提示文本指示用户输入一些会在单击文本框旁边的按钮而生效的内容的话，简单地将按钮放在文本框旁边。不要用提示来指示用户单击按钮（例如，不要这样写提示文本：“拖动一个文件并单击‘发送’”。）

文档编写

当提及文本框时：

• 使用“type（键入）”表示需要键入或粘贴的用户交互行为，如果用户可以使用其他方法将信息置入文本框，如从列表中选择或者使用“浏览”按钮等等，则使用“enter（输入）”。
• 使用“select（选择）”表示只读文本框的入口。
• 原样引用标签文本，包括其大小写及“box（文本框）”字样，但无须包含访问键下划线和冒号。不要将文本框称为“text box”或“field（字段）”。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：Type your password into the Password box, and then click OK.（在“密码”文本框中键入您的密码，然后单击“确定”。

• 如果文本框需要某种特定的格式，只需记录最常使用的可接受的格式，其他格式则让用户自己去发现。你希望提供数据格式上的灵活性，但这不应当使文档变得复杂。

正确：

Enter the part's serial number using the 1234-56-7890 format.

以 1234-56-7890 的格式输入序列号。

错误：

Enter the part's serial number using any of the following formats:

使用下列任意一种格式输入序列号：

1234567890

1234-56-7890

1234 56 7890