2022-9-8 博博
懸浮小窗是什么？
先看張圖，對懸浮小窗有一個大致的概念，下圖是花椒直播 APP 中的直播懸浮小窗。（為方便書寫，下文將懸浮小窗簡稱為小窗）
本文的懸浮小窗指的是視覺空間上的層級概念。
用戶的感知是：
為什么這種感知能應用到互聯網產品中？
原因就在于這符合尼爾森可用性原則中的系統與用戶現實匹配原則。
即：設計應與用戶現實生活中對相關產品的認知、經驗、習慣等相符，以用戶期望的方式表現出來，使用戶可以利用已有的知識經驗來執行操作任務。
翻譯成人話就是讓用戶在使用我們的產品時能夠和現實生活中的習慣對應起來。
舉個例子：
電商軟件中“購物車”為什么使用購物車這一形象和名稱？
其實就是和現實生活對應起來的，生活中逛超市的時候會把要買的東西加入購物車一起結算。所以“購物車”這個概念遷移到互聯網后用戶的理解成本就非常低。
懸浮小窗也是一樣的道理，小窗模擬了生活中的空間轉移，在用戶的心智層，界面與界面之間的跳轉就類似于從一個房間到達另一個房間。
即使某些時候多個界面在技術的角度其實就是一個頁面，但是站在用戶的角度看不到這些底層邏輯，最直觀的就是一個個房間之間的切換。
（其實這里還涉及到另一個概念，把簡單留給用戶，把復雜留給程序。不管邏輯多復雜，對用戶來說，就是兩個空間的跳轉。）
懸浮小窗有三個特點：可切換界面、Z 軸最高、可拖拽（一般情況）。
① 可切換界面
如上一節所說，懸浮小窗就像是房間的切換，所以感官上懸浮小窗就是切換界面的作用。
② Z 軸最高
二維界面如何存在 Z 軸的概念？
大家在使用 APP 過程中一定遇到過彈窗和浮層的情況，如下圖，可以看到圖中 APP 的彈窗在感知上是覆蓋在內容層上的。
而右邊的截圖中的浮層是浮在正文內容上的，這就是 Z 軸，在互聯網應用中這是比較抽象的空間維度。但是卻是用戶可以明確感知到的，而感知的最直接方式就是覆蓋或者懸浮，感覺到 A 元素是覆蓋在 B 元素之上，或者 A 元素懸浮在 B 元素之上。
而懸浮小窗所謂 Z 軸最高則是因為懸浮小窗在 Z 軸的維度一般位于 APP 界面所有元素之上。
③ 可拖拽
可拖拽很好理解，即用戶可以通過拖拽移動懸浮小窗的位置，不過一般非直播音頻類產品會喜歡固定在界面的某個地方。比如得到 APP 在聽書時退出聽書頁面會在底部固定一個播放條。
技術維度把懸浮小窗分為兩種：系統自帶和自行開發。
內容維度上把懸浮小窗分為三種：視頻小窗、音頻小窗、文檔小窗（含白板）
由于系統自帶畫中畫功能自定義程度不高，無參考意義，下文主要從自行開發的懸浮小窗入手，從視頻小窗、音頻小窗和文檔小窗（含白板）三種分類來進行分析。
此部分內容是對第三部分的總結提煉，相關產品詳細分析、截圖以及錄屏細節請查看第三部分。
① 視頻小窗
GIF 演示（左滑屏幕邊緣開啟小窗）
GIF 演示（拖拽小窗超出屏幕邊緣后關閉）
視頻小窗 UI 集合
② 音頻小窗總結
音頻小窗 UI 集合
③ 文檔小窗
文檔小窗 UI 集合
本次調研 APP 覆蓋直播、音樂、社交、教育、會議、資訊四個方向，包括斗魚、虎牙、花椒直播、企鵝直播、CC 直播、阿里巴巴、淘寶、酷狗直播、陌陌、微信、陌陌、百度知道、邁聆會議、金山會議、網易會議、共計 15 款 APP。
視頻小窗將從功能和 UI 兩個大的維度進行分析，細分維度如下表格。
斗魚
APP 簡介：以游戲直播為主的互動式直播平臺
亮點
a 導航欄免遮擋，小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄，可避免將主要導航遮擋住
b「關閉」按鈕視覺強度較弱的同時能夠看清 icon
槽點
放大縮小不流暢，有卡頓的感覺
虎牙直播
APP 簡介：包含游戲、娛樂的互動式直播平臺
亮點
a 滑動小窗到屏幕關閉小窗：除了點擊關閉按鈕，還可以左滑小窗到左右屏幕邊緣，超出屏幕 2/3 時關閉小窗
b 同斗魚，導航欄免遮擋，小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄，可避免將主要導航遮擋住
槽點
自動打開聲音：在小窗上將聲音關閉后，點擊小窗上的放大按鈕進入全屏模式，此時聲音會自動打開。聲音的開關應該由用戶自行選擇而非幫用戶做選擇，萬一用戶所處場合不適合開聲音，突然開啟的聲音豈不是很尷尬。
花椒直播
APP 簡介：包含游戲、娛樂的互動式直播平臺
槽點
a 同虎牙，關閉聲音的情況下打開直播間會自動打開聲音
小窗會移動時可以擋住頂部一級導航欄
得到
APP 簡介：知識服務 APP，提供電子書、課程等服務。視頻以點播為主。
亮點
向下滑動視頻觸發小窗的方式交互非常友好且順手
頁面切換到有『發布』懸浮按鈕時，懸浮按鈕位置位于小窗之上，避免遮擋發布按鈕
作者：土撥鼠
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.dzxscac.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司