FAB浮动按钮的扩展运用
FAB浮动按钮是Material Design的一个控件，目前已经被广泛运用。在很多应用中都能看到浮动按钮的使用，但是之前浮动按钮的运用比较局限和传统，而最近我发现浮动按钮的运用变得越来越多样化，能够满足不同类型应用的运营需求，下面将结合案例总结浮动按钮的扩展运用类型。
一、常规用法
floating action button (简称FAB)，浮动按钮，用于在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的前面，通常是一个圆形，中间带有一个图标。根据浮动按钮的大小，浮动那妞被分为三种类型：常规，迷你和扩展。
1. 常规FAB
常规浮动按钮我们已经非常熟悉了，常用于创建新内容，如喜马拉雅和简书，点击浮动按钮即可创建自己想要分享或创作的内容。
Material Design中认为一个页面中不允许使用多个浮动按钮，但如果它们执行不同但同样重要的操作，则偶尔可以使用两个浮动按钮，例如在地图的使用中：
还有一种用法，类似与舵式导航，点击后弹出相关的系列操作，如钉钉，在DING界面点击“+”会出现三个不同的操作按钮，使用这种浮动按钮会隐藏部分操作，增加用户的认知负担，学习成本和记忆成本较高，如果是较重要或主要操作不建议使用。
2. 迷你FAB
迷你FAB和常规FAB主要区别在于尺寸不同，迷你FAB用在较小的屏幕上。当屏幕宽度为460dp或更小时，常规FAB（56dp）应转换为迷你尺寸（40dp）。
迷你FAB
3. 扩展FAB
扩展FAB更宽，并包含文本标签。在移动设备上，扩展FAB应放置在右下角或底部中心。
要注意的是：避免在底部应用栏上方使用扩展FAB，因为该组合会占用大量屏幕空间。如果它们同时存在，则扩展FAB应在滚动时折叠。
二、扩展运用
1. 回到顶部/猜你喜欢
主要在电商产品中使用，用户在网购时，经常会不停地往下滑动查看，要回到顶部时往往需要滑动多屏，如果有回到顶部的按钮，直接点击即可回到顶部，更方便。而猜你喜欢往往在屏幕最下方，也是需要滑动多屏才能查看，直接点击猜你喜欢浮动按钮，即可直接到达该栏目。
2. 购物车
同样常见于电商产品中，购物车是重要且点击频率高的入口，将购物车座做成浮动按钮，可缩短用户操作路径，用户网购过程中可随时进入购物车下单。要注意的是，浮动按钮容易遮住界面上的部分内容，在用户滑动屏幕浏览的过程中应隐藏或缩小浮动按钮，增大界面中可浏览的区域。
3. 截图反馈
大多数应用都会用到，截图时弹出截图反馈或分享推荐，点击后进入反馈界面或分享界面。但是目前来看这个功能似乎并没有什么用，我截图之后从来没有使用过应用推荐的分享方式，我更倾向于分享截图，但是从产品的角度看，通过分享链接分享更容易传播和转化用户，所以当用户截图的时候，产品希望用户能够按照产品推荐的分享方式去分享。
4. 运营活动
近段时间，浮动按钮被许多产品用作运营活动的入口。通过将浮动按钮设计得更吸引人，并且带有一些动效，吸引用户点击，从而提高运营活动的曝光率和参与度。将运营活动的入口以浮动按钮的形式呈现在页面中，是一种比较新的交互方式，在不影响主要界面浏览的同时，又能达到宣传的效果。但是目前用户已经熟悉了这种形式，如果没有更多创新的方式很难达到吸引用户点击的效果。
5. 推荐内容
目前看到的比较新颖的浮动按钮扩展运用，饿了么骑手货的界面，会有一只骑手的手伸出来，上面放了一个水果并带有价格，第一次看到觉得很有意思，忍不住去点击，点击后会有餐后水果的推荐。
我觉得这个交互做的很好，主要有两点：
1. 在合适的位置推出合适的内容，用户下单之后会关注骑手送货状态，所以会时不时查看送货状态界面，骑手送货状态的界面就是合适的位置，饭后吃水果是大部分中国人认为的好习惯，推荐水果就是合适的内容。
2. 增加互动乐趣。摇摆的双手，不可思议的低价都在吸引用户点击，用户获取推荐的内容的过程也变得有趣。
6. 其他
除了上述几种类型，还有更多关于浮动按钮的扩展运用，例如我们非常熟悉的微信，没看完的推送文章可以缩小成FAB的样式，在想看的时候再点击查看；携程中的服务升级承诺，类似扩展FAB，向下滑动时隐藏，向上滑动时出现；还有UC浏览器中的刷新按钮，长按按钮可以调整位置，对于将刷新按钮做成FAB浮动按钮的样式我觉得并不是非常合适，下滑刷新操作其实是用户非常熟悉的操作，然而把刷新按钮做成浮动按钮，可能会增加了用户的学习成本，用户需要花时间去习惯这个刷新操作，其次浮动按钮是比较容易点击的，如果将刷新按钮做成浮动按钮是不是会让用户容易误触？
总结
本文结合案例总结了浮动按钮的常规运用和扩展运用。
常规运用包括三个类型：常规，迷你和扩展。
扩展运用包主要括五个类型：
1. 回到顶部/猜你喜欢；
2. 购物车；
3. 截图反馈；
4. 运用活动；
5. 推荐内容。
扩展运用加入了创新的元素，但也是基于常规用法的原则，不论是常规运用还是扩展运用，FAB浮动按钮都是置于屏幕边缘，不会挡住屏幕的主要内容，一些FAB的扩展运用形式和位置也越来越灵活，可以让用户根据喜好移动按钮的位置。
关于浮动按钮的运用，相信之后会有更多新颖的交互方式，也欢迎大家补充关于浮动按钮的扩展运用类型。
本文由 @Joya 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。Tips: Until now, everytime you want to store your article, we will help you store it in Filecoin network. In the future, you can store it in Filecoin network using your own filecoin.
Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: