FAB浮動(dòng)按鈕是Material Design的一個(gè)控件，目前已經(jīng)被廣泛運(yùn)用。在很多應(yīng)用中都能看到浮動(dòng)按鈕的使用，但是之前浮動(dòng)按鈕的運(yùn)用比較局限和傳統(tǒng)，而最近我發(fā)現(xiàn)浮動(dòng)按鈕的運(yùn)用變得越來越多樣化，能夠滿足不同類型應(yīng)用的運(yùn)營需求，下面將結(jié)合案例總結(jié)浮動(dòng)按鈕的擴(kuò)展運(yùn)用類型。

一、常規(guī)用法

floating action button (簡稱FAB)，浮動(dòng)按鈕，用于在屏幕上執(zhí)行主要或最常見的操作。它出現(xiàn)在所有屏幕內(nèi)容的前面，通常是一個(gè)圓形，中間帶有一個(gè)圖標(biāo)。根據(jù)浮動(dòng)按鈕的大小，浮動(dòng)那妞被分為三種類型：常規(guī)，迷你和擴(kuò)展。

1. 常規(guī)FAB

常規(guī)浮動(dòng)按鈕我們已經(jīng)非常熟悉了，常用于創(chuàng)建新內(nèi)容，如喜馬拉雅和簡書，點(diǎn)擊浮動(dòng)按鈕即可創(chuàng)建自己想要分享或創(chuàng)作的內(nèi)容。

Material Design中認(rèn)為一個(gè)頁面中不允許使用多個(gè)浮動(dòng)按鈕，但如果它們執(zhí)行不同但同樣重要的操作，則偶爾可以使用兩個(gè)浮動(dòng)按鈕，例如在地圖的使用中：

還有一種用法，類似與舵式導(dǎo)航，點(diǎn)擊后彈出相關(guān)的系列操作，如釘釘，在DING界面點(diǎn)擊“+”會(huì)出現(xiàn)三個(gè)不同的操作按鈕，使用這種浮動(dòng)按鈕會(huì)隱藏部分操作，增加用戶的認(rèn)知負(fù)擔(dān)，學(xué)習(xí)成本和記憶成本較高，如果是較重要或主要操作不建議使用。

2. 迷你FAB

迷你FAB和常規(guī)FAB主要區(qū)別在于尺寸不同，迷你FAB用在較小的屏幕上。當(dāng)屏幕寬度為460dp或更小時(shí)，常規(guī)FAB（56dp）應(yīng)轉(zhuǎn)換為迷你尺寸（40dp）。

迷你FAB

3. 擴(kuò)展FAB

擴(kuò)展FAB更寬，并包含文本標(biāo)簽。在移動(dòng)設(shè)備上，擴(kuò)展FAB應(yīng)放置在右下角或底部中心。

要注意的是：避免在底部應(yīng)用欄上方使用擴(kuò)展FAB，因?yàn)樵摻M合會(huì)占用大量屏幕空間。如果它們同時(shí)存在，則擴(kuò)展FAB應(yīng)在滾動(dòng)時(shí)折疊。

二、擴(kuò)展運(yùn)用

1. 回到頂部/猜你喜歡

主要在電商產(chǎn)品中使用，用戶在網(wǎng)購時(shí)，經(jīng)常會(huì)不停地往下滑動(dòng)查看，要回到頂部時(shí)往往需要滑動(dòng)多屏，如果有回到頂部的按鈕，直接點(diǎn)擊即可回到頂部，更方便。而猜你喜歡往往在屏幕最下方，也是需要滑動(dòng)多屏才能查看，直接點(diǎn)擊猜你喜歡浮動(dòng)按鈕，即可直接到達(dá)該欄目。

2. 購物車

同樣常見于電商產(chǎn)品中，購物車是重要且點(diǎn)擊頻率高的入口，將購物車座做成浮動(dòng)按鈕，可縮短用戶操作路徑，用戶網(wǎng)購過程中可隨時(shí)進(jìn)入購物車下單。要注意的是，浮動(dòng)按鈕容易遮住界面上的部分內(nèi)容，在用戶滑動(dòng)屏幕瀏覽的過程中應(yīng)隱藏或縮小浮動(dòng)按鈕，增大界面中可瀏覽的區(qū)域。

3. 截圖反饋

大多數(shù)應(yīng)用都會(huì)用到，截圖時(shí)彈出截圖反饋或分享推薦，點(diǎn)擊后進(jìn)入反饋界面或分享界面。但是目前來看這個(gè)功能似乎并沒有什么用，我截圖之后從來沒有使用過應(yīng)用推薦的分享方式，我更傾向于分享截圖，但是從產(chǎn)品的角度看，通過分享鏈接分享更容易傳播和轉(zhuǎn)化用戶，所以當(dāng)用戶截圖的時(shí)候，產(chǎn)品希望用戶能夠按照產(chǎn)品推薦的分享方式去分享。

