Material Design 视觉设计语言（四）按钮

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

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

• 对话框

• 模态窗口

• 列表

• 卡片

• 工具栏

 原则1、易读性按钮应该明确表明可以触发一个动作。2、可查找按钮应该很容易在其他元素中找到。3、清晰按钮的操作和状态应该清晰。

 类型1、文本按钮（重要性低）文本按钮通常用于不太重要的操作。2、线框按钮（重要性中）由于带有一个底框，线框按钮用于比文本按钮强调性更强。3、填充按钮（重要性高）填充按钮强调性更强，因为使用了颜色填充和阴影。4、切换按钮切换按钮通过布局和间距，对一组操作进行分组。它们的使用频率低于其他3种按钮类型。

 层级1、一个突出的按钮一个布局应包含一个突出显示的按钮，以清楚地衬托出其他按钮在层级中的重要性较低。这个高度强调的按钮最引人注意。2、其他按钮在APP的布局中，可以同时显示多个按钮，因此高度强调的按钮可以伴随中等和低强调按钮，这些按钮常用来执行不太重要的操作。

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

 位置同一个页面中，使用多种按钮类型可用于表示不同的强调程度。以上布局使用了：

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

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

3.重要性低的文本按钮

 二、悬浮操作按钮（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可以转换为包含相关操作的菜单。黑色蒙版表示暂时禁用了操作菜单之外的功能。菜单始终显示在屏幕上，直到触发操作或点击黑色蒙版。 

Material Design视觉设计语言概述（一）

Material Design视觉设计语言概述（二）

Material Design视觉设计语言概述（三）

作者： 宛苏公众号： 宛苏