Material Design 组件图鉴 —— Buttons

Buttons communicate the action that will occur when the user touches them. 用户点击按钮以出发某些动作。

标准类型按钮

在 Material Design 里面有三种标准类型按钮

  • 标志性的悬浮响应按钮 Floating Action Button
  • 浮动按钮 Raised Button —— 方形边框悬浮于界面之上的按钮
  • 扁平按钮 Flat Button —— 文字按钮

在 MD 里面没有 Ghost Button。

按钮选用的基本原则：

  • 功能：是否足够重要到要使用 FAB？
  • 维度：是否在 z 轴方向布置了太多元素导致层级太多？
  • 每个容器里面只用一种按钮，除非有足够充分的理由。

用法
  • 对话框必须使用 flat button
  • raised button 与 flat button 都可以并排出现
  • fab 与 persistent footer buttons 有常驻属性，在需要的情况下考虑使用。

推荐摆放方式：

  • 独立对话窗（弹框）

靠右开始摆放，前进按钮在右边，后退按钮在左边。affirmative button/dismissive button。

  • 表格（少见）

靠左开始摆放，前进按钮在左边，后退按钮在右边

  • 卡片

卡片上的按钮最好放置在靠左的位置以提高可视性，但是卡片布局相对灵活，可以自行选择最佳位置。

风格

字 按钮内的文字全部大写（FAB 不可以带文字），flat button 的字色要与正文字色有所区分。

可供性 按钮本身的最小高度为 36dp，最小可触控区域大小为 48dp。

圆角 按钮所带的圆角为 2dp。

尺寸 以点触作为主要操作与以鼠标键盘作为主要操作的设备上的按钮略有不同。

默认按钮：

  • 高度：36dp
  • 文字与左右边间距：16dp
  • 文字： 14sp roboto medium
  • 圆角：2dp

高密度按钮：

  • 高度：32dp
  • 文字与左右边间距：16dp
  • 文字： 13sp roboto medium
  • 圆角：2dp

尺寸与间距

Flat Button 文字按钮

Flat Button 是被“打印”在 material 上的。不会升起，只有文字，文字自带颜色，文字全都要大写。

该用 Flat Button 的地方：

  • 工具栏
  • 弹框
  • 并排使用

尺寸

浅色主题：

  • 最小可触控宽度：88dp
  • 高：36dp
  • ripple 圆角：2dp
  • ripple 按压：40% #999999
  • 不可用：26% #000000（去掉颜色）

深色主题：

  • 最小可触控宽度：88dp
  • 高：36dp
  • ripple 圆角：2dp
  • ripple 按压：25% #CCCCCC
  • 不可用：30% #FFFFFF（去掉颜色）

  • 正文（含标题）间距：24dp
  • 对话框按钮放置区域高度：52dp
  • 按钮与右边边缘间距：8dp

Raised Button 浮动按钮

用法

过于扁平或内容过于密集的界面使用 Raised Button 用于强调按钮的功能。

尺寸

浅色主题：

  • 最小可触控宽度：88dp
  • 高：36dp
  • Normal color：500
  • Focused color：按钮色覆盖上 12% #000000
  • Pressed color：700
  • 不可用文字：26% #000000（去掉颜色）
  • 不可用按钮：12% #000000（去掉颜色）

深色主题：

  • 最小可触控宽度：88dp
  • 高：36dp
  • Normal color：500
  • Focused color：按钮色覆盖上 12% #000000
  • Pressed color：700
  • 不可用文字：30% #FFFFFF（去掉颜色）
  • 不可用按钮：12% #FFFFFF（去掉颜色）

高度

浮动按钮默认高度 2dp。 桌面端的浮动按钮的高度可以在鼠标悬浮于上方时再出现。

Persistent footer buttons 固定底部栏按钮

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

固定底部栏按钮不可以是浮动按钮。

对话窗也可以使用固定底部栏按钮。

Mobile dropdown buttons 移动端的下拉菜单按钮

下拉菜单按钮让用户在若干个选项内选择其中一项。它有一个指向下的箭头，菜单内可以是纯文字、也可以带 icon。

当用户打开菜单时，菜单本身会将 下拉菜单按钮 覆盖上，当前选项会用 Primary Color，或深色标识出来。当用户完成选择时，菜单自动收起并更新下拉菜单按钮显示内容。菜单内容过长时menu本身可以滚动，但是其长度不应该过长。

另外几种样式的下拉菜单按钮

  • Generic overflow dropdown button 普通溢出下拉菜单按钮 最大的特点就是不会覆盖按钮本身，箭头的方向会改变。
  • Segmented dropdown button 分区下拉菜单按钮 该按钮分为两个部分，箭头与内容被分隔了开来。点击箭头部分显示菜单，而点击内容部分执行对应动作。
  • Editable segmented dropdown button 可编辑分区下拉菜单按钮 与 Segmented dropdown button 类似，左边可以进行键盘编辑，菜单内是几个设定好的常用数值。

桌面端下拉菜单尺寸

Toggle buttons 勾选按钮

勾选按钮可以用于单选、多选的按钮组，它是允许不存在默认选择状态的。

最好要有三个或以上按钮来形成一个组。

按钮可以是 icon，或 icon 加文字，不建议使用纯文字。

Icon tggles