文本框

注意

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指导原则上仍然适用,但演示和示例并不反映我们 当前设计指南

使用文本框,用户可以显示、输入或编辑文本或数值。

典型文本框和标签屏幕截图

典型的文本框。

注意

单独的文章中介绍了与 布局字体以及 气球 相关的指南。

这是正确的控件吗?

若要决定,请考虑以下问题:

  • 高效枚举所有有效值是否可行? 如果是这样,请考虑 单选列表列表视图下拉列表、可编辑下拉列表或 滑块
  • 有效数据是否完全不受约束? 还是仅受格式(受约束长度或字符类型)约束的有效数据? 如果是,请使用文本框。
  • 该值是否表示具有专用通用控件的数据类型? 示例包括日期、时间或 IPv4 或 IPv6 地址。 如果是,请使用相应的控件,例如日期控件而不是文本框。
  • 如果数据为数值:
    • 用户是否将设置视为相对数量? 如果是,请使用滑块。
    • 用户是否会受益于即时反馈对设置更改的影响? 如果是,请使用滑块,可能与文本框一起使用。 例如,用户可以使用滑块轻松选择颜色,因为它们可以立即看到色调、饱和度或亮度值的变化的影响。

设计概念

虽然文本框具有非常灵活的优势,但它们具有最小约束的缺点。 可编辑文本框的唯一约束是:

  • 可以选择设置最大字符数。
  • 可以选择仅将输入限制为数字字符(0 9)。
  • 如果使用 旋转控件,则可以将旋转控件选项限制为有效值。

除了其长度和旋转控件的可选存在之外,文本框没有任何视觉线索来建议有效值或其格式。 这意味着依靠标签向用户传达此信息。 如果用户输入无效的文本,则必须使用错误消息处理错误。

一般情况下,应使用可的最受限控件。 使用不受约束的控件(如文本框)作为最后手段。 也就是说,当你考虑约束时,请记住全球用户的需求。 例如,限制为美国邮政编码的控件不会全球化,而是接受任何邮政编码格式的不受约束的文本框。

使用模式

文本框是具有多个可能用途的灵活控件。

标签 价值
数据输入
用于输入或编辑短字符串的单行不受约束的文本框。
显示名称标签 文本框的屏幕截图
单行无约束文本框。
格式化数据输入
一组短、固定大小的单行文本框,用于输入具有特定格式的数据。
产品密钥文本框的屏幕截图
用于格式化数据输入的文本框。
注意:自动退出 功能会自动将输入焦点从一个文本框移动到下一个文本框。 此方法的一个缺点是无法将数据复制或粘贴为单个单元。
辅助数据输入
用于输入或编辑字符串的单行、不受约束的文本框,与帮助用户选择有效值的命令按钮组合在一起。
“浏览”按钮屏幕截图
在此示例中,“浏览”命令可帮助用户选择有效值。
文本输入
用于输入或编辑长字符串的多行不受约束的文本框。
屏幕截图
多行、不受约束的文本框。
数字输入
用于输入或编辑数字的单行数字文本框,可选 旋转控件,以方便基于鼠标的输入。
文本框的屏幕截图,用于输入等待时间
用于数字输入的文本框。
文本框及其关联的旋转控件的组合称为 旋转框
密码和 PIN 输入
用于安全地输入密码和 PIN 的单行不受约束的文本框。
密码文本框的屏幕截图
用于输入密码的文本框。
数据输出
一个单行只读文本框,始终显示没有边框,用于显示短字符串。
与静态文本不同,使用文本框显示的数据可以滚动(如果数据比控件更宽)、选定和复制数据很有用。
显示文件夹
用于显示数据的单行只读文本框。
文本输出
用于显示长字符串的多行只读文本框。
隐私信息文本框的屏幕截图
用于显示数据的只读文本框。

指引

