當要用懸浮的時候，考慮下在哪使用？什么條件下使用？不使用行不行？使用了帶來了什么效果？如果效果不好怎么辦？哪些界面需要使用？一個界面都有要展示的要素，當懸浮窗的使用是不是影響本界面的因素，其他的界面的關聯性等等。

最近突然好多應用內開始使用懸浮按鈕來吸引人的注意力，也是最近運營說一個活動要做懸浮圖標，才發現其他的互金產品已經開始做了，感覺就是忽如一夜春風來，遍地都是懸浮圖。

對于懸浮圖標的應用場景，和懸浮圖標的實現，懸浮圖標的應用案例來說，其實我并不是非常了解。因為相對于常規的來說，目前的懸浮其實都是按照微信里的來剽竊的，除了系統自帶的懸浮圖標。

我們也和技術討論下對于這個活動是不是需要來說，我先從自己的角度認識下。

針對：什么是懸浮，懸浮的形式，懸浮的使用場景，懸浮的作用，懸浮的交互來稍微了解下。

小貼士：判斷一個界面的主要操作其實并沒有看起來那么簡單。為了簡化任務，并且考量你是否需要懸浮按鈕，可以參考這個“五分鐘規則”：如果你花費了5分鐘還沒找到這一屏的主要操作，那么這說明這一屏不需要懸浮按鈕。

一、什么是懸浮

懸浮操作按鈕（Floating Action Button，FAB），或者說懸浮按鈕，是 Android 應用中最常見的一個控件。懸浮按鈕通常是圓形，底部的Material Design 風格的陰影讓它看起來懸浮在整個UI之上。懸浮按鈕是Android UI 交互中最關鍵的元素之一，在用戶流程中至關重要。

二、懸浮的形狀

<懸浮圖標一般都是原型，但是也可以根據自己的風格進行設計不同的形狀，

UI上，往往是最色彩大膽最直觀的頁面元素；在功能上，往往是代表用戶在頁面上最高頻次的操作。但是一般懸浮圖標不能過大，尺寸固定在：

前端實現方法：https://www.jianshu.com/p/bfba98ec49b0

三、懸浮按鈕的使用場景及作用

試想下最常見的一種場景，當有一個很長很長的頁面，你翻頁到最下面的時候發現前面幾行的文字和其有關聯，你想回頭去看，那這種返回最頂端的懸浮按鈕的存在是多么可高興的事情啊。你最經常用的抖音，有喜歡、分享、音樂點擊的懸浮按鈕，你最喜歡的事情都給你最直觀的的表達。充分給了你表達喜歡的去向和看到同類音樂自己創作的便利。

音樂類的app的界面，使用播放暫停的功能觸發。

我最近有一個活動上線，但是我沒有很明顯的位置，可供用戶查看，怎么辦？我怎么達到我想要的推廣目的??？

來活動期間懸浮解決：

所以懸浮按鈕其實起到的作用有：

1. 導航
2. 引導
3. 核心

1. 導航工具欄

懸浮按鈕可以在進行點按或滾動操作時變換成工具欄。 工具欄可以包含相關的操作，文本和搜索字段等。當用戶通過滾動發出他們有興趣繼續瀏覽內容的信號，滾動消失的工具欄則大大地節省了屏幕空間，整體的使用體驗會非常流暢。

不過這個我目前見到的很少。

2. 引導

當你想要宣傳你想要的展示的時候，懸浮是個很醒目的操作，他一般會用一些很大膽的色彩來告知用戶，來看啊，我這有你感興趣的。

懸浮按鈕可以簡單地觸發某個動作或在某處導航，常用于觸發功能、菜單或導航。

3. 核心功能

一般很核心的功能一直都存在的功能也會使用懸浮按鈕，一直存在于界面，時刻告知用戶我們要做的是什么，我可以給你提供到什么。

4.?觸發和擴展一系列操作

除了單一的功能觸發外，通過懸浮按鈕更常用于觸發一系列的操作，通過擴展，用一組相關、常用的懸浮按鈕來替代原來的單一交互。常見的形式有拓展按鈕，拓展表單等。

四、設計的原則

1. 選擇適當的懸浮按鈕尺寸

懸浮按鈕主要用于促進用戶行為，它們通過在UI上浮動的圓圈圖標來區分，并且具有包括變形，啟動和傳送錨點的運動行為。一般有兩種尺寸：默認版和迷你版（僅用于與其他界面元素創建視覺連續性）。

默認的尺寸一般為56*56dp，迷你版的尺寸為40*40dp。界面寬度低于460dp時，需要從默認尺寸（56dp）調整至迷你尺寸（40dp）。

2. 懸浮按鈕只承載正向操作

由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應該是個積極正向的交互，比如創建、分享、探索等。唯一的懸浮按鈕不應該執行破壞性的操作。

比如刪除、歸檔。它不應該是非特定的操作，或者是不完整的交互，比如剪切和粘貼是一組組合交互，它們應該存在于菜單欄當中，而非懸浮按鈕中。

3. 大尺寸屏幕上的懸浮按鈕

懸浮按鈕在大尺寸的屏幕上可以放置在擴展的APP欄、工具欄或者結構性的元素（前提不阻礙其他元素）和表單的邊緣上。

需要注意的是：每個頁面只能出現一個懸浮按鈕，也不要將懸浮按鈕與一個頁面上的所有元素產生關聯，懸浮按鈕本身顯眼抓人眼球，濫用懸浮按鈕會分散用戶的注意力。

五、懸浮的交互

1. 打開一個單獨的頁面，后面是一個單獨的頁面挑戰
2. 點擊擴展展示更多懸浮圖標，一般不能超過六個
3. 頁面簡單的動畫交互展開，一個半頁面展開，此時是前后的邏輯變化。

案列

我看了最近很多互金產品都開始使用了活動的懸浮按鈕在app中，這樣做的目的應該就是為了吸引用戶，但是看到了使用的界面只有首頁上有。其他頁面都沒有，可能也是怕影響其他頁面的核心功能吧，為了防止起到不好的影響。

畢竟對于四個主要的菜單欄來說：首頁、投資、發現、我的來說用戶首先進入的就是首頁中，首頁是最顯眼的推薦作用，投資頁是最不適合的，會影響用戶的選擇。

1. 懸浮的時機
2. 懸浮的位置
3. 懸浮的交互和動畫效果

六、結后語

當要用懸浮的時候，考慮下在哪使用？什么條件下使用？不使用行不行？使用了帶來了什么效果？如果效果不好怎么辦？哪些界面需要使用？

一個界面都有要展示的要素，當懸浮窗的使用是不是影響本界面的因素，其他的界面的關聯性等等。

懸浮按鈕看起來很簡單，但是要在APP設計的時候正確使用，還是要注意細節、場景和用戶需求的。正確使用懸浮按鈕，會有事半功倍的效果。

本文由 @丑八怪 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。