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