2022-12-28 ui設(shè)計(jì)分享達(dá)人
一、前言
視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露。基于此種場景下，合理的手勢設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。
視頻場景中目前已有部分的常規(guī)單向手勢已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！埂ⅰ鸽p擊→點(diǎn)贊」、「長按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規(guī)通用手勢認(rèn)知的基礎(chǔ)上，進(jìn)一步對視頻場景中的手勢交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來在手勢進(jìn)階交互上的重點(diǎn)探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎(chǔ)通用手勢進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢」設(shè)計(jì)模型，以探索如何在視頻場景中構(gòu)建便捷高效的進(jìn)階手勢體驗(yàn)設(shè)計(jì)。
二、什么是「組合手勢」
「組合手勢」是基于常規(guī)手勢的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢所構(gòu)成，若組合方式及使用場景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過程是線性的，手勢擴(kuò)展性十分有限且難以滿足視頻場景對于手勢擴(kuò)容的訴求。
于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢相互組合后的擴(kuò)展可行性。
「組合手勢」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對應(yīng)的基礎(chǔ)分支手勢構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。
由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場景進(jìn)行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項(xiàng)目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。
2.競品調(diào)研及選型
通過對競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨(dú)立播控面板、長按觸發(fā)浮層播控選項(xiàng)、長按觸發(fā)特定播控功能。
選型A
「長按觸發(fā)獨(dú)立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對視頻沉浸觀感體驗(yàn)有一定的打斷感；
選型B
「長按觸發(fā)浮層播控選項(xiàng)」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
選型C
「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個(gè)播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設(shè)計(jì)方案
1）長按手勢交互擴(kuò)容
針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對視頻場景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來的難點(diǎn)是我們目前播放器中的長按手勢已被“快進(jìn)”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對于便捷手勢體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢」設(shè)計(jì)模型來對視頻播放器中的長按手勢進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
step1：以“長按手勢”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；
step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識(shí)別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項(xiàng)以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長按+向上滑選」快捷觸發(fā)對應(yīng)功能項(xiàng)；
「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對于此功能的使用習(xí)慣）。
2）容錯(cuò)性兼容
在設(shè)定「長按+滑選」組合手勢的同時(shí)，考慮到兼容主流的長按習(xí)慣、以及對于滑選手勢需要有一定的適應(yīng)過程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點(diǎn)選的方式觸發(fā)對應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測試，以預(yù)期在上線前可先收集一波體驗(yàn)問題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測試目標(biāo)、用戶類別、測試前序準(zhǔn)備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測試。
測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時(shí)，我們通過觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場景，可盡可能擴(kuò)大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實(shí)時(shí)提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢觸發(fā)機(jī)制。
方案上線及驗(yàn)證
以AB實(shí)驗(yàn)對本次設(shè)計(jì)方案進(jìn)行定量測試驗(yàn)證：
「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實(shí)驗(yàn)組」效果：長按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；
小流量實(shí)驗(yàn)上線后，經(jīng)過近半個(gè)月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現(xiàn)實(shí)世界行為的映射，無論是基礎(chǔ)手勢還是組合類高級(jí)手勢，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場景中進(jìn)行設(shè)計(jì)。
以「組合手勢」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對視頻播放器中更多功能場景進(jìn)行了便捷手勢的設(shè)計(jì)擴(kuò)容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號(hào)，若在“雙指拖拽手勢”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
五、結(jié)語
便捷手勢的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場景的手勢體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場景的手勢交互體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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://www.teruid.com