按钮

使用 Button 组件执行用户易于理解且不需要文本标签的操作。按钮与其圆形形状区分于芯片。

结构

A. 内容

按钮只有一个插槽保留给图标或文本。选择与按钮执行的操作相关的图标。如果图标无法描述相关操作,则可以使用最多三个字符的文本。如果图标无法清晰地描述操作,请考虑使用芯片组件。

B. 容器

按钮容器仅限于单一纯色填充。


按钮类型

切换按钮

切换按钮 使用户能够在两种状态之间切换。

紧凑型按钮

紧凑型按钮 显得较小,但具有更大的可点击区域。默认的可点击区域为 48x48 dp。

层次结构

使用不同的颜色填充来表示按钮层次结构。

高强调

高强调按钮包含应用的主要操作。对于高强调按钮,请为容器使用主要或次要颜色,为内容使用主要颜色和次要颜色。有关更多信息,请参阅 Wear Material 主题

中等强调

中等强调按钮以对比度较低的颜色填充来区分。它们包含的操作不如主要操作重要。为容器使用界面颜色,为内容使用界面颜色。

或者,为中等强调按钮使用自定义 OutlinedButton 组件。它具有透明背景、60% 不透明度的主要变体彩色描边和主要彩色内容。

低强调(仅限图标)

低强调按钮以没有填充来区分。它们最适合手表表盘上的较小区域,在这些区域需要紧凑的排列。为内容使用界面颜色。

尺寸

使用不同尺寸的按钮来强调或弱化操作。

大型

图标 (30 x 30 dp)
容器 (60 x 60 dp)

默认

图标 (26 x 26 dp)
容器 (52 x 52 dp)

小型

图标 (24 x 24 dp)
容器 (48 x 48 dp)

特小型

图标 (24 x 24 dp)
容器 (32 x 32 dp)

建议在此按钮周围添加其他填充,以创建至少 48 dp 的点击目标。这是我们为无障碍功能设置的最小点击目标尺寸。

用法

使用标准按钮使用户能够执行单个操作,例如接听或拒绝电话或启动计时器。

使用切换按钮允许用户打开或关闭选项,例如选择和取消选择一周中的日期或暂停和重新启动计时器。

自适应布局

响应行为

1 个按钮

内部填充将保持不变,边距应为百分比,以防止按钮拉伸得太远,并保持相对大小。

2 个按钮

当有 2 个按钮时,会添加百分比内部边距,以防止按钮拉伸得太远,并保持相对大小。

输入法

1 或 2 个按钮

具有 2 个或单个按钮锁定功能的输入法始终会一直延伸到侧边距,无论屏幕尺寸如何。

3 个按钮

在小于 225 dp 的屏幕上,按钮保持圆形且不会拉伸。在 225 dp 或更大的屏幕上,按钮会一直延伸到侧边距。