Material Design——Selection controls

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Selection controls

选择控件允许用户选择选项。

一、用法

选择控件允许用户完成涉及选择的任务，例如选择选项或打开或关闭设置。 选择控件位于要求用户做出决定或声明诸如设置或对话框等首选项的屏幕上。

△ 原则

· 熟悉 选择控件已经在用户界面中使用了很长时间，应该按预期使用

· 识别性 如果选择了选择控件，则应该一目了然，并且所选项目应该比未选择的项目在视觉上更突出

· 高效 选择控件可以轻松识别可用选项

△ 种类

1.Radio buttons；2.Checkboxes；3.Switches

△ 使用radio buttons的时间

使用单选按钮：

· 从列表中选择一个选项

· 公开所有可用选项

如果可以折叠可用选项，请考虑使用下拉菜单，因为它占用的空间更少。

Radio buttons

如果只能从列表中选择一个项目，则应使用单选按钮（Radio buttons）而不是复选框（Checkboxes）。

Wrong：当只能从列表中选择一个项目时，请勿使用复选框， 请改用单选按钮；Right：当只能从列表中选择一个项目时，使用单选按钮。

△ 使用switches的时间

使用开关：

· 在移动设备和平板电脑上打开或关闭单个选项

· 立即激活或停用某些内容

Switches

如果只能从列表中选择一个项目，则应使用开关而不是单选按钮。

请勿使用单选按钮打开或关闭选项。

使用开关打开或关闭选项，尤其是在移动设备上。

△ 使用checkboxes的时间

使用复选框：

· 从列表中选择一个或多个项目

· 显示包含子选择的列表

· 在桌面中打开或关闭选项

Checkboxes

何时使用复选框而不是切换

如果列表包含多个选项，请避免使用开关，使用复选框，因为它们占用的空间更少。

复选框用于从列表中进行选择， 它们允许用户选择多个项目，并允许使用父复选框轻松选择或取消选择所有项目。

二、复选框

△ 用法

复选框允许用户从一组中选择一个或多个项目， 复选框可用于打开或关闭选项。

选中和未选中的复选框。

左：使用复选框选择列表中的多个项目；右：使用复选框打开或关闭选项。

父类和子类复选框

复选框可以与其他复选框具有父子关系

· 选中父复选框后，将选中所有子复选框

· 如果未选中父复选框，则取消选中所有子复选框

· 如果选中了一些（但不是全部）子复选框，则父复选框将变为不确定复选框

选中，取消选中和不确定父复选框。

△ 状态

可以选择，取消选中或不确定复选框， 复选框已启用，悬停，聚焦和按下状态。

Checkbox states

三、单选按钮

△ 用法

单选按钮允许用户从一组中选择一个选项，当用户需要查看所有可用选项时，使用单选按钮， 如果可以折叠可用选项，请考虑使用下拉菜单，因为它占用的空间更少。

左：选定和未选中的单选按钮；右：使用单选按钮选择单个项目。

△ 状态

可以选择或取消选择单选按钮，单选按钮具有启用，悬停，聚焦和按下状态。

Radio button states

四、开关

△ 用法

切换可以打开或关闭单个设置的状态， 它们是调整移动设置的首选方式。

· 状态

当用户将开关拇指滑动到轨道的另一侧时，开关成功切换，并且开关的状态改变。

· 文字标签

应从相应的内联标签中明确指示开关控制的选项及其所处的状态。

避免在图形本身内创建包含“on”和“off”文本的开关， 单独的开关就足够了。

使用开关打开和关闭选项

△ 行为

当用户切换开关时，其相应的操作立即生效，如果无法打开开关，开关将自动关闭。

无法切换开关

显示处理状态

因为开关显示某物的实际状态，所以有时它的状态变化会有延迟， 在这种情况下，可以使用处理状态动画。

处理状态是交换机拇指上的动画，例如，当控制硬件功能的交换机在确认其最终状态之前经历延迟时，可以使用它。

处理状态动画

△ 状态

开关可以打开或关闭， 开关具有启用，悬停，聚焦和按下状态。

仅在使用触摸的形状因子上显示外部径向反应，其中相互作用可能完全阻碍元件。

对于台式机，不需要径向反应。

切换状态

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~