按钮是用户操作的主要视觉指示器。

原则
以行动为导向:按钮应明确传达它们会触发某种操作。
清晰的反馈:按钮的外观必须在不同的互动状态(悬停、按压、聚焦)下发生明显变化,以提供即时反馈。
一致:所有按钮都应采用相同的核心视觉语言,以便用户能够立即识别。
灵活:按钮组件应能适应常见变化,例如包含图标和不同尺寸,同时不牺牲一致性。
用法与位置
按钮应放置在与其相关的内容附近。它们可以单独放置,也可以与其他组件(如卡片和列表)一起放置。
正确做法
使用逐步披露来显示相关性较低的操作。
错误做法
使用过多的按钮让用户感到困惑。
正确做法
使用按钮提示用户执行操作。或者,为静态元素使用标题 chip。
错误做法
将按钮用作静态装饰元素。
解剖学
默认
1. 已启用:默认状态。
2. 悬停
3. 点按
大
1. 已启用:默认状态。
2. 悬停
3. 点按
自定义
按钮包含默认变体和大型变体,以及每种变体的默认状态、焦点状态和按下状态。您可以使用图标来增强按钮的强调效果、清晰度和辨识度。按钮大小有助于强调重要性。
默认
| 属性 | 自定义 | 默认值 |
|---|---|---|
| 形状 | 是 | 大,圆圈 |
| 内边距 | 是 | 16 dp、8 dp |
| 边框 | 是 | 2 dp,#606460 |
| 文本 | 是 | 小号 |
| 前置图标 | 是 | 40 dp |
| 尾随图标 | 是 | 40 dp |
| 大小 | 是 | 56 dp 的最小高度 |
| 深度 | 是 | 0 |
大
| 属性 | 自定义 | 默认值 |
|---|---|---|
| 形状 | 是 | 大,圆圈 |
| 内边距 | 是 | 20 dp、8 dp |
| 边框 | 是 | 2 dp,#606460 |
| 文本 | 是 | 小号 |
| 前置图标 | 是 | 56 dp |
| 尾随图标 | 是 | 56 dp |
| 大小 | 是 | 高度下限为 72 dp |
| 深度 | 是 | 0 |
| Surface | 否 |