出自UXGuide.net

选项按钮

Radio Button

目录 1 它用在这里合适吗？ 2 设计规范 2.1 附属控件 2.2 默认值 3 推荐尺寸与间距 4 标签 4.1 选项按钮标签 4.2 选项按钮分组标签 5 文档编写

选项按钮（Radio Button）用于在一组相关但互斥的选项中进行选择。用户能且仅能选择一个选项。之所以称为“radio button”，是因为它像收音机（radio）上的一些预设的频道。

一组典型的选项按钮

一组选项按钮的行为如同一个单独的控件。只有选中的选项能够通过 Tab 键访问，但用户可以通过方向键来遍历所有选项。

注：与布局及键盘导航相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

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

• 该控件是用于在一组相关但互斥的选项中进行选择的吗？如果不是，则改用其他控件。要选择多个选项，应改用复选框（check box）、多选列表框（multiple-selection list）或带复选框的列表框（check box list）。
• 选项的数量在 2 到 7 个之间吗？屏幕空间的使用会随着选项的数量而成比例增长，因此应当将每组选项的数量控制在 2 到 7 个之间。如果选项多于 7 个，应使用下拉列表（drop-down list）或单选列表框（single-selection list）.
• 复选框会不会更合适？如果只有两个选项，你可以改用单个复选框。但是，复选项只适合用于打开或关闭一个选项，而选项按钮则可用于完全不同的选项。如果现两种解决方案都可行的话：
  • 如果复选框被清除时的含义不是非常明显的话，应使用选项按钮。

错误：

正确：

在这个正确的示例中，选项并非完全对立的，因此选项按钮更加合适。

• • 在向导中，使用选项按钮会使可选项更为清晰，即使复选框本身是可行的。
  • 如果屏幕空间足够，且这些选项之重要值得占用那么多屏幕空间的话，就可以使用选项按钮。否则，应使用复选框或者下拉列表。

错误：

在这个示例中，这些选项并不值得去使用选项按钮。

正确：

在这个示例中，复选框对屏幕空间的占用对于这个并不重要的选项来说非常经济。

• • 如果窗口中存在其他复选框，则也可以使用复选框。
• 下拉列表会不会更合适？如果在大多数情况下，默认选项对大多数用户来说都是推荐的，那么选项按钮可能会过分占据用户的注意力。
  • 如果你不希望在这些选项上花太多注意力，或者你不鼓励用户进行更改，应考虑使用下拉列表。下拉列表关注的是当前选中的项，而选项按钮对每个选项都是同样地强调。

在这个示例中，下拉列表致力于当前选中的项，且不鼓励用户进行更改。

• • 如果页面上还有其他下拉列表，那么也可以考虑使用下拉列表。
• 该选项展示的是程序选项，而非数据吗？选项值不应当基于上下文或其它数据。对于数据，应当使用下拉列表或单选列表框。
• 如果该控件是用在向导页或控制面板上的话，它是否是对主要说明的直接响应？用户之后能不能再进行修改？如果是，考虑改用命令链接（command links）以提高交互的效率。
• 这些值不是数值吗？对于数值数据，应使用文本框、下拉列表或滑块。

设计规范

• 以逻辑顺序排列选项，比如从被选到的可能性从高到低、操作从简单到复杂、或者风险从低到高等等。字母顺序排列并不推荐，因为这是语言相关的，无法本地化。
• 如果没有一个选项是有效的选择，应当添加一个选项以反映该选择，例如“无”或“不适用”。
• 最好将多个选项按钮垂直排列，而非水平排列。水平排列会使得难以阅读和本地化。

正确：

在这个示例中，单选按钮是垂直对齐的。

错误：

在这个示例中，水平对齐会使得难以阅读。

• 认真考虑是否使用分组框来对单选按钮进行分组——这往往导致不必要的屏幕混乱。
• 不要将选项按钮用于分组框标签。
• 不要将选中单选按钮用于：
  • 执行命令。
  • 显示其他窗口，比如用于收集更多输入的对话框。
  • 动态显示与选中控件相关的其他控件（屏幕阅读器无法检测到这类事件）。不过你可以基于不同选择来动态改变文本的内容。

附属控件

• 将附属控件放在复选框及其标签的右侧或下方（缩进，与选项按钮标签平齐）。选项按钮标签应以冒号结尾。

在这个示例中，复选框及其附属控件共用复选框的标签和访问键。此时，方向键用于将焦点从选项按钮移动到其附属文本框。

