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

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

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

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

一、什么是懸浮

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

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

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

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

二、使用場景

1. 承載頁面重要操作

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

以新增、發(fā)布為例，簡書為引導(dǎo)用戶生產(chǎn)出更多優(yōu)質(zhì)內(nèi)容，把“創(chuàng)作”這一重要功能用懸浮按鈕的形式著重呈現(xiàn)出來。點聚導(dǎo)航方面，釘釘?shù)腄ING則聚合了創(chuàng)建日程、創(chuàng)建任務(wù)、創(chuàng)建DING三個重要操作。

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

2. 錨點定位

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

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

3. 用于強提示

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

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

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

4. 支持多進程操作

隨著單個應(yīng)用內(nèi)的功能越來越復(fù)雜，任務(wù)多開和用戶在多任務(wù)之間的切換問題就隨之而來。

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

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

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

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

5. 滿足產(chǎn)品定位與調(diào)性

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

三、設(shè)計注意事項

經(jīng)過以上案例分析，我們可以總結(jié)出在進行懸浮球設(shè)計時需要注意的點。

1. 尺寸與形狀

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

2. 透明度、顏色與投影

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

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

3. 動畫

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

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

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

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

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

6. 提供備選操作路徑

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

7. 提供簡單模式與復(fù)雜模式

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

小結(jié)

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

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

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