Material Design 是 Google 在 2014 年发布的一种设计语言，旨在提供具有一致性、美观性和可用性的应用程序和网站。其中一个特色的组件就是 FloatingActionButton（浮动操作按钮），它能够为用户提供方便的操作入口，并且非常适用于移动设备和平板电脑上的应用程序。
FloatingActionButton 概述
FloatingActionButton（FAB）是一种圆形图标按钮，它在用户界面中浮动，并且可以在许多应用程序中看到。FAB 通常用于向用户提供一个简洁的主要动作入口，例如添加内容、分享内容等，而不会引起混淆。
FAB 的设计符合 Material Design 的设计原则，具有以下几个方面的优势：
突出：FAB 通常在应用程序中很容易被识别和发现。
易于使用：FAB 的行为和用法应该在应用程序内一致，使用户不必重新学习如何使用每个应用程序中的按钮。
比较独立： FAB 通常与其他界面元素分离，并且在应用程序的任何屏幕上都能够使用。
FloatingActionButton 的使用技巧
1. 上下文相关的操作
FAB 可以表示与当前屏幕相关的信息。例如，在电子邮件应用程序中，它可以指向新建邮件或搜索邮件。再比如，如果你正在浏览一个新闻网站，它可以用来分享当前浏览的新闻文章。
在设计 FAB 的时候需要考虑到这个界面元素所在的上下文，包括所处的页面、内容以及当前的任务。
2. 不要让 FAB 分散注意力
FAB 通常用于突出一个应用程序的主要操作，但不要在用户界面中使用太多的 FAB，否则会分散注意力。如果你需要在应用程序中提供多个主要操作，那么你应该考虑将它们放在一个菜单或标签栏内。
3. 颜色和图标的重要性
FAB 通常需要和当前应用程序的颜色和主题保持一致，以及包含一个简单易懂的图标，这样用户可以轻松地了解该 FAB 具体的操作。在界面设计中，颜色可以用来向用户传达应用程序的精神所在。
4. 动作反馈
在用户操作后，FAB 应该很快地给予反馈。例如，如果用户单击按钮时出现了进度条，然后在进程完成后关闭，则可以向用户发送一个任务完成的信息。
5. 伸展效果
当用户单击 FAB 时，伸展效果可以使界面元素更加生动有趣。另外，我们还可以通过设置 FAB 的大小和形状来定制它的伸展效果。
FloatingActionButton 的代码实现示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------- ------------
----- ---------------- -------------------------------------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------
----- --------------- ---------------------------- --------------------
-------
------
-- ------------------- --------- -----
-- ------------------------------
----
------- -------------------------------------------------------------------------------
-------
-------通过上面的代码示例，我们可以察觉到 FloatingActionButton 是十分简单易用的。需要注意的一点是，这里的 Materialize.css 的框架将 FAB 定义为“红色的”，所以它看起来是另一个色调，而不是标准的蓝绿色。在实践中，你可以改变按钮颜色和图标，以适应你的应用程序。
总结
FloatingActionButton 是一个非常方便的应用程序组件，可以在任何设备上提供一致的用户体验。在设计 FAB 时，我们需要考虑上下文、颜色、伸展效果以及动作反馈等方面，来确保 FAB 的稳定性和易用性。需要注意的是，FAB 不是应用程序的所有操作的解决方案，对于较为复杂的操作，我们应该考虑将它们放置在一个菜单或标签栏内。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ede7e0f6b2d6eab3808a83