Selection controls - 选择控件

Selection controls allow the user to select options.

【翻译】
选择控件允许用户选择选项。

Three types of selection controls are covered in this guidance:

Checkboxes allow the selection of multiple options from a set.
Radio buttons allow the selection of a single option from a set.
Switches allow a selection to be turned on or off.

【翻译】
本指南包括三种类型的选择控制：
复选框允许从一组中选择多个选项。
单选按钮允许从一个集合中选择单个选项。
开关允许选择打开或关闭。

Color - 颜色
Selection controls use an app’s accent color.

【翻译】
选择控件使用应用的强调颜色。

Themes - 主题
Selection controls are available in both dark and light themes.

【翻译】
选择控件可用于暗和亮主题。

Checkbox - 复选框

Checkboxes allow the user to select multiple options from a set.

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

If you have a single option, avoid using a checkbox and use an on/off switch instead.

【翻译】
复选框允许用户从集合中选择多个选项。
如果列表中有多个选项，您可以使用复选框而不是开/关开关来保留空间。
如果您有单个选项，请避免使用复选框，而使用开/关开关。

[图片上传失败...(image-ad7a98-1552294680602)]
Light theme

【翻译】
亮色主题

[图片上传失败...(image-caf6fd-1552294680602)]
Dark theme

【翻译】
暗色主题

Light - 亮色

On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%

【翻译】
开：色板 500，不透明度100％
关闭：＃000000，不透明度54％
禁用：＃000000，不透明度26％

image

Light theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
浅色主题的悬停，聚焦，按下，禁用和禁用焦点状态的复选框。

Dark - 暗色

On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%

【翻译】
开：色板 500，不透明度100％
关闭：#FFFFFF，不透明度70％
已禁用：#FFFFFF，不透明度30％

[图片上传失败...(image-2eb60e-1552294680602)]
Dark theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
黑色主题的悬停，聚焦，按下，禁用和禁用焦点状态的复选框。

Radio button - 单选按钮

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Otherwise, consider a dropdown, which uses less space than displaying all options.

【翻译】
单选按钮允许用户从一组中选择一个选项。如果您认为用户需要并排查看所有可用的选项，请使用单选按钮进行独占选择。
否则，请考虑一个下拉列表，其使用的空间比显示所有选项少。

[图片上传失败...(image-adb506-1552294680602)]
Light theme for radio buttons

【翻译】
亮色主题的单选按钮

[图片上传失败...(image-50b1b9-1552294680602)]
Dark theme for radio buttons

【翻译】
暗色主题的单选按钮

Light - 亮色

On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%

【翻译】
开：色板 500，不透明度100％
关闭：＃000000，不透明度54％
禁用：＃000000，不透明度26％

[图片上传失败...(image-500735-1552294680602)]
Light theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
轻松主题的单选按钮悬停，聚焦，按下，禁用和禁用焦点状态。

Dark - 暗色

On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%

【翻译】
开：色板 500，不透明度100％
关闭：#FFFFFF，不透明度70％
已禁用：#FFFFFF，不透明度30％

[图片上传失败...(image-70e202-1552294680602)]
Dark theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
黑色主题的单选按钮悬停，聚焦，按下，禁用和禁用焦点状态。

Switch - 开关

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead.

【翻译】
开/关开关可切换单个设置选项的状态。 开关控制的选项以及它所处的状态应该从相应的内联标签中清除。 开关采用单选按钮的相同视觉属性。 不推荐使用包含在资产中的文字“开”和“关”的开/关幻灯片切换。 使用此处显示的开关。

[图片上传失败...(image-14d8e8-1552294680602)]
Light theme

【翻译】
亮色主题

[图片上传失败...(image-4c9e60-1552294680602)]
Dark theme

【翻译】
暗色主题

Light - 亮色

Thumb On: Swatch 500, Opacity 100%
Track On: Swatch 500, Opacity 50%

Thumb Off: Grey 50, #FAFAFA, Opacity 100%
Track Off: #000000, Opacity 38%

Thumb Disabled: Grey 400, #BDBDBD, Opacity 100%
Track Disabled: #000000, Opacity 12%

【翻译】
开关开：色板 500，不透明度100％
轨道开：色板 500，不透明度50％
开关关：灰色50，#FAFAFA，不透明度100％

轨道关：＃000000，不透明度38％
开关禁用：灰色400，#BDBDBD，不透明度100％
轨道已禁用：＃000000，不透明度12％

[图片上传失败...(image-cfc01d-1552294680602)]
Light theme for switches in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
轻松主题的开关在悬停，聚焦，按下，禁用和禁用焦点状态。

Dark - 暗色

Thumb On: Swatch 200, Opacity 100%
Track On: Swatch 200, Opacity 50%

Thumb Off: Grey 400, #BDBDBD, Opacity 100%
Track Off: #FFFFFF, Opacity 30%

Thumb Disabled: Grey 800, #424242, Opacity 100%

Track Disabled: #FFFFFF, Opacity 10%

【翻译】
开关开：Swatch 200，不透明度100％
轨道开：Swatch 200，不透明度50％
开关关：灰色400，#BDBDBD，不透明度100％
轨道关：#FFFFFF，不透明度30％
开关禁用：灰色800，＃424242，不透明度100％
轨道禁用：#FFFFFF，不透明度10％

image

Dark theme for switches in hover, focused, pressed, disabled, and disabled focused states.

【翻译】
黑暗主题为开关在悬停，聚焦，按下，禁用和禁用聚焦状态。

Use the outer radial reaction only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.

【翻译】
使用外径向反应只有在有利于手指触摸的形状因素，其中相互作用可能完全阻碍元素。对于使用鼠标的桌面，您不需要此额外的指示。

[图片上传失败...(image-b27b1b-1552294680602)]
Radial reaction on mobile

【翻译】
在移动上的径向反应

[图片上传失败...(image-92228f-1552294680602)]
No radial reaction on desktop

【翻译】
桌面上没有径向反应