關于懸浮球設計，它雖然看起來非常小巧，但它蘊含了非常多的設計要素以及產品設計原理。本文中，筆者從APP懸浮球的使用情景與設計事項入手，為我們展開了一場精彩的分析。

如果問我過去一段時間最令人印象深刻的交互方式有哪些？我想說的有兩個：

一個是微信的文章浮窗，在閱讀文章時，如果有緊急信息需要處理，可以把文章加入浮窗；想再次閱讀時，點擊懸浮按鈕就會打開文章，方便用戶在文章和聊天頁面之間切換。

另一個則是知乎把“左右滑動”切換回答改為“上下滑動”切換回答，然后招來罵聲一片，同時為了告知用戶交互方式的變化，也加入了懸浮按鈕方便用戶快速切換答案。

一、什么是懸浮

說到懸浮，我們會聯想到懸浮窗、懸浮球、懸浮按鈕這些名詞術語，但究竟什么是懸浮卻并不十分明確。

在Material Design關于層次&陰影規范的章節中，懸浮操作按鈕（Floating Action Button，FAB）的海拔高度（elevation）定義在5-12dp之間。但我個人認為，懸浮是相對的，只要上下層元素之間有各自特有的運動規律，那上層元素就可以稱之為“懸浮”元素，比如導航欄、標簽欄相對于內容區就是懸浮。

在PC上，我們經?？吹礁鞣N系統級的懸浮窗口（如360加速球、搜狗輸入法工具欄、百度云盤懸浮窗等）以及一般網頁上的懸浮按鈕（如回到頂部、聯系客服等）。

同樣的，在移動端，懸浮窗口也可以分為系統級懸浮和應用內懸浮兩種類型。
在iOS中，懸浮球叫做「Assistive Touch」，可以用來實現返回主屏幕、調出控制中心、鎖屏等功能。
而 Android 系統更為開放，功能多得讓人眼花繚亂，比如MIUI已經內置了懸浮球功能，可以用來實現返回、截屏、鎖屏等功能。
很多第三方的內存清理應用也類似，只是需要獲取相應的系統權限。移動端的應用內懸浮更為常見，將在下文詳細介紹。

二、使用場景

1. 承載頁面重要操作

可以是單個按鈕，也可以收納一組具有相關功能的按鈕（可展開收起），通常用來承載與當前頁面相關度最高、最常用、最重要的操作。

以新增、發布為例，簡書為引導用戶生產出更多優質內容，把“創作”這一重要功能用懸浮按鈕的形式著重呈現出來。點聚導航方面，釘釘的DING則聚合了創建日程、創建任務、創建DING三個重要操作。

按理說，大部分中國網民早就被灌輸了“上拉加載，下拉刷新”的概念，可作為互聯網人才聚集地的脈脈，依然在列表頁面中加入了“刷新”懸浮按鈕作為下拉刷新的補充。這種做法的動機不好揣摩，一方面，如果需要下拉太久才能回到頂部，用戶會不耐煩；另一方面，在上拉加載的過程中，用戶所看到的信息實際上也是在不斷補充更新的。此外，很多非電商APP，如果加入商城模塊，一般也會把“購物車”圖標做懸浮處理。

2. 錨點定位

在移動端進行長列表瀏覽時，同樣會遇到返回頂部的需求，目前有比較多的替代方案，比如雙擊狀態欄回到頂部，雙擊底部標簽欄的特定標簽等，但因為隱藏的比較深，一般用戶并不知道這些用法。

如下圖：在京東商城首頁，點擊“推薦”懸浮按鈕，可快速到達“為你推薦”區域；點擊“刷新”可刷新頁面并回到頂部，同時支持雙擊狀態欄回到頂部；在商品詳情頁，則可以通過點擊回到頂部按鈕實現回到頂部。

3. 用于強提示

為了更大程度的引流和轉化，可以使用“懸浮圖”作為運營活動入口，懸浮圖與懸浮圖標的使用類似，只是形狀更不規則，更注重運營氛圍的營造和視覺表現。

美團打車領劵入口就使用了懸浮圖，而且做了動畫效果，晃動的紅包加上左右移動的汽車，十分醒目。

網易云音樂的新消息提示除了使用小紅點外，還結合了懸浮氣泡，提示性更強。很多App的導航欄下方、列表上方或者頁面底部會懸浮著一個橫幅（Notice Bar，通告欄），能常駐顯示直到事件結束，也屬于強提示的一種。

4. 支持多進程操作

隨著單個應用內的功能越來越復雜，任務多開和用戶在多任務之間的切換問題就隨之而來。

