按钮有助于用户启动操作或流程。可选择不同类型的按钮来突出强调效果。
资源
| 类型 | 关联 | 状态 |
|---|---|---|
| 设计 | 设计源代码 (Figma) | 可用 |
| 实现 | Jetpack Compose | 可用 |
亮点
- 根据操作的重要性选择按钮类型。 操作越重要，按钮越强调。
- 按钮应带有清晰的标签，以指示其执行的操作。
- 合理地将按钮放置在屏幕上，即用户可能会发现它们的位置。
- 不要过度使用按钮。屏幕上的按钮过多会破坏视觉层次结构。
变体
按钮有以下六种类型：
- 实心按钮
- “轮廓”按钮
- 图标按钮
- 大纲图标按钮
- 长按钮
- 图片按钮
根据操作的重要性选择按钮类型。 操作越重要，其按钮应越强调。
实心和轮廓按钮
填充按钮具有最出色的视觉效果，应该用于完成一个流程的关键最终操作，例如“保存”“立即加入”“确认”或“下载”。
框状按钮属于中强调度按钮。此类按钮包含重要的操作，但操作不是应用中的主要操作。轮廓按钮可与填充按钮完美配对，用于指示备选的次要操作。
解剖学
- 容器
- 标签文字
- 图标（可选）
状态
组件状态的直观表示。
- 默认
- 专注
- 已按下
规范
图标和轮廓图标按钮
使用图标按钮以紧凑布局显示操作。图标按钮可以表示打开溢出菜单或搜索等打开操作，也可以表示可以开启和关闭的二元操作（例如收藏或书签）。它们还可用于播放或暂停媒体。
图标按钮可以定义三种尺寸：小、中和大。
解剖学
- 容器
- 图标
状态
- 默认
- 专注
- 已按下
状态是用于传达组件或互动元素状态的视觉表示形式。
规格
宽按钮
较宽的按钮用于强调比普通按钮更高的强调效果。其中包含重要的操作。表示相关选项的按钮会归为一组。该组应共用一个平面。
解剖学
- 容器
- 前导图标
- 标题
- 副标题
状态
- 默认
- 专注
- 已按下
状态是用于传达组件或互动元素状态的视觉表示形式。
规格
图片按钮
图片按钮通常用于显示下一级别导航中可用内容的缩略图。它们通常与相关操作归为一组，并且这组界面应共用一个 Surface。
解剖学
- 容器
- 前导图标
- 标题
- 副标题
- 图片层，其中包含：
- 纱罩（状态叠加层）
- 渐变（基于表面颜色）
- 图片
状态
- 默认
- 专注
- 已按下
状态是用于传达组件或互动元素状态的视觉表示形式。
规格
用法
按钮通常用于传达用户可以执行的操作。它们经常出现在对话框、模态窗口、表单、卡片和工具栏等界面元素中。
按钮只是在界面中表示操作的一个选项。不要过度使用它们。屏幕上的按钮过多会破坏视觉层次结构。
- 容器
- 图标
- 标签文字
- 标题
- 副标题
- 图片
容器
按钮会在内容周围显示一个容器。容器在焦点上会放大 1.1 倍，同时保持内部内边距。以下是有关容器的一些注意事项：
- 根据内边距一致的内容设置容器宽度。
- 设置容器相对于自适应布局网格的位置。
- 为已填充按钮使用纯色容器。
- 为轮廓按钮使用描边颜色和填充颜色。获得焦点时，容器会获得填充颜色和轮廓。
- 对于宽按钮和图片按钮，容器宽度根据布局网格进行设置。
- 容器大小、位置和对齐方式会随着其父级容器的缩放而发生变化。
文本和图标按钮容器采用完全圆角设计。宽和图片按钮容器采用 12dp 的圆角容器。
正确做法
注意
图标
图标直观地传达了按钮的操作，有助于吸引用户的注意力。它们应放置在按钮的前侧。图标始终在容器内垂直居中。
正确做法
错误做法
注意
标签文字
标签文本是按钮最重要的元素。它描述了用户点按按钮时发生的操作。
按钮标签文本采用句首字母大写形式，并将第一个单词和专有名词的首字母大写。避免自动换行。为了最大程度地提高易读性，标签文本应保持在一行。
正确做法
注意
图片
图片按钮的背景中的图片顶部始终有渐变叠加层和纱罩。渐变叠加层是根据容器颜色设置的。纱罩根据状态而变化。
按钮组
按钮一起显示在一行或一列中，以便在各操作之间保持一致的导航。以下部分介绍了注意事项。
确定层次结构
每个屏幕都应包含一个主要操作，由显眼的按钮（通常为宽幅）表示。该按钮应更易于查看和理解。 其他按钮应不太显眼，且不应让用户分心主要操作。
组中的第一个按钮充当主要操作，因为焦点首先位于该按钮上。
保持线性布局
- 行布局
- 列布局
以逻辑方式使用变体
在列布局中，应保留单个按钮变体。在行布局中，不同的变体可以聚类到一个按钮组中，但逻辑应清晰。实心按钮和轮廓按钮可以在同一组中使用，但请确保操作层次结构清晰。
正确做法
错误做法
注意