常规

  • 禁用文本框时,还禁用任何关联的标签、指令标签、旋转控件和命令按钮。

  • 使用自动完成来帮助用户输入可能重复使用的数据。 示例包括用户名、地址和文件名。 但是,不要对可能包含敏感信息的文本框使用自动完成,例如密码、PIN、信用卡号或医疗信息。

  • 不要使用户不必要地滚动。 如果预期数据大于文本框,并且你可以轻松地使文本框变大而不损害布局,请调整框的大小,以消除滚动的需要。

    不正确:

    计算机名称文本框的屏幕截图

    在此示例中,文本框的处理时间应该要长得多。

  • 滚动条:

    • 不要在多行文本框上放置水平滚动条。 改用垂直滚动和换行。
    • 不要在单行文本框上放置任何滚动条。
  • 对于数值输入,可以使用旋转控件。 对于文本输入,请改用下拉列表或可编辑的下拉列表。

  • 请勿使用自动退出功能,但格式数据输入除外。 焦点的自动转移可能会令用户大吃一惊。

可编辑文本框

  • 可以限制输入文本的长度。 例如,如果有效输入是介于 0 到 999 之间的数字,请使用限制为三个字符的数字文本框。 使用格式化数据输入的所有文本框部分必须具有较短的固定长度。

  • 灵活处理数据格式。 如果用户可能使用各种格式输入文本,请尝试处理所有最常见的格式。 例如,可以使用可选空格和标点符号输入许多名称、数字和标识符,大写通常并不重要。

  • 如果无法处理可能的格式,请使用带格式的数据输入或指示标签中的有效格式来要求特定格式。

    可接受:

    用于数字输入屏幕截图

    在此示例中,文本框需要特定格式的输入。

    更好:

    格式化数据输入文本框的屏幕截图

    在此示例中,格式化的数据输入模式用于要求特定格式。

    最佳

    不受约束的文本框的屏幕截图

    在此示例中,文本框处理所有可能的格式。

  • 选择最大输入长度时,请考虑格式灵活性。 例如,有效的信用卡号最多可以使用 19 个字符,因此将长度限制为更短的任何字符会使使用较长格式的号码难以输入数字。

  • 如果用户更有可能粘贴较长的复杂数据,请不要使用格式化的数据输入模式。 相反,为用户更有可能键入数据的情况保留格式化的数据输入模式。

    带有标签的文本框的屏幕截图:ipv6 地址

    在此示例中,不使用格式化的数据输入模式,以便用户可以粘贴 IPv6 地址。

  • 如果用户更有可能重新输入整个值,请选择输入焦点上的所有文本。 如果用户更有可能编辑,请将插入点放在文本末尾。

    屏幕截图

    在此示例中,用户比编辑更可能替换,因此在输入焦点上选择了整个值。

    用于输入关键字的文本框的屏幕截图

    在此示例中,用户更有可能添加关键字而不是替换文本,因此插入符号放置在文本末尾。

  • 如果新行字符是有效的输入,始终使用多行文本框。

  • 当文本框用于文件或路径时,请始终提供“浏览”按钮。

数字文本框

  • 选择最方便的单位并标记单位。 例如,请考虑使用毫升而不是升(反之亦然)、百分比而不是直接值(反之亦然),等等。

    正确:

    将升作为单元屏幕截图

    在此示例中,单元已标记,但它要求用户输入十进制数字。

    更好:

    作为单元屏幕截图

    在此示例中,文本框使用更方便的单元。

  • 每当旋转控件有用时,请使用旋转控件。 但是,有时旋转控件并不实用,例如当用户需要输入大量数字时。 在以下情况下使用旋转控件:

    • 输入可能为小数,通常小于 100。
    • 用户可能会对现有数字进行少量更改。
    • 用户比键盘更有可能使用鼠标。
  • 每当出现 时, 右对齐数字文本

    • 有多个数字文本框。
    • 文本框垂直对齐。
    • 用户可能会添加或比较值。

    正确:

    支出文本框(酒店等)的屏幕截图

    在此示例中,数值文本右对齐,便于比较值。

    不正确:

    屏幕截图

    在此示例中,数字文本不正确地左对齐。

  • 始终右对齐货币值。

  • 不要将特殊含义分配给的特定数值,即使应用程序在内部使用这些特殊含义也是如此。 请改用复选框或单选按钮进行显式用户选择。

    不正确:

    标签 屏幕截图:使用 -1 禁用缓存

    在此示例中,值 -1 具有特殊含义。

    正确:

    复选框标签的 屏幕截图:缓存

    在此示例中,复选框使选项显式。

