Windows桌面应用程序设计指南（控件篇18-文本框）

使用文本框，用户可以展示、输入或编辑文字和数字。

一个典型的文本框

何时使用该控件

思考以下问题：

• 是否很容易穷举出所有有效值？如果是这样，考虑使用单选列表、列表视图、下拉列表、可编辑下拉列表或者滑块替代。
• 有效数据是否完全不受约束？ 或者有效数据仅受格式(长度或字符类型)限制？ 如果是，使用文本框。
• 该值是否是有专用对应控件的数据类型？例如日期、时间、 IPv4或IPv6地址。 如果是，请使用适当的对应控件，例如日期选择器而不是文本框。
• 如果数据是数字：
  1.用户需要设置的是否是相对数量？如果是，使用滑块。
  2.观察到即时的反馈和设置改变的效果是否对用户有帮助？如果是，使用（可以带有文本框的）滑块。例如，用户使用滑块来调节颜色，可以马上看到改变色相、明度和纯度给颜色整体产生的影响。

设计思路

虽然文本框具有非常灵活这一优点，但它们的缺点是具有最小值的约束。可编辑文本框的限制有:

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

除了长度限制和可选的旋转控制外，文本框没有任何视觉线索来提示其有效值或格式。这意味着必须要依靠标签将这些信息传递给用户。如果用户输入的文本无效，则必须使用错误提示告知用户错误原因。

一般来说，应该尽可能多地使用限制性控件。文本框这类的非限制性控件是最后的选择。即便如此，在考虑限制性时，也要考虑全球不同地区用户的需求。例如，适用于美国邮政编码的限制性控件并不能全球化使用，而非限制性文本框则可以适用于任何邮政编码格式。

应用范例

文本框是一个有多种使用方式的灵活控件：
数据输入框：一个用来输入或编辑短字符串的单行、非限制性文本框。

数据输入框示例
格式化数据输入框：一组短的、固定大小的单行文本框，用于以特定格式输入数据。
格式化数据输入框示例
注：文本框的自动退出特性会在完成输入后将输入焦点自动进入到下一个文本框。 这种特性的缺点是不能将数据复制或粘贴为单个单元。

带辅助控件的输入框：用于输入或编辑字符串的单行非限制性文本框，附带一个帮助用户选择有效值的命令按钮。

带辅助输入框示例

文本输入框：用来编辑或输入长字符串的非限制性多行文本框。

多行非限制性文本输入框

数字输入框：一种只能键入或编辑数字的单行文本框，可以附带一对方便鼠标操作键入的旋转控件。

用来输入数字的文本框

数据输出：不带边框的单行只读文本框，用来展示短的字符串。与静态文本不同，当数据比控件宽时，使用文本框显示的数据可以滚动、选中和复制。

用来展示数据的单行、只读文本框

文字输出：用来展示大段只读文字的多行文本框。

用来展示数据的只读文本框

设计指南

通用原则

• 当禁用一个文本框时，也要同时禁用与之相关的标签文字、说明文字、旋转控件以及命令按钮。
• 有可能被用户反复填充的内容，可以使用自动补全机制填写。类似的例子有用户名、地址、文件名等等。但涉及敏感信息的文本框不宜使用自动补全，例如密码、PIN码、信用卡账号和医疗信息等。
• 尽量不要让用户进行进行滚动操作。如果数据尺寸有可能超过文本框，并且能在不影响布局的情况下使文本框变大，那么调整框的大小以避免滚动。

错误示例：文本框的长度应做得更长以适应数据的长度

• 关于滚动条：
  1.不要在多行文本框中放置水平滚动条。使用竖向滚动条和换行机制代替。
  2.不要在单行文本框中放置滚动条。

• 对于数字输入，可以使用旋转控件。对于文本输入，使用下拉列表或可编辑的下拉列表。

• 除了格式化的数据输入，不要使用自动退出功能。输入焦点的自动转移可能会让用户感到意外。

可编辑文本框

• 尽可能对输入文本的长度进行限制。例如，如果有效输入是介于0和999之间的数字，则使用限制为三个字符的数字文本框。使用格式化数据输入的文本框的所有部分长度必须具固定而且简短。

• 不要限制数据类型。如果用户可能输入不同的数据类型，请尝试处理所有常用的格式。例如，可以使用空格和标点符号输入名称、数字和标识符，而且一般不区分大小写。