比如YouTube在瀏覽視頻列表時，正在播放的視頻會縮小成懸浮窗在底部標簽欄上方常駐并繼續播放（可暫?？申P閉），而國內的主流做法是隨著頁面滾動自動播放下一條視頻（自動播放那個完整顯示在當前頁的視頻）。推測其背后的原因，讓用戶少一步操作倒是其次，更多還是為了虛榮的播放量。當然，視頻內容的長短也是要考慮的因素。

和視頻小浮窗類似的還有語音通話懸浮窗、音頻播放浮窗、微信文章浮窗等。

比如進行微信語音通話時，可離開語音界面進行其他任務，而語音浮窗會微縮顯示。在MONO、SOUL中，播放音樂、音頻和其他非沖突性操作可以同時進行，在進行暫停/切歌等操作時，MONO需進入音樂播放器頁。

面，而SOUL的音頻播放懸浮窗可直接進行暫停/切歌操作。在我們希望給用戶打造沉浸體驗感的時候，用戶可能希望做到一心多用、提高效率。

5. 滿足產品定位與調性

開篇我們就說過懸浮的定義十分寬泛，所以就會有些不算嚴格意義的“偽懸浮”，他們只是去掉了一些背景層，以便讓更多的內容透過去，比如高德地圖、滴滴出行。另外一些則可以認為是基于產品調性做的視覺風格處理，如站酷、美食杰等。

三、設計注意事項

經過以上案例分析，我們可以總結出在進行懸浮球設計時需要注意的點。

1. 尺寸與形狀

在滿足最小視覺尺寸和可點擊尺寸的基礎上，可根據不同機型適配不同的大小，以便在視覺上突出懸浮按鈕的重要性。形狀變化是指對不同使用場景的處理，以知乎為例，首次進入答案，“下一個回答”是比較大的圓弧按鈕，如果使用了上滑切換答案，則變為原型圖標。

2. 透明度、顏色與投影

有些應用支持對懸浮按鈕、懸浮窗口的透明度進行自定義設置，相當于把調節懸浮元素與背景內容之間對比度平衡點的權利交給用戶，滿足用戶的個性化需求。顏色和投影主要是指進行點擊或按壓時，懸浮按鈕給出的變化及反饋。

另外，變色既可以是對用戶操作的反饋，也可以是系統的主動提醒。微信文章收縮到懸浮點后，會逐漸變紅，利用顏色的變化，提醒用戶回到剛才的閱讀場景中，延續之前的任務。

3. 動畫

懸浮用于重要提示時，加入動畫后更能吸引用戶目光，比如搶紅包活動入口設計成晃動的紅包。動畫也有相應的功能屬性，比如旋轉的唱針表明正在播放中、進度條提示下載進度等。

4. 合適的顯示/隱藏時機

因為懸浮元素要承載一些不同的功能，和頁面中的其他元素相比顯得十分突兀，為避免破壞界面整體感，所以有必要根據上下文環境設置相應的觸發規則。比如向下滑動時出現“直達推薦”按鈕，向上滑動時出現“回到頂部”按鈕。

5. 合適的位置與操作記憶

針對可移動位置的懸浮窗，需要限定可移動的區域。定義過移動區域，還需要定義?？繀^域。為了不遮擋頁面內容，停留區域一般定在屏幕靠左或靠右的位置。如果需要進一步節省空間，還可以在懸浮元素停留后，做自動吸附+半隱藏處理。如下圖，粉色框內是可移動區域，藍色區域是可?？繀^域，微信的右下角橙色區域是取消浮窗區域，但是也可以用于?？?。知乎的學習清單模塊也可以收納到懸浮窗中，會顯示封面、播放/暫停、關閉按鈕，當滑動頁面時，該懸浮窗會自動吸附到屏幕邊緣，避免遮擋頁面內容。

6. 提供備選操作路徑

大多數懸浮元素本身就是一種快捷方式，也就是說，還可以通過別的方式或路徑實現同樣的效果。比如，在微信中，要把文章加入浮窗，需要從屏幕左側邊緣向內滑動，同時向右下角滑動。而要取消浮窗，則需要拖拽浮窗到刪除區域。當然，這只是快捷方式。作為更穩妥的方式，點擊右上角“…”，可以在彈出的底部動作欄中加入/取消浮窗。

7. 提供簡單模式與復雜模式

懸浮窗本身不宜承載過多的功能操作，在必要時，可以提供多種模式切換，滿足不同需求。比如，soul中音頻播放的懸浮窗在復雜模式下兼職就是一個播放器，可以暫停/播放、切歌、點贊、查看播放進度等。

小結

懸浮按鈕的設計并不簡單，而它的使用范圍會越來越廣，相信會有更新奇的設計逐漸出現。如果在設計時需要用到類似的交互方式，務必仔細分析場景和用戶需求，正確選擇和使用。

本文由 @張鵬濤TAO 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議