2020 年 3 季度數(shù)據(jù)顯示，我國(guó)移動(dòng)端在線視頻滲透率已經(jīng)穩(wěn)定超越了 75%，短視頻滲透率也已超過 70%，隨時(shí)隨地使用手機(jī)觀看視頻的方式正逐漸取代 PC 端和電視端時(shí)代的觀看習(xí)慣。在視頻消費(fèi)規(guī)模快速增長(zhǎng)的趨勢(shì)下，QQ 瀏覽器作為提供視頻消費(fèi)的平臺(tái)，如何為用戶提供更優(yōu)秀的視頻觀看體驗(yàn)成為了一個(gè)重要的課題。

在 QQ 瀏覽器中，我們?yōu)橛脩籼峁┝素S富的視頻播放功能，以及三種播放模式，分別是：全屏模式、懸浮模式以及小窗模式。接下來和大家分享我們?cè)谏?jí)版播放器的設(shè)計(jì)過程中的四點(diǎn)思考。

設(shè)計(jì)思考 1:

如何讓功能布局貼近用戶使用習(xí)慣，提高功能的易用性？

橫屏播放能夠提升觀看視頻的沉浸感，但橫屏狀態(tài)下對(duì)功能布局的挑戰(zhàn)也變得更高。根據(jù)菲茨定律，手指到目標(biāo)的距離(D)和目標(biāo)的大小(W)，決定了用戶完成操作的耗時(shí)和難度（物理交互成本），大且近的目標(biāo)讓用戶能夠輕松觸達(dá)，反之將給用戶留下「難用」的印象。

觸控?zé)釁^(qū)是一個(gè)人機(jī)工程學(xué)概念，Steven Hoober 在 2013 年發(fā)表的研究中定義了握持時(shí)手指舒適的操控范圍，團(tuán)隊(duì)通過 1300 余次的實(shí)地觀察，統(tǒng)計(jì)了大眾用戶使用移動(dòng)設(shè)備的操作方式，研究發(fā)現(xiàn)約 75%的點(diǎn)擊行為是由拇指驅(qū)動(dòng)的。Hoober 指出為了獲得舒適的人機(jī)體驗(yàn)，應(yīng)將重要的點(diǎn)擊目標(biāo)放置在「觸控?zé)釁^(qū)」中，但此研究?jī)H針對(duì)了手機(jī)豎屏操作，我們無法確定橫屏場(chǎng)景是否同樣適用。因此我們通過用戶調(diào)研去了解用戶在橫屏觀看視頻時(shí)的操作習(xí)慣，定義橫屏觀看視頻時(shí)的觸控?zé)釁^(qū)范圍，目的是保證播放器界面的可用性并讓用戶愿意去主動(dòng)探索播放器的優(yōu)質(zhì)功能。

在調(diào)研結(jié)果中我們發(fā)現(xiàn)：全屏觀看視頻時(shí)，約 70%的用戶習(xí)慣右手拇指操作，且有一半的用戶單手持機(jī)，與 Hoober 的研究結(jié)果基本吻合。這就意味著我們應(yīng)該將用戶高頻使用的功能入口布局在屏幕右側(cè)。雖然左側(cè)同樣存在觸摸熱區(qū)，但因左手持機(jī)的用戶較少，所以使用頻率較低可以考慮布局在屏幕左側(cè)。需要注意的是，人的因素（手的尺寸、行走或靜止?fàn)顟B(tài)、握持姿勢(shì)）和機(jī)器因素（屏幕尺寸、重量、造型）都會(huì)導(dǎo)致熱區(qū)范圍波動(dòng)，所以觸控?zé)釁^(qū)指的是人機(jī)交互中的觸控參考范圍，而不是恒定的某塊區(qū)域。

根據(jù)上述提到的觸控?zé)釁^(qū)，我們進(jìn)一步引入柵格系統(tǒng)來細(xì)化新版播放器界面布局，由面及點(diǎn)地規(guī)劃功能按鈕位置。考慮到拇指能夠觸達(dá)的觸控?zé)釁^(qū)不會(huì)隨著屏幕尺寸縮放，播放器柵格采用“兩端固定，中心拉伸”的適配邏輯，保證功能按鈕在大屏手機(jī)上也能夠輕松觸達(dá)。此外，拇指和屏幕的接觸面積普遍在 8-12mm 之間，我們將單個(gè)柵格的寬度控制在 12mm（以 iPhone X 屏幕尺寸為例），避免按鈕誤觸影響操作體驗(yàn)。

