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