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協議
- 目前還沒評論,等你發揮!