• 如果用户可以填入的数据有类型限制，使用有格式限制的输入框形式来暗示用户这一点，或者直接在标签中说明有效数字格式。

  
  可接受的文本框：只允许某种数据类型并作出说明
  更佳的应用：类型化的输入控件只允许符合类型的数据输入
  最佳示例：可处理所有数据类型的文本框

• 在设置最大输入长度时，考虑多种数据类型的灵活性。例如，一个有效的信用卡号码最多可以使用19个字符，因此将长度限制为短于19个字符，用户若要输入长数字就会很困难。

• 如果用户有可能粘贴长且复杂的数据，就不要使用格式化的输入控件。只在用户比较可能手动输入的情况下使用格式化输入控件。
  

  便于用户复制粘贴复杂数据的输入框不会使用格式化输入控件

• 如果用户很有可能需要重新键入整个数据，就将输入焦点选中整条数据。如果用户更有可能只是对数据进行修改，就将光标放置在文本末端。

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

• 当文本框用于输入文件名或路径时，始终提供一个浏览按钮。

数字文本框

• 选择最合适的单位，并在标签中写明该单位。例如，考虑使用毫升代替升(或相反)、百分比代替直接值(或相反)等等。

• 当旋转控件有用的时候，记得灵活使用。但是，有时候旋转控件并不是那么实用，例如当用户需要输入的数字非常大。以下几种情况可以使用旋转控件：
  1.输入的数字很有可能是100以下的小数字。
  2.用户很有可能是要对已经存在的数字进行很小的修改。
  3.相对于使用键盘，用户在该情境下更有可能使用鼠标。

• 需要右对齐数字文本的情况：
  1.存在多于一个的数字输入框。
  2.输入框是竖向排列对齐的。
  3.用户很有可能对数据进行添加或者对比。
  

  正确示例
  错误示例

• 金额数量永远右对齐展示。

• 不要给特定的数值赋予特殊的含义，就算您的应用程序在内部应用了这些特殊含义也是如此。正确的做法是使用复选框或单选按钮辅助用户进行设置。
  

  错误示例：该例中赋予了-1这个值特殊的含义
  正确示例:该例中使用选择框，使得选项更加简洁明了

密码和PIN码输入

• 不要自己设计，永远直接使用通用的密码输入控件。密码和PIN码出于安全考虑，都需要经过特殊处理。

文本输出

• 对需要大面积展示的多行只读文本，背景尽量使用白色系统颜色。白色背景上的文字可读性更好，灰色背景上的大段文字对阅读不太友好。

数据输出

• 单行只读文本区域不要加边框。边框是代表文本可编辑的视觉线索。
• 不要禁用单行只读文本区域。禁用操作下用户将无法对文本进行复制粘贴，同时对超过显示区域的信息也无法滚动显示了。
• 不要在单行只读文本框上设置制表位，除非用户可能需要滚动或复制文本。

输入的有效性以及错误处理

因为文本框通常不会限制为仅接受有效值，所以需要对用户的输入进行确认，并且对可能出现的错误进行处理。在以下几种情形下验证输入问题：

• 如果用户输入的字符无效，忽略该字符，并显示一个解释有效字符的输入问题气球状提示。

  
  正确示例：该例中的气球状提示报告了一个输入问题
• 如果输入数据的值或格式无效，则在文本框失去输入焦点时显示输入问题气球状提示。
• 如果输入数据与窗口上的其他控件不一致，则在整个输入完成时给出一个错误消息提示，例如当用户单击“确定”来退出模态对话框时。
  除非用户无法轻易更改输入错误，否则不要自动清除用户输入的无效值，这样用户无需从头开始更改自己的输入错误。但是当密码或PIN码输入错误时，就应该直接清除整个错误输入，因为用户没办法很轻松地在原有输入上进行更改。

更多详细规则，请参见 错误信息 和 气球状提示 相关章节。

输入提示

输入提示是作为默认值放置在文本框中的一段标签文字或者简短提示。和其他静态文本不同，输入提示会在用户键入内容或者获取输入焦点的瞬间消失。

一个典型的输入提示文字

使用输入提示的场景有：
1.屏幕空间很有限，使用标签或说明文字不合适，如在工具栏上。
2.提示符主要用于简洁地表明文本框的用途。它不能是用户在使用文本框时需要查看的关键信息。
不要使用输入提示指示用户输入特定文字或点击按钮。例如，输入提示不能是“请输入文件名”或者“点击发送”。