4. 運(yùn)營活動(dòng)

近段時(shí)間，浮動(dòng)按鈕被許多產(chǎn)品用作運(yùn)營活動(dòng)的入口。通過將浮動(dòng)按鈕設(shè)計(jì)得更吸引人，并且?guī)в幸恍﹦?dòng)效，吸引用戶點(diǎn)擊，從而提高運(yùn)營活動(dòng)的曝光率和參與度。將運(yùn)營活動(dòng)的入口以浮動(dòng)按鈕的形式呈現(xiàn)在頁面中，是一種比較新的交互方式，在不影響主要界面瀏覽的同時(shí)，又能達(dá)到宣傳的效果。但是目前用戶已經(jīng)熟悉了這種形式，如果沒有更多創(chuàng)新的方式很難達(dá)到吸引用戶點(diǎn)擊的效果。

5. 推薦內(nèi)容

目前看到的比較新穎的浮動(dòng)按鈕擴(kuò)展運(yùn)用，餓了么騎手貨的界面，會(huì)有一只騎手的手伸出來，上面放了一個(gè)水果并帶有價(jià)格，第一次看到覺得很有意思，忍不住去點(diǎn)擊，點(diǎn)擊后會(huì)有餐后水果的推薦。

我覺得這個(gè)交互做的很好，主要有兩點(diǎn)：

1. 在合適的位置推出合適的內(nèi)容，用戶下單之后會(huì)關(guān)注騎手送貨狀態(tài)，所以會(huì)時(shí)不時(shí)查看送貨狀態(tài)界面，騎手送貨狀態(tài)的界面就是合適的位置，飯后吃水果是大部分中國人認(rèn)為的好習(xí)慣，推薦水果就是合適的內(nèi)容。

2. 增加互動(dòng)樂趣。搖擺的雙手，不可思議的低價(jià)都在吸引用戶點(diǎn)擊，用戶獲取推薦的內(nèi)容的過程也變得有趣。

6. 其他

除了上述幾種類型，還有更多關(guān)于浮動(dòng)按鈕的擴(kuò)展運(yùn)用，例如我們非常熟悉的微信，沒看完的推送文章可以縮小成FAB的樣式，在想看的時(shí)候再點(diǎn)擊查看；攜程中的服務(wù)升級(jí)承諾，類似擴(kuò)展FAB，向下滑動(dòng)時(shí)隱藏，向上滑動(dòng)時(shí)出現(xiàn)；還有UC瀏覽器中的刷新按鈕，長按按鈕可以調(diào)整位置，對(duì)于將刷新按鈕做成FAB浮動(dòng)按鈕的樣式我覺得并不是非常合適，下滑刷新操作其實(shí)是用戶非常熟悉的操作，然而把刷新按鈕做成浮動(dòng)按鈕，可能會(huì)增加了用戶的學(xué)習(xí)成本，用戶需要花時(shí)間去習(xí)慣這個(gè)刷新操作，其次浮動(dòng)按鈕是比較容易點(diǎn)擊的，如果將刷新按鈕做成浮動(dòng)按鈕是不是會(huì)讓用戶容易誤觸？

總結(jié)

本文結(jié)合案例總結(jié)了浮動(dòng)按鈕的常規(guī)運(yùn)用和擴(kuò)展運(yùn)用。

常規(guī)運(yùn)用包括三個(gè)類型：常規(guī)，迷你和擴(kuò)展。

擴(kuò)展運(yùn)用包主要括五個(gè)類型：

1. 回到頂部/猜你喜歡；

2. 購物車；

3. 截圖反饋；

4. 運(yùn)用活動(dòng)；

5. 推薦內(nèi)容。

擴(kuò)展運(yùn)用加入了創(chuàng)新的元素，但也是基于常規(guī)用法的原則，不論是常規(guī)運(yùn)用還是擴(kuò)展運(yùn)用，F(xiàn)AB浮動(dòng)按鈕都是置于屏幕邊緣，不會(huì)擋住屏幕的主要內(nèi)容，一些FAB的擴(kuò)展運(yùn)用形式和位置也越來越靈活，可以讓用戶根據(jù)喜好移動(dòng)按鈕的位置。

關(guān)于浮動(dòng)按鈕的運(yùn)用，相信之后會(huì)有更多新穎的交互方式，也歡迎大家補(bǔ)充關(guān)于浮動(dòng)按鈕的擴(kuò)展運(yùn)用類型。

本文由 @Joya 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議