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協議