按钮

按钮可帮助用户启动操作或流程。选择不同类型的按钮，以达到强调效果。

资源

类型	链接	状态
设计	设计源代码 (Figma)	可用
实施步骤	Jetpack Compose	可用

亮点

• 根据操作的重要性选择按钮类型。 操作越重要，对按钮的重点也就越大。
• 按钮应具有清晰的标签，以指明其执行的操作。
• 按逻辑关系将按钮放置在屏幕上，即用户可能会希望找到它们的位置。
• 不要过度使用按钮。屏幕上的按钮过多会破坏视觉层次结构。

变体

按钮有以下六种类型：

1. 实心按钮
2. “轮廓”按钮
3. 图标按钮
4. 轮廓图标按钮
5. 长按钮
6. 图片按钮

根据操作的重要性选择按钮类型。 操作越重要，其按钮应越强调。

实心按钮和轮廓按钮

实心按钮具有最明显的视觉冲击效果，应该用于完成一个流程的最终操作，例如保存、立即加入、确认或下载。

轮廓按钮属于中强调度按钮。这些按钮包含重要的操作，但不是应用中的主要操作。轮廓按钮与填充按钮完美配对，表示其他的次要操作。

解剖学

1. 容器
2. 标签内容
3. 图标（可选）

州

组件状态的直观表示。

1. 默认
2. 专注
3. 按下

规范

图标和轮廓图标按钮

使用图标按钮以紧凑布局显示操作。图标按钮可以表示打开操作（例如打开溢出菜单或搜索），也可以表示可以开启和关闭的二元操作（例如收藏或书签）。它们还可用于播放或暂停媒体。

图标按钮可以定义为三种尺寸：小、中和大。

解剖学

1. 容器
2. Icon

州

1. 默认
2. 专注
3. 按下

状态是用于传达组件或互动元素状态的可视化表示。

规格

宽按钮

较宽的按钮用于提高强调程度。其中包含重要操作。表示相关选项的按钮会归为一组。组应共用一个表面。

解剖学

1. 容器
2. 开头图标
3. 标题
4. 副标题

州

1. 默认
2. 专注
3. 按下

状态是用于传达组件或互动元素状态的可视化表示。

规格

图片按钮

图片按钮通常用于显示下一层级导航中提供的内容的缩略图。它们通常与相关操作组合在一起，并且组应共用一个 Surface。

解剖学

1. 容器
2. 开头图标
3. 标题
4. 副标题
5. 图像层，其中包含：
   1. 纱罩（状态叠加层）
   2. 渐变（基于表面颜色）
   3. 图片

州

1. 默认
2. 专注
3. 按下

状态是用于传达组件或互动元素状态的可视化表示。

规格

用法

按钮通常用于传达用户可以执行的操作。它们经常出现在对话框、模态窗口、表单、卡片和工具栏等界面元素中。

按钮只是界面中用于表示操作的一种方式。不要过度使用它们。屏幕上的按钮过多会破坏视觉层次结构。

1. 容器
2. Icon
3. 标签内容
4. 标题
5. 副标题
6. 图片

容器

按钮用于在内容周围显示一个容器。容器在焦点上会按 1.1 倍缩放，同时保持内部内边距。以下是一些关于容器的注意事项：

• 根据内边距一致的内容设置容器宽度。
• 设置容器相对于自适应布局网格的位置。
• 对已填充按钮使用纯色容器。
• 对框状按钮使用焦点的描边和填充颜色。聚焦时，容器会获得填充颜色和轮廓。
• 对于宽按钮和图片按钮，容器宽度根据布局网格进行设置。
• 容器的大小、位置和对齐方式会随着父级容器的缩放而发生变化。

文本和图标按钮容器采用全圆角设计。宽和图片按钮容器具有 12dp 的圆角容器。

Icon

图标能够直观地传达按钮的操作，有助于吸引用户注意。 它们应放在按钮的前面。图标始终在容器内垂直居中。

标签内容

标签文本是按钮最重要的元素。它描述了用户点按按钮时发生的操作。

按钮标签文本采用句首字母大写形式，并将第一个单词和专有名词首字母大写。避免换行。为了最大限度地提高易读性，标签文本应独占一行。

图片

图片按钮在背景中的图片顶部始终具有渐变叠加层和纱罩。渐变叠加层是根据容器颜色设置的。纱罩会根据状态而变化。

按钮组

按钮一起显示在行或列中，以便在操作之间保持一致的导航。以下几个部分介绍注意事项。

通知层次结构

每个屏幕都应有一项主要操作，由显眼的按钮（通常为宽）表示。该按钮应该更易于查看和理解。 其他按钮不应太过显眼，不应让用户分心，无法专注于主要操作。

组中的第一个按钮充当主要操作，因为焦点首先位于该按钮上。

保持线性布局

1. 行布局
2. 列布局

按逻辑关系使用变体

在列布局中，应保留单个按钮变体。在行布局中，可以将不同的变体聚类到一个按钮组中，但逻辑应清晰明了。实心按钮和轮廓按钮可以在同一组中使用，但应确保操作具有清晰的层次结构。