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浮动按钮的样式我觉得并不是非常合适，下滑重新整理操作其实是使用者非常熟悉的操作，然而把重新整理按钮做成浮动按钮，可能会增加了使用者的学习成本，使用者需要花时间去习惯这个重新整理操作，其次浮动按钮是比较容易点选的，如果将重新整理按钮做成浮动按钮是不是会让使用者容易误触？