一、按钮（Buttons）

按钮允许用户只需轻按一下即可进行操作并做出选择。

按钮传达用户可以采取的操作。它们通常被用在整个UI中，例如：

对话框

· 模态窗口

· 列表

· 卡片

· 工具栏

原则

1、易读性

按钮应该明确表明可以触发一个动作。

2、可查找

按钮应该很容易在其他元素中找到。

3、清晰

按钮的操作和状态应该清晰。

类型

1、文本按钮（重要性低）

文本按钮通常用于不太重要的操作。

2、线框按钮（重要性中）

由于带有一个底框，线框按钮用于比文本按钮强调性更强。

3、填充按钮（重要性高）

填充按钮强调性更强，因为使用了颜色填充和阴影。

4、切换按钮

切换按钮通过布局和间距，对一组操作进行分组。它们的使用频率低于其他3种按钮类型。

层级

1、一个突出的按钮

一个布局应包含一个突出显示的按钮，以清楚地衬托出其他按钮在层级中的重要性较低。这个高度强调的按钮最引人注意。

2、其他按钮

在APP的布局中，可以同时显示多个按钮，因此高度强调的按钮可以伴随中等和低强调按钮，这些按钮常用来执行不太重要的操作。

使用多个按钮时，请确保一个按钮的可用状态，不会看起来像另一个按钮的禁用状态。

位置

同一个页面中，使用多种按钮类型可用于表示不同的强调程度。

以上布局使用了：

· 重要性最高的悬浮操作按钮

· 重要性较高的紫色填充按钮

· 重要性低的文本按钮

二、悬浮操作按钮（FAB）

悬浮操作按钮（FAB）表示屏幕的主要操作。

悬浮操作按钮（FAB）在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的最前面，通常是一个圆形，中间有一个图标。

FAB有三种类型：常规、迷你和扩展。

原则

1、主要的

FAB表示屏幕上的主要操作。

2、建设性

FAB应执行建设性的操作（例如创建、分享或探索）。

3、关联性

FAB应与其页面内容相关。

类型

1、常规 FAB

当屏幕宽度大于460dp时，默认常规FAB（56x56dp）。

2、迷你 FAB

迷你FAB应该用在较小的屏幕上。当屏幕宽度为460dp或更小时，常规 FAB（56dp）的容器则会转换为迷你FAB（40dp）。

迷你FAB还可用于与其他屏幕元素建立视觉连续性。

3、扩展 FAB

扩展FAB更宽，并包含文本标签，图标可选。

位置

在移动设备上，扩展FAB应放置在右下角或底部中心。

注：避免在底部应用栏上方使用扩展FAB，因为这样会占用大量屏幕空间。如果它们必须是一对组合，则扩展FAB应在滚动时折叠。

用法

悬浮操作按钮（FAB）可以在当前页面上触发操作，也可以执行跳转到新页面的操作。

FAB执行重要的建设性操作，例如：

· 创建

· 收藏

· 分享

· 启动进程

避免使用FAB执行不重要或破坏性的操作，例如：

· 存档或删除

· 警报或错误

· 限制性的任务，如截断文本

调整音量或字体颜色等的控件更适合用在工具栏。

快速展开

按下FAB后，以快速展开的形式显示3～6个相关动作。

若超过6个操作，则应使用其他操作来呈现它们而不是 FAB。

1、按下后，FAB 发出相关动作

2、按下后，FAB 转换为包含相关操作的菜单（仅限Android）

在Android上按下后，FAB可以转换为包含相关操作的菜单。黑色蒙版表示暂时禁用了操作菜单之外的功能。菜单始终显示在屏幕上，直到触发操作或点击黑色蒙版。