使用输入提示时需要注意：

• 提示文字使用斜体灰色表示，输入的文字使用正常黑色字体，这两者不能在外观上混淆。
• 提示文字尽量简洁。可以使用短语而不是完整句子。
• 使用句式大小写规则。
• 结尾不要使用结束标点符号或省略号。
• 提示文字是不可编辑的，并且在用户点击或开始键入文本框瞬间消失。
  （特例：当文本框默认带有输入焦点时，提示文字也默认展示，在用户开始键入文字时消失。）
• 当文本框失去焦点时，若其内容仍然为空，则恢复显示提示文字。

建议尺寸和间距

文本框的建议尺寸和间距

文本框的长度是预期输入文本长度的视觉线索。当设计文本框大小时:

• 根据最长的有效数据设置适当宽度。在大多数情况下，用户不应该需要滚动才能完整查看他们输入的最长字符串。
• 对于要本地化的所有文本(但不包括数字) ，额外增加30%长度 (对于较短的文本，增加200%)。
• 如果预期的输入没有大致长度的预设，请选择与窗口上的其他文本框或控件一致的长度。
• 将多行文本框的高度设置为能显示整数行的文本。

标签

文本框标签

• 所有文本框都需要标签。将标签写成单词或短语，而不是句子，以冒号结尾，并使用静态文本。
  特殊情况：
  1.空间很有限时，可以使用仅含提示文字的文本框。
  2.对于标签，用于格式化数据输入的一组文本框应被视为单个文本框。
  3.若文本框从属于单选或多选按钮，并通过以冒号结尾的标签引入，则不要在文本框上添加附加标签。
  4.省略重述主指令的控件标签。在这种情况下，主指令可带有冒号(除非它是一个问题)和访问键。
  可行方案：文本框标签是对主指令的重述

更好的方案：文本框标签被移除，主指令带有冒号以及访问键

• 为标签分配独特的存取键。
• 使用句式大小写规则。

• 标签在文本框上方与之左对齐，或在文本框左边与之竖向居中对齐。

  
  正确示例

正确示例 错误示例
错误示例

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

• 如果文本框需要设置最大字符数限制，则可以在标签中声明最多可输入字符数。文本框的宽度也应该适合最多字符数的宽度。

  
  示例
• 不要将文本框(或其单元标签)的内容设计为句子中的部分，因为这是不可本地化的。

• 如果文本框可用于输入多个项目，请在标签中说明如何分隔各项目。

  
  正确示例

说明标签

• 如果需要添加有关文本框的说明文字，请将其添加到标签上方。使用带有结束标点符号的完整句子。
• 使用句式大小写规则。

• 其他有用但非必要的信息应该保持简短。将此信息置于标签文字和冒号之间的括号中，或者不加括号放置于文本框下方。

  
  示例

提示文字标签

• 保持提示文字的简洁。可以用片段代替完整的句子。
• 使用句式大小写规则。
• 在结尾不要使用标点符号或省略号。
• 如果提示符指示用户输入将由文本框旁边的按钮操作的信息，只需将按钮放在文本框旁边即可。不要使用提示来指示用户单击按钮(例如不要在提示文字中写：“拖动文件，然后单击发送”)。

说明

当提到文本框时：

• 使用“输入”（type）来描述需要键入或粘贴的用户交互行为; 如果用户可以使用其他方法(如从列表中选择值或点击“浏览”按钮进入面板选择)将信息放入文本框，则使用 enter。
• 使用 select “选择”引用只读文本框中的项。
• 使用确切的标签文本，包括其大小写，并包括“文本框”这一描述。不要包含访问键、下划线或冒号。不要将文本框作为“文本框”或“字段”引用。
• 如果可能，使用粗体文本格式化标签。否则，只有在需要时才将标签加上引号，以防混淆。

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

• 如果文本框需要特定的格式，那么文档只能采用最常用的可接受格式。让用户自己发现任何其他格式。您希望灵活处理数据格式，但不要因此使文档变得复杂。
  正确示例：使用1234-56-7890格式输入零件的序列号。
  错误示例：可使用以下几种格式输入零件的序列号：
  1234567890
  1234-56-7890
  1234 56 7890