FAB浮動按鈕的擴展運用

0 評論 7943 瀏覽 16 收藏 10 分鐘

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!