组件 按钮

按钮

按钮是用户执行操作的媒介。

材料按钮在按压时会出现涟漪效果。按钮会包含文本、图像或者两者都有。扁平按钮和浮动按钮是最常用的两种按钮。

其他的按钮类型:

  • 底部固定按钮是扁平按钮的一种,大多用在页面底部和对话框。
  • 下拉按钮可以显示多个选项。
  • 切换按钮将相关选项组合起来。切换图标让用户可以去选择或取消某个选项。

扁平按钮

扁平按钮只包含文本。
可用于对话框、工具栏或内嵌在其他组件中。
不会升高,但会在点击时填充颜色。

浮动按钮

浮动按钮是长方形的按钮。
可以内嵌在其他组件中。
在点击时会改变 Z 轴高度和触发水波纹效果。

海拔

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

按钮类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

有三种标准类型的按钮:

  • 浮动操作按钮:一个圆形的按钮,点按时会提升海拔并出现波纹效果。
  • 浮动按钮:典型的长方形按钮,点按时会提升海拔并出现波纹效果。
  • 扁平按钮:点按时会出现波纹效果,但不改变海拔。

浮动操作按钮

浮动按钮

扁平按钮

浮动操作按钮示例

浮动按钮示例

扁平按钮示例

按钮类型的选择

选择按钮类型时应当考虑按钮的优先级、屏幕上容器的数量、以及整体布局。

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

维度:选择浮动按钮还是扁平按钮要考虑 Z 空间上的图层数量,不要让出现过多的层次。

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

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

按钮类型

按钮类型应该与所处的情境相符。

情境

按钮类型

对话框

使用扁平按钮

内嵌

取决于你的布局,参考浮动按钮扁平按钮

随时访问

如果应用的某项操作需要随时被用户轻松访问,考虑使用浮动操作按钮底部固定按钮

按钮位置推荐

标准对话框

按钮对齐方式:右对齐

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

表单

按钮对齐方式:左对齐

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

卡片

按钮最好放在卡片的左侧以增加其可见性。然而,由于卡片的布局非常灵活,按钮也可以根据内容和情境来放置。

非标准的对话框和模态框

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

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

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

样式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

排版

按钮文本应使用大写字母。对于其他语言,为扁平按钮添加颜色以区别于一般文本。

无障碍

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

按钮高度:36dp
触控高度:48dp

圆角半径

按钮有 2dp 的圆角。

按钮有 2dp 的圆角

紧凑型

当鼠标和键盘为主要输入方式时,按钮尺寸可以略微减小以适配紧凑型 UI。

默认按钮

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

紧凑型按钮

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

尺寸和边距

对话框里的扁平按钮示例

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

扁平按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

用法

扁平按钮是印在材料上的。所以它们没有海拔,但在点击时会填充颜色。

在以下地方可以使用扁平按钮:

  • 工具栏
  • 对话框,统一按钮和内容样式
  • 内嵌,有边距,方便用户寻找

对话框中的扁平按钮

尽量不干扰内容的扁平按钮

扁平按钮的正确用法

浮动按钮线的过于突出

规格

亮色扁平按钮/亮色主题

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

暗色扁平按钮/暗色主题

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

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

对话框中的扁平按钮

对话框按钮
按钮高度:36dp
按钮容器上边距:24dp
按钮间隔:8dp
按钮对齐:右对齐(适用于 LTR 语言)
按钮宽度:取决于按钮文本的长度

聚焦时扁平按钮有 12% 的不透明背景

行为

扁平按钮

浮动按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

用法

浮动按钮为扁平的布局增添了维度。在拥挤或松散的空间都强调了按钮的功能。

浮动按钮可以使操作在繁杂的内容中更加显眼。

浮动按钮可以区分页面上不同的内容。

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

在识别度降低的 UI 中不要使用扁平按钮

浮动按钮就像是一片材料放在另一片上,它们在点按时会升高并且填充颜色。

亮色浮动按钮/亮色主题

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

聚焦状态:12% #000000 不透明遮罩

暗色浮动按钮/暗色主题

最小宽度:88dp
高度:36dp
圆角半径:2dp
Normal color: 500
Pressed color: 700
禁用文本:30% #FFFFFF
禁用状态:12% #FFFFFF

聚焦状态:12% #000000 不透明遮罩

按钮海拔

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

桌面端的浮动按钮可以在鼠标悬停时才有 2dp 的海拔。

暗色/亮色 主题

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

行为

浮动按钮

底部固定按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

如果应用的某项操作需要随时被用户轻松访问,考虑使用浮动操作按钮或底部固定按钮。

底部固定按钮的高度为 48dp。

底部固定按钮示例

不要再底部的固定区域使用浮动按钮。

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

对话框中的底部固定按钮

可滚动对话框中的底部固定按钮

下拉按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

手机的下拉按钮

下拉按钮

下拉按钮可以让用户在多个选项之间进行选择。按钮显示当前选项和向下箭头。可选项可以是文本列表、面板或图标。

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

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

关闭状态的下拉按钮、打开状态的下拉菜单、选中状态的下拉菜单

带有列表菜单的普通下拉按钮

通用下拉按钮

默认情况下,通用下拉按钮会显示一个箭头或菜单按钮。当按下按钮时,显示菜单。按下菜单上的选项进入该选项详情页面。

分段下拉按钮

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

可编辑的分段下拉按钮

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

通用、分段、可编辑下拉按钮,在正常、鼠标悬浮、聚焦、按下和选择状态时的示例

下拉按钮的动画

桌面端下拉选项

桌面端应用栏规格

桌面端下拉选项

上下边距:16dp
左边距:24dp
有边距:16dp
选项间的水平间距:24dp

切换按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

聚焦和按下状态可以更加明确哪些按钮是一组的。例如,当聚焦于一个分段按钮时,该组中的其他按钮也会显示出来。

切换按钮需要:

  • 分组中至少包含 3 个按钮
  • 按钮中包含文本、或图标、或两者都有

建议使用以下组合:

  • 多选可取消
  • 单选可取消
  • 仅单选(不可取消)

单选

文本对齐的切换按钮有左对齐、右对齐、居中对齐、两端对齐按钮,每次只能选中一个,选中时会取消选中其他项。

未选择任何项

多选

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

一个选项被选中

图标切换

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

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

图标切换会显示波纹效果的表面反应,波纹会超过图标本身的触控范围。

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

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