一、前言

視頻播放器中承載著極其豐富的內(nèi)容畫(huà)面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露。基于此種場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。

視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！埂ⅰ鸽p擊→點(diǎn)贊」、「長(zhǎng)按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。

那么如何在保留用戶對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。

本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。

二、什么是「組合手勢(shì)」

「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。

以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。

于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。

「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。

由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。

三、「長(zhǎng)按組合手勢(shì)」激活快捷菜單

1.項(xiàng)目背景

百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。

隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門(mén)用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。

2.競(jìng)品調(diào)研及選型

通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型，  分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。

選型A

「長(zhǎng)按觸發(fā)獨(dú)立播控面板」：通過(guò)長(zhǎng)按手勢(shì)可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對(duì)視頻沉浸觀感體驗(yàn)有一定的打斷感；

選型B

「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」：通過(guò)長(zhǎng)按手勢(shì)可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；

選型C

「長(zhǎng)按觸發(fā)特定播控功能」：通過(guò)長(zhǎng)按手勢(shì)觸發(fā)特定的某個(gè)播控功能（如長(zhǎng)按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對(duì)于長(zhǎng)按手勢(shì)的使用效率較低；

3.設(shè)計(jì)方案

1）長(zhǎng)按手勢(shì)交互擴(kuò)容

針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。

但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶。

那么如何在兼容用戶已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。

基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：

step1：以“長(zhǎng)按手勢(shì)”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；

step2：若用戶未松開(kāi)手指，則系統(tǒng)默認(rèn)開(kāi)始識(shí)別用戶意圖，是否有以“拖拽手勢(shì)”滑選至目標(biāo)功能項(xiàng)以選擇功能；

step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。

「長(zhǎng)按+向上滑選」快捷觸發(fā)對(duì)應(yīng)功能項(xiàng)；

「長(zhǎng)按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對(duì)于此功能的使用習(xí)慣）。

2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。

3）易用性打磨

差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。

我們根據(jù)測(cè)試目標(biāo)、用戶類別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測(cè)試。

測(cè)試訪談的過(guò)程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/span>

同時(shí)，我們通過(guò)觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。

3.1 ）擴(kuò)展觸發(fā)熱區(qū)：

考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。

3.2 ）支持跟手觸發(fā)：

長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。

3.3 ）實(shí)時(shí)提示及響應(yīng)反饋：

靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。

方案上線及驗(yàn)證

以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：

「對(duì)照組」效果：長(zhǎng)按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；

「實(shí)驗(yàn)組」效果：長(zhǎng)按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；

小流量實(shí)驗(yàn)上線后，經(jīng)過(guò)近半個(gè)月的觀察，大盤(pán)指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。

「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。

「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。

二期擴(kuò)展方案
隨著長(zhǎng)按快捷菜單的上線推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。

四、「組合手勢(shì)」拓展探索

手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類高級(jí)手勢(shì)，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。

以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。

1.「右滑返回手勢(shì)」激活“小窗播放”

“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。

基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。

2.「雙指手勢(shì)」激活“滿屏播放”

“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫(huà)面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。

五、結(jié)語(yǔ)

便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場(chǎng)景的手勢(shì)交互體驗(yàn)。

作者：百度MEUX
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司