結(jié)合觸摸熱區(qū)和建立柵格體系，我們劃定了三類功能區(qū)域，分別容納高頻、中頻、低頻的操作按鈕。這種布局規(guī)則能夠讓用戶在維持姿勢(shì)舒適的情況下觸發(fā)更多常用功能，同時(shí)也能夠幫助我們驗(yàn)證接下來手勢(shì)設(shè)計(jì)的可用性。

設(shè)計(jì)思考 2：

符合自然隱喻 靈活自由切換

QQ 瀏覽器平臺(tái)內(nèi)共有三種窗口尺寸，分別是小窗模式、懸浮模式以及全屏模式。窗口大小對(duì)應(yīng)著用戶對(duì)內(nèi)容的專注度。我們希望設(shè)計(jì)一組通用的手勢(shì)，讓播放器能夠在三種形態(tài)中自由切換，以滿足不同專注程度的觀看需求。

在研究手勢(shì)操作案例時(shí)，我們發(fā)現(xiàn)其實(shí)很多手勢(shì)功能的使用率并不高，有相當(dāng)多的用戶從來沒有使用過除單指滑動(dòng)和點(diǎn)擊之外手勢(shì)。其原因是手勢(shì)相對(duì)于點(diǎn)擊操作更復(fù)雜且缺少視覺引導(dǎo)、學(xué)習(xí)成本高，很多用戶甚至從未發(fā)現(xiàn)手勢(shì)操作。那么我們應(yīng)該怎么設(shè)計(jì)手勢(shì)操作達(dá)到我們預(yù)期的設(shè)計(jì)目的呢？這種情況下，我們恰恰可以將用戶常用手勢(shì)作為設(shè)計(jì)切入點(diǎn)，建立符合用戶心智模型的手勢(shì)，降低手勢(shì)操作的發(fā)現(xiàn)和學(xué)習(xí)成本。

最終我們選擇了用戶最常用的雙指縮放手勢(shì)，控制窗口逐層放大或縮小。

設(shè)計(jì)思考 3：

優(yōu)化現(xiàn)有手勢(shì) 打造操控爽感

新版播放器增加了長(zhǎng)按多級(jí)倍速功能，用戶長(zhǎng)按屏幕熱區(qū)可以根據(jù)需求自由選擇觀看速度。在這種差異化功能的設(shè)計(jì)時(shí)，我們思考如何提升操控的快感、爽感。

在保證可用性的基礎(chǔ)上，我們嘗試在操作反饋的細(xì)節(jié)里繼續(xù)打磨。切換倍速時(shí)檔位熱區(qū)會(huì)跟隨用戶的手指停留亮起，在此之上又給每次撥動(dòng)添加了輕度的振動(dòng)反饋，既能明確感知當(dāng)前的狀態(tài)、又能加強(qiáng)用戶的操控感。

設(shè)計(jì)思考 4：

洞察用戶需求 強(qiáng)化隱私認(rèn)知

隱私保護(hù)是瀏覽器產(chǎn)品為用戶提供的服務(wù)，我們?cè)谠O(shè)計(jì)播放器的時(shí)候也在思考如何將隱私保護(hù)服務(wù)向更深、更細(xì)的場(chǎng)景拓展。通過對(duì)用戶的行為觀察，我們發(fā)現(xiàn)非獨(dú)居的年輕人在家看視頻突然受到父母、室友打擾的時(shí)候，會(huì)有關(guān)掉視頻保護(hù)隱私的動(dòng)作。從這個(gè)場(chǎng)景，我們延展思考到其他移動(dòng)視頻播放的場(chǎng)景，大多是相對(duì)獨(dú)立，但不是密閉的空間，例如合租房客廳、地鐵、工位等等，用戶都有在突然受到外界打擾，快速關(guān)閉視頻窗口保護(hù)隱私的需求。

為了滿足用戶快速退出播放窗口的需求，同時(shí)減短復(fù)購路徑，在新播放器的全屏場(chǎng)景下設(shè)計(jì)引入了雙指下拉的手勢(shì)，通過雙指下拉既能關(guān)掉當(dāng)前播放窗口，秒回瀏覽器首頁。被關(guān)掉的播放內(nèi)容會(huì)保留在多窗口中，點(diǎn)擊即可恢復(fù)觀看。

總結(jié)

播放器是內(nèi)容的容器，一切功能都是為營(yíng)造沉浸觀看的體驗(yàn)而服務(wù)，交互設(shè)計(jì)當(dāng)以「內(nèi)容優(yōu)先」為原則，保持設(shè)計(jì)上的克制，不斷打磨產(chǎn)品細(xì)節(jié)。

歡迎關(guān)注「騰訊FXD」公眾號(hào)：