懸浮小窗該如何設計？高手的樣本分析來了！

本文為懸浮小窗設計研究，懸浮小窗分為：視頻小窗、音頻小窗、文檔小窗三種，此次選取 15 款 APP，從功能、交互設計和 UI設計來分析。

文章目的：

1. 讓大家了解懸浮小窗是什么
2. 讓大家了解懸浮小窗的主流交互和視覺展現方式，為今后設計工作做參考

文章分為三大板塊：

1. 前言：介紹懸浮小窗
2. 總結：對此次懸浮小窗調研的總結
3. 樣本分析：對每一個樣本的詳細分析，包括截圖和錄屏

知其然知其所以然，先要對懸浮小窗有基礎的概念后才能了解其具體用法，所以文章第一部分介紹懸浮小窗的概念，第二部分為調研結果，若想了解每個 APP 的詳細分析可查看第三部分。

1. 前言

懸浮小窗是什么？

先看張圖，對懸浮小窗有一個大致的概念，下圖是花椒直播 APP 中的直播懸浮小窗。（為方便書寫，下文將懸浮小窗簡稱為小窗）

本文的懸浮小窗指的是視覺空間上的層級概念。

用戶的感知是：

1. 自己退出了 A 房間到達了另一個 B 房間
2. 同時 A 房間并未完全關閉，而是以一個小窗口的方式懸浮著
3. 我隨時可以點擊這個小窗口返回 A 房間

為什么這種感知能應用到互聯網產品中？

原因就在于這符合尼爾森可用性原則中的系統與用戶現實匹配原則。

即：設計應與用戶現實生活中對相關產品的認知、經驗、習慣等相符，以用戶期望的方式表現出來，使用戶可以利用已有的知識經驗來執行操作任務。

翻譯成人話就是讓用戶在使用我們的產品時能夠和現實生活中的習慣對應起來。

舉個例子：

電商軟件中“購物車”為什么使用購物車這一形象和名稱？

其實就是和現實生活對應起來的，生活中逛超市的時候會把要買的東西加入購物車一起結算。所以“購物車”這個概念遷移到互聯網后用戶的理解成本就非常低。

懸浮小窗也是一樣的道理，小窗模擬了生活中的空間轉移，在用戶的心智層，界面與界面之間的跳轉就類似于從一個房間到達另一個房間。

即使某些時候多個界面在技術的角度其實就是一個頁面，但是站在用戶的角度看不到這些底層邏輯，最直觀的就是一個個房間之間的切換。

（其實這里還涉及到另一個概念，把簡單留給用戶，把復雜留給程序。不管邏輯多復雜，對用戶來說，就是兩個空間的跳轉。）

2. 懸浮小窗的特點

懸浮小窗有三個特點：可切換界面、Z 軸最高、可拖拽（一般情況）。

① 可切換界面

如上一節所說，懸浮小窗就像是房間的切換，所以感官上懸浮小窗就是切換界面的作用。

② Z 軸最高

二維界面如何存在 Z 軸的概念？

大家在使用 APP 過程中一定遇到過彈窗和浮層的情況，如下圖，可以看到圖中 APP 的彈窗在感知上是覆蓋在內容層上的。

而右邊的截圖中的浮層是浮在正文內容上的，這就是 Z 軸，在互聯網應用中這是比較抽象的空間維度。但是卻是用戶可以明確感知到的，而感知的最直接方式就是覆蓋或者懸浮，感覺到 A 元素是覆蓋在 B 元素之上，或者 A 元素懸浮在 B 元素之上。

而懸浮小窗所謂 Z 軸最高則是因為懸浮小窗在 Z 軸的維度一般位于 APP 界面所有元素之上。

③ 可拖拽

可拖拽很好理解，即用戶可以通過拖拽移動懸浮小窗的位置，不過一般非直播音頻類產品會喜歡固定在界面的某個地方。比如得到 APP 在聽書時退出聽書頁面會在底部固定一個播放條。

3. 懸浮小窗分類

技術維度把懸浮小窗分為兩種：系統自帶和自行開發。

內容維度上把懸浮小窗分為三種：視頻小窗、音頻小窗、文檔小窗（含白板）

由于系統自帶畫中畫功能自定義程度不高，無參考意義，下文主要從自行開發的懸浮小窗入手，從視頻小窗、音頻小窗和文檔小窗（含白板）三種分類來進行分析。

4. 總結

此部分內容是對第三部分的總結提煉，相關產品詳細分析、截圖以及錄屏細節請查看第三部分。

① 視頻小窗

GIF 演示（左滑屏幕邊緣開啟小窗）

GIF 演示（拖拽小窗超出屏幕邊緣后關閉）

視頻小窗 UI 集合

② 音頻小窗總結

音頻小窗 UI 集合

③ 文檔小窗

文檔小窗 UI 集合

5. 樣本分析

本次調研 APP 覆蓋直播、音樂、社交、教育、會議、資訊四個方向，包括斗魚、虎牙、花椒直播、企鵝直播、CC 直播、阿里巴巴、淘寶、酷狗直播、陌陌、微信、陌陌、百度知道、邁聆會議、金山會議、網易會議、共計 15 款 APP。

① 視頻小窗

視頻小窗將從功能和 UI 兩個大的維度進行分析，細分維度如下表格。

斗魚

APP 簡介：以游戲直播為主的互動式直播平臺

亮點

a 導航欄免遮擋，小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄，可避免將主要導航遮擋住

b「關閉」按鈕視覺強度較弱的同時能夠看清 icon

槽點

放大縮小不流暢，有卡頓的感覺

虎牙直播

APP 簡介：包含游戲、娛樂的互動式直播平臺

亮點

a 滑動小窗到屏幕關閉小窗：除了點擊關閉按鈕，還可以左滑小窗到左右屏幕邊緣，超出屏幕 2/3 時關閉小窗

b 同斗魚，導航欄免遮擋，小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄，可避免將主要導航遮擋住

槽點

自動打開聲音：在小窗上將聲音關閉后，點擊小窗上的放大按鈕進入全屏模式，此時聲音會自動打開。聲音的開關應該由用戶自行選擇而非幫用戶做選擇，萬一用戶所處場合不適合開聲音，突然開啟的聲音豈不是很尷尬。

花椒直播

APP 簡介：包含游戲、娛樂的互動式直播平臺

槽點

a 同虎牙，關閉聲音的情況下打開直播間會自動打開聲音

小窗會移動時可以擋住頂部一級導航欄

得到

APP 簡介：知識服務 APP，提供電子書、課程等服務。視頻以點播為主。

亮點

向下滑動視頻觸發小窗的方式交互非常友好且順手

頁面切換到有『發布』懸浮按鈕時，懸浮按鈕位置位于小窗之上，避免遮擋發布按鈕

……

還有十幾個 APP 的樣本，包括截圖和錄屏，感興趣的小伙伴多多點贊，下次更新。