密码和 PIN 输入

  • 始终使用密码通用控件,而不是创建自己的控件。 密码和 PIN 需要安全处理特殊处理。

有关更多指南和示例,请参阅 气球

文本输出

  • 请考虑将白色背景系统颜色用于大型多行只读文本。 白色背景使文本更易于阅读。 灰色背景上的大量文本不建议阅读。

有关背景色的详细信息,请参阅 字体

数据输出

  • 不要对单行只读文本框使用边框。 边框是文本可编辑的视觉线索。
  • 不要禁用单行只读文本框。 这可以防止用户选择文本并将其复制到剪贴板。 如果数据超出其边界的大小,它还会阻止用户滚动数据。
  • 不要在单行、只读文本框上设置制表位,除非用户可能需要滚动或复制文本。

输入验证和错误处理

由于文本框通常不能仅接受有效的输入,因此可能需要验证输入并处理任何问题。 验证各种类型的输入问题,如下所示:

  • 如果用户输入无效的字符,请忽略该字符并显示 输入问题气球, 解释有效字符。

    产品密钥文本框屏幕截图

    在此示例中,气球报告不正确的输入字符。

  • 如果输入数据具有无效的值或格式,则当文本框失去输入焦点时,显示输入问题气球。

  • 如果输入数据与窗口中的其他控件不一致,请在整个输入完成时提供错误消息,例如当用户单击“确定”模式对话框时。

除非用户无法轻松更正错误,否则不要清除无效的输入数据。 这样,用户就可以在不开始的情况下纠正错误。 例如,应清除不正确的密码和 PIN,因为用户无法轻松更正它们。

有关更多指南和示例,请参阅 错误消息气球

提示

提示是作为其默认值放置在文本框内的标签或短指令。 与静态文本不同,当用户在文本框中键入内容或获得输入焦点后,提示就会从屏幕中消失。

带有标签的提示文本框的 屏幕截图:搜索

典型的提示。

在以下情况下使用提示:

  • 屏幕空间处于如此高级,使用标签或指令是不可取的,例如在工具栏上。
  • 提示主要用于以紧凑方式标识文本框的用途。 用户在使用文本框时必须看到的关键信息。

不要只使用提示来指示用户键入内容或单击按钮。 例如,不要编写提示文本,显示输入文件名,然后单击“发送”。

使用提示时:

  • 以斜体灰色和普通黑色的实际输入文本绘制提示文本。 提示文本不得与真实文本混淆。
  • 保持提示文本简洁。 可以使用片段而不是完整句子。
  • 使用句子样式大写。
  • 不要使用结束标点符号或省略号。
  • 提示文本不应可编辑,用户单击或按 Tab 进入文本框后应消失。
    • 异常: 如果文本框具有默认输入焦点,则会显示提示,并在用户开始键入后消失。
  • 如果文本框在失去输入焦点时仍为空,则会还原提示文本。

对于文本框,建议调整大小和间距。

文本框的宽度是预期输入大小的可视线索。 调整文本框大小时:

  • 选择适合最长有效数据的宽度。 在大多数情况下,用户不必滚动他们输入或查看的最长可能字符串。
  • 包括将本地化的任何文本(但不包括数字)的额外 30%(最多为短文本的 200%) 。
  • 如果预期的输入没有特定大小,请选择与窗口上其他文本框或控件一致的宽度。
  • 调整多行文本框的大小以显示整型文本行数。

标签

