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

Material Design链接：Buttons

用户可以通过点击按钮采取行动并做出选择。

一、使用

用户可以通过点击按钮进行相关操作，它们贯穿在整个UI中，如下所示：

· Dialogs（对话框）

· Modal windows（模式窗口）

· Forms（形状）

· Cards（卡片）

· Toolbars（工具栏）

△ 原则

· 识别性高 按钮可以指示他们代表的相关功能或操作

· 容易发现 在其他元素中应该很容易找到按钮，包括其他按钮

· 清晰明确 按钮的动作和状态应该是清楚的

△ 类型

· 文本按钮（低强调）

文本按钮通常用于不太重要的操作

· 轮廓按钮（中等重点）

由于笔划，概述按钮比文本按钮更强调

· 容器按钮(高度强调)

使用颜色填充和阴影使按钮更突出。

· 切换按钮

切换按钮组使用布局和间距的一组动作，它们的使用频率低于其他按钮类型。

二、分析

按钮包含一个必需元素和四个可选元素。

△ Text label（文本）

文本按钮和包含的按钮使用文本标签，这些标签描述用户点击按钮时将发生的操作。如果没有使用文本标签，则应该用图标来表示按钮的功能。

默认情况下，使用大写按钮文本标签(用大写语言)。这是为了区分文本标签和周围的文本。如果文本按钮不用大写，需要找到另一个特征来区分它，如颜色、大小或位置。

RIGHT:对于允许大写的语言，请使用大写;WRONG:不要包装文字。为了达到最大的可读性，文本标签应该保留在一行上。

三、等级和布局

△ 等级

一个突出的按钮

布局应该包含一个突出的按钮，清楚地表明其他按钮在层次结构中的重要性较低，这个强调度高的按钮最吸引人注意。

其他按钮

一个应用程序一次可以显示一个布局中的多个按钮，因此一个高强调按钮可以伴随着执行不太重要的操作的中、低强调按钮。当使用多个按钮时，确保一个按钮的可用状态不像另一个按钮的禁用状态。

按钮的强调程度有助于确定其外观、排版和布局。

△ 位置

多个按钮类型可以用来表示不同的强调级别。

此屏幕布局的使用：

· 高度强调的扩展浮动动作按钮

· 高度强调的容器按钮

· 用于低强调度的文本按钮

RIGHT:在底部栏中，当使用多个按钮时，通过将其放置在包含的按钮(文本按钮旁边)中，指示更重要的操作。;WRONG:如果两个包含的按钮没有相同的填充颜色，要避免使用彼此相邻的两个包含的按钮。

左：在底部栏中，当使用多个按钮时，您可以在包含按钮(高度强调)旁边放置一个容器按钮(中等强调)；右：在底部栏中使用多个按钮时，您可以将文本按钮(低强调)放置在概要按钮(中等强调)旁边。

使用底部工作表中的包含按钮，旁边是其他重要的细节。

如果有空间将按钮并排放置在另一个按钮下面，不要将其放置在另一个按钮下面。

四、文本按钮

△ 用法

文本按钮通常用于不太明显的操作，包括位于：

· In dialogs

· In cards

在卡片中，文本按钮可以对卡片内容进行强调。

Text button

左：在弹框中使用文本按钮；右：与图像背景对应的文本按钮。

△ Text label（文本）

按钮的文本标签是按钮上最重要的元素，因为它告诉用户触发按钮时将执行的操作。

使用不同操作的文本标签

Caution：文本标签需要区别于其他元素。如果文本标签没有大写，它应该使用与其他文本不同的颜色、样式或布局；Wrong:避免太长的文本标签，要简明扼要。

△ 位置

文本按钮通常嵌入在容器的组件中，如卡片和对话框，以便与它们出现的组件相关联。因为文本按钮没有容器，所以不会分散附近内容的注意力。

对话框使用文本按钮，因为缺少容器有助于将操作与对话框文本统一，将文本按钮对齐到右边的脚本。

文本按钮尽量减少对卡片内容的干扰。

△ 规定

文本按钮可以放置在各种背景的前面。在与按钮交互之前，它的容器是不可见的。

为了维护可访问性，MaterialDesign为状态所使用的颜色覆盖提供了基线不透明度值，品牌可以调整不透明度值，以适应其配色方案。

Text button states

五、轮廓按钮

△ 用法

轮廓按钮是中等强调度的按钮。它们包含重要的操作，但不是应用程序中的主要操作。

可选择性

轮廓按钮也是容器按钮的低强调版本，或者是文本按钮的更高强调版本。

△ 容器

轮廓按钮在文本标签周围显示笔画，笔画可以用不同的方式表示：

· 将按钮的宽度设置为文本标签的大小，左侧和右侧填充16 dp

· 将按钮的相对位置设置为响应性布局网格

在静止状态下，勾勒出的按钮应该显示带有笔画和没有填充的容器。

Outlined button

Right：动态设置勾画按钮的宽度以适应文本标签；Wrong：动态设置勾画按钮的宽度以适应文本标签。

注意：当在图像前面使用勾画按钮时，保护文本。此图像使用浅紫色划线为此轮廓按钮提供文本保护。

△ 状态

轮廓按钮可以放置在各种背景的顶部。它的容器是透明的，直到按钮相互作用。

为了维护可访问性，MaterialDesign为状态所使用的颜色覆盖提供了基线不透明度值，品牌可以调整不透明度值，以适应其配色方案。

Outlined button states

六、容器按钮

△ 用法

容器按钮是高度强调，区别于他们的使用高度和填充，它们包含的操作是应用程序的主要内容。

如果按钮与其周围的元素清晰地区分开来，文字标签就可以使用句子。

△ 容器

容器按钮在文本标签周围显示容器，不同的方式表示：

· 将容器宽度设置为文本标签的大小，左侧和右侧填充16 dp

· 将容器的相对位置设置为响应布局网格

容器按钮的底块应该为纯色。

Right：动态地设置按钮容器的宽度以适应其文本标签；Wrong：按钮容器的宽度不应该比文本短。

可根据响应布局网格设置按钮容器宽度

△ 图标

容器按钮可以将图标放置在文本标签旁边，以示意清楚相关操作并突出按钮。

使用图标，清楚地传达它们的意思。

Wrong：不要在包含按钮的中心垂直对齐图标和文本；Wrong：不要在同一个按钮中使用两个图标。

△ 投影与高度

比较宽的按钮通常在设计中显得更加突出。点击时会显示触发反馈。

较宽的高度能够突出按钮。

△ 状态

以下不透明度值推荐用于按钮容器填充颜色，每个应用程序都可以改变覆盖值，以适应他们品牌的调色板。

七、切换按钮

△ 用法

切换按钮可用于分组相关选项，为了强调一组相关的切换按钮，一个组应该共享一个公共容器。

选择操作

一次只能选择一组切换按钮中的一个选项并处于活动状态，选择一个选项将取消其他选项。

这些切换按钮提供了将文本对齐到左、右和中心的选项。

当图标允许单个选项的选择或取消选择时，可以用作切换按钮，例如将项目标记为最喜欢的项。

△ 状态

活动按钮和可用按钮

切换按钮的状态表明哪个按钮处于活动状态，悬停状态和焦点状态表示切换组中按钮的可用选择选项。

禁用按钮

不能选择的切换按钮可以是禁用状态，也可以是隐藏的。

Toggle button states

END.THANKS FOR YOUR READING~

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