Material Design 组件图鉴 —— Floating Action Button

A floating action button represents the primary action in an application. FAB 按钮承载的是整个软件中最重要的动作。

Floating Action Button

FAB 常见尺寸有两种：

• 默认尺寸（56dp）也就是最常见最典型的款。
• mini尺寸（40dp），维持视觉延续性。

假如屏幕宽度小于 460dp 的话，就一定要用 mini 尺寸的了。

FAB 与屏幕的边缘的距离最小要为 16dp，如果是平板端、桌面端的话最小要有 24dp的边距。

另外，无论 FAB 的尺寸是多大，里面的 icon 都是 24dp。

FAB 只能只能只能是正向操作按钮

不可以是负向或需求较小、较不重要的操作，如：

• 删除、归档
• 不明确的操作
• 警告或错误
• 不重要的操作如复制粘贴之类
• 音量控制、转变字色等设置操作

行为

FAB 通常以展开的方式出现，中间的 icon 或会有一个独立的动画。

由于 FAB 的特殊性，他的动画会与其他元素有些许不同。

在可以横向滑动的界面内（如：带有 tab 导航的），假如每个 tab 的 FAB 是不一样的的话，那么 FAB 应该先退场，再进场，而不是跟随屏幕横向移动。

变形

FAB 抢眼而且特殊，它会有非常多的变化形式。

Trigger, Toolbar, Speed dial, and Morphing 等等等等的动画的样式都可以施加在 FAB 上。

Speed Dail 数量不能超过六个，不能少于一个，里面也不要再带有还可以再展开的东西。

Morph 的话要注意不能 Morph 到别的不相关的层面上去。

FAB 在大屏幕上的应用