文本框标签

  • 所有文本框都需要标签。 将标签编写为单词或短语,而不是作为句子,以冒号结尾,并使用 静态文本

    异常:

    • 带有提示的文本框位于空间处于高级位置。

    • 对于标记,应将一组用于 格式的数据输入的文本框视为单个文本框

    • 如果文本框属于单选按钮或复选框,并且由其标签以冒号结尾引入,请不要在文本框中添加其他标签。

    • 省略重述主指令的控件标签。 在这种情况下,主指令采用冒号(除非是问题)和访问密钥。

      可接受:

      带有重复标签的文本框的 屏幕截图

      在此示例中,文本框标签只是主指令的重述。

      更好:

      仅屏幕截图

      在此示例中,删除冗余标签,因此主指令采用冒号和访问键。

  • 分配唯一的访问密钥。 有关访问键分配指南,请参阅 键盘

  • 使用句子样式大写。

  • 将标签置于文本框左侧或上方,并将标签与文本框的左边缘对齐。 如果标签位于左侧,则垂直对齐标签文本与文本框文本。

    正确:

    文本框上方左对齐标签的屏幕截图

    文本框左侧文本对齐标签 屏幕截图

    在这些示例中,顶部的标签与文本框的左边缘对齐,左侧的标签与文本框中的文本对齐。

    不正确:

    文本框上方文本对齐标签的屏幕截图

    文本框左对齐标签屏幕截图

    在这些不正确的示例中,顶部的标签与文本框中的文本对齐,左侧的标签与文本框顶部对齐。

  • 可以在标签后面的括号中指定单位(例如秒或连接)。

  • 如果文本框接受任意较小的最大字符数,则可以在标签中声明最大输入。 文本框宽度还应建议最大大小。

    密码文本框的屏幕截图

    在此示例中,标签提供最大字符数。

  • 不要将文本框(或其单位标签)的内容设为句子的一部分,因为这不可本地化。

  • 如果文本框可用于输入多个项,请明确说明如何分隔标签中的项。

    使用分号屏幕截图

    在此示例中,在标签中提供了项分隔符。

  • 有关指示所需输入的指南,请参阅 对话框中的必需输入

指令标签

  • 如果需要添加有关文本框的说明性文本,请在标签上方添加它。 使用带有结束标点符号的完整句子。

  • 使用句子样式大写。

  • 其他有用但不需要的信息应保持简短。 将此信息放在标签和冒号之间的括号中,或在文本框下方不带括号。

    文本框下方添加信息的屏幕截图

    在此示例中,其他信息放置在文本框下方。

提示标签

  • 保持提示文本简洁。 可以使用片段而不是完整句子。
  • 使用句子样式大写。
  • 不要使用结束标点符号或省略号。
  • 如果提示指示用户输入将由文本框旁边的按钮作的信息,只需将按钮放在文本框旁。 不要使用提示指示用户单击按钮(例如,不要编写显示“拖动文件”的提示文本,然后单击“发送”)。

文档

引用文本框时:

  • 使用类型来引用需要键入或粘贴的用户交互;否则,如果用户可以使用其他方式(例如从列表中选择值或使用“浏览”按钮)将信息放入文本框中,请使用 Enter。

  • 使用 select 引用只读文本框中的条目。

  • 使用确切的标签文本,包括其大写,并包括单词框。 不要包括访问键下划线或冒号。 不要将文本框称为文本框或字段。

  • 如果可能,请使用粗体文本设置标签的格式。 否则,仅当需要防止混淆时,才将标签置于引号中。

    示例:在 密码 框中键入密码,然后单击 确定

  • 如果文本框需要特定格式,则仅记录最常用的可接受格式。 让用户自行发现任何其他格式。 你想要灵活处理数据格式,但这样做不应导致复杂的文档。

    正确:

    使用 1234-56-7890 格式输入部件的序列号。

    不正确:

    使用以下任何格式输入部件的序列号:

    1234567890

    1234-56-7890

    1234 56 7890