组件 按钮

按钮

按钮用于传递用户触摸时会触发的操作。

Material 按钮在点击时会有涟漪效果。按钮可以显示文本、图像。扁平按钮和浮动按钮是最常用的两种按钮类型。

其他的按钮类型包括:

  • 底部固定按钮为扁平按钮,大多用于页面底部或对话框底部。
  • 下拉按钮 可以显示多个下拉选项。
  • 可切换按钮将相关选项组合起来。图标切换时允许用户选择或取消选择单个选项。
扁平按钮

扁平按钮只包含文本。
它们可用于对话框、工具栏或内嵌在其他组件中。
它们不会改变海拔高度,但会在点击时改变颜色。

浮动按钮

浮动按钮为矩形按钮。
它们可以内嵌在其他组件中。
它们在点击时会改变海拔高度和触发涟漪效果。

海拔高度

扁平按钮:0dp
浮动按钮:2dp

Material Design 中的按钮用于触发用户操作

按钮类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

有三种标准类型的按钮:

  • 浮动操作按钮:一个圆形的按钮,在点击时会改变海拔高度和触发涟漪效果
  • 浮动按钮:典型的方形纸片按钮,点击后改变海拔高度和触发涟漪效果
  • 扁平按钮:点击时会有涟漪效果,但不会改变海拔高度
Material Design 中的浮动操作按钮

浮动操作按钮

Material Design 中的浮动按钮

浮动按钮

Material Design 中的扁平按钮

扁平按钮

Material Design 中的浮动操作按钮示例

浮动操作按钮的示例

Material Design 中的浮动按钮示例

浮动按钮的示例

Material Design 中的扁平按钮示例

扁平按钮的示例

按钮类型的选择

按钮类型应该根据按钮的优先级、屏幕上容器的数量、以及整体布局来进行选择。

功能:如果它非常重要、并且会被经常用到,可以使用浮动操作按钮

尺寸:根据它所在的容器以及屏幕上 Z 轴方向的层次堆叠数量来决定使用浮动按钮还是扁平按钮。应该避免过多的层叠。

布局:一个容器中应该只使用一种类型的按钮,只在比较特殊的情况下(比如需要强调一个重要的功能)时才可以混合使用多种类型的按钮。

Material Design 中的按钮类型选择

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

按钮类型

所使用的按钮类型应该和它所处的上下文相符。

内容

按钮类型

对话框

使用扁平按钮

内联按钮

可以使用浮动按钮扁平按钮

始终可见

如果你的应用需要一个对用户始终可见的功能按钮,可以使用浮动操作按钮,或底部固定按钮

推荐的按钮位置

标准对话框

按钮对齐方式:右对齐

将确定按钮放在右边,取消按钮放在左边。

表单

按钮对齐方式:左对齐

确定按钮在左边,取消按钮在右边。

卡片

按钮最好放在卡片的左侧,以增加其可见度。然而,由于卡片的布局非常灵活,按钮也可以放在适合于内容和上下文的其他位置。

非标准的对话框和模态化窗口

在非标准的对话框和模态化窗口中,按钮的位置取决于它们包含的内容的复杂性。

如果对话框中的内容相对简单,推荐把按钮放在对话框右侧,并且确定按钮在取消按钮的右侧。

对于复杂的表单,建议把按钮放在表单左侧,并且确定按钮在取消按钮的左侧。

样式 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本

按钮文本应使用大写字母。对于其他语言,扁平按钮上的文本颜色应与正文不一样。

无障碍

为了确保残障人士的可用性,按钮高度为 36dp,可触摸目标的最小高度为 48dp。

Material Design 按钮样式

按钮高度:36dp
可触摸目标高度:48dp

圆角半径

按钮有 2dp 的圆角半径。

Material Design 按钮圆角半径为 2dp

正确示例

按钮有 2dp 的圆角半径。

密集型

