#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习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~
如有不当，还请多多指教~
网友评论