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