当鼠标和键盘为主要输入方式时,按钮尺寸可以略微减小以适应密集的 UI。

Material Design 中的默认按钮

默认按钮

Material Design 中的默认按钮样式

按钮文本:14pt Roboto medium
按钮高度:36dp
按钮左右内边距:16dp
圆角半径:2dp

Material Design 中的密集型按钮

密集型按钮

Material Design 中的密集型按钮样式

按钮文本:13pt Roboto medium
按钮高度:32dp
按钮左右内边距:16dp
圆角半径:2dp

尺寸和边距

Material Design 中的扁平按钮示例

对话框中的扁平按钮示例

扁平按钮
高度:36dp
最小宽度:88dp
可触摸目标高度:48dp
圆角半径:2dp
水平外边距:8dp
水平内边距:8dp

扁平按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

用法

扁平按钮没有海拔高度,但在点击时会填充颜色。

在下边的场景中使用扁平按钮:

  • 工具栏
  • 对话框中,将按钮操作和对话框的内容统一起来
  • 包含内边距的内联按钮,这样可以更容易被用户看到
Material Design 中的对话框适合使用扁平按钮

对话框适合使用扁平按钮

Material Design 中的扁平按钮聚焦用户内容

扁平按钮能最大限度的把用户焦点聚焦在内容上

Material Design 中的扁平按钮使用示例

正确示例

扁平按钮的正确使用。

Material Design 中的浮动按钮显得显眼

错误示例

这些浮动按钮显得太过显眼。

规格

Material Design 中的扁平按钮亮色主题

扁平按钮亮色主题

最小宽度:88dp
高度:36dp
圆角半径:2dp
按下时:40% #999999
禁用状态文本:26% #000000

Material Design 的扁平按钮暗色主题

扁平按钮暗色主题

最小宽度:88dp
高度:36dp
圆角半径:2dp
按下时:25% #CCCCCC
禁用状态的文本:30% #FFFFFF

Material Design 对话框内边距和按钮布局设计规范

对话框文本内边距:24dp
对话框按钮容器高度:52dp
对话框按钮:距离容器边缘 8dp 的边距,右对齐(LTR 语言)

Material Design 中的扁平按钮

对话框中的扁平按钮

对话框按钮
按钮高度:36dp
按钮顶部外边距:24dp
按钮内边距:8dp
按钮对齐方式:右对齐(LTR 语言)
按钮宽度:根据按钮文本的长度变化

Material Design 扁平按钮聚焦时不透明度为 12%

扁平按钮在聚焦时有 12% 的不透明度

行为

扁平按钮

浮动按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

用法

浮动按钮在平面布局上添加了 Z 轴维度,这对按钮的功能起到了强调作用。

Material Design 中的浮动按钮可提升布局可见性

使用浮动按钮,可以使按钮在有较多内容的布局中更加显眼。

Material Design 中的浮动按钮用于分隔内容项

浮动按钮可以分隔不同的内容项。

浮动按钮在 Material Design 中更显眼

正确示例

浮动按钮比扁平按钮更加显眼。

Material Design 中避免使用难以辨认的扁平按钮

错误示例

在很难看到扁平按钮的界面上,不要使用扁平按钮。

浮动按钮看起来就像一块放在纸上的材料 - 在点击时会改变海拔高度并填充颜色。

Material Design 的浮动按钮亮色主题

浮动按钮亮色主题

最小宽度:88dp
高度:36dp
圆角半径2dp
禁用状态文本:26% #000000
禁用状态按钮:12% #000000

聚焦状态:12% #000000 在颜色上有遮罩

Material Design 浮动按钮暗色主题

浮动按钮暗色主题

最小宽度:88dp
高度:36dp
圆角半径2dp
颜色:500
按钮按下时的颜色:700
禁用状态文本:30% #FFFFFF
禁用状态按钮:12% #FFFFFF

聚焦状态:12% #000000 在颜色上有遮罩

按钮海拔高度

