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

最近突然好多應(yīng)用內(nèi)開始使用懸浮按鈕來吸引人的注意力，也是最近運(yùn)營說一個(gè)活動(dòng)要做懸浮圖標(biāo)，才發(fā)現(xiàn)其他的互金產(chǎn)品已經(jīng)開始做了，感覺就是忽如一夜春風(fēng)來，遍地都是懸浮圖。

對(duì)于懸浮圖標(biāo)的應(yīng)用場(chǎng)景，和懸浮圖標(biāo)的實(shí)現(xiàn)，懸浮圖標(biāo)的應(yīng)用案例來說，其實(shí)我并不是非常了解。因?yàn)橄鄬?duì)于常規(guī)的來說，目前的懸浮其實(shí)都是按照微信里的來剽竊的，除了系統(tǒng)自帶的懸浮圖標(biāo)。

我們也和技術(shù)討論下對(duì)于這個(gè)活動(dòng)是不是需要來說，我先從自己的角度認(rèn)識(shí)下。

針對(duì)：什么是懸浮，懸浮的形式，懸浮的使用場(chǎng)景，懸浮的作用，懸浮的交互來稍微了解下。

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

一、什么是懸浮

懸浮操作按鈕（Floating Action Button，F(xiàn)AB），或者說懸浮按鈕，是 Android 應(yīng)用中最常見的一個(gè)控件。懸浮按鈕通常是圓形，底部的Material Design 風(fēng)格的陰影讓它看起來懸浮在整個(gè)UI之上。懸浮按鈕是Android UI 交互中最關(guān)鍵的元素之一，在用戶流程中至關(guān)重要。

二、懸浮的形狀

<懸浮圖標(biāo)一般都是原型，但是也可以根據(jù)自己的風(fēng)格進(jìn)行設(shè)計(jì)不同的形狀，

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

前端實(shí)現(xiàn)方法：https://www.jianshu.com/p/bfba98ec49b0

三、懸浮按鈕的使用場(chǎng)景及作用

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

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

我最近有一個(gè)活動(dòng)上線，但是我沒有很明顯的位置，可供用戶查看，怎么辦？我怎么達(dá)到我想要的推廣目的啊？

來活動(dòng)期間懸浮解決：

所以懸浮按鈕其實(shí)起到的作用有：

1. 導(dǎo)航
2. 引導(dǎo)
3. 核心

1. 導(dǎo)航工具欄

懸浮按鈕可以在進(jìn)行點(diǎn)按或滾動(dòng)操作時(shí)變換成工具欄。 工具欄可以包含相關(guān)的操作，文本和搜索字段等。當(dāng)用戶通過滾動(dòng)發(fā)出他們有興趣繼續(xù)瀏覽內(nèi)容的信號(hào)，滾動(dòng)消失的工具欄則大大地節(jié)省了屏幕空間，整體的使用體驗(yàn)會(huì)非常流暢。

不過這個(gè)我目前見到的很少。

2. 引導(dǎo)

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

懸浮按鈕可以簡單地觸發(fā)某個(gè)動(dòng)作或在某處導(dǎo)航，常用于觸發(fā)功能、菜單或?qū)Ш健?/p>

3. 核心功能

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

4.?觸發(fā)和擴(kuò)展一系列操作

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

四、設(shè)計(jì)的原則

1. 選擇適當(dāng)?shù)膽腋“粹o尺寸

懸浮按鈕主要用于促進(jìn)用戶行為，它們通過在UI上浮動(dòng)的圓圈圖標(biāo)來區(qū)分，并且具有包括變形，啟動(dòng)和傳送錨點(diǎn)的運(yùn)動(dòng)行為。一般有兩種尺寸：默認(rèn)版和迷你版（僅用于與其他界面元素創(chuàng)建視覺連續(xù)性）。

默認(rèn)的尺寸一般為56*56dp，迷你版的尺寸為40*40dp。界面寬度低于460dp時(shí)，需要從默認(rèn)尺寸（56dp）調(diào)整至迷你尺寸（40dp）。

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

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

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

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

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

需要注意的是：每個(gè)頁面只能出現(xiàn)一個(gè)懸浮按鈕，也不要將懸浮按鈕與一個(gè)頁面上的所有元素產(chǎn)生關(guān)聯(lián)，懸浮按鈕本身顯眼抓人眼球，濫用懸浮按鈕會(huì)分散用戶的注意力。

五、懸浮的交互

1. 打開一個(gè)單獨(dú)的頁面，后面是一個(gè)單獨(dú)的頁面挑戰(zhàn)
2. 點(diǎn)擊擴(kuò)展展示更多懸浮圖標(biāo)，一般不能超過六個(gè)
3. 頁面簡單的動(dòng)畫交互展開，一個(gè)半頁面展開，此時(shí)是前后的邏輯變化。

案列

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

畢竟對(duì)于四個(gè)主要的菜單欄來說：首頁、投資、發(fā)現(xiàn)、我的來說用戶首先進(jìn)入的就是首頁中，首頁是最顯眼的推薦作用，投資頁是最不適合的，會(huì)影響用戶的選擇。

1. 懸浮的時(shí)機(jī)
2. 懸浮的位置
3. 懸浮的交互和動(dòng)畫效果

六、結(jié)后語

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

一個(gè)界面都有要展示的要素，當(dāng)懸浮窗的使用是不是影響本界面的因素，其他的界面的關(guān)聯(lián)性等等。

懸浮按鈕看起來很簡單，但是要在APP設(shè)計(jì)的時(shí)候正確使用，還是要注意細(xì)節(jié)、場(chǎng)景和用戶需求的。正確使用懸浮按鈕，會(huì)有事半功倍的效果。

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

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