在視頻播放器中，合理的手勢交互設(shè)計可以幫助用戶提升操作上的便捷性，從而實現(xiàn)更快捷的觸達(dá)。那么如果想在已有的手勢交互上實現(xiàn)設(shè)計升級，產(chǎn)品或設(shè)計一側(cè)可以怎么做？本篇文章里，作者針對手勢交互優(yōu)化一事進(jìn)行了解讀，一起來看。

一、前言

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

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

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

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

二、什么是「組合手勢」

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

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

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

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

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

三、「長按組合手勢」激活快捷菜單

1. 項目背景

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

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

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

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

• 選型A「長按觸發(fā)獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴(kuò)展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
• 選型B「長按觸發(fā)浮層播控選項」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項入口，一定程度上可延續(xù)視頻觀看的沉浸體驗，但浮層擴(kuò)展性有限；
• 選型C「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低。

3. 設(shè)計方案

1）長按手勢交互擴(kuò)容

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

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

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

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

• step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
• step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項以選擇功能；
• step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。

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

2）容錯性兼容

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

3）易用性打磨

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

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

測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。

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

① 擴(kuò)展觸發(fā)熱區(qū)

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

② 支持跟手觸發(fā)

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

③ 實時提示及響應(yīng)反饋

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

4. 方案上線及驗證

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

• 「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
• 「實驗組」效果：長按觸發(fā)“快捷菜單”選項（支持滑選和點選模式）。

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

「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發(fā)訴求。

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

5. 二期擴(kuò)展方案

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

四、「組合手勢」拓展探索

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

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

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

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

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

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

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

五、結(jié)語

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