本文為PMCAFF專欄作者836488572出品

如果問我過去一段時間最令人印象深刻的交互方式有哪些？我想說的有兩個：一個是微信的文章浮窗，在閱讀文章時，如果有緊急信息需要處理，可以把文章加入浮窗，想再次閱讀時，點擊懸浮按鈕就會打開文章，方便用戶在文章和聊天頁面之間切換。另一個則是知乎把“左右滑動”切換回答改為“上下滑動”切換回答，然后招來罵聲一片，同時為了告知用戶交互方式的變化，也加入了懸浮按鈕方便用戶快速切換答案。

什么是懸浮

說到懸浮，我們會聯(lián)想到懸浮窗、懸浮球、懸浮按鈕這些名詞術(shù)語，但究竟什么是懸浮卻并不十分明確。在Material Design關(guān)于層次&陰影規(guī)范的章節(jié)中，懸浮操作按鈕（Floating Action Button，FAB）的海拔高度（elevation）定義在5-12dp之間。但我個人認為，懸浮是相對的，只要上下層元素之間有各自特有的運動規(guī)律，那上層元素就可以稱之為“懸浮”元素，比如導航欄、標簽欄相對于內(nèi)容區(qū)就是懸浮。

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

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

使用場景

承載頁面重要操作

可以是單個按鈕，也可以收納一組具有相關(guān)功能的按鈕（可展開收起），通常用來承載與當前頁面相關(guān)度最高、最常用、最重要的操作。以新增、發(fā)布為例，簡書為引導用戶生產(chǎn)出更多優(yōu)質(zhì)內(nèi)容，把“創(chuàng)作”這一重要功能用懸浮按鈕的形式著重呈現(xiàn)出來。點聚導航方面，釘釘?shù)腄ING則聚合了創(chuàng)建日程、創(chuàng)建任務、創(chuàng)建DING三個重要操作。

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

錨點定位

在移動端進行長列表瀏覽時，同樣會遇到返回頂部的需求，目前有比較多的替代方案，比如雙擊狀態(tài)欄回到頂部，雙擊底部標簽欄的特定標簽等，但因為隱藏的比較深，一般用戶并不知道這些用法。如下圖：在京東商城首頁，點擊“推薦”懸浮按鈕，可快速到達“為你推薦”區(qū)域；點擊“刷新”可刷新頁面并回到頂部，同時支持雙擊狀態(tài)欄回到頂部；在商品詳情頁，則可以通過點擊回到頂部按鈕實現(xiàn)回到頂部。

用于強提示

為了更大程度的引流和轉(zhuǎn)化，可以使用“懸浮圖”作為運營活動入口，懸浮圖與懸浮圖標的使用類似，只是形狀更不規(guī)則，更注重運營氛圍的營造和視覺表現(xiàn)。美團打車領(lǐng)劵入口就使用了懸浮圖，而且做了動畫效果，晃動的紅包加上左右移動的汽車，十分醒目。網(wǎng)易云音樂的新消息提示除了使用小紅點外，還結(jié)合了懸浮氣泡，提示性更強。很多App的導航欄下方、列表上方或者頁面底部會懸浮著一個橫幅（Notice Bar，通告欄），能常駐顯示直到事件結(jié)束，也屬于強提示的一種。

支持多進程操作

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

和視頻小浮窗類似的還有語音通話懸浮窗、音頻播放浮窗、微信文章浮窗等。比如進行微信語音通話時，可離開語音界面進行其他任務，而語音浮窗會微縮顯示。在MONO、SOUL中，播放音樂、音頻和其他非沖突性操作可以同時進行，在進行暫停/切歌等操作時，MONO需進入音樂播放器頁面，而SOUL的音頻播放懸浮窗可直接進行暫停/切歌操作。在我們希望給用戶打造沉浸體驗感的時候，用戶可能希望做到一心多用、提高效率。

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

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

設計注意事項

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

1.尺寸與形狀

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

2.透明度、顏色與投影

有些應用支持對懸浮按鈕、懸浮窗口的透明度進行自定義設置，相當于把調(diào)節(jié)懸浮元素與背景內(nèi)容之間對比度平衡點的權(quán)利交給用戶，滿足用戶的個性化需求。顏色和投影主要是指進行點擊或按壓時，懸浮按鈕給出的變化及反饋。另外，變色既可以是對用戶操作的反饋，也可以是系統(tǒng)的主動提醒。微信文章收縮到懸浮點后，會逐漸變紅，利用顏色的變化，提醒用戶回到剛才的閱讀場景中，延續(xù)之前的任務。

3.動畫

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

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

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

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

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

6.提供備選操作路徑

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

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

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

小結(jié)

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

總結(jié)

以上是生活随笔為你收集整理的APP中的悬浮球设计总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。