浮动按钮的默认海拔高度为 2dp。

在桌面端,浮动按钮在鼠标移入时才有海拔高度。

Material Design 中的按钮海拔高度

暗色/亮色 主题

最小宽度:88dp
高度:36dp
海拔高度:0dp
禁用状态的文本:30% #FFFFFF
禁用状态的按钮:12% #FFFFFF

行为

浮动按钮

底部固定按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

如果需要提供持续有效的按钮给用户,可以使用浮动操作按钮或底部固定按钮。

Material Design 中的底部固定按钮高度为48dp
Material Design 中的底部固定按钮示例

不要在底部固定按钮中使用浮动按钮。

Material Design 中不应在底部固定按钮使用浮动按钮

用于可滚动的对话框时,可以为底部固定按钮添加一个分隔线。

Material Design 中的对话框底部按钮
Material Design 中的可滚动对话框底部按钮

下拉按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

移动端的下拉按钮

下拉按钮

下拉按钮可以让用户在多个选项之间进行选择。按钮显示当前选项和向下箭头。其他可用选项通过一个列表进行显示。

当用户与按钮交互时,一个菜单会覆盖在按钮上,并显示所有可用的选项。点击其中一个选项时,菜单会关闭,并在按钮上显示新的选项的值。

下拉列表中的滚动操作与菜单的滚动操作相同。

Material Design 下拉按钮和菜单状态示例
Material Design 中的下拉按钮和列表菜单

通用下拉按钮

默认情况下,通用下拉按钮会显示一个箭头或菜单按钮。当按下按钮时,显示菜单。按下菜单上的选项可以导航到该选项对应的内容。

分段式下拉按钮

分段式下拉按钮包含两部分:当前状态和下拉箭头图标。按下当前状态会触发该状态对应的操作。按下下拉箭头会显示所有的状态选项。选择其中一个后将更改显示的状态。

可编辑分段式下拉按钮

此按钮包含分段式下拉按钮,但是显示的文本是可以编辑的,例如字体大小选择器。按下当前状态将触发当前状态对应的操作,并使显示的状态可编辑。按下下拉箭头会显示所有的状态选项。

Material Design 下拉按钮的不同状态示例

桌面端下拉按钮

桌面端应用栏规范

Material Design 中的桌面端下拉列表

可切换按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

可切换按钮可用于对相关选项进行分组。通过整理布局和间距,来区分哪些按钮属于同一个分组。

聚焦和按下状态可以更加明确的显示某些按钮属于同一个分组。例如,当聚焦到一个按钮分组上时,焦点会同时显示在该分组的其余部分上。

可切换按钮的要求:

  • 一个分组中至少包含三个可切换按钮
  • 按钮需要包含文本、或图标、或同时包含文本和图标

建议使用以下组合:

  • 支持多选且未选中
  • 仅支持同时选中一个,且未选中
  • 仅支持同时选中一个
Material Design 中的单选按钮

同时只能有一个选项被选中

文本对齐按钮组提供左对齐、右对齐、居中对齐、左右对齐等选项,同时只能有一个选项被选中。选中一个选项时会取消其他选项的选中状态。

Material Design 中的没有选项被选中的按钮

没有选项被选中

Material Design 中的多选按钮

多选

按逻辑分组的选项,如加粗、斜体、添加下划线等,允许同时选中多个选项。

Material Design 中的按钮已被选中

一个选项被选中

图标切换

图标适用于仅允许选中或取消选中单个选项的可切换按钮,例如添加或删除星标。

它们最适合位于应用栏、工具栏、操作按钮或切换开关中。

图标切换可以显示超出其触摸目标范围的有界或无界的表面反应波纹。

Material Design 中的图标切换状态

图标切换的正常、鼠标悬浮、聚焦、按下、和禁用状态

Material Design 中图标切换焦点的颜色和不透明度相关

图标切换获取焦点时的颜色和不透明度和图标的颜色相关。