• 如果相关的可编辑文本框及下列拉表共用选项按钮的标签时，应当保持其处于可用状态。当用户在其中键入或粘贴任何内容时，自动选中对应的选项。这么做能够简化操作。

在这个示例中，输入页码将自动选中“Pages”。

• 避免在选项按钮中嵌套其他选项按钮或复选框。如果可能的话，将所有选项保持在同一个层级上。

正确：

在这个示例中，所有选项都处于同样的层级。

错误：

在这个示例中，使用嵌套的选项增加了不必要的复杂性。

• 如果要在选项按钮中嵌套其他选项按钮或复选框，则在高层次的选项被选中之前，禁用这些附属控件。这么做能够避免附属控件含义的混乱。

默认值

• 因为一组选项按钮表示的是一组互斥选项，应当总是有一个选项按钮是默认选中的。应选择最可靠（避免数据丢失或无法访问系统）和最安全的选项。如果可靠性或安全性不是需要考虑的因素，则选择最常用或最方便的选项。

例外：下列情况下无需默认选中：

• • 由于可靠性、安全性或法律原因，不存在可以接受的默认选项，且用户因此必须做出明确选择时。如果用户不进行选择，则显示错误信息强制要求。
  • 该用户界面必须反映当前状态，而选项还未被设置。默认值可能会错误地暗示用户无需再进行选择。
  • 目的在于收集公正数据。默认值会使数据收集带有倾向性。
  • 该组选项按钮表示的是处于混合状态的属性，这会在显示多个设置不同的对象的属性时发生。此时不要显示错误信息，因为每个对象都处于有效的状态。
• 将第一个选项作为默认选项，因为用户通常会这么认为——除非这样的顺序不符合逻辑。如果要这么做，你可能需要更改选项的标签。

错误：

在这个示例中，默认选项不是第一个选项。

正确：

在这个示例中，重新改写了选项标签，使第一个选项成为默认选项。

推荐尺寸与间距

用于选项按钮的推荐尺寸与间距

标签

选项按钮标签

• 为所有单选按钮添加标签。
• 分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 标签文本应当为短语，而非句子，且不要使用句末标点。
  • 例外：如果选项按钮标签同时用于其后的附属控件，则标签应当以冒号结尾。
• 应当使用并列的措辞并尽量保持所有标签的长度大致相同。
• 标签文本应当专注于各选项的差异上。如果所有的选项都有相同的说明文本，则应将此文本移至分组标签中。
• 使用肯定的表述方式。例如，使用“做”代替“不要做”、“打印”代替“不要打印”。
• 在标签中仅描述选项。保持标签的简洁使得在提示信息和文档中易于引用。如果需要对选项给出进一步的解释，应当在静态文本控件中使用完整的带有句末标点的句子进行解释。

在这个示例中，各选项通过独立的静态文本控件进行了解释。

注：为一个单选按钮添加说明并不意味着你需要给所有单选按钮都提供说明。如果可以的话，在标签中提供相关信息，并仅在必要时才使用说明。不要仅仅为了统一而重复标签的内容。

• 如果一个选项是强烈推荐的，应当在标签中添加“(recommended)”/“（推荐）”字样。确保添加至控件标签，而不是附加说明。
• 如果一个选项是仅为高级用户设计的，应当在标签中添加“(advanced)”/“（高级）”字样。确保添加至控件标签，而不是附加说明。
• 如果你必须使用多行标签，应当将标签的顶部与选项按钮对齐。
• 不要通过附属控件、其包含的值、或是其单位标签来组成句子或短语。这种设计无法被本地化，因为句子结构在不同的语言中会发生变化。

选项按钮分组标签

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

例外：省略那些完全只是重复对话框主标题说明的标签。这种情况下，主标题说明带有冒号（除非是问句）和访问键（如果有的话）。

可以接受：

在这个示例中，选项按钮组的标签只是在重复主标题说明。

更好：

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

• 不要为标签分配访问键。这么做没有必要，而且它会使其他访问键难以分配。
  • 例外：如果并非所有控件都能被分配到唯一的访问键的话，你可以将访问键分配给标签而非单独的控件。更多信息，参见键盘。

文档编写

当提及选项按钮时：

• 原样引用标签文本，包括其大小写，但无须包含访问键下划线和省略号。
• 在编程和其他技术文档中，将选项按钮称为“radio buttons（选项按钮）”。在其他地方，尤其是用户文档中，应称为“option buttons（选项按钮）”。
• 用“click（单击）”一词描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：Click Current page, and then click OK.（单击“当前页”，然后单击“确定”。）